From 4bc188b4f9ba717f5c0b7e5fcd4581e9a4a3930c Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 5 Apr 2026 13:57:03 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=98=88?=
 =?UTF-8?q?=EB=8A=A5=20=EC=9D=BC=EC=A0=95=20=EC=83=81=EC=84=B8=20=EC=84=B9?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MobileVarietySection: 썸네일(w-32) + 콘텐츠 flex 레이아웃
- 방송사 뱃지, 제목, 멤버 칩, 다시보기 버튼
- PC 버전과 동일한 구조, 모바일 사이즈에 맞게 축소

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/mobile/schedule/ScheduleDetail.jsx  | 94 ++++++++++++++++++-
 1 file changed, 93 insertions(+), 1 deletion(-)

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 (
+    <div className="bg-white rounded-xl overflow-hidden shadow-sm">
+      <div className={`${hasThumbnail ? 'flex' : ''}`}>
+        {/* 썸네일 */}
+        {hasThumbnail && (
+          <div className="flex-shrink-0 w-32">
+            <img
+              src={schedule.thumbnailUrl}
+              alt={schedule.title}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        )}
+
+        {/* 콘텐츠 */}
+        <div className="flex-1 p-4 flex flex-col justify-between">
+          {/* 상단 */}
+          <div>
+            {/* 방송사 + 날짜 */}
+            <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>
+              )}
+              <span className="text-xs text-gray-400">
+                {formatFullDate(schedule.date)}
+              </span>
+            </div>
+
+            {/* 제목 */}
+            <h1 className="font-bold text-gray-900 text-base leading-snug mb-3">
+              {decodeHtmlEntities(schedule.title)}
+            </h1>
+
+            {/* 멤버 */}
+            {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>
+            )}
+          </div>
+
+          {/* 다시보기 */}
+          {hasReplayUrl && (
+            <div className="mt-3">
+              <a
+                href={schedule.replayUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-900 text-white text-xs font-medium rounded-full"
+              >
+                {isYoutubeReplay ? <Play size={12} fill="currentColor" /> : <ExternalLink size={12} />}
+                다시보기
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /**
  * Mobile 기본 섹션
  */
@@ -631,6 +721,8 @@ function MobileScheduleDetail() {
         return <MobileYoutubeSection schedule={schedule} />;
       case 'X':
         return <MobileXSection schedule={schedule} />;
+      case '예능':
+        return <MobileVarietySection schedule={schedule} />;
       default:
         return <MobileDefaultSection schedule={schedule} />;
     }