diff --git a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx index 7c94fa2..6339c9b 100644 --- a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx +++ b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx @@ -2,7 +2,7 @@ import { useParams, Link } from 'react-router-dom'; import { useQuery, keepPreviousData } from '@tanstack/react-query'; import { useEffect, useState, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; -import { Calendar, Clock, ChevronLeft, Link2, X, ChevronRight } from 'lucide-react'; +import { Calendar, Clock, ChevronLeft, Link2, X, ChevronRight, Tv, ExternalLink, Play } from 'lucide-react'; import { getSchedule } from '@/api'; import { decodeHtmlEntities, formatFullDate, formatTime, formatXDateTimeWithTime } from '@/utils'; import Birthday from './Birthday'; @@ -475,6 +475,96 @@ function MobileXSection({ schedule }) { ); } +/** + * Mobile 예능 섹션 + */ +function MobileVarietySection({ 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 ( +
+
+ {/* 썸네일 */} + {hasThumbnail && ( +
+ {schedule.title} +
+ )} + + {/* 콘텐츠 */} +
+ {/* 상단 */} +
+ {/* 방송사 + 날짜 */} +
+ {schedule.broadcaster && ( + + + {schedule.broadcaster} + + )} + + {formatFullDate(schedule.date)} + +
+ + {/* 제목 */} +

+ {decodeHtmlEntities(schedule.title)} +

+ + {/* 멤버 */} + {members.length > 0 && ( +
+ {isFullGroup ? ( + + 프로미스나인 + + ) : ( + members.map((member) => ( + + {member.name} + + )) + )} +
+ )} +
+ + {/* 다시보기 */} + {hasReplayUrl && ( +
+ + {isYoutubeReplay ? : } + 다시보기 + +
+ )} +
+
+
+ ); +} + /** * Mobile 기본 섹션 */ @@ -631,6 +721,8 @@ function MobileScheduleDetail() { return ; case 'X': return ; + case '예능': + return ; default: return ; }