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:
parent
45819f7a01
commit
aaec7fa071
1 changed files with 16 additions and 7 deletions
|
|
@ -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} />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue