feat: 콘서트 카테고리 상세 페이지 추가

- KakaoMap 컴포넌트: 위도/경도 기반 지도 표시 기능
- ConcertSection: 포스터 이미지, 날짜 범위, 장소 정보 표시
- 위치 좌표가 없는 경우(해외) 장소명만 표시
- 백엔드 API에 이미지 정보 포함

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

backend/routes/schedules.js

@@ -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: "일정 조회 중 오류가 발생했습니다." });

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

@@ -366,8 +366,8 @@ function Schedule() {
 
     // 일정 클릭 핸들러
     const handleScheduleClick = (schedule) => {
-        // 유튜브(id=2), X(id=3) 카테고리는 상세 페이지로 이동
+        // 유튜브(id=2), X(id=3), 콘서트(id=6) 카테고리는 상세 페이지로 이동
-        if (schedule.category_id === 2 || schedule.category_id === 3) {
+        if (schedule.category_id === 2 || schedule.category_id === 3 || schedule.category_id === 6) {
             navigate(`/schedule/${schedule.id}`);
             return;
         }

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

@@ -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">