From e5d403655ea040d3a395291cf82c5a33e9cd2a41 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Mon, 12 Jan 2026 18:48:00 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC:=20=EA=B3=A1=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=99=94=EB=A9=B4=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?(TrackDetail=20=ED=8E=98=EC=9D=B4=EC=A7=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.jsx                          |   2 +
 .../src/pages/mobile/public/AlbumDetail.jsx   |   3 +-
 .../src/pages/mobile/public/TrackDetail.jsx   | 299 ++++++++++++++++++
 3 files changed, 303 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/mobile/public/TrackDetail.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 80eea25..3809265 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -20,6 +20,7 @@ import MobileMembers from './pages/mobile/public/Members';
 import MobileAlbum from './pages/mobile/public/Album';
 import MobileAlbumDetail from './pages/mobile/public/AlbumDetail';
 import MobileAlbumGallery from './pages/mobile/public/AlbumGallery';
+import MobileTrackDetail from './pages/mobile/public/TrackDetail';
 import MobileSchedule from './pages/mobile/public/Schedule';
 
 // 관리자 페이지
@@ -94,6 +95,7 @@ function App() {
                     <Route path="/album" element={<MobileLayout pageTitle="앨범"><MobileAlbum /></MobileLayout>} />
                     <Route path="/album/:name" element={<MobileLayout pageTitle="앨범"><MobileAlbumDetail /></MobileLayout>} />
                     <Route path="/album/:name/gallery" element={<MobileLayout pageTitle="앨범"><MobileAlbumGallery /></MobileLayout>} />
+                    <Route path="/album/:name/track/:trackTitle" element={<MobileLayout pageTitle="앨범"><MobileTrackDetail /></MobileLayout>} />
                     <Route path="/schedule" element={<MobileLayout useCustomLayout><MobileSchedule /></MobileLayout>} />
                 </Routes>
             </MobileView>
diff --git a/frontend/src/pages/mobile/public/AlbumDetail.jsx b/frontend/src/pages/mobile/public/AlbumDetail.jsx
index 0f88b29..2493024 100644
--- a/frontend/src/pages/mobile/public/AlbumDetail.jsx
+++ b/frontend/src/pages/mobile/public/AlbumDetail.jsx
@@ -261,7 +261,8 @@ function MobileAlbumDetail() {
                             {displayTracks?.map((track) => (
                                 <div
                                     key={track.id}
-                                    className="flex items-center gap-3 py-2.5 px-3 rounded-xl hover:bg-gray-50 transition-colors"
+                                    onClick={() => navigate(`/album/${encodeURIComponent(album.title)}/track/${encodeURIComponent(track.title)}`)}
+                                    className="flex items-center gap-3 py-2.5 px-3 rounded-xl hover:bg-gray-50 active:bg-gray-100 transition-colors cursor-pointer"
                                 >
                                     <span className="w-6 text-center text-sm text-gray-400 tabular-nums">
                                         {String(track.track_number).padStart(2, '0')}
diff --git a/frontend/src/pages/mobile/public/TrackDetail.jsx b/frontend/src/pages/mobile/public/TrackDetail.jsx
new file mode 100644
index 0000000..8ec4082
--- /dev/null
+++ b/frontend/src/pages/mobile/public/TrackDetail.jsx
@@ -0,0 +1,299 @@
+import { useMemo } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { motion } from 'framer-motion';
+import { Clock, User, Music, Mic2, ChevronLeft, ChevronRight } from 'lucide-react';
+import { getTrack } from '../../../api/public/albums';
+
+// 유튜브 URL에서 비디오 ID 추출
+const getYoutubeVideoId = (url) => {
+    if (!url) return null;
+    const patterns = [
+        /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    ];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match) return match[1];
+    }
+    return null;
+};
+
+// 쉼표 기준 줄바꿈 처리
+const formatCredit = (text) => {
+    if (!text) return null;
+    return text.split(',').map((item, index) => (
+        <span key={index} className="block">{item.trim()}</span>
+    ));
+};
+
+// 모바일 곡 상세 페이지
+function TrackDetail() {
+    const { name: albumName, trackTitle } = useParams();
+    const navigate = useNavigate();
+
+    // useQuery로 트랙 데이터 로드
+    const { data: track, isLoading: loading, error } = useQuery({
+        queryKey: ['track', albumName, trackTitle],
+        queryFn: () => getTrack(albumName, trackTitle),
+        enabled: !!albumName && !!trackTitle,
+    });
+
+    const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.music_video_url), [track?.music_video_url]);
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center min-h-[60vh]">
+                <div className="animate-spin rounded-full h-10 w-10 border-4 border-primary border-t-transparent"></div>
+            </div>
+        );
+    }
+
+    if (error || !track) {
+        return (
+            <div className="py-12 text-center">
+                <p className="text-gray-500">트랙을 찾을 수 없습니다.</p>
+            </div>
+        );
+    }
+
+    return (
+        <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+            className="pb-6"
+        >
+            {/* 헤더 - 뒤로가기 */}
+            <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-100">
+                <button 
+                    onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
+                    className="p-1"
+                >
+                    <ChevronLeft size={24} className="text-gray-600" />
+                </button>
+                <div className="flex-1 min-w-0">
+                    <p className="text-xs text-gray-400">{track.album?.title}</p>
+                    <p className="font-medium truncate">{track.title}</p>
+                </div>
+            </div>
+
+            {/* 트랙 정보 헤더 */}
+            <div className="px-4 py-5">
+                <div className="flex gap-4 items-start">
+                    {/* 앨범 커버 */}
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ duration: 0.3 }}
+                        className="w-24 h-24 rounded-xl overflow-hidden shadow-md flex-shrink-0"
+                    >
+                        <img
+                            src={track.album?.cover_medium_url}
+                            alt={track.album?.title}
+                            className="w-full h-full object-cover"
+                        />
+                    </motion.div>
+
+                    {/* 트랙 정보 */}
+                    <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1.5">
+                            {track.is_title_track === 1 && (
+                                <span className="px-2 py-0.5 bg-primary text-white text-xs font-bold rounded-full">
+                                    TITLE
+                                </span>
+                            )}
+                            <span className="text-gray-400 text-xs">
+                                Track {String(track.track_number).padStart(2, '0')}
+                            </span>
+                        </div>
+                        
+                        <h1 className="text-xl font-bold mb-1 text-gray-900 truncate">{track.title}</h1>
+                        
+                        <p className="text-sm text-gray-500 mb-2">
+                            {track.album?.album_type} · {track.album?.title}
+                        </p>
+
+                        {track.duration && (
+                            <div className="flex items-center gap-1.5 text-gray-400 text-sm">
+                                <Clock size={14} />
+                                <span>{track.duration}</span>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* 뮤직비디오 섹션 */}
+            {youtubeVideoId && (
+                <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.1, duration: 0.3 }}
+                    className="px-4 mb-5"
+                >
+                    <h2 className="text-base font-bold mb-3 flex items-center gap-2">
+                        <div className="w-1 h-4 bg-red-500 rounded-full"></div>
+                        뮤직비디오
+                    </h2>
+                    <div className="relative w-full aspect-video rounded-xl overflow-hidden shadow-md bg-black">
+                        <iframe
+                            src={`https://www.youtube.com/embed/${youtubeVideoId}`}
+                            title={`${track.title} 뮤직비디오`}
+                            className="absolute inset-0 w-full h-full"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowFullScreen
+                        />
+                    </div>
+                </motion.div>
+            )}
+
+            {/* 크레딧 */}
+            {(track.lyricist || track.composer || track.arranger) && (
+                <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.15, duration: 0.3 }}
+                    className="px-4 mb-5"
+                >
+                    <h2 className="text-base font-bold mb-3 flex items-center gap-2">
+                        <div className="w-1 h-4 bg-primary rounded-full"></div>
+                        크레딧
+                    </h2>
+                    <div className="bg-gray-50 rounded-xl p-4 space-y-4">
+                        {track.lyricist && (
+                            <div className="flex items-start gap-3">
+                                <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm">
+                                    <Mic2 size={14} className="text-gray-500" />
+                                </div>
+                                <div className="flex-1">
+                                    <p className="text-xs text-gray-400 mb-0.5">작사</p>
+                                    <p className="text-sm text-gray-700 leading-relaxed">
+                                        {formatCredit(track.lyricist)}
+                                    </p>
+                                </div>
+                            </div>
+                        )}
+                        {track.composer && (
+                            <div className="flex items-start gap-3">
+                                <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm">
+                                    <Music size={14} className="text-gray-500" />
+                                </div>
+                                <div className="flex-1">
+                                    <p className="text-xs text-gray-400 mb-0.5">작곡</p>
+                                    <p className="text-sm text-gray-700 leading-relaxed">
+                                        {formatCredit(track.composer)}
+                                    </p>
+                                </div>
+                            </div>
+                        )}
+                        {track.arranger && (
+                            <div className="flex items-start gap-3">
+                                <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm">
+                                    <User size={14} className="text-gray-500" />
+                                </div>
+                                <div className="flex-1">
+                                    <p className="text-xs text-gray-400 mb-0.5">편곡</p>
+                                    <p className="text-sm text-gray-700 leading-relaxed">
+                                        {formatCredit(track.arranger)}
+                                    </p>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </motion.div>
+            )}
+
+            {/* 가사 */}
+            <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2, duration: 0.3 }}
+                className="px-4 mb-5"
+            >
+                <h2 className="text-base font-bold mb-3 flex items-center gap-2">
+                    <div className="w-1 h-4 bg-primary rounded-full"></div>
+                    가사
+                </h2>
+                <div className="bg-gray-50 rounded-xl p-4">
+                    {track.lyrics ? (
+                        <div className="text-gray-700 leading-[1.8] whitespace-pre-line text-sm max-h-[400px] overflow-y-auto">
+                            {track.lyrics}
+                        </div>
+                    ) : (
+                        <div className="text-center py-8 text-gray-400">
+                            <Mic2 size={36} className="mx-auto mb-2 opacity-20" />
+                            <p className="text-sm">가사 정보가 없습니다</p>
+                        </div>
+                    )}
+                </div>
+            </motion.div>
+
+            {/* 수록곡 */}
+            <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.25, duration: 0.3 }}
+                className="px-4"
+            >
+                <h2 className="text-base font-bold mb-3 flex items-center gap-2">
+                    <div className="w-1 h-4 bg-primary rounded-full"></div>
+                    수록곡
+                </h2>
+                <div className="bg-gray-50 rounded-xl overflow-hidden">
+                    {track.otherTracks?.map((t, index) => {
+                        const isCurrent = t.title === track.title;
+                        return (
+                            <Link
+                                key={t.id}
+                                to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`}
+                                className={`flex items-center gap-3 px-4 py-3 transition-colors ${
+                                    isCurrent 
+                                        ? 'bg-primary text-white' 
+                                        : 'active:bg-gray-100'
+                                } ${index !== 0 ? 'border-t border-gray-100' : ''}`}
+                            >
+                                {/* 트랙 번호 / 재생 아이콘 */}
+                                <div className={`w-5 text-center text-xs ${
+                                    isCurrent ? 'text-white/80' : 'text-gray-400'
+                                }`}>
+                                    {isCurrent ? (
+                                        <Music size={14} className="mx-auto text-white" />
+                                    ) : (
+                                        String(t.track_number).padStart(2, '0')
+                                    )}
+                                </div>
+                                
+                                {/* 곡 제목 + 타이틀 배지 */}
+                                <div className="flex-1 flex items-center gap-2 min-w-0">
+                                    <span className={`text-sm truncate ${
+                                        isCurrent ? 'font-semibold' : ''
+                                    }`}>
+                                        {t.title}
+                                    </span>
+                                    {t.is_title_track === 1 && (
+                                        <span className={`px-1.5 py-0.5 text-[9px] font-bold rounded-full flex-shrink-0 ${
+                                            isCurrent 
+                                                ? 'bg-white/20 text-white' 
+                                                : 'bg-primary/10 text-primary'
+                                        }`}>
+                                            TITLE
+                                        </span>
+                                    )}
+                                </div>
+                                
+                                {/* 재생 시간 */}
+                                <span className={`text-xs ${
+                                    isCurrent ? 'text-white/70' : 'text-gray-400'
+                                }`}>
+                                    {t.duration || ''}
+                                </span>
+                            </Link>
+                        );
+                    })}
+                </div>
+            </motion.div>
+        </motion.div>
+    );
+}
+
+export default TrackDetail;