From fcbda884647c1f8e70757937ea8474daf3225e83 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 5 Apr 2026 13:48:12 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=98=88=EB=8A=A5=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=20=EC=8D=B8=EB=84=A4=EC=9D=BC=EC=9D=84=20=EC=84=B8=EB=A1=9C=20?=
 =?UTF-8?q?=ED=8F=AC=EC=8A=A4=ED=84=B0=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 가로 전체 → 왼쪽 세로 포스터(w-52) + 오른쪽 콘텐츠 (flex 레이아웃)
- 세로 이미지가 잘리지 않도록 object-cover + 고정 너비

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

diff --git a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
index 88015ac..4997567 100644
--- a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
+++ b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
@@ -15,39 +15,35 @@ function VarietySection({ schedule }) {
 
   return (
     <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">
+      <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>
-              {/* 재생 오버레이 */}
-              <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 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>
-              </div>
-            </a>
-          ) : (
-            <div className="aspect-video overflow-hidden">
+              </a>
+            ) : (
               <img
                 src={schedule.thumbnailUrl}
                 alt={schedule.title}
                 className="w-full h-full object-cover"
               />
-            </div>
-          )}
-        </div>
-      )}
+            )}
+          </div>
+        )}
 
-      {/* 콘텐츠 */}
-      <div className="p-6">
+        {/* 오른쪽: 콘텐츠 */}
+        <div className="flex-1 p-6">
         {/* 방송사 + 날짜 */}
         <div className="flex items-center gap-2 mb-3">
           {schedule.broadcaster && (
@@ -99,6 +95,7 @@ function VarietySection({ schedule }) {
           </div>
         )}
       </div>
+      </div>
     </div>
   );
 }