refactor: 예능 상세 페이지 썸네일/정보 분리 레이아웃

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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/mobile/schedule/ScheduleDetail.jsx

@@ -484,41 +484,36 @@ 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">
+    <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="w-full h-full object-cover"
+            className="max-h-[300px] object-contain"
           />
         ) : (
           <div
-              className="w-full h-full flex items-center justify-center"
-              style={{ backgroundColor: `${schedule.category?.color || '#06b6d4'}15` }}
+            className="w-full h-36 flex items-center justify-center"
+            style={{ backgroundColor: `${categoryColor}10` }}
           >
-              <Tv size={32} style={{ color: schedule.category?.color || '#06b6d4' }} strokeWidth={1.5} />
+            <Tv size={36} style={{ color: categoryColor }} strokeWidth={1.5} />
           </div>
         )}
       </div>
 
-        {/* 콘텐츠 */}
-        <div className="flex-1 p-4 flex flex-col justify-between">
-          {/* 상단 */}
-          <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: `${schedule.category?.color || '#06b6d4'}15`,
-                    color: schedule.category?.color || '#06b6d4',
-                  }}
+              style={{ backgroundColor: `${categoryColor}15`, color: categoryColor }}
             >
               <Tv size={10} />
               {schedule.broadcaster}
@@ -526,6 +521,7 @@ function MobileVarietySection({ schedule }) {
           )}
           <span className="text-xs text-gray-400">
             {formatFullDate(schedule.date)}
+            {schedule.time && ` · ${formatTime(schedule.time)}`}
           </span>
         </div>
 
@@ -536,7 +532,7 @@ function MobileVarietySection({ schedule }) {
 
         {/* 멤버 */}
         {members.length > 0 && (
-              <div className="flex flex-wrap gap-1.5">
+          <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">
                 프로미스나인
@@ -550,11 +546,10 @@ function MobileVarietySection({ schedule }) {
             )}
           </div>
         )}
-          </div>
 
         {/* 다시보기 */}
         {hasReplayUrl && (
-            <div className="mt-3">
+          <div className="pt-3 border-t border-gray-100">
             <a
               href={schedule.replayUrl}
               target="_blank"
@@ -568,7 +563,6 @@ function MobileVarietySection({ schedule }) {
         )}
       </div>
     </div>
-    </div>
   );
 }
 

frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx

@@ -10,39 +10,36 @@ 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">
+    <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="w-full h-full object-cover"
+            className="max-h-[400px] object-contain"
           />
         ) : (
           <div
-              className="w-full h-full flex items-center justify-center"
-              style={{ backgroundColor: `${schedule.category?.color || '#06b6d4'}15` }}
+            className="w-full h-48 flex items-center justify-center"
+            style={{ backgroundColor: `${categoryColor}10` }}
           >
-              <Tv size={40} style={{ color: schedule.category?.color || '#06b6d4' }} strokeWidth={1.5} />
+            <Tv size={48} style={{ color: categoryColor }} strokeWidth={1.5} />
           </div>
         )}
       </div>
 
-        {/* 오른쪽: 콘텐츠 */}
-        <div className="flex-1 p-5 flex flex-col justify-between">
+      {/* 정보 카드 */}
+      <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: `${schedule.category?.color || '#06b6d4'}15`,
-                  color: schedule.category?.color || '#06b6d4',
-                }}
+              style={{ backgroundColor: `${categoryColor}15`, color: categoryColor }}
             >
               <Tv size={13} />
               {schedule.broadcaster}
@@ -61,7 +58,7 @@ function VarietySection({ schedule }) {
 
         {/* 멤버 */}
         {members.length > 0 && (
-            <div className="flex flex-wrap gap-2">
+          <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">
                 프로미스나인
@@ -76,9 +73,9 @@ function VarietySection({ schedule }) {
           </div>
         )}
 
-          {/* 다시보기 (하단 고정) */}
+        {/* 다시보기 */}
         {hasReplayUrl && (
-            <div className="mt-auto pt-2">
+          <div className="pt-4 border-t border-gray-100">
             <a
               href={schedule.replayUrl}
               target="_blank"
@@ -92,7 +89,6 @@ function VarietySection({ schedule }) {
         )}
       </div>
     </div>
-    </div>
   );
 }