corpi
22ff9e6e41
맥락: - 오늘의 공간 카드가 이미지 기반 배경이라 색/질감이 복잡하게 보였고, 카드와 페이지 배경의 톤 연결이 약했다. - 룸 이름별로 분리된 단색 팔레트를 사용해 카드 가독성과 허브의 색 일관성을 높일 필요가 있었다. 변경사항: - entities/room 모델에 hubColor 필드를 추가하고 10개 룸에 겹치지 않는 단색 팔레트를 정의했다. - RoomPreviewCard를 이미지 배경 대신 룸 고유 단색 배경으로 렌더링하도록 변경했다. - RoomPreviewCard 내부 텍스트/칩 스타일을 단색 카드 대비에 맞춰 어두운 텍스트 중심으로 재정렬했다. - AppHub 배경을 선택 룸의 hubColor로 동기화해 카드 선택과 페이지 배경이 같은 색 계열로 연결되게 조정했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 오늘의 공간 카드/허브 배경 단색 팔레트 전환 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 일부 디스플레이에서 단색 팔레트 간 체감 차이가 작아 보일 수 있어 기기별 색 분리도 점검 필요
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import type { RoomTheme } 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-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18)]'
|
|
: 'border-brand-dark/16 hover:border-brand-dark/28',
|
|
)}
|
|
>
|
|
<div
|
|
aria-hidden
|
|
className="absolute inset-0"
|
|
style={{
|
|
backgroundColor: room.hubColor,
|
|
}}
|
|
/>
|
|
|
|
<div className="relative space-y-3 rounded-xl border border-brand-dark/10 bg-white/42 p-3 backdrop-blur-[1px]">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-brand-dark">{room.name}</h3>
|
|
<p className="mt-1 text-xs text-brand-dark/72">{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/62 px-3 py-1.5 text-xs font-medium text-brand-dark/86 ring-1 ring-brand-dark/12"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-xs text-brand-dark/78">
|
|
추천 사운드: <span className="font-medium text-brand-dark">{room.recommendedSound}</span>
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-white/58 px-3 py-1.5 text-xs font-medium text-brand-dark/84 ring-1 ring-brand-dark/12">
|
|
추천 시간 · {room.recommendedTime}
|
|
</span>
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-white/58 px-3 py-1.5 text-xs font-medium text-brand-dark/84 ring-1 ring-brand-dark/12">
|
|
지금 분위기 · {room.vibeLabel}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
};
|