From 2a1849f608933e9c2709349384557f40049fd19f Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 5 Apr 2026 13:58:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=88=EB=8A=A5=20=EC=8D=B8=EB=84=A4?=
 =?UTF-8?q?=EC=9D=BC=20=EC=97=86=EC=9D=84=20=EB=95=8C=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=83=89=EC=83=81=20=EA=B8=B0=EB=B3=B8=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 썸네일 없으면 카테고리 색상 배경 + Tv 아이콘 표시
- PC/모바일 모두 적용
- 항상 flex 레이아웃 유지 (썸네일 유무와 무관)

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

diff --git a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
index 6339c9b..104c434 100644
--- a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
+++ b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
@@ -487,17 +487,24 @@ function MobileVarietySection({ schedule }) {
 
   return (
     <div className="bg-white rounded-xl overflow-hidden shadow-sm">
-      <div className={`${hasThumbnail ? 'flex' : ''}`}>
+      <div className="flex">
         {/* 썸네일 */}
-        {hasThumbnail && (
-          <div className="flex-shrink-0 w-32">
+        <div className="flex-shrink-0 w-28">
+          {hasThumbnail ? (
             <img
               src={schedule.thumbnailUrl}
               alt={schedule.title}
               className="w-full h-full object-cover"
             />
-          </div>
-        )}
+          ) : (
+            <div
+              className="w-full h-full flex items-center justify-center"
+              style={{ backgroundColor: `${schedule.category?.color || '#06b6d4'}15` }}
+            >
+              <Tv size={32} style={{ color: schedule.category?.color || '#06b6d4' }} strokeWidth={1.5} />
+            </div>
+          )}
+        </div>
 
         {/* 콘텐츠 */}
         <div className="flex-1 p-4 flex flex-col justify-between">
diff --git a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
index d7ed090..9605dc7 100644
--- a/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
+++ b/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx
@@ -13,17 +13,24 @@ function VarietySection({ schedule }) {
 
   return (
     <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100">
-      <div className={`${hasThumbnail ? 'flex' : ''}`}>
+      <div className="flex">
         {/* 왼쪽: 썸네일 */}
-        {hasThumbnail && (
-          <div className="flex-shrink-0 w-44">
+        <div className="flex-shrink-0 w-44">
+          {hasThumbnail ? (
             <img
               src={schedule.thumbnailUrl}
               alt={schedule.title}
               className="w-full h-full object-cover"
             />
-          </div>
-        )}
+          ) : (
+            <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">