543 lines
20 KiB
React
543 lines
20 KiB
React
|
import { useParams, Link } from 'react-router-dom';
|
||
|
|
import { useQuery, keepPreviousData } from '@tanstack/react-query';
|
||
|
|
import { useEffect, useState, useRef } from 'react';
|
||
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
|
import { Calendar, Clock, ChevronLeft, Link2, X, ChevronRight } from 'lucide-react';
|
||
|
|
import Linkify from 'react-linkify';
|
||
|
|
import { getSchedule } from '@/api/schedules';
|
||
|
|
import { CATEGORY_ID, decodeHtmlEntities, formatFullDate, formatTime, formatXDateTime } from '../sections/utils';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 전체화면 시 자동 가로 회전 훅 (숏츠가 아닐 때만)
|
||
|
|
*/
|
||
|
|
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]);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile 유튜브 섹션
|
||
|
|
*/
|
||
|
|
function MobileYoutubeSection({ schedule }) {
|
||
|
|
const videoId = schedule.videoId;
|
||
|
|
const isShorts = schedule.videoType === '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 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-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 flex-wrap items-center gap-3 text-xs text-gray-500 mb-3">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Calendar size={12} />
|
||
|
|
<span>{formatXDateTime(schedule.datetime)}</span>
|
||
|
|
</div>
|
||
|
|
{schedule.channelName && (
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Link2 size={12} />
|
||
|
|
<span>{schedule.channelName}</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>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 유튜브에서 보기 버튼 */}
|
||
|
|
<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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile X(트위터) 섹션
|
||
|
|
*/
|
||
|
|
function MobileXSection({ schedule }) {
|
||
|
|
const profile = schedule.profile;
|
||
|
|
const username = profile?.username || 'realfromis_9';
|
||
|
|
const displayName = profile?.displayName || username;
|
||
|
|
const avatarUrl = profile?.avatarUrl;
|
||
|
|
|
||
|
|
// 라이트박스 상태
|
||
|
|
const [lightboxOpen, setLightboxOpen] = useState(false);
|
||
|
|
const [lightboxIndex, setLightboxIndex] = useState(0);
|
||
|
|
const historyPushedRef = useRef(false);
|
||
|
|
|
||
|
|
const openLightbox = (index) => {
|
||
|
|
setLightboxIndex(index);
|
||
|
|
setLightboxOpen(true);
|
||
|
|
window.history.pushState({ lightbox: true }, '');
|
||
|
|
historyPushedRef.current = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
const closeLightbox = () => {
|
||
|
|
setLightboxOpen(false);
|
||
|
|
if (historyPushedRef.current) {
|
||
|
|
historyPushedRef.current = false;
|
||
|
|
window.history.back();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const goToPrev = () => {
|
||
|
|
if (schedule.imageUrls?.length > 1) {
|
||
|
|
setLightboxIndex((lightboxIndex - 1 + schedule.imageUrls.length) % schedule.imageUrls.length);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const goToNext = () => {
|
||
|
|
if (schedule.imageUrls?.length > 1) {
|
||
|
|
setLightboxIndex((lightboxIndex + 1) % schedule.imageUrls.length);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 라이트박스 열릴 때 body 스크롤 방지
|
||
|
|
useEffect(() => {
|
||
|
|
if (lightboxOpen) {
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
} else {
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
}
|
||
|
|
return () => {
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
};
|
||
|
|
}, [lightboxOpen]);
|
||
|
|
|
||
|
|
// 뒤로가기 처리 (하드웨어 백버튼)
|
||
|
|
useEffect(() => {
|
||
|
|
const handlePopState = () => {
|
||
|
|
if (lightboxOpen) {
|
||
|
|
historyPushedRef.current = false;
|
||
|
|
setLightboxOpen(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('popstate', handlePopState);
|
||
|
|
return () => window.removeEventListener('popstate', handlePopState);
|
||
|
|
}, [lightboxOpen]);
|
||
|
|
|
||
|
|
// 링크 데코레이터
|
||
|
|
const linkDecorator = (href, text, key) => (
|
||
|
|
<a key={key} href={href} target="_blank" rel="noopener noreferrer" className="text-blue-500">
|
||
|
|
{text}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 10 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.1 }}
|
||
|
|
className="bg-white rounded-xl border border-gray-200 overflow-hidden"
|
||
|
|
>
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="p-4 pb-0">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
{avatarUrl ? (
|
||
|
|
<img src={avatarUrl} alt={displayName} className="w-10 h-10 rounded-full object-cover" />
|
||
|
|
) : (
|
||
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
|
||
|
|
<span className="text-white font-bold">{displayName.charAt(0).toUpperCase()}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="flex items-center gap-1.5">
|
||
|
|
<span className="font-bold text-gray-900 text-sm truncate">{displayName}</span>
|
||
|
|
<svg className="w-4 h-4 text-blue-500 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.39-.46-2.9-.2-3.91.81s-1.27 2.52-.81 3.91C2.63 9.33 1.75 10.57 1.75 12s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.66 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.07 4.57l-3.84-3.84 1.27-1.27 2.57 2.57 5.39-5.39 1.27 1.27-6.66 6.66z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span className="text-xs text-gray-500">@{username}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 본문 */}
|
||
|
|
<div className="p-4">
|
||
|
|
<p className="text-gray-900 text-[15px] leading-relaxed whitespace-pre-wrap">
|
||
|
|
<Linkify componentDecorator={linkDecorator}>{decodeHtmlEntities(schedule.content || schedule.title)}</Linkify>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 이미지 */}
|
||
|
|
{schedule.imageUrls?.length > 0 && (
|
||
|
|
<div className="px-4 pb-3">
|
||
|
|
{schedule.imageUrls.length === 1 ? (
|
||
|
|
<img
|
||
|
|
src={schedule.imageUrls[0]}
|
||
|
|
alt=""
|
||
|
|
className="w-full rounded-xl border border-gray-100 cursor-pointer active:opacity-80 transition-opacity"
|
||
|
|
onClick={() => openLightbox(0)}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="grid gap-1 rounded-xl overflow-hidden border border-gray-100 grid-cols-2">
|
||
|
|
{schedule.imageUrls.slice(0, 4).map((url, i) => (
|
||
|
|
<img
|
||
|
|
key={i}
|
||
|
|
src={url}
|
||
|
|
alt=""
|
||
|
|
className={`w-full object-cover cursor-pointer active:opacity-80 transition-opacity ${
|
||
|
|
schedule.imageUrls.length === 3 && i === 0 ? 'row-span-2 h-full' : 'aspect-square'
|
||
|
|
}`}
|
||
|
|
onClick={() => openLightbox(i)}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 날짜/시간 */}
|
||
|
|
<div className="px-4 py-3 border-t border-gray-100">
|
||
|
|
<span className="text-gray-500 text-sm">{formatXDateTime(schedule.datetime)}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* X에서 보기 버튼 */}
|
||
|
|
<div className="px-4 py-3 border-t border-gray-100 bg-gray-50/50">
|
||
|
|
<a
|
||
|
|
href={schedule.postUrl}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="flex items-center justify-center gap-2 w-full py-2.5 bg-gray-900 active:bg-black text-white rounded-full font-medium transition-colors"
|
||
|
|
>
|
||
|
|
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||
|
|
</svg>
|
||
|
|
X에서 보기
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 모바일 라이트박스 */}
|
||
|
|
<AnimatePresence>
|
||
|
|
{lightboxOpen && schedule.imageUrls?.length > 0 && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
exit={{ opacity: 0 }}
|
||
|
|
className="fixed inset-0 bg-black z-50 flex items-center justify-center"
|
||
|
|
onClick={closeLightbox}
|
||
|
|
>
|
||
|
|
<button className="absolute top-4 right-4 p-2 text-white/70 z-10" onClick={closeLightbox}>
|
||
|
|
<X size={28} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<motion.img
|
||
|
|
key={lightboxIndex}
|
||
|
|
src={schedule.imageUrls[lightboxIndex]}
|
||
|
|
alt=""
|
||
|
|
className="max-w-full max-h-full object-contain"
|
||
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{schedule.imageUrls.length > 1 && (
|
||
|
|
<>
|
||
|
|
<button
|
||
|
|
className="absolute left-2 top-1/2 -translate-y-1/2 p-2 text-white/70"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
goToPrev();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ChevronLeft size={32} />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-white/70"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
goToNext();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ChevronRight size={32} />
|
||
|
|
</button>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{schedule.imageUrls.length > 1 && (
|
||
|
|
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
|
||
|
|
{schedule.imageUrls.map((_, i) => (
|
||
|
|
<button
|
||
|
|
key={i}
|
||
|
|
className={`w-2 h-2 rounded-full transition-colors ${i === lightboxIndex ? 'bg-white' : 'bg-white/40'}`}
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
setLightboxIndex(i);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile 기본 섹션
|
||
|
|
*/
|
||
|
|
function MobileDefaultSection({ 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.datetime)}</span>
|
||
|
|
</div>
|
||
|
|
{schedule.datetime?.includes('T') && schedule.datetime.split('T')[1] !== '00:00:00' && (
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Clock size={12} />
|
||
|
|
<span>{formatTime(schedule.datetime?.split('T')[1])}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{schedule.description && (
|
||
|
|
<p className="mt-3 text-sm text-gray-600 whitespace-pre-wrap">{decodeHtmlEntities(schedule.description)}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile 일정 상세 페이지
|
||
|
|
*/
|
||
|
|
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),
|
||
|
|
placeholderData: keepPreviousData,
|
||
|
|
retry: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
if (isLoading && !schedule) {
|
||
|
|
return (
|
||
|
|
<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="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 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ duration: 0.5, type: 'spring', stiffness: 100 }}
|
||
|
|
className="mb-6"
|
||
|
|
>
|
||
|
|
<div className="w-24 h-24 mx-auto bg-gradient-to-br from-primary/10 to-primary/5 rounded-2xl flex items-center justify-center">
|
||
|
|
<Calendar size={48} className="text-primary/40" />
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.2, duration: 0.5 }}
|
||
|
|
className="mb-6"
|
||
|
|
>
|
||
|
|
<h2 className="text-xl font-bold text-gray-800 mb-2">일정을 찾을 수 없습니다</h2>
|
||
|
|
<p className="text-gray-500 text-sm leading-relaxed">
|
||
|
|
요청하신 일정이 존재하지 않거나
|
||
|
|
<br />
|
||
|
|
삭제되었을 수 있습니다.
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
transition={{ delay: 0.4, duration: 0.5 }}
|
||
|
|
className="flex justify-center gap-1.5 mb-8"
|
||
|
|
>
|
||
|
|
{[...Array(5)].map((_, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
className="w-1.5 h-1.5 rounded-full bg-primary"
|
||
|
|
animate={{
|
||
|
|
y: [0, -6, 0],
|
||
|
|
opacity: [0.3, 1, 0.3],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 1.2,
|
||
|
|
repeat: Infinity,
|
||
|
|
delay: i * 0.15,
|
||
|
|
ease: 'easeInOut',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.5, duration: 0.5 }}
|
||
|
|
className="flex flex-col gap-3"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
onClick={() => window.history.back()}
|
||
|
|
className="flex items-center justify-center gap-2 w-full px-6 py-3 border-2 border-primary text-primary rounded-full font-medium active:bg-primary active:text-white transition-colors"
|
||
|
|
>
|
||
|
|
<ChevronLeft size={18} />
|
||
|
|
이전 페이지
|
||
|
|
</button>
|
||
|
|
<Link
|
||
|
|
to="/schedule"
|
||
|
|
className="flex items-center justify-center gap-2 w-full px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-white rounded-full font-medium active:opacity-90 transition-opacity"
|
||
|
|
>
|
||
|
|
<Calendar size={18} />
|
||
|
|
일정 목록
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 카테고리별 섹션 렌더링
|
||
|
|
const categoryId = schedule.category?.id;
|
||
|
|
const renderCategorySection = () => {
|
||
|
|
switch (categoryId) {
|
||
|
|
case CATEGORY_ID.YOUTUBE:
|
||
|
|
return <MobileYoutubeSection schedule={schedule} />;
|
||
|
|
case CATEGORY_ID.X:
|
||
|
|
return <MobileXSection schedule={schedule} />;
|
||
|
|
default:
|
||
|
|
return <MobileDefaultSection schedule={schedule} />;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MobileScheduleDetail;
|