style(app-hub): 허브 배경 밝기와 카드 가시성을 함께 보정

맥락:
- /app 허브에서 배경 이미지가 전면에 강하게 드러나 전체 인상이 어둡고, 룸별 배경 복잡도에 따라 카드 가독성이 흔들릴 수 있었다.
- 밝은 톤 전환과 동시에 카드 정보 표면을 안정화해 저자극 톤을 유지할 필요가 있었다.

변경사항:
- AppHub 배경에 blur + 밝기/채도 필터를 적용하고, 밝은 워시 오버레이로 명도를 상향했다.
- 전역 그레인 강도를 낮춰 시각적 노이즈를 줄였다.
- RoomPreviewCard 배경 마스크를 재조정하고, 내부 콘텐츠 영역에 반투명 패널을 추가해 텍스트 대비를 고정했다.
- RoomPreviewCard 내 메타 텍스트/칩의 대비를 상향해 복잡한 배경에서도 읽기 쉬운 상태로 보정했다.
- GlassCard의 표면 불투명도와 그림자를 조정해 /app 전반의 무게감을 완화했다.
- 세션 문서(90_current_state, session_brief)에 이번 패치 내역과 잔여 리스크를 반영했다.

검증:
- npx tsc --noEmit

세션-상태: /app 배경 밝기와 카드 가시성 안정화 패치 반영 완료
세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환
세션-리스크: 배경 blur/filter 적용으로 저사양 환경에서 렌더링 비용이 소폭 증가할 수 있음
This commit is contained in:
2026-02-28 23:24:30 +09:00
parent 3679f4bb40
commit 105c5785b8
5 changed files with 46 additions and 19 deletions

View File

@@ -93,19 +93,23 @@ export const AppHubWidget = () => {
<div className="relative min-h-screen overflow-hidden text-white">
<div
aria-hidden
className="absolute inset-0"
style={getRoomBackgroundStyle(selectedRoom)}
className="absolute inset-0 scale-[1.02] blur-[1.5px]"
style={{
...getRoomBackgroundStyle(selectedRoom),
filter: 'brightness(1.08) saturate(0.88)',
}}
/>
<div aria-hidden className="absolute inset-0 bg-slate-900/22" />
<div
aria-hidden
className="absolute inset-0 bg-[radial-gradient(circle_at_14%_0%,rgba(255,255,255,0.5),transparent_45%),radial-gradient(circle_at_86%_18%,rgba(191,219,254,0.3),transparent_44%),linear-gradient(165deg,rgba(248,250,252,0.26)_0%,rgba(226,232,240,0.24)_52%,rgba(203,213,225,0.3)_100%)]"
/>
<div
aria-hidden
className="absolute inset-0 bg-[radial-gradient(circle_at_14%_0%,rgba(255,255,255,0.34),transparent_44%),radial-gradient(circle_at_86%_18%,rgba(186,230,253,0.24),transparent_42%),linear-gradient(160deg,rgba(15,23,42,0.32)_0%,rgba(30,41,59,0.34)_52%,rgba(15,23,42,0.44)_100%)]"
/>
<div
aria-hidden
className="absolute inset-0 opacity-28"
className="absolute inset-0 opacity-[0.18]"
style={{
backgroundImage:
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 2px)",
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.024) 0 1px, transparent 1px 2px)",
mixBlendMode: 'soft-light',
}}
/>