From a73658854be12759ee0dae2cebf22816e1cfb2be Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Mon, 12 Jan 2026 18:05:29 +0900
Subject: [PATCH] =?UTF-8?q?PC=20=EA=B3=A1=20=EC=83=81=EC=84=B8:=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=95=EB=A6=AC=20(=EB=AE=A4?=
 =?UTF-8?q?=EB=B9=84=20embed,=20=ED=81=AC=EB=A0=88=EB=94=A7=20=EC=A4=84?=
 =?UTF-8?q?=EB=B0=94=EA=BF=88,=20=EA=B0=80=EC=82=AC=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/pc/public/TrackDetail.jsx | 263 ++++++++++---------
 1 file changed, 144 insertions(+), 119 deletions(-)

diff --git a/frontend/src/pages/pc/public/TrackDetail.jsx b/frontend/src/pages/pc/public/TrackDetail.jsx
index 8c6dd52..bf6d184 100644
--- a/frontend/src/pages/pc/public/TrackDetail.jsx
+++ b/frontend/src/pages/pc/public/TrackDetail.jsx
@@ -2,9 +2,29 @@ import { useState, 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, Play, ExternalLink, ChevronRight, Disc3 } from 'lucide-react';
+import { Clock, User, Music, Mic2, Play, ExternalLink, ChevronRight } from 'lucide-react';
 import { getTrack } from '../../../api/public/albums';
-import { formatDate } from '../../../utils/date';
+
+// 유튜브 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>
+    ));
+};
 
 // PC 곡 상세 페이지
 function TrackDetail() {
@@ -18,6 +38,8 @@ function TrackDetail() {
         enabled: !!albumName && !!trackTitle,
     });
 
+    const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.music_video_url), [track?.music_video_url]);
+
     if (loading) {
         return (
             <motion.div 
@@ -43,116 +65,113 @@ function TrackDetail() {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.3 }}
+            className="py-12"
         >
-            {/* 히어로 섹션 - 그라데이션 배경 */}
-            <div className="relative bg-gradient-to-b from-primary/10 via-primary/5 to-white pt-10 pb-16">
-                <div className="max-w-5xl mx-auto px-6">
-                    {/* 브레드크럼 네비게이션 */}
-                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
-                        <Link to="/album" className="hover:text-primary transition-colors">
-                            앨범
-                        </Link>
-                        <ChevronRight size={14} />
+            <div className="max-w-5xl mx-auto px-6">
+                {/* 브레드크럼 네비게이션 */}
+                <div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
+                    <Link to="/album" className="hover:text-primary transition-colors">
+                        앨범
+                    </Link>
+                    <ChevronRight size={14} />
+                    <Link 
+                        to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
+                        className="hover:text-primary transition-colors"
+                    >
+                        {track.album?.title}
+                    </Link>
+                    <ChevronRight size={14} />
+                    <span className="text-gray-700 font-medium">{track.title}</span>
+                </div>
+
+                {/* 트랙 정보 헤더 */}
+                <div className="flex gap-10 items-start mb-10">
+                    {/* 앨범 커버 */}
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ duration: 0.4 }}
+                        className="w-56 h-56 rounded-2xl overflow-hidden shadow-lg cursor-pointer group flex-shrink-0"
+                        onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
+                    >
+                        <img
+                            src={track.album?.cover_medium_url}
+                            alt={track.album?.title}
+                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                        />
+                    </motion.div>
+
+                    {/* 트랙 정보 */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.1, duration: 0.4 }}
+                        className="flex-1"
+                    >
+                        <div className="flex items-center gap-3 mb-3">
+                            {track.is_title_track === 1 && (
+                                <span className="px-3 py-1 bg-primary text-white text-sm font-bold rounded-full">
+                                    TITLE
+                                </span>
+                            )}
+                            <span className="text-gray-500 text-sm">
+                                Track {String(track.track_number).padStart(2, '0')}
+                            </span>
+                        </div>
+                        
+                        <h1 className="text-4xl font-bold mb-4 text-gray-900">{track.title}</h1>
+                        
+                        {/* 앨범 정보 */}
                         <Link 
                             to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
-                            className="hover:text-primary transition-colors"
+                            className="inline-flex items-center gap-3 mb-4 group"
                         >
-                            {track.album?.title}
+                            <img 
+                                src={track.album?.cover_thumb_url} 
+                                alt="" 
+                                className="w-10 h-10 rounded-lg object-cover"
+                            />
+                            <div>
+                                <p className="text-xs text-gray-400">{track.album?.album_type}</p>
+                                <p className="font-medium text-gray-700 group-hover:text-primary transition-colors">{track.album?.title}</p>
+                            </div>
                         </Link>
-                        <ChevronRight size={14} />
-                        <span className="text-gray-700 font-medium">{track.title}</span>
-                    </div>
 
-                    {/* 트랙 정보 헤더 */}
-                    <div className="flex gap-10 items-start">
-                        {/* 앨범 커버 */}
-                        <motion.div
-                            initial={{ opacity: 0, scale: 0.9 }}
-                            animate={{ opacity: 1, scale: 1 }}
-                            transition={{ duration: 0.4 }}
-                            className="relative group"
-                        >
-                            <div 
-                                className="w-64 h-64 rounded-2xl overflow-hidden shadow-2xl cursor-pointer"
-                                onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
-                            >
-                                <img
-                                    src={track.album?.cover_medium_url}
-                                    alt={track.album?.title}
-                                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                                />
+                        {/* 재생 시간 */}
+                        {track.duration && (
+                            <div className="flex items-center gap-2 text-gray-500">
+                                <Clock size={16} />
+                                <span>{track.duration}</span>
                             </div>
-                            {/* 재생 느낌의 오버레이 */}
-                            <div className="absolute -bottom-3 -right-3 w-14 h-14 bg-primary rounded-full shadow-lg flex items-center justify-center">
-                                <Disc3 size={28} className="text-white animate-spin" style={{ animationDuration: '3s' }} />
-                            </div>
-                        </motion.div>
-
-                        {/* 트랙 정보 */}
-                        <motion.div
-                            initial={{ opacity: 0, y: 20 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            transition={{ delay: 0.1, duration: 0.4 }}
-                            className="flex-1 pt-4"
-                        >
-                            <div className="flex items-center gap-3 mb-4">
-                                {track.is_title_track === 1 && (
-                                    <span className="px-4 py-1.5 bg-gradient-to-r from-primary to-primary-dark text-white text-sm font-bold rounded-full shadow-md">
-                                        TITLE
-                                    </span>
-                                )}
-                                <span className="px-3 py-1 bg-white/80 backdrop-blur-sm text-gray-600 text-sm rounded-full shadow-sm">
-                                    Track {String(track.track_number).padStart(2, '0')}
-                                </span>
-                            </div>
-                            
-                            <h1 className="text-5xl font-bold mb-5 text-gray-900">{track.title}</h1>
-                            
-                            {/* 앨범 정보 카드 */}
-                            <Link 
-                                to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
-                                className="inline-flex items-center gap-4 px-5 py-3 bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm hover:shadow-md transition-all group mb-6"
-                            >
-                                <img 
-                                    src={track.album?.cover_thumb_url} 
-                                    alt="" 
-                                    className="w-12 h-12 rounded-lg object-cover"
-                                />
-                                <div>
-                                    <p className="text-xs text-gray-400 mb-0.5">{track.album?.album_type}</p>
-                                    <p className="font-semibold text-gray-800 group-hover:text-primary transition-colors">{track.album?.title}</p>
-                                </div>
-                                <ChevronRight size={18} className="text-gray-400 group-hover:text-primary transition-colors" />
-                            </Link>
-
-                            {/* 재생 시간 & 뮤비 */}
-                            <div className="flex items-center gap-4">
-                                {track.duration && (
-                                    <div className="flex items-center gap-2 text-gray-500">
-                                        <Clock size={18} />
-                                        <span className="font-medium">{track.duration}</span>
-                                    </div>
-                                )}
-                                {track.music_video_url && (
-                                    <a
-                                        href={track.music_video_url}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-full hover:from-red-600 hover:to-red-700 transition-all shadow-lg hover:shadow-xl"
-                                    >
-                                        <Play size={18} fill="currentColor" />
-                                        뮤직비디오
-                                        <ExternalLink size={14} />
-                                    </a>
-                                )}
-                            </div>
-                        </motion.div>
-                    </div>
+                        )}
+                    </motion.div>
                 </div>
-            </div>
 
-            {/* 메인 콘텐츠 */}
-            <div className="max-w-5xl mx-auto px-6 py-10">
+                {/* 뮤직비디오 섹션 (유튜브 embed) */}
+                {youtubeVideoId && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.15, duration: 0.4 }}
+                        className="mb-10"
+                    >
+                        <h2 className="text-lg font-bold mb-4 flex items-center gap-2">
+                            <div className="w-1 h-5 bg-red-500 rounded-full"></div>
+                            뮤직비디오
+                        </h2>
+                        <div className="relative w-full aspect-video rounded-2xl overflow-hidden shadow-lg 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>
+                )}
+
+                {/* 메인 콘텐츠 */}
                 <div className="grid grid-cols-3 gap-8">
                     {/* 왼쪽: 크레딧 + 수록곡 */}
                     <div className="col-span-1 space-y-6">
@@ -162,7 +181,7 @@ function TrackDetail() {
                                 initial={{ opacity: 0, y: 20 }}
                                 animate={{ opacity: 1, y: 0 }}
                                 transition={{ delay: 0.2, duration: 0.4 }}
-                                className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-6 border border-gray-100"
+                                className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm"
                             >
                                 <h2 className="text-lg font-bold mb-5 flex items-center gap-2">
                                     <div className="w-1 h-5 bg-primary rounded-full"></div>
@@ -171,34 +190,40 @@ function TrackDetail() {
                                 <div className="space-y-5">
                                     {track.lyricist && (
                                         <div className="flex items-start gap-4">
-                                            <div className="w-10 h-10 bg-gradient-to-br from-primary/20 to-primary/10 rounded-xl flex items-center justify-center flex-shrink-0">
-                                                <Mic2 size={18} className="text-primary" />
+                                            <div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                                                <Mic2 size={16} className="text-gray-500" />
                                             </div>
                                             <div className="flex-1">
                                                 <p className="text-xs text-gray-400 font-medium mb-1">작사</p>
-                                                <p className="text-sm text-gray-700 leading-relaxed">{track.lyricist}</p>
+                                                <p className="text-sm text-gray-700 leading-relaxed">
+                                                    {formatCredit(track.lyricist)}
+                                                </p>
                                             </div>
                                         </div>
                                     )}
                                     {track.composer && (
                                         <div className="flex items-start gap-4">
-                                            <div className="w-10 h-10 bg-gradient-to-br from-blue-100 to-blue-50 rounded-xl flex items-center justify-center flex-shrink-0">
-                                                <Music size={18} className="text-blue-500" />
+                                            <div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                                                <Music size={16} className="text-gray-500" />
                                             </div>
                                             <div className="flex-1">
                                                 <p className="text-xs text-gray-400 font-medium mb-1">작곡</p>
-                                                <p className="text-sm text-gray-700 leading-relaxed">{track.composer}</p>
+                                                <p className="text-sm text-gray-700 leading-relaxed">
+                                                    {formatCredit(track.composer)}
+                                                </p>
                                             </div>
                                         </div>
                                     )}
                                     {track.arranger && (
                                         <div className="flex items-start gap-4">
-                                            <div className="w-10 h-10 bg-gradient-to-br from-purple-100 to-purple-50 rounded-xl flex items-center justify-center flex-shrink-0">
-                                                <User size={18} className="text-purple-500" />
+                                            <div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                                                <User size={16} className="text-gray-500" />
                                             </div>
                                             <div className="flex-1">
                                                 <p className="text-xs text-gray-400 font-medium mb-1">편곡</p>
-                                                <p className="text-sm text-gray-700 leading-relaxed">{track.arranger}</p>
+                                                <p className="text-sm text-gray-700 leading-relaxed">
+                                                    {formatCredit(track.arranger)}
+                                                </p>
                                             </div>
                                         </div>
                                     )}
@@ -224,7 +249,7 @@ function TrackDetail() {
                                         to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`}
                                         className={`flex items-center gap-3 p-3 rounded-xl transition-all ${
                                             t.title === track.title 
-                                                ? 'bg-gradient-to-r from-primary/10 to-primary/5 text-primary shadow-sm' 
+                                                ? 'bg-primary/10 text-primary' 
                                                 : 'hover:bg-gray-50'
                                         }`}
                                     >
@@ -258,19 +283,19 @@ function TrackDetail() {
                         transition={{ delay: 0.25, duration: 0.4 }}
                         className="col-span-2"
                     >
-                        <div className="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm min-h-[500px]">
+                        <div className="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm">
                             <h2 className="text-lg font-bold mb-6 flex items-center gap-2">
                                 <div className="w-1 h-5 bg-primary rounded-full"></div>
                                 가사
                             </h2>
                             {track.lyrics ? (
-                                <div className="text-gray-700 leading-[2] whitespace-pre-line text-[15px]">
+                                <div className="text-gray-700 leading-[2] whitespace-pre-line text-[15px] max-h-[600px] overflow-y-auto pr-4 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
                                     {track.lyrics}
                                 </div>
                             ) : (
-                                <div className="text-center py-20 text-gray-400">
-                                    <Mic2 size={56} className="mx-auto mb-4 opacity-20" />
-                                    <p className="text-lg">가사 정보가 없습니다</p>
+                                <div className="text-center py-16 text-gray-400">
+                                    <Mic2 size={48} className="mx-auto mb-4 opacity-20" />
+                                    <p>가사 정보가 없습니다</p>
                                 </div>
                             )}
                         </div>