style(mobile): 예능 썸네일 블러 배경 + 높이 축소

- 높이 h-52로 고정
- 배경에 동일 이미지를 scale-110 blur-2xl로 깔아서 빈 공간 채움
- 메인 이미지는 object-contain으로 원본 비율 유지

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

View file

@ -489,16 +489,25 @@ function MobileVarietySection({ schedule }) {
return (
<div className="space-y-3">
{/* 썸네일 카드 */}
<div className="bg-white rounded-xl overflow-hidden shadow-sm flex items-center justify-center">
<div className="rounded-xl overflow-hidden shadow-sm h-52 relative">
{hasThumbnail ? (
<img
src={schedule.thumbnailUrl}
alt={schedule.title}
className="max-h-[300px] object-contain"
/>
<>
{/* 블러 배경 */}
<img
src={schedule.thumbnailUrl}
alt=""
className="absolute inset-0 w-full h-full object-cover scale-110 blur-2xl opacity-60"
/>
{/* 메인 이미지 */}
<img
src={schedule.thumbnailUrl}
alt={schedule.title}
className="relative w-full h-full object-contain"
/>
</>
) : (
<div
className="w-full h-36 flex items-center justify-center"
className="w-full h-full flex items-center justify-center"
style={{ backgroundColor: `${categoryColor}10` }}
>
<Tv size={36} style={{ color: categoryColor }} strokeWidth={1.5} />