checkmate-frontend

• 🌟 Starmix Organization GitHub : https://github.com/Starmix-ajou
• ♟ checkmate URL : https://checkmate.it.kr
• 🖥 Project Manager 전용 뷰 : https://manager.checkmate.it.kr
• 📘 Storybook UI 문서 : https://storybook.checkmate.it.kr

프로젝트 소개

checkmate는 소규모 주니어 개발팀을 위한 프로젝트 관리 및 협업툴입니다.

AI를 활용한 프로젝트 생성과 Sprint 구성, 회의록 자동 요약 기능을 제공하여 팀의 초기 기획부터 실행까지의 과정을 효율적으로 지원합니다. 회의 내용을 실시간으로 정리할 수 있는 공동 편집 기능을 통해 주요 논의 사항을 요약하고, 이를 실행 가능한 액션 아이템(Task)으로 전환할 수 있습니다. Task는 Epic 단위로 구조화할 수 있으며, Gantt Chart, Kanban Board, Calendar를 통해 관리할 수 있습니다. 또한 상세 Task 페이지의 댓글 기능을 통해 팀 내부 이해관계자 간의 원활한 소통이 가능하도록 하여, 개발 과정 전반에서 협업의 생산성을 높입니다.

팀원 구성

김평주	한도연

1. 개발 환경

Frontend

형상 관리 및 구성

상태 관리

정적 분석 및 포맷팅

문서화 및 스타일 가이드

디자인 협업

배포 플랫폼

협업 툴

이슈 및 버전 관리

테스트

2. 채택한 개발 기술과 브랜치 전략

React 19 & Next 15

최신 React 기능과 App Router 기반의 파일 시스템 라우팅을 통해 구조적이고 효율적인 페이지 설계가 가능하며, Next.js의 서버 컴포넌트와 서버 액션을 적극 활용해 클라이언트-서버 간 경계를 명확히 유지.

Turborepo + pnpm

모노레포 환경에서 각 앱과 패키지의 의존성 캐싱, 병렬 빌드, 파이프라인 최적화를 지원해 CI/CD 속도를 대폭 개선하고, 작업 분리를 명확하게 유지할 수 있도록 지원.

Liveblocks

회의록 및 Sprint 계획 도구에서 다중 사용자 동시 편집 기능을 구현하기 위해 도입, Google Docs와 유사한 경험을 제공하면서도 구현 난이도는 낮춤.

Zustand

가볍고 직관적인 상태 관리 라이브러리로, Redux 대비 코드량을 최소화하면서도 React 컴포넌트와의 높은 호환성을 제공하여 빠른 개발 주기에 적합.

shadcn/ui + TailwindCSS

일관된 디자인 시스템을 빠르게 구현할 수 있도록 도와주는 headless 컴포넌트 기반 UI 라이브러리, TailwindCSS와 결합해 생산성과 커스터마이징 유연성 확보.

Storybook

packages/ui에 정의된 공통 컴포넌트를 시각화, 테스트, 문서화함으로써 개발자 간 또는 디자이너-개발자 간 협업 품질을 높임.

브랜치 전략

• 브랜치 명: Jira 태스크 ID 기반
  • ex) CM-123
• Rebase Merge 방식으로 main 브랜치에 병합
• 최소 1명 이상의 approve 필요

3. Challenge

4. 프로젝트 구조

.
├── .github              # GitHub 설정 및 워크플로우
├── apps
│   ├── manager          # Product Manager 전용 뷰
│   └── web              # 메인 사용자 프론트엔드 앱
├── packages
│   ├── api              # 공통 API 클라이언트 패키지
│   ├── ui               # 디자인 시스템 및 컴포넌트 (Storybook으로 문서화)
│   └── types            # 공유 타입 정의
├── pnpm-workspace.yaml  # 워크스페이스 설정
├── turbo.json           # 터보레포 구성
└── package.json

5. 구조적 장점

모노레포 기반 앱 분리

apps/web과 apps/manager로 사용자와 관리자 뷰를 분리하여 역할별 개발이 명확하고 독립적인 배포가 가능함.

패키지 단위의 코드 재사용

packages/ui, packages/types, packages/api 등 공통 모듈을 분리하여 중복 제거와 일관된 인터페이스 유지.

Turborepo로 빠른 빌드와 캐싱 최적화

의존성 그래프 기반 병렬 빌드와 캐시를 통해 CI/CD 시간과 로컬 개발 빌드 시간을 크게 단축.

Storybook을 통한 UI 문서화 및 테스트

공통 컴포넌트를 시각화하고, 디자인 시스템을 공유하며, UI 테스트를 용이하게 함.

공통 타입과 API 클라이언트로 일관된 통신

packages/types와 packages/api를 통해 프론트 전체에서 타입 안정성과 요청 방식 통일성 확보.

역할 중심 브랜치 전략과 협업 흐름

Jira 이슈 키 기반 브랜치 명명과 디렉토리 기반 작업 분할로 충돌 없는 협업 가능.

배포 파이프라인 시간 단축

Turborepo와 Vercel을 통한 캐시 및 병렬 빌드로 배포 속도 최적화.

6. 테스트

Jest 기반 유닛 테스트

공통 유틸 함수와 핵심 로직에 대해 Jest를 사용한 유닛 테스트를 수행하여 기능 안정성과 회귀 방지를 확보함.

Storybook을 통한 시각적 UI 테스트

공통 UI 컴포넌트를 Storybook으로 시각화하여 UI 상태를 확인하고, 사용자 인터페이스의 일관성과 안정성을 검증함.

7. 개발 기간 및 작업 관리

개발 기간

• 2025-03-06 ~ (진행 중)

작업 관리

• 협업 툴: GitHub + Slack + Jira
• 회의: 주 2회 팀 전체 회의 진행 + Google Docs로 회의록 공유
• 요청/QA 문서화: Notion을 통해 요청 사항 정리 및 QA 문서로 재활용