From 92a915633b98ec2a1e46de5bc89b56d14cdf20cd Mon Sep 17 00:00:00 2001 From: corpi Date: Sun, 1 Mar 2026 00:04:05 +0900 Subject: [PATCH] =?UTF-8?q?style(app-hub):=20=ED=97=88=EB=B8=8C=20?= =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=9D=84=20=EC=84=A0=ED=83=9D=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EC=82=AC=EC=A7=84=20=EB=B8=94=EB=9F=AC=EC=99=80=20?= =?UTF-8?q?=EB=8F=99=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락: - /app 배경이 카드와 동일한 맥락의 블러 이미지로 보여야 공간 톤 연결이 자연스럽다. - 앱 첫 진입 시 선택 상태가 명시되지 않으면 배경/선택 테두리 기준이 모호해질 수 있다. 변경사항: - AppHub 배경 레이어를 hubColor 단색에서 선택 카드 사진 기반 블러 배경으로 전환했다. - 배경 워시/그레인 오버레이 강도를 블러 사진 배경에 맞춰 재조정했다. - useRoomSelection 초기값을 ROOM_THEMES[0].id로 명시해 첫 진입 시 첫 카드 선택 상태를 고정했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 배경이 선택 카드 사진 블러와 동기화되고 첫 카드 초기 선택이 명시됨 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 실기기 점검 필요 --- docs/90_current_state.md | 6 ++++++ docs/session_brief.md | 3 +++ src/widgets/app-hub/ui/AppHubWidget.tsx | 17 ++++++++++------- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/90_current_state.md b/docs/90_current_state.md index a939c51..477d6cc 100644 --- a/docs/90_current_state.md +++ b/docs/90_current_state.md @@ -68,6 +68,9 @@ Last Updated: 2026-02-28 - `entities/room`에 `cardPhotoUrl`, `googleImageSearchUrl`, `managedCardPhotoUrl` 필드 추가 - 카드 배경은 실제 사진을 사용하고, Google 이미지 검색 링크를 룸별로 보관 - 추후 `managedCardPhotoUrl`만 채우면 자가 관리 이미지로 전환되도록 fallback helper 추가 +- `/app` 배경을 카드 사진 기반 블러로 전환: + - 허브 배경이 선택된 카드의 실제 사진을 블러 처리해 표시되도록 변경 + - 앱 첫 진입 시 `ROOM_THEMES[0]`를 초기 선택으로 명시해 배경/선택 테두리 기준을 고정 - 몰입 모드 ON 시 `/space` 크롬 정리: - 상단 `Current Room` 블록 숨김 - 우상단 허브 버튼 소형 아이콘화 @@ -105,6 +108,7 @@ Last Updated: 2026-02-28 - 룸 프리뷰 카드 내부는 이미지 기반 다크 텍스트 체계라 컨테이너와 톤 차이가 남아 추가 톤 정리가 필요할 수 있음 - 단색 팔레트가 일부 기기 색감에서 유사하게 보일 수 있어 실제 디스플레이 기준 재점검 필요 - 외부 이미지 URL(임시) 의존이라 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환 필요 +- 전체 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 실기기 체감 점검 필요 ## CHANGED FILES @@ -122,6 +126,7 @@ Last Updated: 2026-02-28 - `src/entities/room/model/types.ts` - `src/entities/room/model/rooms.ts` - `src/features/room-select/ui/RoomPreviewCard.tsx` +- `src/widgets/app-hub/ui/AppHubWidget.tsx` - `src/features/restart-30s/index.ts` - `src/features/restart-30s/model/useRestart30s.ts` - `src/features/restart-30s/ui/Restart30sAction.tsx` @@ -183,3 +188,4 @@ Last Updated: 2026-02-28 8. `/app`: 시작 카드/공간 카드가 흰 표면 + 어두운 텍스트로 표시되고, 카드 밖 배경은 블러된 가상 공간으로 노출됨 9. `/app`: 오늘의 공간 카드가 룸별 단색으로 표시되고, 허브 배경도 선택 카드 색으로 동기화됨 10. `/app`: 오늘의 공간 카드가 실제 사진으로 표시되고, room 데이터에 Google 검색 링크/자가 이미지 전환 필드가 포함됨 +11. `/app`: 첫 진입 시 첫 카드가 선택된 상태로 보이며, 배경도 해당 카드 사진 블러로 시작됨 diff --git a/docs/session_brief.md b/docs/session_brief.md index d1dd950..dd20bad 100644 --- a/docs/session_brief.md +++ b/docs/session_brief.md @@ -57,6 +57,8 @@ Last Updated: 2026-02-28 - `/app` 오늘의 공간 카드에 실제 사진(임시 외부 URL)을 연결했다. - `entities/room`에 `cardPhotoUrl`, `googleImageSearchUrl`, `managedCardPhotoUrl`를 추가했다. - Google 이미지 검색 링크를 룸별로 보관하고, 추후 자가 이미지 경로로 전환 가능한 fallback 구조를 적용했다. +- `/app` 허브 배경을 선택 카드 사진 기반 블러로 조정했다. + - 첫 진입 시 첫 카드가 선택된 상태를 명시해 배경/선택 테두리 기준을 고정했다. - 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다. - 이후 작업은 `docs/work.md`를 기준으로 실행한다. @@ -74,6 +76,7 @@ Last Updated: 2026-02-28 - 룸 프리뷰 카드의 이미지 기반 다크 톤과 라이트 컨테이너 사이 미세한 톤 차이가 남을 수 있음 - 단색 팔레트가 일부 디스플레이에서 유사하게 보일 수 있어 기기별 색 분리도 점검이 필요함 - 외부 이미지 URL 의존으로 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환이 필요함 +- 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 체감 성능 확인이 필요함 ## 상세 원문 위치 diff --git a/src/widgets/app-hub/ui/AppHubWidget.tsx b/src/widgets/app-hub/ui/AppHubWidget.tsx index c2b58db..710c832 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 { ROOM_THEMES } from '@/entities/room'; +import { getRoomCardBackgroundStyle, ROOM_THEMES } from '@/entities/room'; import { GOAL_CHIPS, SOUND_PRESETS, @@ -43,7 +43,9 @@ const buildSpaceQuery = ( export const AppHubWidget = () => { const router = useRouter(); const { pushToast } = useToast(); - const { selectedRoom, selectedRoomId, selectRoom } = useRoomSelection(); + const { selectedRoom, selectedRoomId, selectRoom } = useRoomSelection( + ROOM_THEMES[0].id, + ); const [goalInput, setGoalInput] = useState(''); const [selectedGoalId, setSelectedGoalId] = useState(null); @@ -93,21 +95,22 @@ export const AppHubWidget = () => {