다이어리 3탭 분리 (P0)
TodayTab 621 / MonthTab 478 / WeekTab 441 → 각 ~120줄로. components/diary/ 폴더 신설.
미래 수정·보완·성능 최적화에 쓸 수 있도록 코드 전반 구조를 재정리. 판단·근거 함께 제시.
| 파일 | 줄 | 판단 |
|---|---|---|
diary/TodayTab.tsx | 621 | 너무 큼 → 분리 |
diary/MonthTab.tsx | 478 | 너무 큼 → 분리 |
haru/page.tsx | 467 | 너무 큼 → 분리 (영역 4) |
diary/WeekTab.tsx | 441 | 분리 권장 |
friends/page.tsx | 349 | deprecate 예정 (Stage 9) |
settings/page.tsx | 213 | 양호 |
| 우선순위 | 이슈 | 근거 / 권장 |
|---|---|---|
| P0 컴포넌트 | 큰 파일 4개 (다이어리 3탭 + haru) | 현재 1.4k 줄이 4 파일에 집중. 분리 시 ~20 파일에 분산. 권장: 각 탭을 5~7개 컴포넌트로 분리 (헤더/입력/리스트/차트/저장 등). src/components/diary/, src/components/chat/ 신규 폴더. |
| P0 캐시 | 데이터 캐싱 레이어 없음 | Today/Week/Month 모두 getHealthLogs, getJournalEntries 등을 직접 호출. 탭 전환마다 같은 데이터 재요청. 권장: @tanstack/react-query 도입 (~40KB gz). 캐시 + 백그라운드 refetch + 낙관적 업데이트. lib/supabase/queries.ts 에 훅 wrapper. |
| P1 스타일 | 100% inline style={{}} | Tailwind v4 + PostCSS 설치되어 있으나 클래스 사용 거의 없음. 디자인 토큰(theme/timeColor.ts) 일관성 깨지기 쉬움. 권장: 새 코드는 Tailwind 우선. 색상·간격은 theme/tokens.ts 의 CSS 변수로 통일. 기존 코드는 영역별로 점진 마이그레이션. |
| P1 정리 | Dead code ~900줄 | friends/page.tsx(349) + briefing/CharacterTabs(미확인) + MaeumView + MomiView. briefing 외 import 0회. 권장: 영역 4와 함께 한 번에 제거. |
| P1 빌드 | debug API routes 3개 노출 | /api/debug/headers, /api/debug/oauth, /api/debug/route — 프로덕션에 그대로 배포 시 정보 노출. 권장: process.env.NODE_ENV === "production" 분기로 401 또는 제거. |
| P2 toolchain | tsconfig target ES2017 | Node 20 + 모던 브라우저면 ES2022 가능. satisfies, top-level await 등 활용. 권장: 큰 부담 없음. 다른 작업과 묶어서. |
전부 채택 권장. 영역 5 결정 후 통합 spec 문서를 작성하고 writing-plans로 인계합니다.