caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: 예능 상세 썸네일을 세로 포스터 레이아웃으로 변경

Browse source 
- 가로 전체 → 왼쪽 세로 포스터(w-52) + 오른쪽 콘텐츠 (flex 레이아웃)
- 세로 이미지가 잘리지 않도록 object-cover + 고정 너비

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-04-05 13:48:12 +09:00
parent 36854a223f
commit fcbda88464
1 changed files with 18 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
View file

@ -15,39 +15,35 @@ function VarietySection({ schedule }) {
return (
<div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100">
{/* 상단: 썸네일 + 오버레이 */}
{hasThumbnail && (
<div className="relative group">
{hasReplayUrl ? (
<a href={schedule.replayUrl} target="_blank" rel="noopener noreferrer">
<div className="aspect-video overflow-hidden">
<div className={`${hasThumbnail ? 'flex' : ''}`}>
{/* 왼쪽: 썸네일 (세로 포스터) */}
{hasThumbnail && (
<div className="relative group flex-shrink-0 w-52">
{hasReplayUrl ? (
<a href={schedule.replayUrl} target="_blank" rel="noopener noreferrer" className="block h-full">
<img
src={schedule.thumbnailUrl}
alt={schedule.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/>
</div>
{/* 재생 오버레이 */}
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<div className="w-14 h-14 bg-white/90 group-hover:bg-white rounded-full flex items-center justify-center shadow-lg opacity-0 group-hover:opacity-100 transition-all scale-90 group-hover:scale-100">
<Play size={22} className="text-gray-800 ml-0.5" fill="currentColor" />
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<div className="w-12 h-12 bg-white/90 group-hover:bg-white rounded-full flex items-center justify-center shadow-lg opacity-0 group-hover:opacity-100 transition-all scale-90 group-hover:scale-100">
<Play size={18} className="text-gray-800 ml-0.5" fill="currentColor" />
</div>
</div>
</div>
</a>
) : (
<div className="aspect-video overflow-hidden">
</a>
) : (
<img
src={schedule.thumbnailUrl}
alt={schedule.title}
className="w-full h-full object-cover"
/>
</div>
)}
</div>
)}
)}
</div>
)}
{/* 콘텐츠 */}
<div className="p-6">
{/* 오른쪽: 콘텐츠 */}
<div className="flex-1 p-6">
{/* 방송사 + 날짜 */}
<div className="flex items-center gap-2 mb-3">
{schedule.broadcaster && (
@ -99,6 +95,7 @@ function VarietySection({ schedule }) {
</div>
)}
</div>
</div>
</div>
);
}