← LIFEOS DESIGN HISTORY

061_LifeOS/app — UX 재개선 통합 Spec (Stage 9 / v0.9)

본 문서는 brainstorming 단계의 최종 결정사항을 한 곳에 정리한 spec입니다. writing-plans는 본 문서를 입력으로 받아 구현 단계별 plan을 만듭니다.

1. 범위

다음 5개 영역의 사용성 + 코드 구조를 재정비합니다:

2. 영역별 결정사항

2.1. IA (영역 1)

항목결정
/friends 라우트제거 (deprecate) — /haru와 거의 동일 코드, 진입로 없음
BottomNav 탭 순서홈 / 하루 / 기록 / 설정 → 홈 / 기록 / 하루 / 설정
4탭 큰 구조유지
페이지 입구 일관성별도 변경 불필요

영향 파일: src/app/friends/page.tsx (삭제), src/components/BottomNav.tsx (배열 순서)

2.2. 다이어리 (영역 2)

시간 네비 — 공통 패턴

Today 탭

Week 탭

Month 탭

회고 단위대기완료표시
일별 (데일리 리뷰)(표시 없음)🟢 초록 도트 #16a34a평일 셀 우하단
주별 (주간회고)🔴 빨간 도트 #DC2626🔵 파란 도트 #2563eb일요일 셀 우하단
월별 (월간회고)핑크 배경 #fef2f2 + 月셀 전체 초록 채움 #16a34a월말 셀

월간회고 trigger

회고 작성 UI

영향 파일: src/app/diary/TodayTab.tsx, WeekTab.tsx, MonthTab.tsx — 모두 분리 대상이므로 영역 5 분리와 함께 신규 컴포넌트로 이동

2.3. 홈 (영역 3)

최종 7블록 순서 (8블록 → 7블록, WeatherHero+Greeting 압축):

#블록그룹
1WeatherHero + Greeting (압축)시각·인사
2DailyInsight인사이트
3TodayBlock액션
4TodoList (← 이전 5번)액션
5RoutineList (← 이전 4번)액션
6DynamicRecommend제안
7CollapsibleUpcoming (접힘)미래

영향 파일: src/app/page.tsx (render 순서), src/components/briefing/WeatherHero.tsx + Greeting.tsx (압축 통합 검토)

2.4. 하루 + 설정 (영역 4)

/haru/page.tsx (467줄) → 6개 책임 분리

책임분리 후 위치
메시지 fetch/save 상태hooks/useChatMessages.ts
키워드 감지 (운동·수면·커피·감정)lib/chat/keywords.ts
자동 저장 로직 (autoSaveFromChat)hooks/useAutoSave.ts
마크다운 → HTML 변환lib/markdown.ts
메시지 한 개 렌더components/chat/ChatMessage.tsx
입력 영역components/chat/ChatInput.tsx

분리 후 haru/page.tsx는 약 80줄.

자동 저장 토스트 신설 (components/ui/Toast.tsx)

/settings/page.tsx (213줄, 양호)

2.5. 전체 아키텍처 / 성능 (영역 5)

P0 — 다이어리 3탭 분리

현재After
TodayTab.tsx 621줄app/diary/TodayTab.tsx ~120줄 (탭 컨테이너)
MonthTab.tsx 478줄app/diary/MonthTab.tsx ~120줄
WeekTab.tsx 441줄app/diary/WeekTab.tsx ~120줄

분리되어 src/components/diary/ 신설 폴더에 들어가는 컴포넌트:

P0 — React Query 도입

P1 — Tailwind 점진 마이그레이션

P1 — Dead code 정리

다음 파일 모두 삭제 (briefing 외 import 0회 확인됨):

총 ~900줄 제거.

P1 — debug API routes 환경 분기

처리 방식:

→ 구현 단계에서 a/b 결정. 기본 권장: a (개발 편의 유지).

P2 — 보류

3. 권장 디렉토리 구조 (개선 후)


src/
├── app/
│   ├── layout.tsx                    + QueryClientProvider 래핑
│   ├── page.tsx                      (홈 — 7블록 순서 반영, WeatherHero+Greeting 압축)
│   ├── diary/
│   │   ├── page.tsx                  (탭 라우터, ~30줄)
│   │   ├── TodayTab.tsx              (~120줄, 분리)
│   │   ├── WeekTab.tsx               (~120줄, 분리)
│   │   └── MonthTab.tsx              (~120줄, 분리)
│   ├── haru/page.tsx                 (~80줄, 분리)
│   ├── settings/page.tsx             (213줄, 문구만 갱신)
│   ├── (friends/ → 제거)
│   └── api/
│       ├── auth/  calendar/  chat/
│       └── debug/                    (환경 분기 추가)
├── components/
│   ├── ui/                           ★ NEW
│   │   ├── Toast.tsx
│   │   └── ReviewModal.tsx
│   ├── briefing/                     (CharacterTabs/Maeum/Momi 제거)
│   │   └── (정리된 홈 전용 블록들)
│   ├── diary/                        ★ NEW
│   │   ├── DateSelector.tsx
│   │   ├── HealthInput.tsx
│   │   ├── MemoSection.tsx
│   │   ├── WeekChart.tsx
│   │   ├── CalendarGrid.tsx
│   │   └── TimeNav.tsx
│   ├── chat/                         ★ NEW
│   │   ├── ChatMessage.tsx
│   │   └── ChatInput.tsx
│   ├── BottomNav.tsx                 (탭 순서 변경)
│   └── SessionWrapper.tsx            (QueryClientProvider 위치 검토)
├── 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 토큰 확장)

4. 회고 시각화 컬러 토큰 (확정)

토큰의미HEX
--review-pending주간회고 대기#DC2626
--review-week-done주간회고 완료#2563eb
--review-day-done일별 회고 완료 (도트)#16a34a
--review-month-done월간회고 완료 (셀 채움)#16a34a

--review-day-done과 --review-month-done은 같은 초록. 의미 단위는 다르나 시각적 통일성 우선.

src/lib/theme/tokens.ts 또는 src/styles/의 CSS 변수로 노출 권장.

5. 데이터 모델 영향

기존 Supabase 스키마(getWeeklyReview, getMonthlyReview, upsertHealthLog, upsertJournalEntry)를 그대로 활용. 새 테이블/컬럼 추가 없음.

단, 회고 완료 여부 판단을 위해 다음 조건 사용:

hooks/useReviews.ts 에서 boolean 노출. 구현 시 정확한 "완료" 기준은 writing-plans에서 확정.

6. 비기능 요구

항목요구
사용성Today selector 가로 스크롤이 60fps 유지, 정중앙 정렬 부드러움
성능페이지 전환 시 캐시된 데이터 즉시 표시 (React Query), 초기 로드 1.5초 이하
접근성회고 도트는 색상 외에도 형태(도트/체크) 구분, 색맹 사용자도 대기/완료 구분 가능. 추후 hover/focus 시 텍스트 라벨 노출
보안debug API routes 프로덕션 차단, API key는 password 마스킹 유지
모바일회고 작성 Bottom sheet는 키보드 노출 시 자동 스크롤, 50% 화면 점유 기본
호환성기존 사용자 데이터 무손상 (스키마 변경 없음)

7. 구현 우선순위

writing-plans 단계에서 다음 순서로 plan 분할 권장:

1차 — 토대 (1~2일)

2차 — 다이어리 분리 (2~3일)

3차 — 하루 + 홈 (1~2일)

4차 — 정리 (1일)

각 단계는 독립적으로 PR 가능. 회귀 테스트는 매 단계 후 수동 + 자동(추가될 경우).

8. 미결 사항 (writing-plans 단계에서 확정)

9. 외부 문서 동기화

본 spec이 변경되면 위 세 문서도 동기화.

10. 핸드오프 to writing-plans

본 spec을 입력으로:

writing-plans 스킬 호출 전 사용자 spec 검토 필요.