From bdd5b908706d3694870bec88c470367973e9ab2e Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 21 Jan 2026 12:24:14 +0900
Subject: [PATCH] =?UTF-8?q?YouTube=20=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20API=20=EC=9D=91=EB=8B=B5=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- schedule.source.url → schedule.videoUrl
- schedule.source.name → schedule.channelName
- schedule.date/time → schedule.datetime
- videoId를 URL에서 추출 대신 API에서 직접 사용
- formatXDateTime 유틸리티 사용

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../pages/mobile/public/ScheduleDetail.jsx    | 31 +++-----------
 .../schedule-sections/YoutubeSection.jsx      | 40 +++++--------------
 2 files changed, 15 insertions(+), 56 deletions(-)

diff --git a/frontend/src/pages/mobile/public/ScheduleDetail.jsx b/frontend/src/pages/mobile/public/ScheduleDetail.jsx
index ab508c9..f2cc58d 100644
--- a/frontend/src/pages/mobile/public/ScheduleDetail.jsx
+++ b/frontend/src/pages/mobile/public/ScheduleDetail.jsx
@@ -144,19 +144,6 @@ const decodeHtmlEntities = (text) => {
     return textarea.value;
 };
 
-// 유튜브 비디오 ID 추출 (YoutubeSection용)
-const extractYoutubeVideoId = (url) => {
-    if (!url) return null;
-    const shortMatch = url.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
-    if (shortMatch) return shortMatch[1];
-    const watchMatch = url.match(/youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/);
-    if (watchMatch) return watchMatch[1];
-    const shortsMatch = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
-    if (shortsMatch) return shortsMatch[1];
-    return null;
-};
-
-
 // 날짜 포맷팅
 const formatFullDate = (dateStr) => {
     if (!dateStr) return '';
@@ -180,8 +167,8 @@ const extractXUsername = (url) => {
 
 // 유튜브 섹션 컴포넌트
 function YoutubeSection({ schedule }) {
-    const videoId = extractYoutubeVideoId(schedule.source?.url);
-    const isShorts = schedule.source?.url?.includes('/shorts/');
+    const videoId = schedule.videoId;
+    const isShorts = schedule.videoType === 'shorts';
 
     // 전체화면 시 가로 회전 (숏츠 제외)
     useFullscreenOrientation(isShorts);
@@ -229,18 +216,12 @@ function YoutubeSection({ schedule }) {
                 <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500 mb-3">
                     <div className="flex items-center gap-1">
                         <Calendar size={12} />
-                        <span>{formatFullDate(schedule.date)}</span>
+                        <span>{formatXDateTime(schedule.datetime)}</span>
                     </div>
-                    {schedule.time && (
-                        <div className="flex items-center gap-1">
-                            <Clock size={12} />
-                            <span>{formatTime(schedule.time)}</span>
-                        </div>
-                    )}
-                    {schedule.source?.name && (
+                    {schedule.channelName && (
                         <div className="flex items-center gap-1">
                             <Link2 size={12} />
-                            <span>{schedule.source?.name}</span>
+                            <span>{schedule.channelName}</span>
                         </div>
                     )}
                 </div>
@@ -267,7 +248,7 @@ function YoutubeSection({ schedule }) {
 
                 {/* 유튜브에서 보기 버튼 */}
                 <a
-                    href={schedule.source?.url}
+                    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"
diff --git a/frontend/src/pages/pc/public/schedule-sections/YoutubeSection.jsx b/frontend/src/pages/pc/public/schedule-sections/YoutubeSection.jsx
index 4ce08fe..3803707 100644
--- a/frontend/src/pages/pc/public/schedule-sections/YoutubeSection.jsx
+++ b/frontend/src/pages/pc/public/schedule-sections/YoutubeSection.jsx
@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion';
 import { Calendar, Clock, Link2 } from 'lucide-react';
-import { decodeHtmlEntities, formatFullDate, formatTime } from './utils';
+import { decodeHtmlEntities } from './utils';
+import { formatXDateTime } from '../../../../utils/date';
 
 // 영상 정보 컴포넌트 (공통)
 function VideoInfo({ schedule, isShorts }) {
@@ -16,30 +17,19 @@ function VideoInfo({ schedule, isShorts }) {
 
             {/* 메타 정보 */}
             <div className={`flex flex-wrap items-center gap-4 text-sm ${isShorts ? 'gap-3' : ''}`}>
-                {/* 날짜 */}
+                {/* 날짜/시간 */}
                 <div className="flex items-center gap-1.5 text-gray-500">
                     <Calendar size={14} />
-                    <span>{formatFullDate(schedule.date)}</span>
+                    <span>{formatXDateTime(schedule.datetime)}</span>
                 </div>
 
-                {/* 시간 */}
-                {schedule.time && (
-                    <>
-                        <div className="w-px h-4 bg-gray-300" />
-                        <div className="flex items-center gap-1.5 text-gray-500">
-                            <Clock size={14} />
-                            <span>{formatTime(schedule.time)}</span>
-                        </div>
-                    </>
-                )}
-
                 {/* 채널명 */}
-                {schedule.source?.name && (
+                {schedule.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.source.name}</span>
+                            <span className="font-medium">{schedule.channelName}</span>
                         </div>
                     </>
                 )}
@@ -68,7 +58,7 @@ function VideoInfo({ schedule, isShorts }) {
             {/* 유튜브에서 보기 버튼 */}
             <div className="mt-6 pt-5 border-t border-gray-200">
                 <a
-                    href={schedule.source?.url}
+                    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"
@@ -83,22 +73,10 @@ function VideoInfo({ schedule, isShorts }) {
     );
 }
 
-// 유튜브 비디오 ID 추출
-const extractYoutubeVideoId = (url) => {
-    if (!url) return null;
-    const shortMatch = url.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
-    if (shortMatch) return shortMatch[1];
-    const watchMatch = url.match(/youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/);
-    if (watchMatch) return watchMatch[1];
-    const shortsMatch = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
-    if (shortsMatch) return shortsMatch[1];
-    return null;
-};
-
 // 유튜브 섹션 컴포넌트
 function YoutubeSection({ schedule }) {
-    const videoId = extractYoutubeVideoId(schedule.source?.url);
-    const isShorts = schedule.source?.url?.includes('/shorts/');
+    const videoId = schedule.videoId;
+    const isShorts = schedule.videoType === 'shorts';
 
     if (!videoId) return null;