diff --git a/docs/90_current_state.md b/docs/90_current_state.md index 3ce8996..38487ba 100644 --- a/docs/90_current_state.md +++ b/docs/90_current_state.md @@ -60,6 +60,10 @@ Last Updated: 2026-02-28 - `지금, 몰입을 시작해요` / `오늘의 공간` 컨테이너를 흰 표면 + 어두운 텍스트 톤으로 조정 - 입력/칩/보조 버튼 색상도 라이트 카드 기준으로 재정렬 - 허브 배경은 가상 공간 이미지를 더 강한 blur로 노출해 카드 외곽 배경으로 유지 +- `/app` 오늘의 공간 카드/배경을 룸별 단색 팔레트로 전환: + - `entities/room`에 룸별 `hubColor`를 추가하고 색이 서로 겹치지 않도록 분리 + - 오늘의 공간 카드는 이미지 대신 룸 고유 단색 배경으로 렌더링 + - 허브 페이지 배경도 선택된 룸의 동일 색으로 전환되도록 연결 - 몰입 모드 ON 시 `/space` 크롬 정리: - 상단 `Current Room` 블록 숨김 - 우상단 허브 버튼 소형 아이콘화 @@ -95,6 +99,7 @@ Last Updated: 2026-02-28 - 배경 필터/블러 적용으로 저사양 환경에서 스크롤 시 미세한 페인팅 비용 증가 가능성 존재 - 모달 본문 고정 높이 적용으로 작은 화면에서 내부 스크롤 의존도가 이전보다 높아질 수 있음 - 룸 프리뷰 카드 내부는 이미지 기반 다크 텍스트 체계라 컨테이너와 톤 차이가 남아 추가 톤 정리가 필요할 수 있음 +- 단색 팔레트가 일부 기기 색감에서 유사하게 보일 수 있어 실제 디스플레이 기준 재점검 필요 ## CHANGED FILES @@ -157,6 +162,9 @@ Last Updated: 2026-02-28 - `src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx` - `src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx` - `src/widgets/app-hub/ui/AppHubWidget.tsx` +- `src/entities/room/model/types.ts` +- `src/entities/room/model/rooms.ts` +- `src/features/room-select/ui/RoomPreviewCard.tsx` ## QUICK VERIFY @@ -168,3 +176,4 @@ Last Updated: 2026-02-28 6. `/app`: 숲/벽난로처럼 텍스처가 많은 룸 선택 시에도 카드 내부 텍스트 시인성이 유지됨 7. 커스텀 입장 모달 탭 전환(공간/사운드/타이머) 시 외곽 모달 크기가 유지됨 8. `/app`: 시작 카드/공간 카드가 흰 표면 + 어두운 텍스트로 표시되고, 카드 밖 배경은 블러된 가상 공간으로 노출됨 +9. `/app`: 오늘의 공간 카드가 룸별 단색으로 표시되고, 허브 배경도 선택 카드 색으로 동기화됨 diff --git a/docs/session_brief.md b/docs/session_brief.md index 2a79a1f..d6ac5fd 100644 --- a/docs/session_brief.md +++ b/docs/session_brief.md @@ -51,6 +51,9 @@ Last Updated: 2026-02-28 - `/app`의 핵심 카드 2개를 라이트 카드 톤으로 전환했다. - `지금, 몰입을 시작해요`와 `오늘의 공간` 컨테이너를 흰 표면 + 어두운 텍스트로 정리했다. - 허브 배경 블러를 강화해 카드 외곽은 가상 공간 배경이 부드럽게 보이도록 조정했다. +- `/app` 오늘의 공간 카드를 룸별 단색 팔레트로 전환했다. + - `entities/room`에 `hubColor`를 추가해 카드별 고유 단색을 분리했다. + - 허브 배경도 선택 룸의 같은 색으로 동기화해 톤 연결성을 높였다. - 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다. - 이후 작업은 `docs/work.md`를 기준으로 실행한다. @@ -66,6 +69,7 @@ Last Updated: 2026-02-28 - 배경 blur/filter 적용으로 저사양 환경에서 렌더링 비용이 소폭 증가할 수 있음 - 모달 고정 높이로 인해 작은 화면에서는 탭 본문 내부 스크롤 사용 빈도가 늘 수 있음 - 룸 프리뷰 카드의 이미지 기반 다크 톤과 라이트 컨테이너 사이 미세한 톤 차이가 남을 수 있음 +- 단색 팔레트가 일부 디스플레이에서 유사하게 보일 수 있어 기기별 색 분리도 점검이 필요함 ## 상세 원문 위치 diff --git a/src/entities/room/model/rooms.ts b/src/entities/room/model/rooms.ts index 88c54fc..63dde36 100644 --- a/src/entities/room/model/rooms.ts +++ b/src/entities/room/model/rooms.ts @@ -10,6 +10,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Rain Focus', recommendedTime: '밤', vibeLabel: '잔잔함', + hubColor: '#D6E6F7', activeMembers: 32, presence: { focus: 23, break: 6, away: 3 }, previewImage: '/spaces/rain-window.jpg', @@ -24,6 +25,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Cafe Murmur', recommendedTime: '새벽', vibeLabel: '포근함', + hubColor: '#F5DDCB', activeMembers: 28, presence: { focus: 18, break: 7, away: 3 }, previewImage: '/spaces/dawn-cafe.jpg', @@ -38,6 +40,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Deep White', recommendedTime: '오후', vibeLabel: '몰입', + hubColor: '#DCE4D1', activeMembers: 41, presence: { focus: 31, break: 7, away: 3 }, previewImage: '/spaces/library.jpg', @@ -52,6 +55,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Ocean Breath', recommendedTime: '밤', vibeLabel: '차분함', + hubColor: '#CFE9EA', activeMembers: 19, presence: { focus: 13, break: 4, away: 2 }, previewImage: '/spaces/ocean.jpg', @@ -66,6 +70,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Forest Hush', recommendedTime: '오전', vibeLabel: '맑음', + hubColor: '#D1E7C9', activeMembers: 26, presence: { focus: 17, break: 6, away: 3 }, previewImage: '/spaces/forest.jpg', @@ -80,6 +85,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Fireplace', recommendedTime: '밤', vibeLabel: '온기', + hubColor: '#F2D4C0', activeMembers: 21, presence: { focus: 15, break: 4, away: 2 }, previewImage: '/spaces/fireplace.jpg', @@ -94,6 +100,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Night Lo-fi', recommendedTime: '심야', vibeLabel: '고요함', + hubColor: '#D9D3ED', activeMembers: 34, presence: { focus: 24, break: 7, away: 3 }, previewImage: '/spaces/city-night.jpg', @@ -108,6 +115,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Cold Wind', recommendedTime: '새벽', vibeLabel: '선명함', + hubColor: '#D8E7F3', activeMembers: 15, presence: { focus: 11, break: 3, away: 1 }, previewImage: '/spaces/snow-mountain.jpg', @@ -122,6 +130,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Soft Daylight', recommendedTime: '오후', vibeLabel: '가벼움', + hubColor: '#F6EDC7', activeMembers: 27, presence: { focus: 18, break: 6, away: 3 }, previewImage: '/spaces/sun-window.jpg', @@ -136,6 +145,7 @@ export const ROOM_THEMES: RoomTheme[] = [ recommendedSound: 'Deep Drone', recommendedTime: '심야', vibeLabel: '깊음', + hubColor: '#D4DCF4', activeMembers: 23, presence: { focus: 17, break: 4, away: 2 }, previewImage: '/spaces/outer-space.jpg', diff --git a/src/entities/room/model/types.ts b/src/entities/room/model/types.ts index 8ff92f0..3caac1e 100644 --- a/src/entities/room/model/types.ts +++ b/src/entities/room/model/types.ts @@ -14,6 +14,7 @@ export interface RoomTheme { recommendedSound: string; recommendedTime: string; vibeLabel: string; + hubColor: string; activeMembers: number; presence: RoomPresence; previewImage: string; diff --git a/src/features/room-select/ui/RoomPreviewCard.tsx b/src/features/room-select/ui/RoomPreviewCard.tsx index 1151e4a..9df3bff 100644 --- a/src/features/room-select/ui/RoomPreviewCard.tsx +++ b/src/features/room-select/ui/RoomPreviewCard.tsx @@ -1,5 +1,4 @@ import type { RoomTheme } from '@/entities/room'; -import { getRoomBackgroundStyle } from '@/entities/room'; import { cn } from '@/shared/lib/cn'; interface RoomPreviewCardProps { @@ -20,33 +19,29 @@ export const RoomPreviewCard = ({ className={cn( 'group relative overflow-hidden rounded-2xl border p-4 text-left transition-all duration-250 motion-reduce:transition-none', selected - ? 'border-sky-200/85 shadow-[0_0_0_1px_rgba(186,230,253,0.9)]' - : 'border-white/18 hover:border-white/35', + ? 'border-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18)]' + : 'border-brand-dark/16 hover:border-brand-dark/28', )} >
-
-
-
-
+
-

{room.name}

-

{room.description}

+

{room.name}

+

{room.description}

{room.tags.map((tag) => ( {tag} @@ -54,14 +49,14 @@ export const RoomPreviewCard = ({
-

- 추천 사운드: {room.recommendedSound} +

+ 추천 사운드: {room.recommendedSound}

- + 추천 시간 · {room.recommendedTime} - + 지금 분위기 · {room.vibeLabel}
diff --git a/src/widgets/app-hub/ui/AppHubWidget.tsx b/src/widgets/app-hub/ui/AppHubWidget.tsx index ee28f05..c2b58db 100644 --- a/src/widgets/app-hub/ui/AppHubWidget.tsx +++ b/src/widgets/app-hub/ui/AppHubWidget.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { useRouter } from 'next/navigation'; -import { getRoomBackgroundStyle, ROOM_THEMES } from '@/entities/room'; +import { ROOM_THEMES } from '@/entities/room'; import { GOAL_CHIPS, SOUND_PRESETS, @@ -93,23 +93,21 @@ export const AppHubWidget = () => {
-