feat: 콘서트 상세 페이지 개선
- 같은 제목의 콘서트 일정을 모아서 회차별로 표시 - 현재 보고 있는 회차 강조 표시 - 카카오맵 SDK 키 수정 및 에러 처리 개선 - 길찾기 버튼 추가 - 회차 전환 시 부드러운 데이터 로딩 (keepPreviousData) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
79f3816cec
commit
611a20a8f0
3 changed files with 243 additions and 131 deletions
|
|
@ -155,15 +155,29 @@ router.get("/:id", async (req, res) => {
|
||||||
return res.status(404).json({ error: "일정을 찾을 수 없습니다." });
|
return res.status(404).json({ error: "일정을 찾을 수 없습니다." });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const schedule = schedules[0];
|
||||||
|
|
||||||
// 이미지 조회
|
// 이미지 조회
|
||||||
const [images] = await pool.query(
|
const [images] = await pool.query(
|
||||||
`SELECT image_url FROM schedule_images WHERE schedule_id = ? ORDER BY sort_order ASC`,
|
`SELECT image_url FROM schedule_images WHERE schedule_id = ? ORDER BY sort_order ASC`,
|
||||||
[id]
|
[id]
|
||||||
);
|
);
|
||||||
|
|
||||||
const schedule = schedules[0];
|
|
||||||
schedule.images = images.map((img) => img.image_url);
|
schedule.images = images.map((img) => img.image_url);
|
||||||
|
|
||||||
|
// 콘서트 카테고리(id=6)인 경우 같은 제목의 관련 일정들도 조회
|
||||||
|
if (schedule.category_id === 6) {
|
||||||
|
const [relatedSchedules] = await pool.query(
|
||||||
|
`
|
||||||
|
SELECT id, date, time
|
||||||
|
FROM schedules
|
||||||
|
WHERE title = ? AND category_id = 6
|
||||||
|
ORDER BY date ASC, time ASC
|
||||||
|
`,
|
||||||
|
[schedule.title]
|
||||||
|
);
|
||||||
|
schedule.related_dates = relatedSchedules;
|
||||||
|
}
|
||||||
|
|
||||||
res.json(schedule);
|
res.json(schedule);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("일정 조회 오류:", error);
|
console.error("일정 조회 오류:", error);
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
VITE_KAKAO_JS_KEY=5a626e19fbafb33b1eea26f162038ccb
|
VITE_KAKAO_JS_KEY=84b3c657c3de7d1ca89e1fa33455b8da
|
||||||
VITE_KAKAO_REST_KEY=e7a5516bf6cb1b398857789ee2ea6eea
|
VITE_KAKAO_REST_KEY=e7a5516bf6cb1b398857789ee2ea6eea
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import { useParams, Link } from 'react-router-dom';
|
import { useParams, Link } from 'react-router-dom';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery, keepPreviousData } from '@tanstack/react-query';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { Clock, Calendar, ExternalLink, ChevronRight, Link2, MapPin, Navigation } from 'lucide-react';
|
import { Clock, Calendar, ExternalLink, ChevronRight, Link2, MapPin, Navigation } from 'lucide-react';
|
||||||
import { getSchedule, getXProfile } from '../../../api/public/schedules';
|
import { getSchedule, getXProfile } from '../../../api/public/schedules';
|
||||||
|
|
||||||
// 카카오맵 SDK 키
|
// 카카오맵 SDK 키
|
||||||
const KAKAO_MAP_KEY = import.meta.env.VITE_KAKAO_MAP_KEY;
|
const KAKAO_MAP_KEY = import.meta.env.VITE_KAKAO_JS_KEY;
|
||||||
|
|
||||||
// 카테고리 ID 상수
|
// 카테고리 ID 상수
|
||||||
const CATEGORY_ID = {
|
const CATEGORY_ID = {
|
||||||
|
|
@ -317,8 +317,15 @@ function XSection({ schedule }) {
|
||||||
function KakaoMap({ lat, lng, name }) {
|
function KakaoMap({ lat, lng, name }) {
|
||||||
const mapRef = useRef(null);
|
const mapRef = useRef(null);
|
||||||
const [mapLoaded, setMapLoaded] = useState(false);
|
const [mapLoaded, setMapLoaded] = useState(false);
|
||||||
|
const [mapError, setMapError] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// API 키가 없으면 에러
|
||||||
|
if (!KAKAO_MAP_KEY) {
|
||||||
|
setMapError(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 카카오맵 SDK 동적 로드
|
// 카카오맵 SDK 동적 로드
|
||||||
if (!window.kakao?.maps) {
|
if (!window.kakao?.maps) {
|
||||||
const script = document.createElement('script');
|
const script = document.createElement('script');
|
||||||
|
|
@ -326,6 +333,7 @@ function KakaoMap({ lat, lng, name }) {
|
||||||
script.onload = () => {
|
script.onload = () => {
|
||||||
window.kakao.maps.load(() => setMapLoaded(true));
|
window.kakao.maps.load(() => setMapLoaded(true));
|
||||||
};
|
};
|
||||||
|
script.onerror = () => setMapError(true);
|
||||||
document.head.appendChild(script);
|
document.head.appendChild(script);
|
||||||
} else {
|
} else {
|
||||||
setMapLoaded(true);
|
setMapLoaded(true);
|
||||||
|
|
@ -333,33 +341,55 @@ function KakaoMap({ lat, lng, name }) {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!mapLoaded || !mapRef.current) return;
|
if (!mapLoaded || !mapRef.current || mapError) return;
|
||||||
|
|
||||||
const position = new window.kakao.maps.LatLng(lat, lng);
|
try {
|
||||||
const map = new window.kakao.maps.Map(mapRef.current, {
|
const position = new window.kakao.maps.LatLng(lat, lng);
|
||||||
center: position,
|
const map = new window.kakao.maps.Map(mapRef.current, {
|
||||||
level: 3,
|
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:5px 10px;font-size:12px;">${name}</div>`,
|
|
||||||
});
|
});
|
||||||
infowindow.open(map, marker);
|
|
||||||
|
// 마커 추가
|
||||||
|
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]);
|
}, [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="block w-full h-80 rounded-2xl bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center hover:from-gray-200 hover:to-gray-300 transition-all group"
|
||||||
|
>
|
||||||
|
<div className="text-center">
|
||||||
|
<Navigation size={32} className="mx-auto text-gray-400 group-hover:text-blue-500 transition-colors mb-2" />
|
||||||
|
<p className="text-gray-600 font-medium">{name}</p>
|
||||||
|
<p className="text-sm text-gray-400 mt-1">클릭하여 길찾기</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={mapRef}
|
ref={mapRef}
|
||||||
className="w-full h-64 rounded-xl overflow-hidden"
|
className="w-full h-80 rounded-2xl overflow-hidden shadow-inner"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -367,137 +397,204 @@ function KakaoMap({ lat, lng, name }) {
|
||||||
// 콘서트 섹션 컴포넌트
|
// 콘서트 섹션 컴포넌트
|
||||||
function ConcertSection({ schedule }) {
|
function ConcertSection({ schedule }) {
|
||||||
const hasLocation = schedule.location_lat && schedule.location_lng;
|
const hasLocation = schedule.location_lat && schedule.location_lng;
|
||||||
|
const hasPoster = schedule.images?.length > 0;
|
||||||
|
const relatedDates = schedule.related_dates || [];
|
||||||
|
const hasMultipleDates = relatedDates.length > 1;
|
||||||
|
|
||||||
// 날짜 범위 포맷팅
|
// 개별 날짜 포맷팅
|
||||||
const formatDateRange = () => {
|
const formatSingleDate = (dateStr, timeStr) => {
|
||||||
const start = formatFullDate(schedule.date);
|
const date = new Date(dateStr);
|
||||||
if (schedule.end_date && schedule.end_date !== schedule.date) {
|
const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
|
||||||
const end = formatFullDate(schedule.end_date);
|
const month = date.getMonth() + 1;
|
||||||
return `${start} ~ ${end}`;
|
const day = date.getDate();
|
||||||
|
const weekday = dayNames[date.getDay()];
|
||||||
|
|
||||||
|
let result = `${month}월 ${day}일 (${weekday})`;
|
||||||
|
if (timeStr) {
|
||||||
|
result += ` ${timeStr.slice(0, 5)}`;
|
||||||
}
|
}
|
||||||
return start;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-8">
|
||||||
{/* 포스터 이미지 */}
|
{/* 상단: 포스터 + 정보 카드 (가로 배치) */}
|
||||||
{schedule.images?.length > 0 && (
|
<div className={`flex gap-8 ${hasPoster ? '' : 'justify-center'}`}>
|
||||||
|
{/* 포스터 이미지 */}
|
||||||
|
{hasPoster && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="flex-shrink-0"
|
||||||
|
>
|
||||||
|
<div className="relative group">
|
||||||
|
<img
|
||||||
|
src={schedule.images[0]}
|
||||||
|
alt={schedule.title}
|
||||||
|
className="w-80 rounded-2xl shadow-2xl shadow-black/20"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 rounded-2xl transition-colors" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 정보 카드 */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, scale: 0.98 }}
|
initial={{ opacity: 0, x: hasPoster ? 20 : 0, y: hasPoster ? 0 : 20 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, x: 0, y: 0 }}
|
||||||
transition={{ delay: 0.1 }}
|
transition={{ delay: 0.2 }}
|
||||||
className="flex justify-center"
|
className={`flex-1 ${hasPoster ? '' : 'max-w-xl'}`}
|
||||||
>
|
>
|
||||||
<img
|
<div className="bg-white rounded-3xl shadow-xl shadow-black/5 overflow-hidden h-full flex flex-col">
|
||||||
src={schedule.images[0]}
|
{/* 헤더 */}
|
||||||
alt={schedule.title}
|
<div className="bg-gradient-to-r from-primary to-primary/80 p-6 text-white">
|
||||||
className="max-w-md w-full rounded-2xl shadow-lg"
|
<h1 className="text-2xl font-bold leading-tight">
|
||||||
/>
|
{decodeHtmlEntities(schedule.title)}
|
||||||
</motion.div>
|
</h1>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{/* 콘서트 정보 카드 */}
|
{/* 정보 목록 */}
|
||||||
<motion.div
|
<div className="p-6 space-y-5 flex-1">
|
||||||
initial={{ opacity: 0, y: 10 }}
|
{/* 공연 일정 목록 */}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
<div className="flex items-start gap-4">
|
||||||
transition={{ delay: 0.2 }}
|
<div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||||
className="bg-white rounded-2xl border border-gray-200 overflow-hidden"
|
<Calendar size={22} className="text-primary" />
|
||||||
>
|
</div>
|
||||||
{/* 제목 */}
|
<div className="flex-1">
|
||||||
<div className="p-6 border-b border-gray-100">
|
{hasMultipleDates ? (
|
||||||
<h1 className="text-2xl font-bold text-gray-900">
|
<div className="space-y-2">
|
||||||
{decodeHtmlEntities(schedule.title)}
|
{relatedDates.map((item, index) => {
|
||||||
</h1>
|
const isCurrentDate = item.id === schedule.id;
|
||||||
</div>
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.id}
|
||||||
|
to={`/schedule/${item.id}`}
|
||||||
|
className={`block px-4 py-2.5 rounded-xl transition-all ${
|
||||||
|
isCurrentDate
|
||||||
|
? 'bg-primary text-white font-bold shadow-lg shadow-primary/20'
|
||||||
|
: 'bg-gray-50 hover:bg-gray-100 text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="text-sm opacity-60 mr-2">
|
||||||
|
{index + 1}회차
|
||||||
|
</span>
|
||||||
|
{formatSingleDate(item.date, item.time)}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-900 font-bold text-lg">
|
||||||
|
{formatSingleDate(schedule.date, schedule.time)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 정보 목록 */}
|
{/* 장소 */}
|
||||||
<div className="p-6 space-y-4">
|
{schedule.location_name && (
|
||||||
{/* 날짜 */}
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex items-start gap-3">
|
<div className="w-12 h-12 rounded-2xl bg-rose-50 flex items-center justify-center flex-shrink-0">
|
||||||
<Calendar size={20} className="text-gray-400 mt-0.5 flex-shrink-0" />
|
<MapPin size={22} className="text-rose-500" />
|
||||||
<div>
|
</div>
|
||||||
<p className="text-sm text-gray-500">일시</p>
|
<div className="flex-1 min-w-0">
|
||||||
<p className="text-gray-900 font-medium">{formatDateRange()}</p>
|
<p className="text-gray-900 font-bold text-lg truncate">{schedule.location_name}</p>
|
||||||
{schedule.time && (
|
{schedule.location_address && (
|
||||||
<p className="text-gray-600">{formatTime(schedule.time)} 시작</p>
|
<p className="text-gray-500 text-sm truncate">{schedule.location_address}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 설명 */}
|
||||||
|
{schedule.description && (
|
||||||
|
<div className="pt-4 border-t border-gray-100">
|
||||||
|
<p className="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||||
|
{decodeHtmlEntities(schedule.description)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 장소 */}
|
{/* 버튼 영역 */}
|
||||||
{schedule.location_name && (
|
{schedule.source_url && (
|
||||||
<div className="flex items-start gap-3">
|
<div className="p-6 pt-0">
|
||||||
<MapPin size={20} className="text-gray-400 mt-0.5 flex-shrink-0" />
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-500">장소</p>
|
|
||||||
<p className="text-gray-900 font-medium">{schedule.location_name}</p>
|
|
||||||
{schedule.location_address && (
|
|
||||||
<p className="text-gray-600 text-sm">{schedule.location_address}</p>
|
|
||||||
)}
|
|
||||||
{schedule.location_detail && (
|
|
||||||
<p className="text-gray-500 text-sm">{schedule.location_detail}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 설명 */}
|
|
||||||
{schedule.description && (
|
|
||||||
<div className="pt-4 border-t border-gray-100">
|
|
||||||
<p className="text-gray-700 whitespace-pre-wrap leading-relaxed">
|
|
||||||
{decodeHtmlEntities(schedule.description)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 카카오맵 또는 장소 정보 */}
|
|
||||||
{schedule.location_name && (
|
|
||||||
<div className="border-t border-gray-100">
|
|
||||||
{hasLocation ? (
|
|
||||||
<div className="p-4">
|
|
||||||
<KakaoMap
|
|
||||||
lat={parseFloat(schedule.location_lat)}
|
|
||||||
lng={parseFloat(schedule.location_lng)}
|
|
||||||
name={schedule.location_name}
|
|
||||||
/>
|
|
||||||
<a
|
<a
|
||||||
href={`https://map.kakao.com/link/map/${encodeURIComponent(schedule.location_name)},${schedule.location_lat},${schedule.location_lng}`}
|
href={schedule.source_url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="mt-3 inline-flex items-center gap-2 text-sm text-blue-600 hover:text-blue-700"
|
className="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-gray-900 hover:bg-black text-white rounded-2xl font-semibold transition-all hover:shadow-lg"
|
||||||
>
|
>
|
||||||
<Navigation size={14} />
|
<ExternalLink size={18} />
|
||||||
카카오맵에서 길찾기
|
상세 정보 보기
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
<div className="p-6 bg-gray-50 text-center">
|
|
||||||
<MapPin size={24} className="mx-auto text-gray-400 mb-2" />
|
|
||||||
<p className="text-gray-600">{schedule.location_name}</p>
|
|
||||||
{schedule.location_address && (
|
|
||||||
<p className="text-sm text-gray-500">{schedule.location_address}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 원본 링크 */}
|
{/* 하단: 지도 */}
|
||||||
{schedule.source_url && (
|
{schedule.location_name && hasLocation && (
|
||||||
<div className="p-6 border-t border-gray-100 bg-gray-50/50">
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
className="bg-white rounded-3xl shadow-xl shadow-black/5 overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="p-5 border-b border-gray-100 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
|
||||||
|
<Navigation size={18} className="text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-gray-900">위치 안내</h3>
|
||||||
|
<p className="text-sm text-gray-500">{schedule.location_name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<a
|
<a
|
||||||
href={schedule.source_url}
|
href={`https://map.kakao.com/link/to/${encodeURIComponent(schedule.location_name)},${schedule.location_lat},${schedule.location_lng}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-xl font-medium transition-colors"
|
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-xl transition-colors"
|
||||||
>
|
>
|
||||||
<ExternalLink size={16} />
|
<Navigation size={14} />
|
||||||
상세 정보 보기
|
길찾기
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className="p-5">
|
||||||
</motion.div>
|
<KakaoMap
|
||||||
|
lat={parseFloat(schedule.location_lat)}
|
||||||
|
lng={parseFloat(schedule.location_lng)}
|
||||||
|
name={schedule.location_name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 해외 공연 등 좌표 없는 경우 */}
|
||||||
|
{schedule.location_name && !hasLocation && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-3xl p-8 text-center"
|
||||||
|
>
|
||||||
|
<div className="w-16 h-16 rounded-full bg-white shadow-lg mx-auto mb-4 flex items-center justify-center">
|
||||||
|
<MapPin size={28} className="text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xl font-bold text-gray-800 mb-1">{schedule.location_name}</p>
|
||||||
|
{schedule.location_address && (
|
||||||
|
<p className="text-gray-500">{schedule.location_address}</p>
|
||||||
|
)}
|
||||||
|
{schedule.location_detail && (
|
||||||
|
<p className="text-sm text-gray-400 mt-2">{schedule.location_detail}</p>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -553,9 +650,10 @@ function DefaultSection({ schedule }) {
|
||||||
function ScheduleDetail() {
|
function ScheduleDetail() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
|
|
||||||
const { data: schedule, isLoading, error } = useQuery({
|
const { data: schedule, isLoading, error, isFetching } = useQuery({
|
||||||
queryKey: ['schedule', id],
|
queryKey: ['schedule', id],
|
||||||
queryFn: () => getSchedule(id),
|
queryFn: () => getSchedule(id),
|
||||||
|
placeholderData: keepPreviousData,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
|
|
@ -604,7 +702,7 @@ function ScheduleDetail() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-[calc(100vh-64px)] bg-gray-50">
|
<div className="min-h-[calc(100vh-64px)] bg-gray-50">
|
||||||
<div className={`${isYoutube ? 'max-w-5xl' : 'max-w-3xl'} mx-auto px-6 py-8`}>
|
<div className={`${isYoutube || isConcert ? 'max-w-5xl' : 'max-w-3xl'} mx-auto px-6 py-8`}>
|
||||||
{/* 브레드크럼 네비게이션 */}
|
{/* 브레드크럼 네비게이션 */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: -10 }}
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue