From 23f103c7b7856c148fab01a08dd6b4beb74106b1 Mon Sep 17 00:00:00 2001 From: corpi Date: Sat, 28 Feb 2026 23:12:54 +0900 Subject: [PATCH] =?UTF-8?q?style(app-theme):=20landing=20=EC=9D=B4?= =?UTF-8?q?=ED=9B=84=20=EC=95=B1=20=EB=B0=B0=EA=B2=BD=20=ED=86=A4=EC=9D=84?= =?UTF-8?q?=20=EB=B0=9D=EC=9D=80=20=EB=AC=B4=EB=93=9C=EB=A1=9C=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락: - /landing 이후 진입하는 앱 화면들의 배경이 전반적으로 어두워 초기 인상과 톤 연속성이 떨어졌다. - 기존 감성/저자극 분위기를 유지하면서 배경 명도를 올려 부담을 낮출 필요가 있었다. 변경사항: - /app 허브 배경 오버레이를 밝은 그라디언트 중심으로 조정하고 grain 강도를 낮췄다. - 룸 카드 마스크 강도를 완화해 미리보기 이미지의 밝은 톤 노출을 늘렸다. - /space 배경 오버레이, 그레인, 비네팅 강도를 단계적으로 낮춰 전체 명도를 상향했다. - /space suspense fallback 배경을 라이트 그라디언트로 변경했다. - /stats, /settings 페이지를 라이트 팔레트 기반 배경/패널 스타일로 전환했다. - 세션 복구 문서(90_current_state, session_brief)에 이번 변경과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /landing 이후 앱 플로우 배경이 밝은 톤으로 정리됨 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 밝은 배경 구간에서 일부 white 텍스트 대비가 약해질 수 있어 기기별 시인성 점검 필요 --- docs/90_current_state.md | 13 ++++++- docs/session_brief.md | 7 +++- src/app/(app)/space/page.tsx | 6 ++- .../room-select/ui/RoomPreviewCard.tsx | 4 +- src/widgets/app-hub/ui/AppHubWidget.tsx | 9 +++-- .../settings-panel/ui/SettingsPanelWidget.tsx | 38 +++++++++---------- .../space-shell/ui/SpaceSkeletonWidget.tsx | 23 ++++++++--- .../stats-overview/ui/StatsOverviewWidget.tsx | 24 ++++++------ 8 files changed, 79 insertions(+), 45 deletions(-) diff --git a/docs/90_current_state.md b/docs/90_current_state.md index 3b05453..b2ba694 100644 --- a/docs/90_current_state.md +++ b/docs/90_current_state.md @@ -1,6 +1,6 @@ # 90. Current State -Last Updated: 2026-02-27 +Last Updated: 2026-02-28 ## DONE @@ -40,6 +40,10 @@ Last Updated: 2026-02-27 - 버튼 라벨: `숨 고르기 30초` - 진입 시 HUD 모드 라벨: `BREATHE` - 클릭 시 저자극 안내 문구 노출(2초 이내 미니 안내 + 토스트) +- `/landing` 이후 앱 플로우 배경 톤을 밝은 무드로 조정: + - `/app` 허브 배경 오버레이를 밝게 조정하고 룸 카드 어두운 마스크 강도 완화 + - `/space` 배경 오버레이/비네팅 강도를 낮춰 배경 노출 증가 + - `/stats`, `/settings` 배경/패널을 라이트 팔레트로 전환 - 몰입 모드 ON 시 `/space` 크롬 정리: - 상단 `Current Room` 블록 숨김 - 우상단 허브 버튼 소형 아이콘화 @@ -71,6 +75,7 @@ Last Updated: 2026-02-27 - 롱프레스 인터랙션은 첫 사용자에게 즉시 인지되지 않을 수 있어 시각적 힌트 필요 가능성 있음 - bar/ring 진행 표시는 서로 다른 구현(JS/CSS)이라 동기화 규칙 변경 시 회귀 점검이 필요 - 안내 카피가 HUD 목표 문구와 교체 표시되므로 정보 밀도 균형 점검 필요 +- 밝아진 배경 구간에서 일부 white 텍스트의 대비가 환경(디스플레이 밝기)에 따라 약해질 수 있음 ## CHANGED FILES @@ -118,6 +123,12 @@ Last Updated: 2026-02-27 - `src/features/restart-30s/ui/Restart30sAction.tsx` - `src/features/restart-30s/index.ts` - `src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx` +- `src/widgets/app-hub/ui/AppHubWidget.tsx` +- `src/features/room-select/ui/RoomPreviewCard.tsx` +- `src/app/(app)/space/page.tsx` +- `src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx` +- `src/widgets/stats-overview/ui/StatsOverviewWidget.tsx` +- `src/widgets/settings-panel/ui/SettingsPanelWidget.tsx` ## QUICK VERIFY diff --git a/docs/session_brief.md b/docs/session_brief.md index 583e764..4886aa6 100644 --- a/docs/session_brief.md +++ b/docs/session_brief.md @@ -1,6 +1,6 @@ # Session Brief -Last Updated: 2026-02-27 +Last Updated: 2026-02-28 세션 시작 시 항상 읽는 초소형 스냅샷 문서. @@ -34,6 +34,10 @@ Last Updated: 2026-02-27 - 버튼 라벨을 `숨 고르기 30초`로 변경했다. - HUD 모드 라벨은 진입 시 `BREATHE`로 표시된다. - 클릭 시 저자극 안내 문구를 HUD 미니 안내 + 토스트로 노출한다. +- `/landing` 이후 앱 플로우 배경을 밝은 톤으로 조정했다. + - `/app` 허브/룸 카드 오버레이를 완화해 배경 노출을 늘렸다. + - `/space` 오버레이/비네팅 강도를 낮춰 전체 명도를 올렸다. + - `/stats`, `/settings`는 라이트 팔레트 기반 패널로 전환했다. - 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다. - 이후 작업은 `docs/work.md`를 기준으로 실행한다. @@ -45,6 +49,7 @@ Last Updated: 2026-02-27 - 롱프레스 인터랙션은 신규 사용자에게 즉시 인지되지 않을 수 있어 보조 카피가 필요할 수 있음 - bar/ring 진행 구현 방식이 달라 향후 진행 규칙 변경 시 회귀 확인이 필요함 - HUD 안내 문구와 목표 문구가 교체 노출되므로 정보 우선순위 점검이 필요함 +- 밝은 배경 구간에서 white 텍스트 대비가 낮아질 수 있어 기기별 시인성 점검이 필요함 ## 상세 원문 위치 diff --git a/src/app/(app)/space/page.tsx b/src/app/(app)/space/page.tsx index 1f92dcb..29ff25e 100644 --- a/src/app/(app)/space/page.tsx +++ b/src/app/(app)/space/page.tsx @@ -3,7 +3,11 @@ import { SpaceSkeletonWidget } from '@/widgets/space-shell'; export default function SpacePage() { return ( - }> + + } + > ); diff --git a/src/features/room-select/ui/RoomPreviewCard.tsx b/src/features/room-select/ui/RoomPreviewCard.tsx index 94552f4..43e63ce 100644 --- a/src/features/room-select/ui/RoomPreviewCard.tsx +++ b/src/features/room-select/ui/RoomPreviewCard.tsx @@ -26,8 +26,8 @@ export const RoomPreviewCard = ({ )} >
-
-
+
+
diff --git a/src/widgets/app-hub/ui/AppHubWidget.tsx b/src/widgets/app-hub/ui/AppHubWidget.tsx index c06598a..74ca948 100644 --- a/src/widgets/app-hub/ui/AppHubWidget.tsx +++ b/src/widgets/app-hub/ui/AppHubWidget.tsx @@ -96,13 +96,16 @@ export const AppHubWidget = () => { className="absolute inset-0" style={getRoomBackgroundStyle(selectedRoom)} /> -
+
diff --git a/src/widgets/settings-panel/ui/SettingsPanelWidget.tsx b/src/widgets/settings-panel/ui/SettingsPanelWidget.tsx index 1925e2f..357927d 100644 --- a/src/widgets/settings-panel/ui/SettingsPanelWidget.tsx +++ b/src/widgets/settings-panel/ui/SettingsPanelWidget.tsx @@ -17,24 +17,24 @@ export const SettingsPanelWidget = () => { >(DEFAULT_PRESET_OPTIONS[0].id); return ( -
+
-
+

Settings

허브로
-
+
-

Reduce Motion

-

+

Reduce Motion

+

전환 애니메이션을 최소화합니다. (UI 토글 목업)

@@ -46,13 +46,13 @@ export const SettingsPanelWidget = () => { className={cn( 'inline-flex w-16 items-center rounded-full border px-1 py-1 transition-colors', reduceMotion - ? 'border-sky-200/70 bg-sky-300/28' - : 'border-white/30 bg-white/10', + ? 'border-brand-primary/45 bg-brand-soft/60' + : 'border-brand-dark/20 bg-white/85', )} > @@ -60,9 +60,9 @@ export const SettingsPanelWidget = () => {
-
-

알림 강도

-

집중 시작/종료 신호의 존재감을 선택합니다.

+
+

알림 강도

+

집중 시작/종료 신호의 존재감을 선택합니다.

{NOTIFICATION_INTENSITY_OPTIONS.map((option) => (
-
-

기본 프리셋

-

입장 시 자동 선택될 추천 세트를 고릅니다.

+
+

기본 프리셋

+

입장 시 자동 선택될 추천 세트를 고릅니다.

{DEFAULT_PRESET_OPTIONS.map((preset) => (