style(pc): 예능 상세 썸네일/정보 가로 배치, 높이 독립

- 썸네일: w-52 h-72 고정, object-cover
- 정보 카드: flex-1, 콘텐츠에 따라 높이 자유
- items-start로 서로 높이 영향 없음

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-04-05 14:05:37 +09:00
parent de3adc0ad6
commit 45819f7a01

View file

@ -13,27 +13,27 @@ function VarietySection({ schedule }) {
const categoryColor = schedule.category?.color || '#06b6d4';
return (
<div className="space-y-4">
{/* 썸네일 카드 */}
<div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 flex items-center justify-center">
<div className="flex gap-5 items-start">
{/* 왼쪽: 썸네일 카드 (높이 고정) */}
<div className="flex-shrink-0 w-52 h-72 bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100">
{hasThumbnail ? (
<img
src={schedule.thumbnailUrl}
alt={schedule.title}
className="max-h-[400px] object-contain"
className="w-full h-full object-cover"
/>
) : (
<div
className="w-full h-48 flex items-center justify-center"
className="w-full h-full flex items-center justify-center"
style={{ backgroundColor: `${categoryColor}10` }}
>
<Tv size={48} style={{ color: categoryColor }} strokeWidth={1.5} />
<Tv size={44} style={{ color: categoryColor }} strokeWidth={1.5} />
</div>
)}
</div>
{/* 정보 카드 */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
{/* 오른쪽: 정보 카드 */}
<div className="flex-1 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
{/* 방송사 + 날짜 */}
<div className="flex items-center gap-2.5 mb-3">
{schedule.broadcaster && (