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

- 썸네일: aspect-video 비율, hover 시 확대 + 재생 버튼 오버레이
- 방송사 뱃지: 카테고리 색상 기반, 날짜와 한 줄로 배치
- 다시보기 버튼: 다크 pill 스타일, 유튜브면 Play 아이콘
- 전체 카드 레이아웃으로 통일

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../schedule/sections/VarietySection.jsx      | 113 ++++++++++--------
 1 file changed, 63 insertions(+), 50 deletions(-)

diff --git a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
index 2cdd3c5..88015ac 100644
--- a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
+++ b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
@@ -1,4 +1,4 @@
-import { Calendar, Clock, Tv, ExternalLink } from 'lucide-react';
+import { Calendar, Clock, Tv, ExternalLink, Play } from 'lucide-react';
 import { decodeHtmlEntities, formatFullDate, formatTime } from './utils';
 
 /**
@@ -7,80 +7,93 @@ 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);
 
   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 className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100">
+      {/* 상단: 썸네일 + 오버레이 */}
+      {hasThumbnail && (
+        <div className="relative group">
+          {hasReplayUrl ? (
+            <a href={schedule.replayUrl} target="_blank" rel="noopener noreferrer">
+              <div className="aspect-video overflow-hidden">
+                <img
+                  src={schedule.thumbnailUrl}
+                  alt={schedule.title}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                />
+              </div>
+              {/* 재생 오버레이 */}
+              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+                <div className="w-14 h-14 bg-white/90 group-hover:bg-white rounded-full flex items-center justify-center shadow-lg opacity-0 group-hover:opacity-100 transition-all scale-90 group-hover:scale-100">
+                  <Play size={22} className="text-gray-800 ml-0.5" fill="currentColor" />
+                </div>
+              </div>
+            </a>
+          ) : (
+            <div className="aspect-video overflow-hidden">
+              <img
+                src={schedule.thumbnailUrl}
+                alt={schedule.title}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          )}
         </div>
       )}
 
-      {/* 정보 카드 */}
-      <div className="bg-white rounded-xl p-6 shadow-sm">
-        {/* 방송사 뱃지 + 제목 */}
-        <div className="flex items-start gap-3 mb-4">
+      {/* 콘텐츠 */}
+      <div className="p-6">
+        {/* 방송사 + 날짜 */}
+        <div className="flex items-center gap-2 mb-3">
           {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} />
+            <span className="inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-md" style={{ backgroundColor: `${schedule.category?.color || '#06b6d4'}15`, color: schedule.category?.color || '#06b6d4' }}>
+              <Tv size={11} />
               {schedule.broadcaster}
             </span>
           )}
+          <span className="text-xs text-gray-400">
+            {formatFullDate(schedule.date)}
+            {schedule.time && ` · ${formatTime(schedule.time)}`}
+          </span>
         </div>
 
-        <h1 className="text-2xl font-bold text-gray-900 mb-4">
+        {/* 제목 */}
+        <h1 className="text-xl font-bold text-gray-900 leading-snug 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">
-                  프로미스나인
+          <div className="flex flex-wrap gap-1.5 mb-5">
+            {isFullGroup ? (
+              <span className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">
+                프로미스나인
+              </span>
+            ) : (
+              members.map((member) => (
+                <span key={member.id} className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">
+                  {member.name}
                 </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">
+        {/* 다시보기 버튼 */}
+        {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-2 px-5 py-2.5 bg-cyan-500 hover:bg-cyan-600 text-white rounded-xl font-medium transition-colors"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 hover:bg-black text-white text-sm font-medium rounded-full transition-colors"
             >
-              <ExternalLink size={16} />
+              {isYoutubeReplay ? <Play size={14} fill="currentColor" /> : <ExternalLink size={14} />}
               다시보기
             </a>
           </div>