style(app-hub): 허브 배경을 선택 카드 사진 블러와 동기화
맥락: - /app 배경이 카드와 동일한 맥락의 블러 이미지로 보여야 공간 톤 연결이 자연스럽다. - 앱 첫 진입 시 선택 상태가 명시되지 않으면 배경/선택 테두리 기준이 모호해질 수 있다. 변경사항: - AppHub 배경 레이어를 hubColor 단색에서 선택 카드 사진 기반 블러 배경으로 전환했다. - 배경 워시/그레인 오버레이 강도를 블러 사진 배경에 맞춰 재조정했다. - useRoomSelection 초기값을 ROOM_THEMES[0].id로 명시해 첫 진입 시 첫 카드 선택 상태를 고정했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 배경이 선택 카드 사진 블러와 동기화되고 첫 카드 초기 선택이 명시됨 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 실기기 점검 필요
This commit is contained in:
@@ -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<string | null>(null);
|
||||
@@ -93,21 +95,22 @@ export const AppHubWidget = () => {
|
||||
<div className="relative min-h-screen overflow-hidden text-white">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 transition-colors duration-300"
|
||||
className="absolute inset-0 scale-[1.04] blur-[18px] transition-all duration-300"
|
||||
style={{
|
||||
backgroundColor: selectedRoom.hubColor,
|
||||
...getRoomCardBackgroundStyle(selectedRoom),
|
||||
filter: 'brightness(1.05) saturate(0.9)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_14%_0%,rgba(255,255,255,0.52),transparent_48%),radial-gradient(circle_at_86%_18%,rgba(255,255,255,0.34),transparent_46%),linear-gradient(165deg,rgba(248,250,252,0.24)_0%,rgba(226,232,240,0.2)_52%,rgba(203,213,225,0.28)_100%)]"
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_14%_0%,rgba(255,255,255,0.54),transparent_48%),radial-gradient(circle_at_86%_18%,rgba(255,255,255,0.36),transparent_46%),linear-gradient(165deg,rgba(248,250,252,0.26)_0%,rgba(226,232,240,0.22)_52%,rgba(203,213,225,0.3)_100%)]"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 opacity-[0.12]"
|
||||
className="absolute inset-0 opacity-[0.14]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 2px)",
|
||||
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 2px)",
|
||||
mixBlendMode: 'soft-light',
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user