From b1d890d758d4079ea110dd7265fc038d777eaccc Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 5 Apr 2026 13:52:12 +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=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=83=81?=
 =?UTF-8?q?=EB=8B=A8/=ED=95=98=EB=8B=A8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 방송사+날짜, 제목, 멤버: 상단에 붙임
- 다시보기 버튼: mt-auto로 하단에 고정
- justify-between으로 세로 공간 분배

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../schedule/sections/VarietySection.jsx      | 43 ++++++++++---------
 1 file changed, 22 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 df14ee6..5bba441 100644
--- a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
+++ b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
@@ -26,7 +26,7 @@ function VarietySection({ schedule }) {
         )}
 
         {/* 오른쪽: 콘텐츠 */}
-        <div className="flex-1 p-5 flex flex-col justify-center">
+        <div className="flex-1 p-5 flex flex-col justify-between">
           {/* 방송사 + 날짜 */}
           <div className="flex items-center gap-2 mb-2">
             {schedule.broadcaster && (
@@ -52,36 +52,37 @@ function VarietySection({ schedule }) {
             {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">
-                    프로미스나인
+          {/* 멤버 */}
+          {members.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mb-3">
+              {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>
-                ) : (
-                  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 && (
+          {/* 다시보기 (하단 고정) */}
+          {hasReplayUrl && (
+            <div className="mt-auto pt-1">
               <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"
+                className="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>
+            </div>
+          )}
         </div>
       </div>
     </div>