feat(app): atmosphere entry shell 1차 구현

This commit is contained in:
2026-03-16 12:12:03 +09:00
parent c6e342e93d
commit 721212ec1f
7 changed files with 759 additions and 166 deletions

View File

@@ -4,13 +4,18 @@ Last Updated: 2026-03-16
이 문서는 `/app`**`goal + duration + atmosphere` 중심의 premium focus entry surface**로 재설계하기 위한 기준 문서다.
현재 상태:
- `Slice 1` no-session shell 구현 완료
- `Custom Duration Contract``Weekly Review Dock Reposition`은 다음 slice로 남아 있음
관련 문서:
- `../../product_principles.md`
- `../../current_context.md`
- `../stats/14_weekly_review_reframe_spec.md`
- `./15_app_stats_entry_flow_spec.md`
- `./18_paused_session_reentry_spec.md`
- `../../../../../product_principles.md`
- `../../../../../current_context.md`
- `../../stats/current/14_weekly_review_reframe_spec.md`
- `../../../flows/current/15_app_stats_entry_flow_spec.md`
- `../../../flows/current/18_paused_session_reentry_spec.md`
---
@@ -175,6 +180,9 @@ Last Updated: 2026-03-16
- 최대 180분
- helper:
- `이 목표를 끝내는 데 걸릴 것 같은 시간을 적어요.`
- quick duration suggestion은 허용한다.
- 예: `25`, `45`, `70`, `90`
- 단, planner처럼 보이지 않도록 아주 조용한 assistive chip이어야 한다
### C. Atmosphere Grid
@@ -189,6 +197,8 @@ Last Updated: 2026-03-16
- 카드명
- sound label
- 1줄 description
- selected state
- hover / focus state
예시:
@@ -209,7 +219,14 @@ Last Updated: 2026-03-16
- 이유:
- goal + duration + atmosphere가 모두 한 번에 묶여 entry action으로 읽힌다
### E. Weekly Review Entry
### E. Selection Rules
- no-session 상태에서는 atmosphere 1개가 기본 선택된 상태로 시작한다
- review handoff로 들어온 경우에는 handoff preset과 가장 가까운 atmosphere를 preselect한다
- 사용자가 duration을 직접 수정하기 전까지는 선택된 atmosphere의 기본 duration suggestion을 보여줄 수 있다
- 사용자가 duration을 직접 수정한 뒤에는 atmosphere를 바꿔도 duration 값을 덮어쓰지 않는다
### F. Weekly Review Entry
이건 main stage 바깥의 quiet secondary placement로 둔다.
@@ -319,6 +336,65 @@ Last Updated: 2026-03-16
---
## 9. Visual Direction
### Primary Stage
- no-session `/app`의 주인공은 하나의 넓은 start stage다
- 이 stage 안에서:
- goal
- duration
- primary CTA
가 먼저 읽혀야 한다
- stage는 glassmorphism을 쓰더라도 dashboard 카드처럼 보이면 안 된다
- typography와 spacing으로 premium하게 보여야 한다
### Atmosphere Grid
- 아래 grid는 decoration이 아니라 실제 선택 surface다
- card는 서로 다른 장면으로 충분히 구분돼야 한다
- selected state는:
- 두꺼운 outline보다 얇은 light ring
- 미세한 scale
- title/sound contrast 상승
정도로 표현하는 편이 맞다
### Review Dock
- review는 top-right quiet dock 또는 stage 바깥의 조용한 secondary panel로 둔다
- 절대 main CTA와 같은 무게가 되면 안 된다
- “이번 주 review”는 읽히되, goal 입력을 방해하면 실패다
---
## 10. Slice 1 구현 원칙
이번 구현 slice는 `/app`의 **no-session shell**을 먼저 바꾸는 단계다.
포함:
- goal input
- duration input
- 12개 atmosphere grid
- selected atmosphere 기반 background 반영
- quiet review dock의 기본 위치
제외:
- paused resume gate 재설계
- `/stats` IA 변경
- server custom duration contract
### Slice 1 임시 계약
- 사용자는 분 단위 duration을 입력한다
- 하지만 server contract가 아직 preset 기반이면, 이번 slice에서는 **입력 시간에 가장 가까운 기존 focus preset**으로 임시 매핑한다
- 이 임시 매핑은 다음 slice(`Custom Duration Contract`)에서 실제 duration 연동으로 대체한다
- UI에는 이 상태가 과장 없이 드러나야 한다
- 예: `지금은 가장 가까운 기본 리듬으로 먼저 들어가요.`
---
## 9. UI 방향
### 톤