style: 예능 상세 페이지 디자인 정리
- 썸네일 hover 효과 제거, 너비 w-44로 축소 - 다시보기 버튼: 멤버 칩과 같은 줄에 compact하게 배치 (회색 pill) - 불필요한 border-t 구분선 제거 - 전체적으로 compact한 레이아웃 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
fcbda88464
commit
c990af41e1
1 changed files with 61 additions and 73 deletions
|
|
@ -9,92 +9,80 @@ function VarietySection({ schedule }) {
|
|||
const isFullGroup = members.length === 5;
|
||||
const hasThumbnail = !!schedule.thumbnailUrl;
|
||||
const hasReplayUrl = !!schedule.replayUrl;
|
||||
|
||||
// 다시보기 링크가 유튜브인지 확인
|
||||
const isYoutubeReplay = hasReplayUrl && /youtu\.?be/i.test(schedule.replayUrl);
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100">
|
||||
<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 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>
|
||||
</a>
|
||||
) : (
|
||||
<img
|
||||
src={schedule.thumbnailUrl}
|
||||
alt={schedule.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-shrink-0 w-44">
|
||||
<img
|
||||
src={schedule.thumbnailUrl}
|
||||
alt={schedule.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 오른쪽: 콘텐츠 */}
|
||||
<div className="flex-1 p-6">
|
||||
{/* 방송사 + 날짜 */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{schedule.broadcaster && (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-md" style={{ backgroundColor: `${schedule.category?.color || '#06b6d4'}15`, color: schedule.category?.color || '#06b6d4' }}>
|
||||
<Tv size={11} />
|
||||
{schedule.broadcaster}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-gray-400">
|
||||
{formatFullDate(schedule.date)}
|
||||
{schedule.time && ` · ${formatTime(schedule.time)}`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 제목 */}
|
||||
<h1 className="text-xl font-bold text-gray-900 leading-snug mb-4">
|
||||
{decodeHtmlEntities(schedule.title)}
|
||||
</h1>
|
||||
|
||||
{/* 멤버 */}
|
||||
{members.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mb-5">
|
||||
{isFullGroup ? (
|
||||
<span className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
프로미스나인
|
||||
<div className="flex-1 p-5 flex flex-col justify-center">
|
||||
{/* 방송사 + 날짜 */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{schedule.broadcaster && (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-md"
|
||||
style={{
|
||||
backgroundColor: `${schedule.category?.color || '#06b6d4'}15`,
|
||||
color: schedule.category?.color || '#06b6d4',
|
||||
}}
|
||||
>
|
||||
<Tv size={10} />
|
||||
{schedule.broadcaster}
|
||||
</span>
|
||||
) : (
|
||||
members.map((member) => (
|
||||
<span key={member.id} className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
{member.name}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
<span className="text-xs text-gray-400">
|
||||
{formatFullDate(schedule.date)}
|
||||
{schedule.time && ` · ${formatTime(schedule.time)}`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 제목 */}
|
||||
<h1 className="text-lg font-bold text-gray-900 leading-snug mb-3">
|
||||
{decodeHtmlEntities(schedule.title)}
|
||||
</h1>
|
||||
|
||||
{/* 멤버 + 다시보기 */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
{members.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{isFullGroup ? (
|
||||
<span className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
프로미스나인
|
||||
</span>
|
||||
) : (
|
||||
members.map((member) => (
|
||||
<span key={member.id} className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
{member.name}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasReplayUrl && (
|
||||
<a
|
||||
href={schedule.replayUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded-full transition-colors"
|
||||
>
|
||||
{isYoutubeReplay ? <Play size={12} fill="currentColor" /> : <ExternalLink size={12} />}
|
||||
다시보기
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 다시보기 버튼 */}
|
||||
{hasReplayUrl && (
|
||||
<div className="pt-4 border-t border-gray-100">
|
||||
<a
|
||||
href={schedule.replayUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 hover:bg-black text-white text-sm font-medium rounded-full transition-colors"
|
||||
>
|
||||
{isYoutubeReplay ? <Play size={14} fill="currentColor" /> : <ExternalLink size={14} />}
|
||||
다시보기
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue