chuksung (planner)
취업 준비생을 위한 플래너입니다. 일간 / 주간 / 월간 단위로 목표를 잡고 완료를 체크하며, 히트맵과 통계로 누적 기록을 볼 수 있습니다.
이하 내용은 언제든 수정될 수 있습니다.
기술 스택
주요 기능
- Google / 카카오 OAuth 로그인 (Supabase Auth)
- 일간 (
/daily): 날짜 이동, 태스크 CRUD, 완료 체크(낙관적 업데이트), 카테고리·우선순위 필터, 진행률 표시
- 템플릿 자동 시딩: 활성 템플릿을 "하루 시작 시각"이 지나면 그날 일간 목록에 자동 추가 (단일 RPC로 처리)
- 주간 (
/weekly): ISO 주 기준 목표, 주간 달성률
- 월간 (
/monthly): 월 목표, 일별 완료 건수 미니 캘린더, 월간 달성률
- 기록 (
/history): 통계 카드, 최근 12주 GitHub 스타일 히트맵, 기간·카테고리 필터, 완료 목록. 통계·히트맵 집계는 DB에서 전체 행에 대해 수행하고 목록만 40건씩 받아옵니다 (RPC completed_history)
- 취업공고 (
/jobs): 공고 CRUD, 상태 관리 (저장됨 → 지원 → 면접 → 합격/불합격/오퍼). 목록은 20건씩 그리고 "더 보기"로 늘립니다
- CS 퀴즈 (
/quiz): 카테고리·난이도별 문제, 즐겨찾기(북마크) 기능
- 타이머 (
/timer): 스톱워치 / 카운트다운 타이머, 완료 토스트 알림
- D-day 관리: 사이드바에서 D-day 추가·편집·삭제, D-숫자 실시간 표시
- 테마: 헤더 드롭다운으로 기본 / 에메랄드 / 인디고 / 레드 테마 전환 (localStorage 유지)
- 페이지 전환 로딩: 라우트 이동 시 상단 프로그레스 바 표시
- 라우트 보호: 프록시가 세션을 보고 경로를 정합니다 — 미인증의 대시보드 접근은
/login으로, 루트 /는 인증 여부에 따라 /daily 또는 /login으로 (src/proxy.ts)
- 푸터: GitHub 링크·이메일 클릭 복사
디렉터리 구조 (요약)
src/
├── app/
│ ├── (auth)/login/ # 로그인
│ ├── (dashboard)/ # daily, weekly, monthly, history, jobs, quiz, timer
│ ├── api/ # Route Handlers
│ │ ├── tasks/[id]/
│ │ ├── tasks/history/ # 완료 기록 집계 (RPC completed_history 호출)
│ │ ├── ddays/[id]/
│ │ ├── job-postings/[id]/
│ │ ├── quiz-histories/ # 퀴즈 즐겨찾기 toggle
│ │ ├── task-templates/[id]/ # 일간 태스크 템플릿 CRUD
│ │ ├── goal/ # 최종목표
│ │ └── profile/ # 하루 시작 시각 등 프로필
│ ├── auth/callback/ # OAuth 코드 교환
│ ├── layout.tsx, providers.tsx
│ └── page.tsx # 루트 분기의 폴백 (평소엔 프록시가 먼저 처리)
├── components/
│ ├── layout/ # Sidebar, Header, Footer, NavigationProgress
│ └── ui/ # Button, Modal, Badge, EmptyState, Skeleton, Toast, useToast
├── hooks/
│ ├── auth/useAuth.ts
│ └── theme/useTheme.tsx
├── lib/
│ ├── api/ # route-helpers(withAuth·parseBody·dbError), schemas(zod), rate-limit
│ ├── apply-daily-templates.ts # 템플릿 시딩 (RPC seed_daily_templates 호출)
│ ├── axios.ts # Axios 인스턴스 (baseURL=/api, Auth 인터셉터)
│ ├── query.ts # STABLE_QUERY_OPTIONS / DAILY_QUERY_OPTIONS
│ ├── supabase/ # client, server, update-session
│ ├── task-dates.ts
│ ├── themes.ts # ThemeId, THEMES, THEME_IDS, DEFAULT_THEME_ID
│ └── utils.ts
├── types/
│ ├── index.ts # Task, Profile, Dday, JobPosting 등 공통 타입
│ └── quiz.ts # QuizCategory, QuizQuestion, QuizHistory 등
└── proxy.ts # 세션 갱신 + 인증 리다이렉트
supabase/
├── schema.sql # DB 스키마·RLS·트리거·RPC (소스 오브 트루스)
└── migrations/ # 순번 마이그레이션 (0000~, `pnpm db:push`로 적용)
e2e/ # Playwright 시나리오 + 가이드(README.md)
scripts/
├── perf/ # Lighthouse 측정·진단 (run·diagnose·ledger·volume·auth·pages)
└── dev-login.mjs # 테스트 계정 세션을 브라우저에 주입
docs/
├── perf/
│ ├── README.md # 지표 해설·측정 방법
│ ├── history.md # 로컬 측정 원장 (pnpm perf 가 자동 기록)
│ ├── deploy-latency.md # 배포 URL TTFB 자동 원장
│ ├── archive/ # 현재 비교에서 제외한 legacy·오측정 기록
│ ├── incidents/ # 원장 오염 사건과 재발 방지 결정
│ └── function-region.md # Vercel 함수 리전 결정과 프록시 배치의 사각지대
├── security/ # API 남용 방어 목록·근거(README.md)·검증 절차(verification.md)
├── auth-redirects.md # 리다이렉트 상호작용·프록시의 낙관적 세션 검증
├── hydration.md # SSR 하이드레이션 불일치 사례·해결 패턴·회귀 감시
└── task-race-guards.md # 경합 가드 — 태스크 토글·삭제·편집, 템플릿 변경
일간·주간·월간 페이지는 공통 로직을 usePlannerPage 훅으로 공유하며, 로드 실패 시 _components/QueryErrorRetry로 재시도를, 뮤테이션 실패 시 useToast로 에러를 안내합니다.
같은 대상을 건드리는 경로가 겹칠 때의 규칙은 문서로 남겨 두었습니다 — 태스크 토글·삭제·편집이 서로를 잠그는 기준과 템플릿 변경 시의 캐시 경합은 docs/task-race-guards.md, 로그인 상태에 따라 경로를 옮기는 세 지점이 서로를 먹지 않게 하는 방법은 docs/auth-redirects.md 참조.
설치 및 실행
패키지 매니저는 pnpm을 사용합니다 (npm 사용 금지).
pnpm install
환경 변수
NEXT_PUBLIC_SUPABASE_URL=https://<project-ref>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<supabase_anon_key>
# E2E 용 테스트 계정 (없으면 인증 E2E 는 skip 됩니다)
E2E_TEST_USER_EMAIL=<test_user_email>
E2E_TEST_USER_PASSWORD=<test_user_password>
# 성능 측정 전용 계정. E2E 가 건드리지 않아 데이터 볼륨이 고정됩니다.
# 없으면 E2E_TEST_USER_* 로 폴백하지만 원장의 세로 비교가 성립하지 않습니다
# (docs/perf/accounts.md). 계정 생성: node scripts/e2e/provision-account.mjs
PERF_TEST_USER_EMAIL=<perf_user_email>
PERF_TEST_USER_PASSWORD=<perf_user_password>
# 계정 프로비저닝에만 쓰는 서비스 롤 키. 커밋·CI 반입 금지, .env.local 에만 둡니다.
SUPABASE_SERVICE_ROLE_KEY=<supabase_service_role_key>
개발 서버
pnpm dev
브라우저에서 http://localhost:3000 — 로그인된 사용자는 /daily로, 비로그인 시 /login으로 흐름이 이어집니다.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
