여러 GitHub 레포지토리(최대 4개)를 동시에 운영하는 환경에서, develop 브랜치 기준의 개발 진행 상황과 PR/feature 흐름을 한눈에 파악할 수 있는 운영 대시보드입니다.
- 레포지토리 관리: 최대 4개의 GitHub 레포지토리 등록 및 관리
- 커밋 트렌드: develop 브랜치 기준 일별 커밋 추이 시각화
- PR 현황: PR 상태별 카운트 및 라벨 기반 Feature 분석
- 요청 인박스: 리뷰 요청, 멘션, 할당된 항목 통합 관리
- 반응형 디자인: 모바일, 태블릿, 데스크톱 지원
- 다크 모드: 시스템 테마 연동 및 수동 전환
- Frontend: Next.js 16, React 19, TypeScript
- Styling: Tailwind CSS 4, shadcn/ui
- State: TanStack Query v5
- Charts: Recharts
- Auth: NextAuth.js v5 (GitHub OAuth)
- Database: Supabase (PostgreSQL) + Prisma
- Cache: Upstash Redis
pnpm install프로젝트 루트에 .env.local 파일을 생성하고 다음 환경 변수를 설정하세요:
# Database (Supabase)
DATABASE_URL="postgresql://postgres:[PASSWORD]@db.[PROJECT].supabase.co:5432/postgres?pgbouncer=true"
DIRECT_URL="postgresql://postgres:[PASSWORD]@db.[PROJECT].supabase.co:5432/postgres"
# Upstash Redis
UPSTASH_REDIS_REST_URL="https://[REDIS_URL].upstash.io"
UPSTASH_REDIS_REST_TOKEN="[TOKEN]"
# GitHub OAuth
GITHUB_CLIENT_ID="[CLIENT_ID]"
GITHUB_CLIENT_SECRET="[CLIENT_SECRET]"
# NextAuth.js (필수!)
# Secret 생성: openssl rand -base64 32
AUTH_SECRET="[생성된 시크릿]"
NEXTAUTH_URL="http://localhost:3000"npx prisma db pushpnpm dev브라우저에서 http://localhost:3000을 열어 확인하세요.
├── app/
│ ├── (auth)/login/ # 로그인 페이지
│ ├── (dashboard)/ # 대시보드 레이아웃
│ │ ├── dashboard/ # Overview
│ │ ├── dashboard/repos/ # 레포지토리 관리
│ │ ├── dashboard/features/ # Feature 분석
│ │ └── dashboard/inbox/ # 요청 인박스
│ └── api/ # API 라우트
├── components/
│ ├── ui/ # shadcn/ui 컴포넌트
│ ├── charts/ # 차트 컴포넌트
│ ├── dashboard/ # 대시보드 컴포넌트
│ ├── layout/ # 레이아웃 컴포넌트
│ ├── repository/ # 레포지토리 컴포넌트
│ └── inbox/ # 인박스 컴포넌트
├── hooks/ # 커스텀 훅
├── lib/ # 유틸리티 및 서비스
├── types/ # TypeScript 타입 정의
└── prisma/ # Prisma 스키마
| Method | Endpoint | 설명 |
|---|---|---|
| GET | /api/repos |
등록된 레포 목록 |
| POST | /api/repos |
레포 등록 |
| PATCH | /api/repos/:id |
레포 설정 수정 |
| DELETE | /api/repos/:id |
레포 삭제 |
| GET | /api/github/repos |
GitHub 레포 검색 |
| GET | /api/commits |
커밋 요약 |
| GET | /api/prs |
PR 요약/Feature 분석 |
| GET | /api/requests |
요청 인박스 |
MIT