From 40e1f957c7a1990a7be2002f37750ecbc0c37744 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 16 Jan 2026 10:55:40 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20ScheduleDetail=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B3=84=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- schedule-sections 폴더 생성
- YoutubeSection, XSection, ConcertSection, DefaultSection 분리
- KakaoMap, utils.js 공통 모듈 분리
- 메인 ScheduleDetail.jsx 1010줄 → 175줄로 간소화
---
 .../src/pages/pc/public/ScheduleDetail.jsx    | 859 +-----------------
 .../schedule-sections/ConcertSection.jsx      | 389 ++++++++
 .../schedule-sections/DefaultSection.jsx      |  52 ++
 .../pc/public/schedule-sections/KakaoMap.jsx  |  88 ++
 .../pc/public/schedule-sections/XSection.jsx  | 114 +++
 .../schedule-sections/YoutubeSection.jsx      | 173 ++++
 .../pc/public/schedule-sections/index.js      |   6 +
 .../pc/public/schedule-sections/utils.js      |  56 ++
 8 files changed, 892 insertions(+), 845 deletions(-)
 create mode 100644 frontend/src/pages/pc/public/schedule-sections/ConcertSection.jsx
 create mode 100644 frontend/src/pages/pc/public/schedule-sections/DefaultSection.jsx
 create mode 100644 frontend/src/pages/pc/public/schedule-sections/KakaoMap.jsx
 create mode 100644 frontend/src/pages/pc/public/schedule-sections/XSection.jsx
 create mode 100644 frontend/src/pages/pc/public/schedule-sections/YoutubeSection.jsx
 create mode 100644 frontend/src/pages/pc/public/schedule-sections/index.js
 create mode 100644 frontend/src/pages/pc/public/schedule-sections/utils.js

diff --git a/frontend/src/pages/pc/public/ScheduleDetail.jsx b/frontend/src/pages/pc/public/ScheduleDetail.jsx
index 298085d..b530f1e 100644
--- a/frontend/src/pages/pc/public/ScheduleDetail.jsx
+++ b/frontend/src/pages/pc/public/ScheduleDetail.jsx
@@ -1,854 +1,23 @@
 import { useParams, Link } from 'react-router-dom';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
-import { useEffect, useRef, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Clock, Calendar, ExternalLink, ChevronRight, ChevronDown, ChevronLeft, Check, Link2, MapPin, Navigation } from 'lucide-react';
-import { getSchedule, getXProfile } from '../../../api/public/schedules';
-
-// 카카오맵 SDK 키
-const KAKAO_MAP_KEY = import.meta.env.VITE_KAKAO_JS_KEY;
-
-// 카테고리 ID 상수
-const CATEGORY_ID = {
-    YOUTUBE: 2,
-    X: 3,
-    ALBUM: 4,
-    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>
-    );
-}
+import { motion } from 'framer-motion';
+import { Calendar, ChevronRight } from 'lucide-react';
+import { getSchedule } from '../../../api/public/schedules';
+
+// 분리된 카테고리별 섹션 컴포넌트들
+import {
+    YoutubeSection,
+    XSection,
+    ConcertSection,
+    DefaultSection,
+    CATEGORY_ID,
+    decodeHtmlEntities,
+} from './schedule-sections';
 
 function ScheduleDetail() {
     const { id } = useParams();
 
-    const { data: schedule, isLoading, error, isFetching } = useQuery({
+    const { data: schedule, isLoading, error } = useQuery({
         queryKey: ['schedule', id],
         queryFn: () => getSchedule(id),
         placeholderData: keepPreviousData,
diff --git a/frontend/src/pages/pc/public/schedule-sections/ConcertSection.jsx b/frontend/src/pages/pc/public/schedule-sections/ConcertSection.jsx
new file mode 100644
index 0000000..46252af
--- /dev/null
+++ b/frontend/src/pages/pc/public/schedule-sections/ConcertSection.jsx
@@ -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;
diff --git a/frontend/src/pages/pc/public/schedule-sections/DefaultSection.jsx b/frontend/src/pages/pc/public/schedule-sections/DefaultSection.jsx
new file mode 100644
index 0000000..293d8bf
--- /dev/null
+++ b/frontend/src/pages/pc/public/schedule-sections/DefaultSection.jsx
@@ -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;
diff --git a/frontend/src/pages/pc/public/schedule-sections/KakaoMap.jsx b/frontend/src/pages/pc/public/schedule-sections/KakaoMap.jsx
new file mode 100644
index 0000000..5d196bb
--- /dev/null
+++ b/frontend/src/pages/pc/public/schedule-sections/KakaoMap.jsx
@@ -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;
diff --git a/frontend/src/pages/pc/public/schedule-sections/XSection.jsx b/frontend/src/pages/pc/public/schedule-sections/XSection.jsx
new file mode 100644
index 0000000..16c5cb8
--- /dev/null
+++ b/frontend/src/pages/pc/public/schedule-sections/XSection.jsx
@@ -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;
diff --git a/frontend/src/pages/pc/public/schedule-sections/YoutubeSection.jsx b/frontend/src/pages/pc/public/schedule-sections/YoutubeSection.jsx
new file mode 100644
index 0000000..76aaf90
--- /dev/null
+++ b/frontend/src/pages/pc/public/schedule-sections/YoutubeSection.jsx
@@ -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;
diff --git a/frontend/src/pages/pc/public/schedule-sections/index.js b/frontend/src/pages/pc/public/schedule-sections/index.js
new file mode 100644
index 0000000..42ea1f5
--- /dev/null
+++ b/frontend/src/pages/pc/public/schedule-sections/index.js
@@ -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";
diff --git a/frontend/src/pages/pc/public/schedule-sections/utils.js b/frontend/src/pages/pc/public/schedule-sections/utils.js
new file mode 100644
index 0000000..75c1142
--- /dev/null
+++ b/frontend/src/pages/pc/public/schedule-sections/utils.js
@@ -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,
+};