모바일 일정 상세 페이지 구현 (유튜브 섹션)

- 모바일 일정 상세 페이지 기본 구조 구현
- 유튜브 섹션: 일반 영상/숏츠 구분 렌더링
- 전체화면 시 가로 회전 (숏츠 제외)
- 일정 목록에서 상세 페이지로 이동 클릭 이벤트 추가
- mobile-layout 클래스 시스템으로 스크롤바 숨김 처리
- zustand store로 날짜 상태 유지

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/mobile/public/Schedule.jsx

@@ -8,6 +8,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import confetti from 'canvas-confetti';
 import { getTodayKST } from '../../../utils/date';
 import { getSchedules, getCategories, searchSchedules } from '../../../api/public/schedules';
+import useScheduleStore from '../../../stores/useScheduleStore';
 
 // 폭죽 애니메이션 함수
 const fireBirthdayConfetti = () => {
@@ -121,7 +122,17 @@ function MobileBirthdayCard({ schedule, onClick, delay = 0 }) {
 // 모바일 일정 페이지
 function MobileSchedule() {
     const navigate = useNavigate();
-    const [selectedDate, setSelectedDate] = useState(new Date());
+
+    // zustand store에서 상태 가져오기
+    const {
+        selectedDate: storedSelectedDate,
+        setSelectedDate: setStoredSelectedDate,
+    } = useScheduleStore();
+
+    // 선택된 날짜 (store에 없으면 오늘 날짜)
+    const selectedDate = storedSelectedDate || new Date();
+    const setSelectedDate = (date) => setStoredSelectedDate(date);
+
     const [isSearchMode, setIsSearchMode] = useState(false);
     const [searchInput, setSearchInput] = useState(''); // 입력값
     const [searchTerm, setSearchTerm] = useState(''); // 실제 검색어
@@ -442,19 +453,20 @@ function MobileSchedule() {
     // 날짜 선택 컨테이너 ref
     const dateScrollRef = useRef(null);
 
-    // 선택된 날짜로 자동 스크롤 + 페이지 스크롤 초기화
+    // 선택된 날짜로 자동 스크롤
     useEffect(() => {
-        // 페이지 스크롤을 맨 위로 즉시 이동
-        window.scrollTo(0, 0);
-        
-        if (dateScrollRef.current) {
+        // 검색 모드가 아닐 때만 스크롤 조정
+        if (!isSearchMode && dateScrollRef.current) {
             const selectedDay = selectedDate.getDate();
             const buttons = dateScrollRef.current.querySelectorAll('button');
             if (buttons[selectedDay - 1]) {
-                buttons[selectedDay - 1].scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+                // 약간의 지연 후 스크롤 (DOM 렌더링 완료 후)
+                setTimeout(() => {
+                    buttons[selectedDay - 1].scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+                }, 50);
             }
         }
-    }, [selectedDate]);
+    }, [selectedDate, isSearchMode]);
 
     return (
         <>
@@ -827,6 +839,7 @@ function MobileSchedule() {
                                                     schedule={schedule}
                                                     categoryColor={getCategoryColor(schedule.category_id)}
                                                     categories={categories}
+                                                    onClick={() => navigate(`/schedule/${schedule.id}`)}
                                                 />
                                             </div>
                                         </div>
@@ -879,6 +892,7 @@ function MobileSchedule() {
                                     categoryColor={getCategoryColor(schedule.category_id)}
                                     categories={categories}
                                     delay={index * 0.05}
+                                    onClick={() => navigate(`/schedule/${schedule.id}`)}
                                 />
                             );
                         })}
@@ -891,7 +905,7 @@ function MobileSchedule() {
 }
 
 // 일정 카드 컴포넌트 (검색용) - 날짜 포함 모던 디자인
-function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
+function ScheduleCard({ schedule, categoryColor, categories, delay = 0, onClick }) {
     const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류';
     const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
     const memberList = memberNames.split(',').filter(name => name.trim());
@@ -917,9 +931,11 @@ function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
+            onClick={onClick}
+            className="cursor-pointer"
         >
             {/* 카드 본체 */}
-            <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden">
+            <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden active:bg-gray-50 transition-colors">
                 <div className="flex">
                     {/* 왼쪽 날짜 영역 */}
                     {dateInfo && (
@@ -999,7 +1015,7 @@ function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
 }
 
 // 타임라인용 일정 카드 컴포넌트 - 모던 디자인
-function TimelineScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
+function TimelineScheduleCard({ schedule, categoryColor, categories, delay = 0, onClick }) {
     const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류';
     const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
     const memberList = memberNames.split(',').filter(name => name.trim());
@@ -1009,9 +1025,11 @@ function TimelineScheduleCard({ schedule, categoryColor, categories, delay = 0 }
             initial={{ opacity: 0, x: -10 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
+            onClick={onClick}
+            className="cursor-pointer"
         >
             {/* 카드 본체 */}
-            <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden">
+            <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden active:bg-gray-50 transition-colors">
                 <div className="p-4">
                 
                 {/* 시간 뱃지 */}

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

@@ -1,12 +1,238 @@
 import { useParams, Link } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { Calendar, ChevronLeft } from 'lucide-react';
-import { getSchedule } from '../../../api/public/schedules';
+import { Calendar, Clock, ChevronLeft, Link2 } from 'lucide-react';
+import { getSchedule, getXProfile } from '../../../api/public/schedules';
+import '../../../mobile.css';
+
+// 전체화면 시 자동 가로 회전 훅 (숏츠가 아닐 때만)
+function useFullscreenOrientation(isShorts) {
+    useEffect(() => {
+        // 숏츠는 세로 유지
+        if (isShorts) return;
+
+        const handleFullscreenChange = async () => {
+            const isFullscreen = !!document.fullscreenElement;
+
+            if (isFullscreen) {
+                // 전체화면 진입 시 가로 모드로 전환 시도
+                try {
+                    if (screen.orientation && screen.orientation.lock) {
+                        await screen.orientation.lock('landscape');
+                    }
+                } catch (e) {
+                    // 지원하지 않는 브라우저이거나 권한이 없는 경우 무시
+                }
+            } else {
+                // 전체화면 종료 시 세로 모드로 복귀
+                try {
+                    if (screen.orientation && screen.orientation.unlock) {
+                        screen.orientation.unlock();
+                    }
+                } catch (e) {
+                    // 무시
+                }
+            }
+        };
+
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+            document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+        };
+    }, [isShorts]);
+}
+
+// 카테고리 ID 상수
+const CATEGORY_ID = {
+    YOUTUBE: 2,
+    X: 3,
+    ALBUM: 4,
+    FANSIGN: 5,
+    CONCERT: 6,
+    TICKET: 7,
+};
+
+// HTML 엔티티 디코딩 함수
+const decodeHtmlEntities = (text) => {
+    if (!text) return '';
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = text;
+    return textarea.value;
+};
+
+// 유튜브 비디오 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;
+};
+
+// 날짜 포맷팅
+const formatFullDate = (dateStr) => {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
+    return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}. (${dayNames[date.getDay()]})`;
+};
+
+// 시간 포맷팅
+const formatTime = (timeStr) => {
+    if (!timeStr) return null;
+    return timeStr.slice(0, 5);
+};
+
+// 유튜브 섹션 컴포넌트
+function YoutubeSection({ schedule }) {
+    const videoId = extractYoutubeVideoId(schedule.source_url);
+    const isShorts = schedule.source_url?.includes('/shorts/');
+
+    // 전체화면 시 가로 회전 (숏츠 제외)
+    useFullscreenOrientation(isShorts);
+    const members = schedule.members || [];
+    const isFullGroup = members.length === 5;
+
+    if (!videoId) return null;
+
+    return (
+        <div className="space-y-4">
+            {/* 영상 임베드 */}
+            <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 ${
+                        isShorts ? 'aspect-[9/16] max-w-[280px] mx-auto' : '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>
+
+            {/* 영상 정보 카드 */}
+            <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2 }}
+                className="bg-white rounded-xl p-4 shadow-sm"
+            >
+                {/* 제목 */}
+                <h1 className="font-bold text-gray-900 text-base leading-relaxed mb-3">
+                    {decodeHtmlEntities(schedule.title)}
+                </h1>
+
+                {/* 메타 정보 */}
+                <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>
+                    </div>
+                    {schedule.time && (
+                        <div className="flex items-center gap-1">
+                            <Clock size={12} />
+                            <span>{formatTime(schedule.time)}</span>
+                        </div>
+                    )}
+                    {schedule.source_name && (
+                        <div className="flex items-center gap-1">
+                            <Link2 size={12} />
+                            <span>{schedule.source_name}</span>
+                        </div>
+                    )}
+                </div>
+
+                {/* 멤버 목록 */}
+                {members.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5 mb-4">
+                        {isFullGroup ? (
+                            <span className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">
+                                프로미스나인
+                            </span>
+                        ) : (
+                            members.map((member) => (
+                                <span
+                                    key={member.id}
+                                    className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
+                                >
+                                    {member.name}
+                                </span>
+                            ))
+                        )}
+                    </div>
+                )}
+
+                {/* 유튜브에서 보기 버튼 */}
+                <a
+                    href={schedule.source_url}
+                    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>
+            </motion.div>
+        </div>
+    );
+}
+
+// 기본 섹션 컴포넌트 (다른 카테고리용 - 임시)
+function DefaultSection({ schedule }) {
+    return (
+        <div className="bg-white rounded-xl p-4 shadow-sm">
+            <h1 className="font-bold text-gray-900 text-base mb-3">
+                {decodeHtmlEntities(schedule.title)}
+            </h1>
+            <div className="flex items-center gap-3 text-xs text-gray-500">
+                <div className="flex items-center gap-1">
+                    <Calendar size={12} />
+                    <span>{formatFullDate(schedule.date)}</span>
+                </div>
+                {schedule.time && (
+                    <div className="flex items-center gap-1">
+                        <Clock size={12} />
+                        <span>{formatTime(schedule.time)}</span>
+                    </div>
+                )}
+            </div>
+            {schedule.description && (
+                <p className="mt-3 text-sm text-gray-600 whitespace-pre-wrap">
+                    {decodeHtmlEntities(schedule.description)}
+                </p>
+            )}
+        </div>
+    );
+}
 
 function MobileScheduleDetail() {
     const { id } = useParams();
 
+    // 모바일 레이아웃 활성화
+    useEffect(() => {
+        document.documentElement.classList.add('mobile-layout');
+        return () => {
+            document.documentElement.classList.remove('mobile-layout');
+        };
+    }, []);
+
     const { data: schedule, isLoading, error } = useQuery({
         queryKey: ['schedule', id],
         queryFn: () => getSchedule(id),
@@ -15,16 +241,19 @@ function MobileScheduleDetail() {
 
     if (isLoading) {
         return (
-            <div className="min-h-screen flex items-center justify-center bg-gray-50">
-                <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+            <div className="mobile-layout-container bg-gray-50">
+                <div className="mobile-content flex items-center justify-center">
+                    <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+                </div>
             </div>
         );
     }
 
     if (error || !schedule) {
         return (
-            <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-6">
-                <div className="text-center">
+            <div className="mobile-layout-container bg-gradient-to-br from-gray-50 to-gray-100">
+                <div className="mobile-content flex items-center justify-center px-6">
+                    <div className="text-center">
                     {/* 아이콘 */}
                     <motion.div
                         initial={{ opacity: 0, scale: 0.5 }}
@@ -101,16 +330,48 @@ function MobileScheduleDetail() {
                             일정 목록
                         </Link>
                     </motion.div>
+                    </div>
                 </div>
             </div>
         );
     }
 
-    // TODO: 일정 상세 페이지 구현
+    // 카테고리별 섹션 렌더링
+    const renderCategorySection = () => {
+        switch (schedule.category_id) {
+            case CATEGORY_ID.YOUTUBE:
+                return <YoutubeSection schedule={schedule} />;
+            default:
+                return <DefaultSection schedule={schedule} />;
+        }
+    };
+
     return (
-        <div className="min-h-screen bg-gray-50 p-4">
-            <div className="text-center py-8 text-gray-500">
-                일정 상세 페이지 준비 중
+        <div className="mobile-layout-container bg-gray-50">
+            {/* 헤더 */}
+            <div className="flex-shrink-0 bg-white border-b border-gray-100">
+                <div className="flex items-center h-14 px-4">
+                    <button
+                        onClick={() => window.history.back()}
+                        className="p-2 -ml-2 rounded-lg active:bg-gray-100"
+                    >
+                        <ChevronLeft size={24} />
+                    </button>
+                    <div className="flex-1 text-center">
+                        <span
+                            className="text-sm font-medium"
+                            style={{ color: schedule.category_color }}
+                        >
+                            {schedule.category_name}
+                        </span>
+                    </div>
+                    <div className="w-10" />
+                </div>
+            </div>
+
+            {/* 메인 컨텐츠 */}
+            <div className="mobile-content p-4">
+                {renderCategorySection()}
             </div>
         </div>
     );