From de3adc0ad6cbaa1d5ccc22e15ce7de107d1a2972 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 5 Apr 2026 14:03:48 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=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=EC=8D=B8=EB=84=A4?=
 =?UTF-8?q?=EC=9D=BC/=EC=A0=95=EB=B3=B4=20=EB=B6=84=EB=A6=AC=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 가로 flex → 세로 분리 (썸네일 카드 + 정보 카드)
- 썸네일: object-contain으로 원본 비율 유지, max-h 제한
- 기본 이미지: 카테고리 색상 배경 + Tv 아이콘
- 제목이 길어져도 레이아웃 깨지지 않음
- PC/모바일 모두 적용

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/mobile/schedule/ScheduleDetail.jsx  | 140 ++++++++---------
 .../schedule/sections/VarietySection.jsx      | 146 +++++++++---------
 2 files changed, 138 insertions(+), 148 deletions(-)

diff --git a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
index 104c434..d1e343b 100644
--- a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
+++ b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
@@ -484,89 +484,83 @@ function MobileVarietySection({ schedule }) {
   const hasThumbnail = !!schedule.thumbnailUrl;
   const hasReplayUrl = !!schedule.replayUrl;
   const isYoutubeReplay = hasReplayUrl && /youtu\.?be/i.test(schedule.replayUrl);
+  const categoryColor = schedule.category?.color || '#06b6d4';
 
   return (
-    <div className="bg-white rounded-xl overflow-hidden shadow-sm">
-      <div className="flex">
-        {/* 썸네일 */}
-        <div className="flex-shrink-0 w-28">
-          {hasThumbnail ? (
-            <img
-              src={schedule.thumbnailUrl}
-              alt={schedule.title}
-              className="w-full h-full object-cover"
-            />
-          ) : (
-            <div
-              className="w-full h-full flex items-center justify-center"
-              style={{ backgroundColor: `${schedule.category?.color || '#06b6d4'}15` }}
+    <div className="space-y-3">
+      {/* 썸네일 카드 */}
+      <div className="bg-white rounded-xl overflow-hidden shadow-sm flex items-center justify-center">
+        {hasThumbnail ? (
+          <img
+            src={schedule.thumbnailUrl}
+            alt={schedule.title}
+            className="max-h-[300px] object-contain"
+          />
+        ) : (
+          <div
+            className="w-full h-36 flex items-center justify-center"
+            style={{ backgroundColor: `${categoryColor}10` }}
+          >
+            <Tv size={36} style={{ color: categoryColor }} strokeWidth={1.5} />
+          </div>
+        )}
+      </div>
+
+      {/* 정보 카드 */}
+      <div className="bg-white rounded-xl shadow-sm p-4">
+        {/* 방송사 + 날짜 */}
+        <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: `${categoryColor}15`, color: categoryColor }}
             >
-              <Tv size={32} style={{ color: schedule.category?.color || '#06b6d4' }} strokeWidth={1.5} />
-            </div>
+              <Tv size={10} />
+              {schedule.broadcaster}
+            </span>
           )}
+          <span className="text-xs text-gray-400">
+            {formatFullDate(schedule.date)}
+            {schedule.time && ` · ${formatTime(schedule.time)}`}
+          </span>
         </div>
 
-        {/* 콘텐츠 */}
-        <div className="flex-1 p-4 flex flex-col justify-between">
-          {/* 상단 */}
-          <div>
-            {/* 방송사 + 날짜 */}
-            <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>
-              )}
-              <span className="text-xs text-gray-400">
-                {formatFullDate(schedule.date)}
+        {/* 제목 */}
+        <h1 className="font-bold text-gray-900 text-base leading-snug mb-3">
+          {decodeHtmlEntities(schedule.title)}
+        </h1>
+
+        {/* 멤버 */}
+        {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>
-            </div>
-
-            {/* 제목 */}
-            <h1 className="font-bold text-gray-900 text-base leading-snug mb-3">
-              {decodeHtmlEntities(schedule.title)}
-            </h1>
-
-            {/* 멤버 */}
-            {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>
+            ) : (
+              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 && (
-            <div className="mt-3">
-              <a
-                href={schedule.replayUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-900 text-white text-xs font-medium rounded-full"
-              >
-                {isYoutubeReplay ? <Play size={12} fill="currentColor" /> : <ExternalLink size={12} />}
-                다시보기
-              </a>
-            </div>
-          )}
-        </div>
+        {/* 다시보기 */}
+        {hasReplayUrl && (
+          <div className="pt-3 border-t border-gray-100">
+            <a
+              href={schedule.replayUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-900 text-white text-xs font-medium rounded-full"
+            >
+              {isYoutubeReplay ? <Play size={12} fill="currentColor" /> : <ExternalLink size={12} />}
+              다시보기
+            </a>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
index 9605dc7..d22348f 100644
--- a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
+++ b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
@@ -10,87 +10,83 @@ function VarietySection({ schedule }) {
   const hasThumbnail = !!schedule.thumbnailUrl;
   const hasReplayUrl = !!schedule.replayUrl;
   const isYoutubeReplay = hasReplayUrl && /youtu\.?be/i.test(schedule.replayUrl);
+  const categoryColor = schedule.category?.color || '#06b6d4';
 
   return (
-    <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100">
-      <div className="flex">
-        {/* 왼쪽: 썸네일 */}
-        <div className="flex-shrink-0 w-44">
-          {hasThumbnail ? (
-            <img
-              src={schedule.thumbnailUrl}
-              alt={schedule.title}
-              className="w-full h-full object-cover"
-            />
-          ) : (
-            <div
-              className="w-full h-full flex items-center justify-center"
-              style={{ backgroundColor: `${schedule.category?.color || '#06b6d4'}15` }}
-            >
-              <Tv size={40} style={{ color: schedule.category?.color || '#06b6d4' }} strokeWidth={1.5} />
-            </div>
-          )}
-        </div>
-
-        {/* 오른쪽: 콘텐츠 */}
-        <div className="flex-1 p-5 flex flex-col justify-between">
-          {/* 방송사 + 날짜 */}
-          <div className="flex items-center gap-2.5 mb-3">
-            {schedule.broadcaster && (
-              <span
-                className="inline-flex items-center gap-1.5 px-2.5 py-1 text-sm font-semibold rounded-md"
-                style={{
-                  backgroundColor: `${schedule.category?.color || '#06b6d4'}15`,
-                  color: schedule.category?.color || '#06b6d4',
-                }}
-              >
-                <Tv size={13} />
-                {schedule.broadcaster}
-              </span>
-            )}
-            <span className="text-sm text-gray-400">
-              {formatFullDate(schedule.date)}
-              {schedule.time && ` · ${formatTime(schedule.time)}`}
-            </span>
+    <div className="space-y-4">
+      {/* 썸네일 카드 */}
+      <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 flex items-center justify-center">
+        {hasThumbnail ? (
+          <img
+            src={schedule.thumbnailUrl}
+            alt={schedule.title}
+            className="max-h-[400px] object-contain"
+          />
+        ) : (
+          <div
+            className="w-full h-48 flex items-center justify-center"
+            style={{ backgroundColor: `${categoryColor}10` }}
+          >
+            <Tv size={48} style={{ color: categoryColor }} strokeWidth={1.5} />
           </div>
+        )}
+      </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-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>
-          )}
-
-          {/* 다시보기 (하단 고정) */}
-          {hasReplayUrl && (
-            <div className="mt-auto pt-2">
-              <a
-                href={schedule.replayUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 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 className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+        {/* 방송사 + 날짜 */}
+        <div className="flex items-center gap-2.5 mb-3">
+          {schedule.broadcaster && (
+            <span
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 text-sm font-semibold rounded-md"
+              style={{ backgroundColor: `${categoryColor}15`, color: categoryColor }}
+            >
+              <Tv size={13} />
+              {schedule.broadcaster}
+            </span>
           )}
+          <span className="text-sm 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-2 mb-4">
+            {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>
+        )}
+
+        {/* 다시보기 */}
+        {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-1.5 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>
   );