refactor: ScheduleDetail 컴포넌트 카테고리별 파일 분리
- schedule-sections 폴더 생성 - YoutubeSection, XSection, ConcertSection, DefaultSection 분리 - KakaoMap, utils.js 공통 모듈 분리 - 메인 ScheduleDetail.jsx 1010줄 → 175줄로 간소화
This commit is contained in:
parent
9d6d4a1ad3
commit
40e1f957c7
8 changed files with 892 additions and 845 deletions
|
|
@ -1,854 +1,23 @@
|
||||||
import { useParams, Link } from 'react-router-dom';
|
import { useParams, Link } from 'react-router-dom';
|
||||||
import { useQuery, keepPreviousData } from '@tanstack/react-query';
|
import { useQuery, keepPreviousData } from '@tanstack/react-query';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { motion } from 'framer-motion';
|
||||||
import { motion, AnimatePresence } from 'framer-motion';
|
import { Calendar, ChevronRight } from 'lucide-react';
|
||||||
import { Clock, Calendar, ExternalLink, ChevronRight, ChevronDown, ChevronLeft, Check, Link2, MapPin, Navigation } from 'lucide-react';
|
import { getSchedule } from '../../../api/public/schedules';
|
||||||
import { getSchedule, getXProfile } from '../../../api/public/schedules';
|
|
||||||
|
// 분리된 카테고리별 섹션 컴포넌트들
|
||||||
// 카카오맵 SDK 키
|
import {
|
||||||
const KAKAO_MAP_KEY = import.meta.env.VITE_KAKAO_JS_KEY;
|
YoutubeSection,
|
||||||
|
XSection,
|
||||||
// 카테고리 ID 상수
|
ConcertSection,
|
||||||
const CATEGORY_ID = {
|
DefaultSection,
|
||||||
YOUTUBE: 2,
|
CATEGORY_ID,
|
||||||
X: 3,
|
decodeHtmlEntities,
|
||||||
ALBUM: 4,
|
} from './schedule-sections';
|
||||||
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);
|
|
||||||
};
|
|
||||||
|
|
||||||
// X용 날짜/시간 포맷팅 (오후 2:30 · 2026년 1월 15일)
|
|
||||||
const formatXDateTime = (dateStr, timeStr) => {
|
|
||||||
if (!dateStr) return '';
|
|
||||||
const date = new Date(dateStr);
|
|
||||||
const year = date.getFullYear();
|
|
||||||
const month = date.getMonth() + 1;
|
|
||||||
const day = date.getDate();
|
|
||||||
|
|
||||||
let result = `${year}년 ${month}월 ${day}일`;
|
|
||||||
|
|
||||||
if (timeStr) {
|
|
||||||
const [hours, minutes] = timeStr.split(':').map(Number);
|
|
||||||
const period = hours < 12 ? '오전' : '오후';
|
|
||||||
const hour12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
|
|
||||||
result = `${period} ${hour12}:${String(minutes).padStart(2, '0')} · ${result}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 영상 정보 컴포넌트 (공통)
|
|
||||||
function VideoInfo({ schedule, isShorts }) {
|
|
||||||
const members = schedule.members || [];
|
|
||||||
const isFullGroup = members.length === 5;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`bg-gradient-to-br from-gray-50 to-gray-100/50 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 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>
|
|
||||||
</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 && (
|
|
||||||
<>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 멤버 목록 */}
|
|
||||||
{members.length > 0 && (
|
|
||||||
<div className="flex flex-wrap gap-2 mt-4">
|
|
||||||
{isFullGroup ? (
|
|
||||||
<span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
|
||||||
프로미스나인
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
members.map((member) => (
|
|
||||||
<span
|
|
||||||
key={member.id}
|
|
||||||
className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full"
|
|
||||||
>
|
|
||||||
{member.name}
|
|
||||||
</span>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 유튜브에서 보기 버튼 */}
|
|
||||||
<div className="mt-6 pt-5 border-t border-gray-200">
|
|
||||||
<a
|
|
||||||
href={schedule.source_url}
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 유튜브 섹션 컴포넌트
|
|
||||||
function YoutubeSection({ schedule }) {
|
|
||||||
const videoId = extractYoutubeVideoId(schedule.source_url);
|
|
||||||
const isShorts = schedule.source_url?.includes('/shorts/');
|
|
||||||
|
|
||||||
if (!videoId) return null;
|
|
||||||
|
|
||||||
// 숏츠: 가로 레이아웃 (영상 + 정보)
|
|
||||||
if (isShorts) {
|
|
||||||
return (
|
|
||||||
<div className="flex gap-6 items-start">
|
|
||||||
{/* 영상 임베드 */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.98 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ delay: 0.1 }}
|
|
||||||
className="w-[420px] flex-shrink-0"
|
|
||||||
>
|
|
||||||
<div className="relative aspect-[9/16] bg-gray-900 rounded-2xl overflow-hidden shadow-2xl shadow-black/20">
|
|
||||||
<iframe
|
|
||||||
src={`https://www.youtube.com/embed/${videoId}?rel=0`}
|
|
||||||
title={schedule.title}
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowFullScreen
|
|
||||||
className="absolute inset-0 w-full h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* 영상 정보 카드 */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: 10 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ delay: 0.2 }}
|
|
||||||
className="flex-1"
|
|
||||||
>
|
|
||||||
<VideoInfo schedule={schedule} isShorts={true} />
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 일반 영상: 세로 레이아웃 (영상 위, 정보 아래)
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* 영상 임베드 */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.98 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ delay: 0.1 }}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<div className="relative aspect-video bg-gray-900 rounded-2xl overflow-hidden shadow-2xl shadow-black/20">
|
|
||||||
<iframe
|
|
||||||
src={`https://www.youtube.com/embed/${videoId}?rel=0`}
|
|
||||||
title={schedule.title}
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
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 }}
|
|
||||||
>
|
|
||||||
<VideoInfo schedule={schedule} isShorts={false} />
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// X URL에서 username 추출
|
|
||||||
const extractXUsername = (url) => {
|
|
||||||
if (!url) return null;
|
|
||||||
const match = url.match(/(?:twitter\.com|x\.com)\/([^/]+)/);
|
|
||||||
return match ? match[1] : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
// X(트위터) 섹션 컴포넌트
|
|
||||||
function XSection({ schedule }) {
|
|
||||||
const username = extractXUsername(schedule.source_url);
|
|
||||||
|
|
||||||
// 프로필 정보 조회
|
|
||||||
const { data: profile } = useQuery({
|
|
||||||
queryKey: ['x-profile', username],
|
|
||||||
queryFn: () => getXProfile(username),
|
|
||||||
enabled: !!username,
|
|
||||||
staleTime: 1000 * 60 * 60, // 1시간
|
|
||||||
});
|
|
||||||
|
|
||||||
const displayName = profile?.displayName || schedule.source_name || username || 'Unknown';
|
|
||||||
const avatarUrl = profile?.avatarUrl;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="max-w-2xl mx-auto">
|
|
||||||
{/* X 스타일 카드 */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.1 }}
|
|
||||||
className="bg-white rounded-2xl border border-gray-200 overflow-hidden"
|
|
||||||
>
|
|
||||||
{/* 헤더 */}
|
|
||||||
<div className="p-5 pb-0">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{/* 프로필 이미지 */}
|
|
||||||
{avatarUrl ? (
|
|
||||||
<img
|
|
||||||
src={avatarUrl}
|
|
||||||
alt={displayName}
|
|
||||||
className="w-12 h-12 rounded-full object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
|
|
||||||
<span className="text-white font-bold text-lg">
|
|
||||||
{displayName.charAt(0).toUpperCase()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="font-bold text-gray-900">
|
|
||||||
{displayName}
|
|
||||||
</span>
|
|
||||||
<svg className="w-5 h-5 text-blue-500" 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>
|
|
||||||
{username && (
|
|
||||||
<span className="text-sm text-gray-500">@{username}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 본문 */}
|
|
||||||
<div className="p-5">
|
|
||||||
<p className="text-gray-900 text-[17px] leading-relaxed whitespace-pre-wrap">
|
|
||||||
{decodeHtmlEntities(schedule.description || schedule.title)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 이미지 */}
|
|
||||||
{schedule.image_url && (
|
|
||||||
<div className="px-5 pb-3">
|
|
||||||
<img
|
|
||||||
src={schedule.image_url}
|
|
||||||
alt=""
|
|
||||||
className="w-full rounded-2xl border border-gray-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 날짜/시간 */}
|
|
||||||
<div className="px-5 py-4 border-t border-gray-100">
|
|
||||||
<span className="text-gray-500 text-[15px]">
|
|
||||||
{formatXDateTime(schedule.date, schedule.time)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* X에서 보기 버튼 */}
|
|
||||||
<div className="px-5 py-4 border-t border-gray-100 bg-gray-50/50">
|
|
||||||
<a
|
|
||||||
href={schedule.source_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 hover: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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 카카오맵 컴포넌트
|
|
||||||
function KakaoMap({ lat, lng, name }) {
|
|
||||||
const mapRef = useRef(null);
|
|
||||||
const [mapLoaded, setMapLoaded] = useState(false);
|
|
||||||
const [mapError, setMapError] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// API 키가 없으면 에러
|
|
||||||
if (!KAKAO_MAP_KEY) {
|
|
||||||
setMapError(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 카카오맵 SDK 동적 로드
|
|
||||||
if (!window.kakao?.maps) {
|
|
||||||
const script = document.createElement('script');
|
|
||||||
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_KEY}&autoload=false`;
|
|
||||||
script.onload = () => {
|
|
||||||
window.kakao.maps.load(() => setMapLoaded(true));
|
|
||||||
};
|
|
||||||
script.onerror = () => setMapError(true);
|
|
||||||
document.head.appendChild(script);
|
|
||||||
} else {
|
|
||||||
setMapLoaded(true);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!mapLoaded || !mapRef.current || mapError) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const position = new window.kakao.maps.LatLng(lat, lng);
|
|
||||||
const map = new window.kakao.maps.Map(mapRef.current, {
|
|
||||||
center: position,
|
|
||||||
level: 3,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 마커 추가
|
|
||||||
const marker = new window.kakao.maps.Marker({
|
|
||||||
position,
|
|
||||||
map,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 인포윈도우 추가
|
|
||||||
if (name) {
|
|
||||||
const infowindow = new window.kakao.maps.InfoWindow({
|
|
||||||
content: `<div style="padding:8px 12px;font-size:13px;font-weight:500;">${name}</div>`,
|
|
||||||
});
|
|
||||||
infowindow.open(map, marker);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setMapError(true);
|
|
||||||
}
|
|
||||||
}, [mapLoaded, lat, lng, name, mapError]);
|
|
||||||
|
|
||||||
// 에러 시 정적 이미지 또는 링크로 대체
|
|
||||||
if (mapError) {
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
href={`https://map.kakao.com/link/to/${encodeURIComponent(name)},${lat},${lng}`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="group flex h-full w-full items-center justify-center bg-white/80 text-center backdrop-blur transition-all hover:bg-white"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Navigation size={32} className="mx-auto text-gray-400 group-hover:text-primary transition-colors mb-3" />
|
|
||||||
<p className="text-gray-700 font-semibold">{name}</p>
|
|
||||||
<p className="text-sm text-gray-400 mt-1">길찾기 열기</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={mapRef}
|
|
||||||
className="h-full w-full"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 콘서트 섹션 컴포넌트
|
|
||||||
function ConcertSection({ schedule }) {
|
|
||||||
// 현재 선택된 회차 ID (내부 state로 관리 - URL 변경 없음)
|
|
||||||
const [selectedDateId, setSelectedDateId] = useState(schedule.id);
|
|
||||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
||||||
const dropdownRef = useRef(null);
|
|
||||||
const dropdownListRef = useRef(null);
|
|
||||||
|
|
||||||
// 표시할 데이터 state (변경된 부분만 업데이트)
|
|
||||||
const [displayData, setDisplayData] = useState({
|
|
||||||
posterUrl: schedule.images?.[0] || null,
|
|
||||||
title: schedule.title,
|
|
||||||
date: schedule.date,
|
|
||||||
time: schedule.time,
|
|
||||||
locationName: schedule.location_name,
|
|
||||||
locationAddress: schedule.location_address,
|
|
||||||
locationLat: schedule.location_lat,
|
|
||||||
locationLng: schedule.location_lng,
|
|
||||||
description: schedule.description,
|
|
||||||
sourceUrl: schedule.source_url,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 선택된 회차 데이터 조회
|
|
||||||
const { data: selectedSchedule } = useQuery({
|
|
||||||
queryKey: ['schedule', selectedDateId],
|
|
||||||
queryFn: () => getSchedule(selectedDateId),
|
|
||||||
placeholderData: keepPreviousData,
|
|
||||||
enabled: selectedDateId !== schedule.id,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 데이터 비교 후 변경된 부분만 업데이트
|
|
||||||
useEffect(() => {
|
|
||||||
const newData = selectedDateId === schedule.id ? schedule : selectedSchedule;
|
|
||||||
if (!newData) return;
|
|
||||||
|
|
||||||
setDisplayData(prev => {
|
|
||||||
const updates = {};
|
|
||||||
const newPosterUrl = newData.images?.[0] || null;
|
|
||||||
|
|
||||||
if (prev.posterUrl !== newPosterUrl) updates.posterUrl = newPosterUrl;
|
|
||||||
if (prev.title !== newData.title) updates.title = newData.title;
|
|
||||||
if (prev.date !== newData.date) updates.date = newData.date;
|
|
||||||
if (prev.time !== newData.time) updates.time = newData.time;
|
|
||||||
if (prev.locationName !== newData.location_name) updates.locationName = newData.location_name;
|
|
||||||
if (prev.locationAddress !== newData.location_address) updates.locationAddress = newData.location_address;
|
|
||||||
if (prev.locationLat !== newData.location_lat) updates.locationLat = newData.location_lat;
|
|
||||||
if (prev.locationLng !== newData.location_lng) updates.locationLng = newData.location_lng;
|
|
||||||
if (prev.description !== newData.description) updates.description = newData.description;
|
|
||||||
if (prev.sourceUrl !== newData.source_url) updates.sourceUrl = newData.source_url;
|
|
||||||
|
|
||||||
if (Object.keys(updates).length > 0) {
|
|
||||||
return { ...prev, ...updates };
|
|
||||||
}
|
|
||||||
return prev;
|
|
||||||
});
|
|
||||||
}, [selectedDateId, schedule, selectedSchedule]);
|
|
||||||
|
|
||||||
// 드롭다운 외부 클릭 감지
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClickOutside = (event) => {
|
|
||||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
||||||
setIsDropdownOpen(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener('mousedown', handleClickOutside);
|
|
||||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 드롭다운 열릴 때 선택된 항목으로 자동 스크롤
|
|
||||||
useEffect(() => {
|
|
||||||
if (isDropdownOpen && dropdownListRef.current) {
|
|
||||||
const selectedElement = dropdownListRef.current.querySelector('[data-selected="true"]');
|
|
||||||
if (selectedElement) {
|
|
||||||
// 약간의 지연 후 스크롤 (애니메이션 후)
|
|
||||||
setTimeout(() => {
|
|
||||||
selectedElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
|
||||||
}, 50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [isDropdownOpen]);
|
|
||||||
|
|
||||||
const relatedDates = schedule.related_dates || [];
|
|
||||||
const hasMultipleDates = relatedDates.length > 1;
|
|
||||||
const hasLocation = displayData.locationLat && displayData.locationLng;
|
|
||||||
const hasPoster = !!displayData.posterUrl;
|
|
||||||
const hasDescription = !!displayData.description;
|
|
||||||
|
|
||||||
// 현재 선택된 회차 인덱스
|
|
||||||
const selectedIndex = relatedDates.findIndex(d => d.id === selectedDateId);
|
|
||||||
const selectedDisplayIndex = selectedIndex >= 0 ? selectedIndex + 1 : 1;
|
|
||||||
|
|
||||||
// 회차 선택 핸들러
|
|
||||||
const handleSelectDate = (id) => {
|
|
||||||
setSelectedDateId(id);
|
|
||||||
setIsDropdownOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 짧은 날짜 포맷팅 (회차 목록용)
|
|
||||||
const formatShortDate = (dateStr, timeStr) => {
|
|
||||||
const date = new Date(dateStr);
|
|
||||||
const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
|
|
||||||
const month = date.getMonth() + 1;
|
|
||||||
const day = date.getDate();
|
|
||||||
const weekday = dayNames[date.getDay()];
|
|
||||||
|
|
||||||
let result = `${month}/${day} (${weekday})`;
|
|
||||||
if (timeStr) {
|
|
||||||
result += ` ${timeStr.slice(0, 5)}`;
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* ========== 히어로 섹션 ========== */}
|
|
||||||
<motion.section
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
className="relative rounded-3xl overflow-visible"
|
|
||||||
>
|
|
||||||
{/* 배경 레이어 - 포스터 확대 + 블러 */}
|
|
||||||
<div className="absolute inset-0 rounded-3xl overflow-hidden">
|
|
||||||
{hasPoster ? (
|
|
||||||
<>
|
|
||||||
<img
|
|
||||||
src={displayData.posterUrl}
|
|
||||||
alt=""
|
|
||||||
className="w-full h-full object-cover scale-125 blur-xl"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-black/30" />
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-primary via-primary/90 to-primary/70" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 메인 콘텐츠 */}
|
|
||||||
<div className="relative z-10 p-10">
|
|
||||||
<div className="flex items-start gap-10">
|
|
||||||
{/* 포스터 */}
|
|
||||||
{hasPoster && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.5 }}
|
|
||||||
className="flex-shrink-0"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={displayData.posterUrl}
|
|
||||||
alt={displayData.title}
|
|
||||||
className="w-52 h-72 object-cover rounded-2xl shadow-2xl"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 제목 및 회차 선택 */}
|
|
||||||
<div className="flex-1 min-w-0 pt-4">
|
|
||||||
{/* 제목 */}
|
|
||||||
<motion.h1
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.1 }}
|
|
||||||
className="text-3xl font-bold text-white leading-tight mb-6"
|
|
||||||
>
|
|
||||||
{decodeHtmlEntities(displayData.title)}
|
|
||||||
</motion.h1>
|
|
||||||
|
|
||||||
{/* 회차 선택 드롭다운 */}
|
|
||||||
{hasMultipleDates && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.2 }}
|
|
||||||
ref={dropdownRef}
|
|
||||||
className="relative inline-block"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
|
||||||
className="group flex items-center gap-4 px-5 py-3.5 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all border border-gray-100"
|
|
||||||
>
|
|
||||||
{/* 회차 뱃지 */}
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
|
||||||
<span className="text-xs font-bold text-white">{selectedDisplayIndex}</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs font-medium text-gray-400">회차</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 구분선 */}
|
|
||||||
<div className="w-px h-6 bg-gray-200" />
|
|
||||||
|
|
||||||
{/* 날짜 정보 */}
|
|
||||||
<div className="text-left">
|
|
||||||
<div className="text-sm font-semibold text-gray-800">
|
|
||||||
{formatShortDate(displayData.date, displayData.time)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ChevronDown
|
|
||||||
size={18}
|
|
||||||
className={`text-gray-400 transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<AnimatePresence>
|
|
||||||
{isDropdownOpen && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: -10, scale: 0.95 }}
|
|
||||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
||||||
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
|
||||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
|
||||||
className="absolute top-full left-0 mt-3 bg-white rounded-2xl shadow-2xl z-[100] w-80 overflow-hidden border border-gray-100"
|
|
||||||
>
|
|
||||||
{/* 드롭다운 헤더 */}
|
|
||||||
<div className="px-4 py-3 bg-gray-50 border-b border-gray-100">
|
|
||||||
<span className="text-sm font-semibold text-gray-600">공연 일정 선택</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ref={dropdownListRef} className="py-2 max-h-72 overflow-y-auto">
|
|
||||||
{relatedDates.map((item, index) => {
|
|
||||||
const isSelected = item.id === selectedDateId;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={item.id}
|
|
||||||
data-selected={isSelected}
|
|
||||||
onClick={() => handleSelectDate(item.id)}
|
|
||||||
className={`w-full flex items-center gap-4 px-4 py-3.5 transition-all ${
|
|
||||||
isSelected
|
|
||||||
? 'bg-primary/5'
|
|
||||||
: 'hover:bg-gray-50'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{/* 회차 번호 */}
|
|
||||||
<div className={`w-9 h-9 rounded-xl flex items-center justify-center text-sm font-bold transition-colors ${
|
|
||||||
isSelected
|
|
||||||
? 'bg-primary text-white'
|
|
||||||
: 'bg-gray-100 text-gray-500'
|
|
||||||
}`}>
|
|
||||||
{index + 1}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 날짜 정보 */}
|
|
||||||
<div className="flex-1 text-left">
|
|
||||||
<div className={`font-medium ${
|
|
||||||
isSelected ? 'text-primary' : 'text-gray-800'
|
|
||||||
}`}>
|
|
||||||
{formatShortDate(item.date, item.time)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 체크 표시 */}
|
|
||||||
{isSelected && (
|
|
||||||
<div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center">
|
|
||||||
<Check size={14} className="text-white" strokeWidth={3} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.section>
|
|
||||||
|
|
||||||
{/* ========== 장소 정보 카드 ========== */}
|
|
||||||
{displayData.locationName && (
|
|
||||||
<motion.section
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.3 }}
|
|
||||||
className="bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 overflow-hidden"
|
|
||||||
>
|
|
||||||
{/* 헤더 */}
|
|
||||||
<div className="p-6 border-b border-gray-100">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
{/* 장소 아이콘 */}
|
|
||||||
<div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center">
|
|
||||||
<MapPin size={24} className="text-gray-600" />
|
|
||||||
</div>
|
|
||||||
{/* 텍스트 */}
|
|
||||||
<div>
|
|
||||||
<h2 className="text-lg font-bold text-gray-900">{displayData.locationName}</h2>
|
|
||||||
{displayData.locationAddress && (
|
|
||||||
<p className="text-sm text-gray-500 mt-0.5">{displayData.locationAddress}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 길찾기 버튼 - 카카오맵(국내) / 구글맵(해외) */}
|
|
||||||
<a
|
|
||||||
href={hasLocation
|
|
||||||
? `https://map.kakao.com/link/to/${encodeURIComponent(displayData.locationName)},${displayData.locationLat},${displayData.locationLng}`
|
|
||||||
: `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(displayData.locationAddress || displayData.locationName)}`
|
|
||||||
}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="flex items-center gap-2 px-4 py-2.5 text-white text-sm font-semibold rounded-lg transition-colors"
|
|
||||||
style={{
|
|
||||||
backgroundColor: hasLocation ? '#0079f4' : '#4285F4'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Navigation size={16} />
|
|
||||||
길찾기
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 지도 - 높이 2배 */}
|
|
||||||
<div className="h-[32rem]">
|
|
||||||
{hasLocation ? (
|
|
||||||
<KakaoMap
|
|
||||||
lat={parseFloat(displayData.locationLat)}
|
|
||||||
lng={parseFloat(displayData.locationLng)}
|
|
||||||
name={displayData.locationName}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<iframe
|
|
||||||
src={`https://maps.google.com/maps?q=${encodeURIComponent(displayData.locationAddress || displayData.locationName)}&output=embed&hl=ko`}
|
|
||||||
className="h-full w-full border-0"
|
|
||||||
loading="lazy"
|
|
||||||
referrerPolicy="no-referrer-when-downgrade"
|
|
||||||
title="Google Maps"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</motion.section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ========== 공연 정보 카드 ========== */}
|
|
||||||
{hasDescription && (
|
|
||||||
<motion.section
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.4 }}
|
|
||||||
className="bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 p-6"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3 mb-4">
|
|
||||||
<div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center">
|
|
||||||
<svg className="w-5 h-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-lg font-bold text-gray-900">공연 정보</h2>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-600 leading-relaxed whitespace-pre-wrap">
|
|
||||||
{decodeHtmlEntities(displayData.description)}
|
|
||||||
</p>
|
|
||||||
</motion.section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ========== 외부 링크 버튼 ========== */}
|
|
||||||
{displayData.sourceUrl && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.5 }}
|
|
||||||
className="flex justify-center"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href={displayData.sourceUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white rounded-xl font-semibold hover:bg-gray-800 transition-colors"
|
|
||||||
>
|
|
||||||
<ExternalLink size={18} />
|
|
||||||
티켓 예매 및 상세 정보
|
|
||||||
</a>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 기본 섹션 컴포넌트 (다른 카테고리용)
|
|
||||||
function DefaultSection({ schedule }) {
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* 제목 */}
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900 leading-relaxed">
|
|
||||||
{decodeHtmlEntities(schedule.title)}
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{/* 메타 정보 */}
|
|
||||||
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Calendar size={16} />
|
|
||||||
<span>{formatFullDate(schedule.date)}</span>
|
|
||||||
</div>
|
|
||||||
{schedule.time && (
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Clock size={16} />
|
|
||||||
<span>{formatTime(schedule.time)}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 설명 */}
|
|
||||||
{schedule.description && (
|
|
||||||
<div className="bg-gray-50 rounded-2xl p-6">
|
|
||||||
<p className="text-gray-700 whitespace-pre-wrap leading-relaxed">
|
|
||||||
{decodeHtmlEntities(schedule.description)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 원본 링크 */}
|
|
||||||
{schedule.source_url && (
|
|
||||||
<a
|
|
||||||
href={schedule.source_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 hover:bg-gray-800 text-white rounded-xl font-medium transition-colors"
|
|
||||||
>
|
|
||||||
<ExternalLink size={16} />
|
|
||||||
원본 보기
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ScheduleDetail() {
|
function ScheduleDetail() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
|
|
||||||
const { data: schedule, isLoading, error, isFetching } = useQuery({
|
const { data: schedule, isLoading, error } = useQuery({
|
||||||
queryKey: ['schedule', id],
|
queryKey: ['schedule', id],
|
||||||
queryFn: () => getSchedule(id),
|
queryFn: () => getSchedule(id),
|
||||||
placeholderData: keepPreviousData,
|
placeholderData: keepPreviousData,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,389 @@
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { useQuery, keepPreviousData } from '@tanstack/react-query';
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { ExternalLink, ChevronDown, Check, MapPin, Navigation } from 'lucide-react';
|
||||||
|
import { getSchedule } from '../../../../api/public/schedules';
|
||||||
|
import { decodeHtmlEntities } from './utils';
|
||||||
|
import KakaoMap from './KakaoMap';
|
||||||
|
|
||||||
|
// 콘서트 섹션 컴포넌트
|
||||||
|
function ConcertSection({ schedule }) {
|
||||||
|
// 현재 선택된 회차 ID (내부 state로 관리 - URL 변경 없음)
|
||||||
|
const [selectedDateId, setSelectedDateId] = useState(schedule.id);
|
||||||
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||||
|
const dropdownRef = useRef(null);
|
||||||
|
const dropdownListRef = useRef(null);
|
||||||
|
|
||||||
|
// 표시할 데이터 state (변경된 부분만 업데이트)
|
||||||
|
const [displayData, setDisplayData] = useState({
|
||||||
|
posterUrl: schedule.images?.[0] || null,
|
||||||
|
title: schedule.title,
|
||||||
|
date: schedule.date,
|
||||||
|
time: schedule.time,
|
||||||
|
locationName: schedule.location_name,
|
||||||
|
locationAddress: schedule.location_address,
|
||||||
|
locationLat: schedule.location_lat,
|
||||||
|
locationLng: schedule.location_lng,
|
||||||
|
description: schedule.description,
|
||||||
|
sourceUrl: schedule.source_url,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 선택된 회차 데이터 조회
|
||||||
|
const { data: selectedSchedule } = useQuery({
|
||||||
|
queryKey: ['schedule', selectedDateId],
|
||||||
|
queryFn: () => getSchedule(selectedDateId),
|
||||||
|
placeholderData: keepPreviousData,
|
||||||
|
enabled: selectedDateId !== schedule.id,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 데이터 비교 후 변경된 부분만 업데이트
|
||||||
|
useEffect(() => {
|
||||||
|
const newData = selectedDateId === schedule.id ? schedule : selectedSchedule;
|
||||||
|
if (!newData) return;
|
||||||
|
|
||||||
|
setDisplayData(prev => {
|
||||||
|
const updates = {};
|
||||||
|
const newPosterUrl = newData.images?.[0] || null;
|
||||||
|
|
||||||
|
if (prev.posterUrl !== newPosterUrl) updates.posterUrl = newPosterUrl;
|
||||||
|
if (prev.title !== newData.title) updates.title = newData.title;
|
||||||
|
if (prev.date !== newData.date) updates.date = newData.date;
|
||||||
|
if (prev.time !== newData.time) updates.time = newData.time;
|
||||||
|
if (prev.locationName !== newData.location_name) updates.locationName = newData.location_name;
|
||||||
|
if (prev.locationAddress !== newData.location_address) updates.locationAddress = newData.location_address;
|
||||||
|
if (prev.locationLat !== newData.location_lat) updates.locationLat = newData.location_lat;
|
||||||
|
if (prev.locationLng !== newData.location_lng) updates.locationLng = newData.location_lng;
|
||||||
|
if (prev.description !== newData.description) updates.description = newData.description;
|
||||||
|
if (prev.sourceUrl !== newData.source_url) updates.sourceUrl = newData.source_url;
|
||||||
|
|
||||||
|
if (Object.keys(updates).length > 0) {
|
||||||
|
return { ...prev, ...updates };
|
||||||
|
}
|
||||||
|
return prev;
|
||||||
|
});
|
||||||
|
}, [selectedDateId, schedule, selectedSchedule]);
|
||||||
|
|
||||||
|
// 드롭다운 외부 클릭 감지
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event) => {
|
||||||
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||||
|
setIsDropdownOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 드롭다운 열릴 때 선택된 항목으로 자동 스크롤
|
||||||
|
useEffect(() => {
|
||||||
|
if (isDropdownOpen && dropdownListRef.current) {
|
||||||
|
const selectedElement = dropdownListRef.current.querySelector('[data-selected="true"]');
|
||||||
|
if (selectedElement) {
|
||||||
|
// 약간의 지연 후 스크롤 (애니메이션 후)
|
||||||
|
setTimeout(() => {
|
||||||
|
selectedElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isDropdownOpen]);
|
||||||
|
|
||||||
|
const relatedDates = schedule.related_dates || [];
|
||||||
|
const hasMultipleDates = relatedDates.length > 1;
|
||||||
|
const hasLocation = displayData.locationLat && displayData.locationLng;
|
||||||
|
const hasPoster = !!displayData.posterUrl;
|
||||||
|
const hasDescription = !!displayData.description;
|
||||||
|
|
||||||
|
// 현재 선택된 회차 인덱스
|
||||||
|
const selectedIndex = relatedDates.findIndex(d => d.id === selectedDateId);
|
||||||
|
const selectedDisplayIndex = selectedIndex >= 0 ? selectedIndex + 1 : 1;
|
||||||
|
|
||||||
|
// 회차 선택 핸들러
|
||||||
|
const handleSelectDate = (id) => {
|
||||||
|
setSelectedDateId(id);
|
||||||
|
setIsDropdownOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 짧은 날짜 포맷팅 (회차 목록용)
|
||||||
|
const formatShortDate = (dateStr, timeStr) => {
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
|
||||||
|
const month = date.getMonth() + 1;
|
||||||
|
const day = date.getDate();
|
||||||
|
const weekday = dayNames[date.getDay()];
|
||||||
|
|
||||||
|
let result = `${month}/${day} (${weekday})`;
|
||||||
|
if (timeStr) {
|
||||||
|
result += ` ${timeStr.slice(0, 5)}`;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* ========== 히어로 섹션 ========== */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="relative rounded-3xl overflow-visible"
|
||||||
|
>
|
||||||
|
{/* 배경 레이어 - 포스터 확대 + 블러 */}
|
||||||
|
<div className="absolute inset-0 rounded-3xl overflow-hidden">
|
||||||
|
{hasPoster ? (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
src={displayData.posterUrl}
|
||||||
|
alt=""
|
||||||
|
className="w-full h-full object-cover scale-125 blur-xl"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-black/30" />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-primary via-primary/90 to-primary/70" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<div className="relative z-10 p-10">
|
||||||
|
<div className="flex items-start gap-10">
|
||||||
|
{/* 포스터 */}
|
||||||
|
{hasPoster && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="flex-shrink-0"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={displayData.posterUrl}
|
||||||
|
alt={displayData.title}
|
||||||
|
className="w-52 h-72 object-cover rounded-2xl shadow-2xl"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 제목 및 회차 선택 */}
|
||||||
|
<div className="flex-1 min-w-0 pt-4">
|
||||||
|
{/* 제목 */}
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="text-3xl font-bold text-white leading-tight mb-6"
|
||||||
|
>
|
||||||
|
{decodeHtmlEntities(displayData.title)}
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
{/* 회차 선택 드롭다운 */}
|
||||||
|
{hasMultipleDates && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
ref={dropdownRef}
|
||||||
|
className="relative inline-block"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||||
|
className="group flex items-center gap-4 px-5 py-3.5 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all border border-gray-100"
|
||||||
|
>
|
||||||
|
{/* 회차 뱃지 */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-xs font-bold text-white">{selectedDisplayIndex}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-medium text-gray-400">회차</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 구분선 */}
|
||||||
|
<div className="w-px h-6 bg-gray-200" />
|
||||||
|
|
||||||
|
{/* 날짜 정보 */}
|
||||||
|
<div className="text-left">
|
||||||
|
<div className="text-sm font-semibold text-gray-800">
|
||||||
|
{formatShortDate(displayData.date, displayData.time)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ChevronDown
|
||||||
|
size={18}
|
||||||
|
className={`text-gray-400 transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{isDropdownOpen && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||||
|
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||||
|
className="absolute top-full left-0 mt-3 bg-white rounded-2xl shadow-2xl z-[100] w-80 overflow-hidden border border-gray-100"
|
||||||
|
>
|
||||||
|
{/* 드롭다운 헤더 */}
|
||||||
|
<div className="px-4 py-3 bg-gray-50 border-b border-gray-100">
|
||||||
|
<span className="text-sm font-semibold text-gray-600">공연 일정 선택</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div ref={dropdownListRef} className="py-2 max-h-72 overflow-y-auto">
|
||||||
|
{relatedDates.map((item, index) => {
|
||||||
|
const isSelected = item.id === selectedDateId;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
data-selected={isSelected}
|
||||||
|
onClick={() => handleSelectDate(item.id)}
|
||||||
|
className={`w-full flex items-center gap-4 px-4 py-3.5 transition-all ${
|
||||||
|
isSelected
|
||||||
|
? 'bg-primary/5'
|
||||||
|
: 'hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* 회차 번호 */}
|
||||||
|
<div className={`w-9 h-9 rounded-xl flex items-center justify-center text-sm font-bold transition-colors ${
|
||||||
|
isSelected
|
||||||
|
? 'bg-primary text-white'
|
||||||
|
: 'bg-gray-100 text-gray-500'
|
||||||
|
}`}>
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 날짜 정보 */}
|
||||||
|
<div className="flex-1 text-left">
|
||||||
|
<div className={`font-medium ${
|
||||||
|
isSelected ? 'text-primary' : 'text-gray-800'
|
||||||
|
}`}>
|
||||||
|
{formatShortDate(item.date, item.time)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 체크 표시 */}
|
||||||
|
{isSelected && (
|
||||||
|
<div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center">
|
||||||
|
<Check size={14} className="text-white" strokeWidth={3} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* ========== 장소 정보 카드 ========== */}
|
||||||
|
{displayData.locationName && (
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
className="bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="p-6 border-b border-gray-100">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{/* 장소 아이콘 */}
|
||||||
|
<div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||||
|
<MapPin size={24} className="text-gray-600" />
|
||||||
|
</div>
|
||||||
|
{/* 텍스트 */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-bold text-gray-900">{displayData.locationName}</h2>
|
||||||
|
{displayData.locationAddress && (
|
||||||
|
<p className="text-sm text-gray-500 mt-0.5">{displayData.locationAddress}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 길찾기 버튼 - 카카오맵(국내) / 구글맵(해외) */}
|
||||||
|
<a
|
||||||
|
href={hasLocation
|
||||||
|
? `https://map.kakao.com/link/to/${encodeURIComponent(displayData.locationName)},${displayData.locationLat},${displayData.locationLng}`
|
||||||
|
: `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(displayData.locationAddress || displayData.locationName)}`
|
||||||
|
}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 px-4 py-2.5 text-white text-sm font-semibold rounded-lg transition-colors"
|
||||||
|
style={{
|
||||||
|
backgroundColor: hasLocation ? '#0079f4' : '#4285F4'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Navigation size={16} />
|
||||||
|
길찾기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 지도 - 높이 2배 */}
|
||||||
|
<div className="h-[32rem]">
|
||||||
|
{hasLocation ? (
|
||||||
|
<KakaoMap
|
||||||
|
lat={parseFloat(displayData.locationLat)}
|
||||||
|
lng={parseFloat(displayData.locationLng)}
|
||||||
|
name={displayData.locationName}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<iframe
|
||||||
|
src={`https://maps.google.com/maps?q=${encodeURIComponent(displayData.locationAddress || displayData.locationName)}&output=embed&hl=ko`}
|
||||||
|
className="h-full w-full border-0"
|
||||||
|
loading="lazy"
|
||||||
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
|
title="Google Maps"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ========== 공연 정보 카드 ========== */}
|
||||||
|
{hasDescription && (
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.4 }}
|
||||||
|
className="bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 p-6"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center">
|
||||||
|
<svg className="w-5 h-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg font-bold text-gray-900">공연 정보</h2>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 leading-relaxed whitespace-pre-wrap">
|
||||||
|
{decodeHtmlEntities(displayData.description)}
|
||||||
|
</p>
|
||||||
|
</motion.section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ========== 외부 링크 버튼 ========== */}
|
||||||
|
{displayData.sourceUrl && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
className="flex justify-center"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={displayData.sourceUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white rounded-xl font-semibold hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<ExternalLink size={18} />
|
||||||
|
티켓 예매 및 상세 정보
|
||||||
|
</a>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConcertSection;
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import { Calendar, Clock, ExternalLink } from 'lucide-react';
|
||||||
|
import { decodeHtmlEntities, formatFullDate, formatTime } from './utils';
|
||||||
|
|
||||||
|
// 기본 섹션 컴포넌트 (다른 카테고리용)
|
||||||
|
function DefaultSection({ schedule }) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* 제목 */}
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 leading-relaxed">
|
||||||
|
{decodeHtmlEntities(schedule.title)}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* 메타 정보 */}
|
||||||
|
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<Calendar size={16} />
|
||||||
|
<span>{formatFullDate(schedule.date)}</span>
|
||||||
|
</div>
|
||||||
|
{schedule.time && (
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<Clock size={16} />
|
||||||
|
<span>{formatTime(schedule.time)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 설명 */}
|
||||||
|
{schedule.description && (
|
||||||
|
<div className="bg-gray-50 rounded-2xl p-6">
|
||||||
|
<p className="text-gray-700 whitespace-pre-wrap leading-relaxed">
|
||||||
|
{decodeHtmlEntities(schedule.description)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 원본 링크 */}
|
||||||
|
{schedule.source_url && (
|
||||||
|
<a
|
||||||
|
href={schedule.source_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 hover:bg-gray-800 text-white rounded-xl font-medium transition-colors"
|
||||||
|
>
|
||||||
|
<ExternalLink size={16} />
|
||||||
|
원본 보기
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DefaultSection;
|
||||||
88
frontend/src/pages/pc/public/schedule-sections/KakaoMap.jsx
Normal file
88
frontend/src/pages/pc/public/schedule-sections/KakaoMap.jsx
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { Navigation } from 'lucide-react';
|
||||||
|
|
||||||
|
// 카카오맵 SDK 키
|
||||||
|
const KAKAO_MAP_KEY = import.meta.env.VITE_KAKAO_JS_KEY;
|
||||||
|
|
||||||
|
// 카카오맵 컴포넌트
|
||||||
|
function KakaoMap({ lat, lng, name }) {
|
||||||
|
const mapRef = useRef(null);
|
||||||
|
const [mapLoaded, setMapLoaded] = useState(false);
|
||||||
|
const [mapError, setMapError] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// API 키가 없으면 에러
|
||||||
|
if (!KAKAO_MAP_KEY) {
|
||||||
|
setMapError(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 카카오맵 SDK 동적 로드
|
||||||
|
if (!window.kakao?.maps) {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_KEY}&autoload=false`;
|
||||||
|
script.onload = () => {
|
||||||
|
window.kakao.maps.load(() => setMapLoaded(true));
|
||||||
|
};
|
||||||
|
script.onerror = () => setMapError(true);
|
||||||
|
document.head.appendChild(script);
|
||||||
|
} else {
|
||||||
|
setMapLoaded(true);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!mapLoaded || !mapRef.current || mapError) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const position = new window.kakao.maps.LatLng(lat, lng);
|
||||||
|
const map = new window.kakao.maps.Map(mapRef.current, {
|
||||||
|
center: position,
|
||||||
|
level: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 마커 추가
|
||||||
|
const marker = new window.kakao.maps.Marker({
|
||||||
|
position,
|
||||||
|
map,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 인포윈도우 추가
|
||||||
|
if (name) {
|
||||||
|
const infowindow = new window.kakao.maps.InfoWindow({
|
||||||
|
content: `<div style="padding:8px 12px;font-size:13px;font-weight:500;">${name}</div>`,
|
||||||
|
});
|
||||||
|
infowindow.open(map, marker);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setMapError(true);
|
||||||
|
}
|
||||||
|
}, [mapLoaded, lat, lng, name, mapError]);
|
||||||
|
|
||||||
|
// 에러 시 정적 이미지 또는 링크로 대체
|
||||||
|
if (mapError) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={`https://map.kakao.com/link/to/${encodeURIComponent(name)},${lat},${lng}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group flex h-full w-full items-center justify-center bg-white/80 text-center backdrop-blur transition-all hover:bg-white"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Navigation size={32} className="mx-auto text-gray-400 group-hover:text-primary transition-colors mb-3" />
|
||||||
|
<p className="text-gray-700 font-semibold">{name}</p>
|
||||||
|
<p className="text-sm text-gray-400 mt-1">길찾기 열기</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={mapRef}
|
||||||
|
className="h-full w-full"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default KakaoMap;
|
||||||
114
frontend/src/pages/pc/public/schedule-sections/XSection.jsx
Normal file
114
frontend/src/pages/pc/public/schedule-sections/XSection.jsx
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { getXProfile } from '../../../../api/public/schedules';
|
||||||
|
import { decodeHtmlEntities, formatXDateTime } from './utils';
|
||||||
|
|
||||||
|
// X URL에서 username 추출
|
||||||
|
const extractXUsername = (url) => {
|
||||||
|
if (!url) return null;
|
||||||
|
const match = url.match(/(?:twitter\.com|x\.com)\/([^/]+)/);
|
||||||
|
return match ? match[1] : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// X(트위터) 섹션 컴포넌트
|
||||||
|
function XSection({ schedule }) {
|
||||||
|
const username = extractXUsername(schedule.source_url);
|
||||||
|
|
||||||
|
// 프로필 정보 조회
|
||||||
|
const { data: profile } = useQuery({
|
||||||
|
queryKey: ['x-profile', username],
|
||||||
|
queryFn: () => getXProfile(username),
|
||||||
|
enabled: !!username,
|
||||||
|
staleTime: 1000 * 60 * 60, // 1시간
|
||||||
|
});
|
||||||
|
|
||||||
|
const displayName = profile?.displayName || schedule.source_name || username || 'Unknown';
|
||||||
|
const avatarUrl = profile?.avatarUrl;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
{/* X 스타일 카드 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="bg-white rounded-2xl border border-gray-200 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="p-5 pb-0">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* 프로필 이미지 */}
|
||||||
|
{avatarUrl ? (
|
||||||
|
<img
|
||||||
|
src={avatarUrl}
|
||||||
|
alt={displayName}
|
||||||
|
className="w-12 h-12 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
|
||||||
|
<span className="text-white font-bold text-lg">
|
||||||
|
{displayName.charAt(0).toUpperCase()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-bold text-gray-900">
|
||||||
|
{displayName}
|
||||||
|
</span>
|
||||||
|
<svg className="w-5 h-5 text-blue-500" 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>
|
||||||
|
{username && (
|
||||||
|
<span className="text-sm text-gray-500">@{username}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 본문 */}
|
||||||
|
<div className="p-5">
|
||||||
|
<p className="text-gray-900 text-[17px] leading-relaxed whitespace-pre-wrap">
|
||||||
|
{decodeHtmlEntities(schedule.description || schedule.title)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 이미지 */}
|
||||||
|
{schedule.image_url && (
|
||||||
|
<div className="px-5 pb-3">
|
||||||
|
<img
|
||||||
|
src={schedule.image_url}
|
||||||
|
alt=""
|
||||||
|
className="w-full rounded-2xl border border-gray-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 날짜/시간 */}
|
||||||
|
<div className="px-5 py-4 border-t border-gray-100">
|
||||||
|
<span className="text-gray-500 text-[15px]">
|
||||||
|
{formatXDateTime(schedule.date, schedule.time)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* X에서 보기 버튼 */}
|
||||||
|
<div className="px-5 py-4 border-t border-gray-100 bg-gray-50/50">
|
||||||
|
<a
|
||||||
|
href={schedule.source_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 hover: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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default XSection;
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Calendar, Clock, Link2 } from 'lucide-react';
|
||||||
|
import { decodeHtmlEntities, formatFullDate, formatTime } from './utils';
|
||||||
|
|
||||||
|
// 영상 정보 컴포넌트 (공통)
|
||||||
|
function VideoInfo({ schedule, isShorts }) {
|
||||||
|
const members = schedule.members || [];
|
||||||
|
const isFullGroup = members.length === 5;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`bg-gradient-to-br from-gray-50 to-gray-100/50 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 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>
|
||||||
|
</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 && (
|
||||||
|
<>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 멤버 목록 */}
|
||||||
|
{members.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2 mt-4">
|
||||||
|
{isFullGroup ? (
|
||||||
|
<span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||||
|
프로미스나인
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
members.map((member) => (
|
||||||
|
<span
|
||||||
|
key={member.id}
|
||||||
|
className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full"
|
||||||
|
>
|
||||||
|
{member.name}
|
||||||
|
</span>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 유튜브에서 보기 버튼 */}
|
||||||
|
<div className="mt-6 pt-5 border-t border-gray-200">
|
||||||
|
<a
|
||||||
|
href={schedule.source_url}
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 유튜브 비디오 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/');
|
||||||
|
|
||||||
|
if (!videoId) return null;
|
||||||
|
|
||||||
|
// 숏츠: 가로 레이아웃 (영상 + 정보)
|
||||||
|
if (isShorts) {
|
||||||
|
return (
|
||||||
|
<div className="flex gap-6 items-start">
|
||||||
|
{/* 영상 임베드 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.98 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="w-[420px] flex-shrink-0"
|
||||||
|
>
|
||||||
|
<div className="relative aspect-[9/16] bg-gray-900 rounded-2xl overflow-hidden shadow-2xl shadow-black/20">
|
||||||
|
<iframe
|
||||||
|
src={`https://www.youtube.com/embed/${videoId}?rel=0`}
|
||||||
|
title={schedule.title}
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
className="absolute inset-0 w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* 영상 정보 카드 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
<VideoInfo schedule={schedule} isShorts={true} />
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 일반 영상: 세로 레이아웃 (영상 위, 정보 아래)
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* 영상 임베드 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.98 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<div className="relative aspect-video bg-gray-900 rounded-2xl overflow-hidden shadow-2xl shadow-black/20">
|
||||||
|
<iframe
|
||||||
|
src={`https://www.youtube.com/embed/${videoId}?rel=0`}
|
||||||
|
title={schedule.title}
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
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 }}
|
||||||
|
>
|
||||||
|
<VideoInfo schedule={schedule} isShorts={false} />
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default YoutubeSection;
|
||||||
6
frontend/src/pages/pc/public/schedule-sections/index.js
Normal file
6
frontend/src/pages/pc/public/schedule-sections/index.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export { default as YoutubeSection } from "./YoutubeSection";
|
||||||
|
export { default as XSection } from "./XSection";
|
||||||
|
export { default as ConcertSection } from "./ConcertSection";
|
||||||
|
export { default as DefaultSection } from "./DefaultSection";
|
||||||
|
export { default as KakaoMap } from "./KakaoMap";
|
||||||
|
export * from "./utils";
|
||||||
56
frontend/src/pages/pc/public/schedule-sections/utils.js
Normal file
56
frontend/src/pages/pc/public/schedule-sections/utils.js
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
// HTML 엔티티 디코딩 함수
|
||||||
|
export const decodeHtmlEntities = (text) => {
|
||||||
|
if (!text) return "";
|
||||||
|
const textarea = document.createElement("textarea");
|
||||||
|
textarea.innerHTML = text;
|
||||||
|
return textarea.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 날짜 포맷팅
|
||||||
|
export const formatFullDate = (dateStr) => {
|
||||||
|
if (!dateStr) return "";
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
const dayNames = ["일", "월", "화", "수", "목", "금", "토"];
|
||||||
|
return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}. (${
|
||||||
|
dayNames[date.getDay()]
|
||||||
|
})`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 시간 포맷팅
|
||||||
|
export const formatTime = (timeStr) => {
|
||||||
|
if (!timeStr) return null;
|
||||||
|
return timeStr.slice(0, 5);
|
||||||
|
};
|
||||||
|
|
||||||
|
// X용 날짜/시간 포맷팅 (오후 2:30 · 2026년 1월 15일)
|
||||||
|
export const formatXDateTime = (dateStr, timeStr) => {
|
||||||
|
if (!dateStr) return "";
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = date.getMonth() + 1;
|
||||||
|
const day = date.getDate();
|
||||||
|
|
||||||
|
let result = `${year}년 ${month}월 ${day}일`;
|
||||||
|
|
||||||
|
if (timeStr) {
|
||||||
|
const [hours, minutes] = timeStr.split(":").map(Number);
|
||||||
|
const period = hours < 12 ? "오전" : "오후";
|
||||||
|
const hour12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
|
||||||
|
result = `${period} ${hour12}:${String(minutes).padStart(
|
||||||
|
2,
|
||||||
|
"0"
|
||||||
|
)} · ${result}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 카테고리 ID 상수
|
||||||
|
export const CATEGORY_ID = {
|
||||||
|
YOUTUBE: 2,
|
||||||
|
X: 3,
|
||||||
|
ALBUM: 4,
|
||||||
|
FANSIGN: 5,
|
||||||
|
CONCERT: 6,
|
||||||
|
TICKET: 7,
|
||||||
|
};
|
||||||
Loading…
Add table
Reference in a new issue