모바일 콘서트 섹션 개선 및 달력 일정 점 표시 수정

- 콘서트 UI 최적화: 포스터 썸네일화, 공연 일정 세로 배치
- 카카오맵 SDK 연동으로 실제 지도 표시
- 회차 변경 시 keepPreviousData로 부드러운 전환
- 달력 다른 달 이동 시 일정 점 표시 (비동기 조회)
- PC 콘서트 섹션 그림자 통일 (shadow-lg shadow-black/5)

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

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

@@ -277,6 +277,17 @@ function MobileSchedule() {
         queryFn: () => getSchedules(viewYear, viewMonth),
     });
 
+    // 달력 표시용 일정 데이터 (calendarViewDate 기준)
+    const calendarYear = calendarViewDate.getFullYear();
+    const calendarMonth = calendarViewDate.getMonth() + 1;
+    const isSameMonth = viewYear === calendarYear && viewMonth === calendarMonth;
+
+    const { data: calendarSchedules = [] } = useQuery({
+        queryKey: ['schedules', calendarYear, calendarMonth],
+        queryFn: () => getSchedules(calendarYear, calendarMonth),
+        enabled: !isSameMonth, // 같은 월이면 중복 조회 안함
+    });
+
     // 생일 폭죽 효과 (하루에 한 번만)
     useEffect(() => {
         if (loading || schedules.length === 0) return;
@@ -727,7 +738,7 @@ function MobileSchedule() {
                     >
                         <CalendarPicker
                             selectedDate={selectedDate}
-                            schedules={schedules}
+                            schedules={isSameMonth ? schedules : calendarSchedules}
                             categories={categories}
                             hideHeader={true}
                             externalViewDate={calendarViewDate}

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

@@ -1,11 +1,89 @@
-import { useParams, Link } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
-import { useEffect } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { useEffect, useState, useRef } from 'react';
 import { motion } from 'framer-motion';
-import { Calendar, Clock, ChevronLeft, Link2 } from 'lucide-react';
+import { Calendar, Clock, ChevronLeft, Link2, MapPin, Navigation, ExternalLink } from 'lucide-react';
 import { getSchedule, getXProfile } from '../../../api/public/schedules';
 import '../../../mobile.css';
 
+// 카카오맵 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(() => {
+        if (!KAKAO_MAP_KEY) {
+            setMapError(true);
+            return;
+        }
+
+        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:6px 10px;font-size:12px;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/map/${encodeURIComponent(name)},${lat},${lng}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full h-40 rounded-xl bg-gray-100 flex items-center justify-center active:bg-gray-200 transition-colors"
+            >
+                <div className="text-center">
+                    <Navigation size={24} className="mx-auto text-gray-400 mb-1" />
+                    <p className="text-xs text-gray-500">지도에서 보기</p>
+                </div>
+            </a>
+        );
+    }
+
+    return (
+        <div
+            ref={mapRef}
+            className="w-full h-40 rounded-xl overflow-hidden"
+        />
+    );
+}
+
 // 전체화면 시 자동 가로 회전 훅 (숏츠가 아닐 때만)
 function useFullscreenOrientation(isShorts) {
     useEffect(() => {
@@ -319,6 +397,166 @@ function XSection({ schedule }) {
     );
 }
 
+// 콘서트 섹션 컴포넌트
+function ConcertSection({ schedule, onDateChange }) {
+    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 formatSingleDate = (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 (
+        <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="bg-white rounded-xl overflow-hidden shadow-sm"
+        >
+            {/* 헤더: 포스터 썸네일 + 제목 */}
+            <div className="bg-gradient-to-r from-primary to-primary/80 p-4">
+                <div className="flex gap-3">
+                    {hasPoster && (
+                        <img
+                            src={schedule.images[0]}
+                            alt={schedule.title}
+                            className="w-16 h-20 rounded-lg object-cover flex-shrink-0"
+                        />
+                    )}
+                    <div className="flex-1 min-w-0 text-white">
+                        <h1 className="font-bold text-base leading-snug line-clamp-2">
+                            {decodeHtmlEntities(schedule.title)}
+                        </h1>
+                        {schedule.location_name && (
+                            <p className="text-white/80 text-xs mt-1 truncate">
+                                {schedule.location_name}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* 정보 목록 */}
+            <div className="p-4 space-y-4">
+                {/* 공연 일정 */}
+                <div>
+                    <div className="flex items-center gap-2 text-xs text-gray-500 mb-2">
+                        <Calendar size={14} />
+                        <span className="font-medium">공연 일정</span>
+                    </div>
+                    {hasMultipleDates ? (
+                        <div className="space-y-2">
+                            {relatedDates.map((item, index) => {
+                                const isCurrentDate = item.id === schedule.id;
+                                return (
+                                    <button
+                                        key={item.id}
+                                        onClick={() => onDateChange(item.id)}
+                                        className={`block w-full px-3 py-2 rounded-lg text-sm text-left transition-all ${
+                                            isCurrentDate
+                                                ? 'bg-primary text-white font-bold'
+                                                : 'bg-gray-50 active:bg-gray-100 text-gray-700'
+                                        }`}
+                                    >
+                                        <span className="opacity-60 mr-1.5">
+                                            {index + 1}회차
+                                        </span>
+                                        {formatSingleDate(item.date, item.time)}
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    ) : (
+                        <p className="text-gray-900 font-bold text-sm">
+                            {formatSingleDate(schedule.date, schedule.time)}
+                        </p>
+                    )}
+                </div>
+
+                {/* 장소 */}
+                {schedule.location_name && (
+                    <div>
+                        <div className="flex items-center gap-2 text-xs text-gray-500 mb-2">
+                            <MapPin size={14} />
+                            <span className="font-medium">장소</span>
+                        </div>
+                        <p className="text-gray-900 font-medium text-sm">{schedule.location_name}</p>
+                        {schedule.location_address && (
+                            <p className="text-gray-500 text-xs mt-0.5">{schedule.location_address}</p>
+                        )}
+                    </div>
+                )}
+
+                {/* 지도 */}
+                {hasLocation && (
+                    <div>
+                        <div className="flex items-center gap-2 text-xs text-gray-500 mb-2">
+                            <Navigation size={14} />
+                            <span className="font-medium">위치</span>
+                        </div>
+                        <KakaoMap
+                            lat={parseFloat(schedule.location_lat)}
+                            lng={parseFloat(schedule.location_lng)}
+                            name={schedule.location_name}
+                        />
+                    </div>
+                )}
+
+                {/* 설명 */}
+                {schedule.description && (
+                    <div className="pt-3 border-t border-gray-100">
+                        <p className="text-gray-600 text-sm leading-relaxed">
+                            {decodeHtmlEntities(schedule.description)}
+                        </p>
+                    </div>
+                )}
+            </div>
+
+            {/* 버튼 영역 */}
+            <div className="p-4 pt-0 space-y-2">
+                {/* 길찾기 버튼 */}
+                {hasLocation && (
+                    <a
+                        href={`https://map.kakao.com/link/to/${encodeURIComponent(schedule.location_name)},${schedule.location_lat},${schedule.location_lng}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center justify-center gap-2 w-full py-3 bg-blue-500 active:bg-blue-600 text-white rounded-xl font-medium transition-colors"
+                    >
+                        <Navigation size={18} />
+                        길찾기
+                    </a>
+                )}
+
+                {/* 상세 정보 버튼 */}
+                {schedule.source_url && (
+                    <a
+                        href={schedule.source_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center justify-center gap-2 w-full py-3 bg-gray-900 active:bg-black text-white rounded-xl font-medium transition-colors"
+                    >
+                        <ExternalLink size={18} />
+                        상세 정보 보기
+                    </a>
+                )}
+            </div>
+        </motion.div>
+    );
+}
+
 // 기본 섹션 컴포넌트 (다른 카테고리용 - 임시)
 function DefaultSection({ schedule }) {
     return (
@@ -349,6 +587,12 @@ function DefaultSection({ schedule }) {
 
 function MobileScheduleDetail() {
     const { id } = useParams();
+    const navigate = useNavigate();
+
+    // 회차 변경 핸들러
+    const handleDateChange = (newId) => {
+        navigate(`/schedule/${newId}`, { replace: true });
+    };
 
     // 모바일 레이아웃 활성화
     useEffect(() => {
@@ -361,6 +605,7 @@ function MobileScheduleDetail() {
     const { data: schedule, isLoading, error } = useQuery({
         queryKey: ['schedule', id],
         queryFn: () => getSchedule(id),
+        placeholderData: keepPreviousData,
         retry: false,
     });
 
@@ -468,6 +713,8 @@ function MobileScheduleDetail() {
                 return <YoutubeSection schedule={schedule} />;
             case CATEGORY_ID.X:
                 return <XSection schedule={schedule} />;
+            case CATEGORY_ID.CONCERT:
+                return <ConcertSection schedule={schedule} onDateChange={handleDateChange} />;
             default:
                 return <DefaultSection schedule={schedule} />;
         }

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

@@ -455,7 +455,7 @@ function ConcertSection({ schedule }) {
                             <img
                                 src={schedule.images[0]}
                                 alt={schedule.title}
-                                className="w-80 rounded-2xl shadow-2xl shadow-black/20"
+                                className="w-80 rounded-2xl shadow-lg shadow-black/5"
                             />
                             <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 rounded-2xl transition-colors" />
                         </div>
@@ -469,7 +469,7 @@ function ConcertSection({ schedule }) {
                     transition={{ delay: 0.2 }}
                     className={`flex-1 ${hasPoster ? '' : 'max-w-xl'}`}
                 >
-                    <div className="bg-white rounded-3xl shadow-xl shadow-black/5 overflow-hidden h-full flex flex-col">
+                    <div className="bg-white rounded-3xl shadow-lg shadow-black/5 overflow-hidden h-full flex flex-col">
                         {/* 헤더 */}
                         <div className="bg-gradient-to-r from-primary to-primary/80 p-6 text-white">
                             <h1 className="text-2xl font-bold leading-tight">
@@ -566,7 +566,7 @@ function ConcertSection({ schedule }) {
                     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"
+                    className="bg-white rounded-3xl shadow-lg 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">
@@ -606,7 +606,7 @@ function ConcertSection({ schedule }) {
                     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">
+                    <div className="w-16 h-16 rounded-full bg-white shadow-lg shadow-black/5 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>