From c990af41e195648d02e0c5e78fff230dc511400d Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 5 Apr 2026 13:51:09 +0900
Subject: [PATCH] =?UTF-8?q?style:=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=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 썸네일 hover 효과 제거, 너비 w-44로 축소
- 다시보기 버튼: 멤버 칩과 같은 줄에 compact하게 배치 (회색 pill)
- 불필요한 border-t 구분선 제거
- 전체적으로 compact한 레이아웃

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

diff --git a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
index 4997567..df14ee6 100644
--- a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
+++ b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
@@ -9,92 +9,80 @@ function VarietySection({ schedule }) {
   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-2xl overflow-hidden shadow-sm border border-gray-100">
       <div className={`${hasThumbnail ? 'flex' : ''}`}>
-        {/* 왼쪽: 썸네일 (세로 포스터) */}
+        {/* 왼쪽: 썸네일 */}
         {hasThumbnail && (
-          <div className="relative group flex-shrink-0 w-52">
-            {hasReplayUrl ? (
-              <a href={schedule.replayUrl} target="_blank" rel="noopener noreferrer" className="block h-full">
-                <img
-                  src={schedule.thumbnailUrl}
-                  alt={schedule.title}
-                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                />
-                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
-                  <div className="w-12 h-12 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={18} className="text-gray-800 ml-0.5" fill="currentColor" />
-                  </div>
-                </div>
-              </a>
-            ) : (
-              <img
-                src={schedule.thumbnailUrl}
-                alt={schedule.title}
-                className="w-full h-full object-cover"
-              />
-            )}
+          <div className="flex-shrink-0 w-44">
+            <img
+              src={schedule.thumbnailUrl}
+              alt={schedule.title}
+              className="w-full h-full object-cover"
+            />
           </div>
         )}
 
         {/* 오른쪽: 콘텐츠 */}
-        <div className="flex-1 p-6">
-        {/* 방송사 + 날짜 */}
-        <div className="flex items-center gap-2 mb-3">
-          {schedule.broadcaster && (
-            <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-xl font-bold text-gray-900 leading-snug mb-4">
-          {decodeHtmlEntities(schedule.title)}
-        </h1>
-
-        {/* 멤버 */}
-        {members.length > 0 && (
-          <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">
-                프로미스나인
+        <div className="flex-1 p-5 flex flex-col justify-center">
+          {/* 방송사 + 날짜 */}
+          <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>
-            ) : (
-              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>
-              ))
+            )}
+            <span className="text-xs text-gray-400">
+              {formatFullDate(schedule.date)}
+              {schedule.time && ` · ${formatTime(schedule.time)}`}
+            </span>
+          </div>
+
+          {/* 제목 */}
+          <h1 className="text-lg font-bold text-gray-900 leading-snug mb-3">
+            {decodeHtmlEntities(schedule.title)}
+          </h1>
+
+          {/* 멤버 + 다시보기 */}
+          <div className="flex items-center justify-between gap-4">
+            {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>
+            )}
+
+            {hasReplayUrl && (
+              <a
+                href={schedule.replayUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded-full transition-colors"
+              >
+                {isYoutubeReplay ? <Play size={12} fill="currentColor" /> : <ExternalLink size={12} />}
+                다시보기
+              </a>
             )}
           </div>
-        )}
-
-        {/* 다시보기 버튼 */}
-        {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-4 py-2 bg-gray-900 hover:bg-black text-white text-sm font-medium rounded-full transition-colors"
-            >
-              {isYoutubeReplay ? <Play size={14} fill="currentColor" /> : <ExternalLink size={14} />}
-              다시보기
-            </a>
-          </div>
-        )}
-      </div>
+        </div>
       </div>
     </div>
   );