이 수정들로 뭐가 달라지나? — Before / After

주인님이 직접 체감하는 변화 / 개발(저)이 작업할 때 변화 / 시스템 성능 변화, 3축으로 정리

한눈에 — 변화의 종류
👤 주인님 체감
화면 전환 속도, 자동 저장 알림, 일관된 디자인. 직접 보이는 변화.
🧑‍💻 개발 속도
앞으로 수정·기능 추가가 얼마나 빠르고 안전한가. 보이지 않지만 매번 작동.
⚙ 시스템 성능
Supabase 호출 수, 빌드 크기, 보안. 비용·속도에 영향.
항목별 Before → After
변경 Before (지금) After (적용 후) 축
자동 저장 토스트 하루에게 "어제 7시간 잤어"라고 하면 → 화면에 아무 반응 없음. 저장됐는지 확신 안 됨. 화면 상단에 "수면 7시간 저장됨" 알림이 1.5초 떴다 사라짐. 안심. 👤
설정 문구 갱신 "친구들(모미/마음) AI 대화에 사용됩니다" — 실제 친구 페이지는 없어짐 "하루(어시스턴트) 대화에 사용됩니다" — 현재 구조와 일치 👤
React Query 도입 다이어리 Today→Week→Month 탭 전환할 때마다 같은 데이터(수면·운동·감정)를 Supabase에서 새로 받아옴. 매번 1~2초 로딩. 이미 본 데이터는 즉시 표시. 새 데이터는 백그라운드로 조용히 갱신. 탭 전환이 거의 즉시. Supabase 호출 횟수 ~50% 감소. 👤⚙
다이어리 3탭 분리 TodayTab 621줄, MonthTab 478줄, WeekTab 441줄. "Today 헤더만 바꿔주세요" 같은 작은 요청에도 긴 파일을 다 읽어야 정확하게 수정 가능. 각 ~120줄로 7개 작은 컴포넌트. "DateSelector 색만 바꿔주세요"가 해당 파일 50줄만 보면 끝. 버그 위험·작업 시간 ↓. 🧑‍💻
/haru 6개 분리 467줄 한 파일에 메시지/키워드/저장/마크다운/렌더/입력 모두 섞임. "감정 키워드 추가"하려면 전체 파일에서 위치 찾아야. lib/chat/keywords.ts만 열어서 한 줄 추가. 다른 코드 영향 0. 🧑‍💻
Dead code 정리 friends + Character/Maeum/Momi View 합 ~900줄이 빌드에 포함. 누가 봐도 헷갈림 ("이 페이지 뭐예요?"). 빌드 가벼워짐. 코드베이스 명확. 미래의 다른 작업자(또는 미래의 저)가 헷갈리지 않음. 🧑‍💻⚙
Tailwind 마이그레이션 모든 색·간격이 style={{...}}로 인라인. 폰트 크기 0.7rem을 0.75rem로 일괄 변경하려면 50곳 찾아 바꿔야. text-sm처럼 클래스 이름만 바꾸면 됨. 디자인 토큰(시간대별 색 등) 한 곳에서 관리. ※ 점진 마이그레이션이라 화면은 동일. 🧑‍💻
debug API 환경 분기 /api/debug/headers, /oauth, /route 가 프로덕션 URL에서도 접근 가능. 누군가 URL 알면 헤더·세션 정보 조회 가능. 프로덕션에서 401 또는 라우트 자체가 빌드에 미포함. 정보 노출 위험 제거. ⚙
우선순위별 요약
반드시 (P0) — 안 하면 앞으로 작업이 점점 느려짐
  • 다이어리 3탭 분리 (개발 속도)
  • React Query (사용자 체감 큼)
하면 좋음 (P1) — 미루면 짐만 늘어남
  • /haru 분리 + 토스트 (체감 + 개발 속도)
  • Dead code 정리 (~900줄 사라짐)
  • debug routes 보안
  • 설정 문구 갱신
  • Tailwind 점진 마이그레이션
미루어도 OK (P2)
  • tsconfig ES2022 (얻는 게 작음)

이대로 진행할까요?

A

P0 + P1 모두 채택 (추천)

위 표의 색칠된 항목 전부 spec에 포함. 통합 spec 작성 후 writing-plans로 인계.

B

P0만 — 가장 시급한 둘 (다이어리 분리 + React Query)

나머지(/haru 분리, 토스트, dead code, 등)는 다음 라운드로 미룸.

C

골라서 — 터미널에 알려주실래요?

"1,3,5만" 같이 번호로 선택. 그대로 spec 반영.