corpi
105c5785b8
맥락: - /app 허브에서 배경 이미지가 전면에 강하게 드러나 전체 인상이 어둡고, 룸별 배경 복잡도에 따라 카드 가독성이 흔들릴 수 있었다. - 밝은 톤 전환과 동시에 카드 정보 표면을 안정화해 저자극 톤을 유지할 필요가 있었다. 변경사항: - AppHub 배경에 blur + 밝기/채도 필터를 적용하고, 밝은 워시 오버레이로 명도를 상향했다. - 전역 그레인 강도를 낮춰 시각적 노이즈를 줄였다. - RoomPreviewCard 배경 마스크를 재조정하고, 내부 콘텐츠 영역에 반투명 패널을 추가해 텍스트 대비를 고정했다. - RoomPreviewCard 내 메타 텍스트/칩의 대비를 상향해 복잡한 배경에서도 읽기 쉬운 상태로 보정했다. - GlassCard의 표면 불투명도와 그림자를 조정해 /app 전반의 무게감을 완화했다. - 세션 문서(90_current_state, session_brief)에 이번 패치 내역과 잔여 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 배경 밝기와 카드 가시성 안정화 패치 반영 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 배경 blur/filter 적용으로 저사양 환경에서 렌더링 비용이 소폭 증가할 수 있음
73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import type { RoomTheme } from '@/entities/room';
|
|
import { getRoomBackgroundStyle } from '@/entities/room';
|
|
import { cn } from '@/shared/lib/cn';
|
|
|
|
interface RoomPreviewCardProps {
|
|
room: RoomTheme;
|
|
selected: boolean;
|
|
onSelect: (roomId: string) => void;
|
|
}
|
|
|
|
export const RoomPreviewCard = ({
|
|
room,
|
|
selected,
|
|
onSelect,
|
|
}: RoomPreviewCardProps) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onSelect(room.id)}
|
|
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',
|
|
)}
|
|
>
|
|
<div
|
|
aria-hidden
|
|
className="absolute inset-0"
|
|
style={{
|
|
...getRoomBackgroundStyle(room),
|
|
filter: 'brightness(1.06) saturate(0.9)',
|
|
}}
|
|
/>
|
|
<div aria-hidden className="absolute inset-0 bg-slate-900/26" />
|
|
<div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.62),rgba(2,6,23,0.22))]" />
|
|
<div aria-hidden className="absolute inset-0 bg-[radial-gradient(120%_80%_at_50%_0%,rgba(255,255,255,0.18),rgba(255,255,255,0)_58%)]" />
|
|
|
|
<div className="relative space-y-3 rounded-xl border border-white/18 bg-slate-950/24 p-3 backdrop-blur-[1.5px]">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-white">{room.name}</h3>
|
|
<p className="mt-1 text-xs text-white/82">{room.description}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{room.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="inline-flex items-center gap-1 rounded-full bg-white/14 px-3 py-1.5 text-xs font-medium text-white/92 ring-1 ring-white/24"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-xs text-white/84">
|
|
추천 사운드: <span className="font-medium text-white">{room.recommendedSound}</span>
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-sky-300/22 px-3 py-1.5 text-xs font-medium text-sky-100 ring-1 ring-sky-200/48">
|
|
추천 시간 · {room.recommendedTime}
|
|
</span>
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-white/13 px-3 py-1.5 text-xs font-medium text-white/92 ring-1 ring-white/22">
|
|
지금 분위기 · {room.vibeLabel}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
};
|