From b16aa963cd47a4fbd4f325f65dadd8d874b21012 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Tue, 3 Feb 2026 14:57:58 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9C=A0=ED=8A=9C=EB=B8=8C=20=EC=98=88?=
 =?UTF-8?q?=EC=A0=95=20=EC=9D=BC=EC=A0=95=20UI=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PC YoutubeSection에 예정 일정 placeholder UI 추가
- 예정 일정일 경우 "예정" 배지 표시
- 영상 준비 중 placeholder 컴포넌트 추가
- 예정 일정에도 channelName 반환하도록 API 수정

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/src/services/schedule.js              |  20 ++--
 .../schedule/sections/YoutubeSection.jsx      | 106 ++++++++++++++----
 2 files changed, 99 insertions(+), 27 deletions(-)

diff --git a/backend/src/services/schedule.js b/backend/src/services/schedule.js
index 43dabb3..5dfbd61 100644
--- a/backend/src/services/schedule.js
+++ b/backend/src/services/schedule.js
@@ -242,13 +242,19 @@ export async function getScheduleDetail(db, id, getXProfile = null) {
   };
 
   // 카테고리별 추가 필드
-  if (s.category_id === CATEGORY_IDS.YOUTUBE && s.youtube_video_id) {
-    result.videoId = s.youtube_video_id;
-    result.videoType = s.youtube_video_type;
-    result.channelName = s.youtube_channel;
-    result.videoUrl = s.youtube_video_type === 'shorts'
-      ? `https://www.youtube.com/shorts/${s.youtube_video_id}`
-      : `https://www.youtube.com/watch?v=${s.youtube_video_id}`;
+  if (s.category_id === CATEGORY_IDS.YOUTUBE) {
+    // 채널 이름은 항상 반환 (예정 일정 포함)
+    if (s.youtube_channel) {
+      result.channelName = s.youtube_channel;
+    }
+    // video_id가 있는 경우에만 영상 관련 필드 추가
+    if (s.youtube_video_id) {
+      result.videoId = s.youtube_video_id;
+      result.videoType = s.youtube_video_type;
+      result.videoUrl = s.youtube_video_type === 'shorts'
+        ? `https://www.youtube.com/shorts/${s.youtube_video_id}`
+        : `https://www.youtube.com/watch?v=${s.youtube_video_id}`;
+    }
   } else if (s.category_id === CATEGORY_IDS.X && s.x_post_id) {
     const username = config.x.defaultUsername;
     result.postId = s.x_post_id;
diff --git a/frontend/src/pages/pc/public/schedule/sections/YoutubeSection.jsx b/frontend/src/pages/pc/public/schedule/sections/YoutubeSection.jsx
index 2cd8846..4247f5d 100644
--- a/frontend/src/pages/pc/public/schedule/sections/YoutubeSection.jsx
+++ b/frontend/src/pages/pc/public/schedule/sections/YoutubeSection.jsx
@@ -1,23 +1,32 @@
 import { motion } from 'framer-motion';
-import { Calendar, Link2 } from 'lucide-react';
+import { Calendar, Link2, Clock } from 'lucide-react';
 import { decodeHtmlEntities, formatXDateTimeWithTime } from './utils';
 
 /**
  * 영상 정보 컴포넌트 (공통)
  */
-function VideoInfo({ schedule, isShorts }) {
+function VideoInfo({ schedule, isShorts, isScheduled = false }) {
   const members = schedule.members || [];
   const isFullGroup = members.length === 5;
+  // 채널명: channelName 또는 source.name에서 가져옴
+  const channelName = schedule.channelName || schedule.source?.name;
 
   return (
     <div className={`bg-gradient-to-br from-gray-100 to-gray-200/80 rounded-2xl p-6 ${isShorts ? 'flex-1' : ''}`}>
       {/* 제목 */}
-      <h1 className={`font-bold text-gray-900 mb-4 leading-relaxed ${isShorts ? 'text-lg' : 'text-xl'}`}>
-        {decodeHtmlEntities(schedule.title)}
-      </h1>
+      <div className="flex items-start gap-3 mb-4">
+        <h1 className={`font-bold text-gray-900 leading-relaxed ${isShorts || isScheduled ? 'text-lg' : 'text-xl'}`}>
+          {decodeHtmlEntities(schedule.title)}
+        </h1>
+        {isScheduled && (
+          <span className="flex-shrink-0 px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-semibold rounded-full">
+            예정
+          </span>
+        )}
+      </div>
 
       {/* 메타 정보 */}
-      <div className={`flex flex-wrap items-center gap-4 text-sm ${isShorts ? 'gap-3' : ''}`}>
+      <div className={`flex flex-wrap items-center gap-4 text-sm ${isShorts || isScheduled ? 'gap-3' : ''}`}>
         {/* 날짜/시간 */}
         <div className="flex items-center gap-1.5 text-gray-500">
           <Calendar size={14} />
@@ -25,12 +34,12 @@ function VideoInfo({ schedule, isShorts }) {
         </div>
 
         {/* 채널명 */}
-        {schedule.channelName && (
+        {channelName && (
           <>
             <div className="w-px h-4 bg-gray-300" />
             <div className="flex items-center gap-2 text-gray-500">
               <Link2 size={14} className="opacity-60" />
-              <span className="font-medium">{schedule.channelName}</span>
+              <span className="font-medium">{channelName}</span>
             </div>
           </>
         )}
@@ -51,19 +60,55 @@ function VideoInfo({ schedule, isShorts }) {
         </div>
       )}
 
-      {/* 유튜브에서 보기 버튼 */}
-      <div className="mt-6 pt-5 border-t border-gray-300/60">
-        <a
-          href={schedule.videoUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-2 px-5 py-2.5 bg-red-500 hover:bg-red-600 text-white rounded-xl font-medium transition-colors shadow-lg shadow-red-500/20"
-        >
-          <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+      {/* 유튜브에서 보기 버튼 (예정 일정이 아닐 때만) */}
+      {!isScheduled && (
+        <div className="mt-6 pt-5 border-t border-gray-300/60">
+          <a
+            href={schedule.videoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-5 py-2.5 bg-red-500 hover:bg-red-600 text-white rounded-xl font-medium transition-colors shadow-lg shadow-red-500/20"
+          >
+            <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>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 예정 일정 Placeholder 컴포넌트
+ */
+function ScheduledPlaceholder() {
+  return (
+    <div className="relative aspect-video bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden shadow-lg shadow-black/10 flex flex-col items-center justify-center">
+      {/* 배경 패턴 */}
+      <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="relative mb-4">
+        <div className="w-20 h-20 bg-red-500/20 rounded-full flex items-center justify-center">
+          <svg className="w-10 h-10 text-red-500" 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>
+      </div>
+
+      {/* 텍스트 */}
+      <div className="relative text-center">
+        <div className="flex items-center gap-2 text-white/80 mb-2">
+          <Clock size={18} className="text-amber-400" />
+          <span className="text-lg font-medium">영상 준비 중</span>
+        </div>
+        <p className="text-white/50 text-sm">곧 업로드될 예정입니다</p>
       </div>
     </div>
   );
@@ -75,8 +120,29 @@ function VideoInfo({ schedule, isShorts }) {
 function YoutubeSection({ schedule }) {
   const videoId = schedule.videoId;
   const isShorts = schedule.videoType === 'shorts';
+  const isScheduled = !videoId; // videoId가 없으면 예정 일정
 
-  if (!videoId) return null;
+  // 예정 일정: 세로 레이아웃 (Placeholder + 정보)
+  if (isScheduled) {
+    return (
+      <div className="space-y-6">
+        {/* 예정 Placeholder */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.98 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.1 }}
+          className="w-full"
+        >
+          <ScheduledPlaceholder />
+        </motion.div>
+
+        {/* 영상 정보 카드 */}
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}>
+          <VideoInfo schedule={schedule} isShorts={false} isScheduled={true} />
+        </motion.div>
+      </div>
+    );
+  }
 
   // 숏츠: 가로 레이아웃 (영상 + 정보)
   if (isShorts) {