caadiq
de3adc0ad6
- 가로 flex → 세로 분리 (썸네일 카드 + 정보 카드) - 썸네일: object-contain으로 원본 비율 유지, max-h 제한 - 기본 이미지: 카테고리 색상 배경 + Tv 아이콘 - 제목이 길어져도 레이아웃 깨지지 않음 - PC/모바일 모두 적용 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
95 lines
3.3 KiB
JavaScript
95 lines
3.3 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);
|
|
const categoryColor = schedule.category?.color || '#06b6d4';
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 썸네일 카드 */}
|
|
<div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 flex items-center justify-center">
|
|
{hasThumbnail ? (
|
|
<img
|
|
src={schedule.thumbnailUrl}
|
|
alt={schedule.title}
|
|
className="max-h-[400px] object-contain"
|
|
/>
|
|
) : (
|
|
<div
|
|
className="w-full h-48 flex items-center justify-center"
|
|
style={{ backgroundColor: `${categoryColor}10` }}
|
|
>
|
|
<Tv size={48} style={{ color: categoryColor }} strokeWidth={1.5} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 정보 카드 */}
|
|
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
|
{/* 방송사 + 날짜 */}
|
|
<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: `${categoryColor}15`, color: categoryColor }}
|
|
>
|
|
<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 mb-4">
|
|
{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="pt-4 border-t border-gray-100">
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default VarietySection;
|