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

- VarietySection: 썸네일, 방송사 뱃지, 제목, 날짜/시간, 멤버, 다시보기 버튼
- ScheduleDetail에서 '예능' 카테고리 분기 연결

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pc/public/schedule/ScheduleDetail.jsx     |  7 +-
 .../schedule/sections/VarietySection.jsx      | 93 +++++++++++++++++++
 .../pc/public/schedule/sections/index.js      |  1 +
 3 files changed, 99 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx

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 <YoutubeSection schedule={schedule} />;
       case 'X':
         return <XSection schedule={schedule} />;
+      case '예능':
+        return <VarietySection schedule={schedule} />;
       default:
         return <DefaultSection schedule={schedule} />;
     }
@@ -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 (
     <div className="min-h-[calc(100vh-64px)] bg-gray-50">
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 (
+    <div className="space-y-6">
+      {/* 썸네일 */}
+      {schedule.thumbnailUrl && (
+        <div className="rounded-xl overflow-hidden shadow-lg">
+          <img
+            src={schedule.thumbnailUrl}
+            alt={schedule.title}
+            className="w-full object-cover"
+          />
+        </div>
+      )}
+
+      {/* 정보 카드 */}
+      <div className="bg-white rounded-xl p-6 shadow-sm">
+        {/* 방송사 뱃지 + 제목 */}
+        <div className="flex items-start gap-3 mb-4">
+          {schedule.broadcaster && (
+            <span className="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1 bg-cyan-50 text-cyan-700 text-sm font-medium rounded-full">
+              <Tv size={14} />
+              {schedule.broadcaster}
+            </span>
+          )}
+        </div>
+
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          {decodeHtmlEntities(schedule.title)}
+        </h1>
+
+        {/* 메타 정보 */}
+        <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-6">
+          <div className="flex items-center gap-2">
+            <Calendar size={16} />
+            <span>{formatFullDate(schedule.date)}</span>
+          </div>
+          {schedule.time && (
+            <div className="flex items-center gap-2">
+              <Clock size={16} />
+              <span>{formatTime(schedule.time)}</span>
+            </div>
+          )}
+        </div>
+
+        {/* 멤버 */}
+        {members.length > 0 && (
+          <div className="mb-6">
+            <p className="text-sm text-gray-500 mb-2">출연 멤버</p>
+            <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>
+          </div>
+        )}
+
+        {/* 다시보기 링크 */}
+        {schedule.replayUrl && (
+          <div className="pt-5 border-t border-gray-100">
+            <a
+              href={schedule.replayUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-5 py-2.5 bg-cyan-500 hover:bg-cyan-600 text-white rounded-xl font-medium transition-colors"
+            >
+              <ExternalLink size={16} />
+              다시보기
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+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';