diff --git a/frontend/src/pages/pc/public/schedule/ScheduleDetail.jsx b/frontend/src/pages/pc/public/schedule/ScheduleDetail.jsx index c664ba3..f779c34 100644 --- a/frontend/src/pages/pc/public/schedule/ScheduleDetail.jsx +++ b/frontend/src/pages/pc/public/schedule/ScheduleDetail.jsx @@ -5,7 +5,7 @@ import { Calendar, ChevronRight } from 'lucide-react'; import { getSchedule } from '@/api'; // 섹션 컴포넌트들 -import { YoutubeSection, XSection, DefaultSection, decodeHtmlEntities } from './sections'; +import { YoutubeSection, XSection, VarietySection, DefaultSection, decodeHtmlEntities } from './sections'; import Birthday from './Birthday'; /** @@ -153,6 +153,8 @@ function PCScheduleDetail() { return ; case 'X': return ; + case '예능': + return ; default: return ; } @@ -160,7 +162,8 @@ function PCScheduleDetail() { const isYoutube = categoryName === '유튜브'; const isX = categoryName === 'X'; - const hasCustomLayout = isYoutube || isX; + const isVariety = categoryName === '예능'; + const hasCustomLayout = isYoutube || isX || isVariety; return (
diff --git a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx new file mode 100644 index 0000000..2cdd3c5 --- /dev/null +++ b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx @@ -0,0 +1,93 @@ +import { Calendar, Clock, Tv, ExternalLink } from 'lucide-react'; +import { decodeHtmlEntities, formatFullDate, formatTime } from './utils'; + +/** + * 예능 일정 섹션 컴포넌트 + */ +function VarietySection({ schedule }) { + const members = schedule.members || []; + const isFullGroup = members.length === 5; + + return ( +
+ {/* 썸네일 */} + {schedule.thumbnailUrl && ( +
+ {schedule.title} +
+ )} + + {/* 정보 카드 */} +
+ {/* 방송사 뱃지 + 제목 */} +
+ {schedule.broadcaster && ( + + + {schedule.broadcaster} + + )} +
+ +

+ {decodeHtmlEntities(schedule.title)} +

+ + {/* 메타 정보 */} +
+
+ + {formatFullDate(schedule.date)} +
+ {schedule.time && ( +
+ + {formatTime(schedule.time)} +
+ )} +
+ + {/* 멤버 */} + {members.length > 0 && ( +
+

출연 멤버

+
+ {isFullGroup ? ( + + 프로미스나인 + + ) : ( + members.map((member) => ( + + {member.name} + + )) + )} +
+
+ )} + + {/* 다시보기 링크 */} + {schedule.replayUrl && ( + + )} +
+
+ ); +} + +export default VarietySection; diff --git a/frontend/src/pages/pc/public/schedule/sections/index.js b/frontend/src/pages/pc/public/schedule/sections/index.js index 01aa592..6b0c760 100644 --- a/frontend/src/pages/pc/public/schedule/sections/index.js +++ b/frontend/src/pages/pc/public/schedule/sections/index.js @@ -1,4 +1,5 @@ export { default as YoutubeSection } from './YoutubeSection'; export { default as XSection } from './XSection'; +export { default as VarietySection } from './VarietySection'; export { default as DefaultSection } from './DefaultSection'; export * from './utils';