영역 5 — 전체 아키텍처 / 성능 평가

미래 수정·보완·성능 최적화에 쓸 수 있도록 코드 전반 구조를 재정리. 판단·근거 함께 제시.

진단 — 파일 크기 (Top 6)
파일줄판단
diary/TodayTab.tsx621너무 큼 → 분리
diary/MonthTab.tsx478너무 큼 → 분리
haru/page.tsx467너무 큼 → 분리 (영역 4)
diary/WeekTab.tsx441분리 권장
friends/page.tsx349deprecate 예정 (Stage 9)
settings/page.tsx213양호
근거: 200~250줄 이상이면 AI도 사람도 reasoning 비용이 급격히 증가. Anthropic 권장 (composition-patterns 스킬) — "한 단위는 한 책임만, 한 컨텍스트에 담아낼 수 있는 크기".
진단 — 5대 구조적 이슈
우선순위이슈근거 / 권장
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 toolchaintsconfig target ES2017Node 20 + 모던 브라우저면 ES2022 가능. satisfies, top-level await 등 활용. 권장: 큰 부담 없음. 다른 작업과 묶어서.
권장 디렉토리 구조 (개선 후)
src/ ├── app/ │ ├── page.tsx (홈 — 7블록 순서 적용) │ ├── diary/page.tsx (서브탭 라우터, ~30줄) │ │ ├── TodayTab.tsx (~120줄, 분리 후) │ │ ├── WeekTab.tsx (~120줄) │ │ └── MonthTab.tsx (~120줄) │ ├── haru/page.tsx (~80줄, 분리 후) │ ├── settings/page.tsx (213줄, 유지) │ └── api/ │ ├── auth/ calendar/ chat/ │ └── (debug/ → 환경 분기 또는 제거) ├── components/ │ ├── ui/ (공통 프리미티브) │ │ ├── Toast.tsx ★ NEW (자동 저장 피드백) │ │ └── ReviewModal.tsx ★ NEW (Stage 9 회고 작성) │ ├── briefing/ (홈 전용, 정리) │ │ ├── (─ CharacterTabs, MaeumView, MomiView 제거) │ │ └── ... │ ├── diary/ ★ NEW │ │ ├── DateSelector.tsx (Today selector — 정중앙 정렬 + 일요일 빨강) │ │ ├── HealthInput.tsx │ │ ├── MemoSection.tsx │ │ ├── WeekChart.tsx │ │ ├── CalendarGrid.tsx (Month — 회고 색상 시스템) │ │ └── TimeNav.tsx (‹ 라벨 › 공통) │ └── chat/ ★ NEW │ ├── ChatMessage.tsx │ └── ChatInput.tsx ├── hooks/ ★ NEW │ ├── useChatMessages.ts │ ├── useAutoSave.ts │ ├── useHealthLog.ts │ ├── useReviews.ts │ └── useToast.ts ├── lib/ │ ├── ai/ data/ theme/ types/ (기존) │ ├── chat/ ★ NEW │ │ └── keywords.ts │ ├── markdown.ts ★ NEW │ └── supabase/ │ ├── api.ts (기존) │ └── queries.ts ★ NEW (React Query wrappers) └── styles/ ★ NEW (Tailwind v4 토큰 확장)

영역 5 결정 (구현 단계 작업 항목)

P0

다이어리 3탭 분리 (P0)

TodayTab 621 / MonthTab 478 / WeekTab 441 → 각 ~120줄로. components/diary/ 폴더 신설.

P0

React Query 도입 (P0)

탭/페이지 전환 시 같은 데이터 재요청 제거. 낙관적 업데이트로 입력 UX 개선. lib/supabase/queries.ts 에 wrapper.

P1

Tailwind 점진 마이그레이션 (P1)

새 코드(분리되는 컴포넌트)는 Tailwind 우선. 기존 코드는 영역별로 단계 이동. 무리한 일괄 변환 안 함.

P1

Dead code 정리 (P1)

friends + CharacterTabs + MaeumView + MomiView ~900줄 제거 (영역 4와 함께).

P1

debug API routes 환경 분기 (P1)

프로덕션 빌드에서 401 또는 제외. 정보 노출 위험 제거.

P2

tsconfig target ES2022 (P2)

모던 문법 활용. 보류 가능.

전부 채택 권장. 영역 5 결정 후 통합 spec 문서를 작성하고 writing-plans로 인계합니다.