92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
import { Calendar, Clock, Tv, ExternalLink, Play } from 'lucide-react';
|
|
import { decodeHtmlEntities, formatFullDate, formatTime } from './utils';
|
|
|
|
/**
|
|
* 예능 일정 섹션 컴포넌트
|
|
*/
|
|
function VarietySection({ schedule }) {
|
|
const members = schedule.members || [];
|
|
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="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-5 flex flex-col justify-between">
|
|
{/* 방송사 + 날짜 */}
|
|
<div className="flex items-center gap-2.5 mb-3">
|
|
{schedule.broadcaster && (
|
|
<span
|
|
className="inline-flex items-center gap-1.5 px-2.5 py-1 text-sm font-semibold rounded-md"
|
|
style={{
|
|
backgroundColor: `${schedule.category?.color || '#06b6d4'}15`,
|
|
color: schedule.category?.color || '#06b6d4',
|
|
}}
|
|
>
|
|
<Tv size={13} />
|
|
{schedule.broadcaster}
|
|
</span>
|
|
)}
|
|
<span className="text-sm 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-2">
|
|
{isFullGroup ? (
|
|
<span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
|
프로미스나인
|
|
</span>
|
|
) : (
|
|
members.map((member) => (
|
|
<span key={member.id} className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
|
{member.name}
|
|
</span>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 다시보기 (하단 고정) */}
|
|
{hasReplayUrl && (
|
|
<div className="mt-auto pt-2">
|
|
<a
|
|
href={schedule.replayUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 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>
|
|
);
|
|
}
|
|
|
|
export default VarietySection;
|