From 8ecc4e6263ec9a869cb8d674fd23cc2c284c3769 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 8 Feb 2026 22:34:10 +0900
Subject: [PATCH] =?UTF-8?q?feat(mobile):=20=EC=98=88=EC=A0=95=EB=90=9C=20Y?=
 =?UTF-8?q?ouTube=20=EC=98=81=EC=83=81=20=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PC와 동일하게 videoId가 없는 예정 일정에 대한 UI 추가:
- MobileScheduledPlaceholder 컴포넌트 (배너 이미지/패턴 배경)
- "예정" 배지 표시
- 예정 일정일 때 "YouTube에서 보기" 버튼 숨김

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../pages/mobile/schedule/ScheduleDetail.jsx  | 101 +++++++++++++-----
 1 file changed, 73 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
index 91f999d..2a23863 100644
--- a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
+++ b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
@@ -110,33 +110,69 @@ function useFullscreenOrientation(isShorts) {
   }, [isShorts]);
 }
 
+/**
+ * Mobile 예정 일정 Placeholder 컴포넌트
+ */
+function MobileScheduledPlaceholder({ bannerUrl }) {
+  return (
+    <div className="relative aspect-video bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl overflow-hidden shadow-lg">
+      {/* 배경: 배너 이미지 또는 패턴 */}
+      {bannerUrl ? (
+        <div
+          className="absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: `url(${bannerUrl})` }}
+        >
+          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+        </div>
+      ) : (
+        <div className="absolute inset-0 opacity-5">
+          <div className="absolute inset-0" style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+          }} />
+        </div>
+      )}
+
+      {/* 하단 텍스트 */}
+      <div className="absolute bottom-0 left-0 right-0 p-4">
+        <div className="flex items-center gap-2 text-white/90">
+          <Clock size={16} className="text-amber-400" />
+          <span className="text-base font-medium">업로드 예정</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /**
  * Mobile 유튜브 섹션
  */
 function MobileYoutubeSection({ schedule }) {
   const videoId = schedule.videoId;
   const isShorts = schedule.videoType === 'shorts';
+  const isScheduled = !videoId; // videoId가 없으면 예정 일정
 
   // 숏츠가 아닐 때만 가로 회전 (숏츠는 전체화면에서 세로 유지)
   useFullscreenOrientation(isShorts);
   const members = schedule.members || [];
   const isFullGroup = members.length === 5;
 
-  if (!videoId) return null;
-
   return (
     <div className="space-y-4">
-      {/* 영상 임베드 - 숏츠도 가로 비율로 표시 (전체화면에서는 유튜브가 세로로 처리) */}
+      {/* 영상 임베드 또는 예정 Placeholder */}
       <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.1 }}>
-        <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-lg aspect-video">
-          <iframe
-            src={`https://www.youtube.com/embed/${videoId}?rel=0`}
-            title={schedule.title}
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen; web-share"
-            allowFullScreen
-            className="absolute inset-0 w-full h-full"
-          />
-        </div>
+        {isScheduled ? (
+          <MobileScheduledPlaceholder bannerUrl={schedule.bannerUrl} />
+        ) : (
+          <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-lg aspect-video">
+            <iframe
+              src={`https://www.youtube.com/embed/${videoId}?rel=0`}
+              title={schedule.title}
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen; web-share"
+              allowFullScreen
+              className="absolute inset-0 w-full h-full"
+            />
+          </div>
+        )}
       </motion.div>
 
       {/* 영상 정보 */}
@@ -146,10 +182,17 @@ function MobileYoutubeSection({ schedule }) {
         transition={{ delay: 0.2 }}
         className="bg-gradient-to-br from-gray-100 to-gray-200/80 rounded-xl p-4"
       >
-        <h1 className="font-bold text-gray-900 text-base leading-relaxed mb-3">{decodeHtmlEntities(schedule.title)}</h1>
+        <div className="flex items-center gap-2 mb-3">
+          <h1 className="font-bold text-gray-900 text-base leading-relaxed">{decodeHtmlEntities(schedule.title)}</h1>
+          {isScheduled && (
+            <span className="flex-shrink-0 px-2 py-0.5 bg-amber-100 text-amber-700 text-xs font-semibold rounded-full">
+              예정
+            </span>
+          )}
+        </div>
 
         {/* 메타 정보 */}
-        <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500 mb-3">
+        <div className={`flex flex-wrap items-center gap-3 text-xs text-gray-500 ${members.length > 0 || !isScheduled ? 'mb-3' : ''}`}>
           <div className="flex items-center gap-1">
             <Calendar size={12} />
             <span>{formatXDateTimeWithTime(schedule.date, schedule.time)}</span>
@@ -179,20 +222,22 @@ function MobileYoutubeSection({ schedule }) {
           </div>
         )}
 
-        {/* 유튜브에서 보기 버튼 */}
-        <div className="pt-4 border-t border-gray-300/50">
-          <a
-            href={schedule.videoUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center justify-center gap-2 w-full py-3 bg-red-500 active:bg-red-600 text-white rounded-xl font-medium transition-colors"
-          >
-            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-            </svg>
-            YouTube에서 보기
-          </a>
-        </div>
+        {/* 유튜브에서 보기 버튼 (예정 일정이 아닐 때만) */}
+        {!isScheduled && (
+          <div className="pt-4 border-t border-gray-300/50">
+            <a
+              href={schedule.videoUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center justify-center gap-2 w-full py-3 bg-red-500 active:bg-red-600 text-white rounded-xl font-medium transition-colors"
+            >
+              <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+              </svg>
+              YouTube에서 보기
+            </a>
+          </div>
+        )}
       </motion.div>
     </div>
   );