PROJECT INFO

프로젝트의 일정을 관리하고 Github의 PR Merge 이벤트에 따라 일정 현황을 자동으로 업데이트 해주는 서비스.

Github OAuth 로그인을 통해 사용자의 레포지토리에 접근할 수 있도록 함.

Webhook 등록 후 Merge 이벤트 발생 시 Branch와 연결된 작업이 자동으로 완료 처리됨.

Next.js의 API Route와 Typeorm, MySQL을 적극 사용하여 백엔드 구성.

Next-Auth 라이브러리를 통해 빠르게 OAuth 기능 구축.

CONTRIBUTIONS

Next-Auth 라이브러리를 사용하여 Github OAuth를 구현하였습니다.

Github OAuth에서 로그인 시 반환해주는 access_token을 Next-Auth 세션에 담아 사용자의 cookie에 저장되도록 하였습니다.

이후 사용자가 작업할 Organization, Repository를 불러오는 기능과, 작업과 연결할 Branch를 생성할 때에 발급한 쿠키를 사용하도록 구성하였습니다.

작업 등록 시 새로운 Branch를 바로 생성하여 할당할 수 있도록 Branch 생성 기능을 구현하였습니다.

사용성 개선을 위해 Branch 생성 기능을 추가했습니다. 초기에는 해당 기능이 없었으나, 동아리 부원의 개선할 부분으로서 피드백을 받아 기능을 확장했습니다.

프로세스: 작업 및 코드 리뷰 → PR Merge → Webhook 수신 → 이벤트 및 작업 감지 → 작업 완료 처리, 차트 반영

Github Webhook을 통해 발생한 이벤트의 종류와 repo, owner, branch와 같은 데이터를 받아 서비스 내의 데이터에 반영하도록 구현하였습니다.

웹훅 엔드포인트로 요청이 들어오면 Body에서 base, head, merged와 action을 확인하고 zod를 통해 검증합니다. action이 closed이고 merged가 true이면 해당하는 작업을 완료 처리합니다.

등록 한 작업을 간트 차트로 변환하는 기능을 구현하였습니다.

완료되지 않은 작업은 차트 막대가 채색 되지 않고, 완료한 기능은 채색 되도록 하였습니다. 이를 통해 한눈에 어떤 작업이 완료되었는지 알 수 있습니다.

TROUBLE SHOOTINGS

분기 처리를 통해 Git-Flow만이 아닌 Trunk-Base 전략에도 사용할 수 있도록 개선 하였습니다.

Git-Task를 적용한 프로젝트에서 Trunk-Base를 Github 전략으로 채택한 후 작업을 등록하였지만, head가 develop인 PR만 감지하던 Git-Task가 이벤트를 정상적으로 감지하지 못하였습니다.

Git-task내에 등록된 프로젝트의 깃허브 전략을 Git-Flow, Trunk-Base 중 선택할 수 있게 하여 올바르게 병합 이벤트를 감지할 수 있게 되었습니다.

페이지 로딩 UI를 추가하여 SSR이 지연 될 경우 UX를 개선했습니다.

페이지 전환 시 일관된 로딩 경험을 제공하기 위해 커스텀 라우터 훅과 링크 컴포넌트를 구현했습니다. 이를 통해 zustand로 로딩 상태를 전역 관리하고, 페이지 이동 시 로딩 오버레이를 제어합니다.

싱글톤 패턴을 이용해 DB 연결 객체가 여러번 생성되는 문제를 해결했습니다.

모듈 스코프를 사용하여 리액트 생태계의 영향을 받지 않고 항상 하나의 객체만 생성합니다. Typeorm의 AppDataSource를 래핑한 함수 내부에 모듈 스코프 변수에 저장된 객체가 있다면 생성하지 않고 저장된 객체를 사용하도록 구현하였습니다.