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:
parent
de3adc0ad6
commit
45819f7a01
1 changed files with 8 additions and 8 deletions
|
|
@ -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 && (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue