feat: 콘서트 카테고리 상세 페이지 추가
- KakaoMap 컴포넌트: 위도/경도 기반 지도 표시 기능 - ConcertSection: 포스터 이미지, 날짜 범위, 장소 정보 표시 - 위치 좌표가 없는 경우(해외) 장소명만 표시 - 백엔드 API에 이미지 정보 포함 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
edf6b60b4a
commit
79f3816cec
3 changed files with 211 additions and 6 deletions
|
|
@ -140,7 +140,7 @@ router.get("/:id", async (req, res) => {
|
|||
|
||||
const [schedules] = await pool.query(
|
||||
`
|
||||
SELECT
|
||||
SELECT
|
||||
s.*,
|
||||
c.name as category_name,
|
||||
c.color as category_color
|
||||
|
|
@ -155,7 +155,16 @@ router.get("/:id", async (req, res) => {
|
|||
return res.status(404).json({ error: "일정을 찾을 수 없습니다." });
|
||||
}
|
||||
|
||||
res.json(schedules[0]);
|
||||
// 이미지 조회
|
||||
const [images] = await pool.query(
|
||||
`SELECT image_url FROM schedule_images WHERE schedule_id = ? ORDER BY sort_order ASC`,
|
||||
[id]
|
||||
);
|
||||
|
||||
const schedule = schedules[0];
|
||||
schedule.images = images.map((img) => img.image_url);
|
||||
|
||||
res.json(schedule);
|
||||
} catch (error) {
|
||||
console.error("일정 조회 오류:", error);
|
||||
res.status(500).json({ error: "일정 조회 중 오류가 발생했습니다." });
|
||||
|
|
|
|||
|
|
@ -366,8 +366,8 @@ function Schedule() {
|
|||
|
||||
// 일정 클릭 핸들러
|
||||
const handleScheduleClick = (schedule) => {
|
||||
// 유튜브(id=2), X(id=3) 카테고리는 상세 페이지로 이동
|
||||
if (schedule.category_id === 2 || schedule.category_id === 3) {
|
||||
// 유튜브(id=2), X(id=3), 콘서트(id=6) 카테고리는 상세 페이지로 이동
|
||||
if (schedule.category_id === 2 || schedule.category_id === 3 || schedule.category_id === 6) {
|
||||
navigate(`/schedule/${schedule.id}`);
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import { useParams, Link } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Clock, Calendar, ExternalLink, ChevronRight, Link2 } from 'lucide-react';
|
||||
import { Clock, Calendar, ExternalLink, ChevronRight, Link2, MapPin, Navigation } from 'lucide-react';
|
||||
import { getSchedule, getXProfile } from '../../../api/public/schedules';
|
||||
|
||||
// 카카오맵 SDK 키
|
||||
const KAKAO_MAP_KEY = import.meta.env.VITE_KAKAO_MAP_KEY;
|
||||
|
||||
// 카테고리 ID 상수
|
||||
const CATEGORY_ID = {
|
||||
YOUTUBE: 2,
|
||||
|
|
@ -309,6 +313,195 @@ function XSection({ schedule }) {
|
|||
);
|
||||
}
|
||||
|
||||
// 카카오맵 컴포넌트
|
||||
function KakaoMap({ lat, lng, name }) {
|
||||
const mapRef = useRef(null);
|
||||
const [mapLoaded, setMapLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// 카카오맵 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));
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
} else {
|
||||
setMapLoaded(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapLoaded || !mapRef.current) return;
|
||||
|
||||
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:5px 10px;font-size:12px;">${name}</div>`,
|
||||
});
|
||||
infowindow.open(map, marker);
|
||||
}
|
||||
}, [mapLoaded, lat, lng, name]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={mapRef}
|
||||
className="w-full h-64 rounded-xl overflow-hidden"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// 콘서트 섹션 컴포넌트
|
||||
function ConcertSection({ schedule }) {
|
||||
const hasLocation = schedule.location_lat && schedule.location_lng;
|
||||
|
||||
// 날짜 범위 포맷팅
|
||||
const formatDateRange = () => {
|
||||
const start = formatFullDate(schedule.date);
|
||||
if (schedule.end_date && schedule.end_date !== schedule.date) {
|
||||
const end = formatFullDate(schedule.end_date);
|
||||
return `${start} ~ ${end}`;
|
||||
}
|
||||
return start;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 포스터 이미지 */}
|
||||
{schedule.images?.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="flex justify-center"
|
||||
>
|
||||
<img
|
||||
src={schedule.images[0]}
|
||||
alt={schedule.title}
|
||||
className="max-w-md w-full rounded-2xl shadow-lg"
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 콘서트 정보 카드 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="bg-white rounded-2xl border border-gray-200 overflow-hidden"
|
||||
>
|
||||
{/* 제목 */}
|
||||
<div className="p-6 border-b border-gray-100">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
{decodeHtmlEntities(schedule.title)}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* 정보 목록 */}
|
||||
<div className="p-6 space-y-4">
|
||||
{/* 날짜 */}
|
||||
<div className="flex items-start gap-3">
|
||||
<Calendar 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">{formatDateRange()}</p>
|
||||
{schedule.time && (
|
||||
<p className="text-gray-600">{formatTime(schedule.time)} 시작</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 장소 */}
|
||||
{schedule.location_name && (
|
||||
<div className="flex items-start gap-3">
|
||||
<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
|
||||
href={`https://map.kakao.com/link/map/${encodeURIComponent(schedule.location_name)},${schedule.location_lat},${schedule.location_lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-3 inline-flex items-center gap-2 text-sm text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
<Navigation size={14} />
|
||||
카카오맵에서 길찾기
|
||||
</a>
|
||||
</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>
|
||||
)}
|
||||
|
||||
{/* 원본 링크 */}
|
||||
{schedule.source_url && (
|
||||
<div className="p-6 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-primary hover:bg-primary-dark text-white rounded-xl font-medium transition-colors"
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
상세 정보 보기
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 기본 섹션 컴포넌트 (다른 카테고리용)
|
||||
function DefaultSection({ schedule }) {
|
||||
return (
|
||||
|
|
@ -397,6 +590,8 @@ function ScheduleDetail() {
|
|||
return <YoutubeSection schedule={schedule} />;
|
||||
case CATEGORY_ID.X:
|
||||
return <XSection schedule={schedule} />;
|
||||
case CATEGORY_ID.CONCERT:
|
||||
return <ConcertSection schedule={schedule} />;
|
||||
default:
|
||||
return <DefaultSection schedule={schedule} />;
|
||||
}
|
||||
|
|
@ -404,7 +599,8 @@ function ScheduleDetail() {
|
|||
|
||||
const isYoutube = schedule.category_id === CATEGORY_ID.YOUTUBE;
|
||||
const isX = schedule.category_id === CATEGORY_ID.X;
|
||||
const hasCustomLayout = isYoutube || isX;
|
||||
const isConcert = schedule.category_id === CATEGORY_ID.CONCERT;
|
||||
const hasCustomLayout = isYoutube || isX || isConcert;
|
||||
|
||||
return (
|
||||
<div className="min-h-[calc(100vh-64px)] bg-gray-50">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue