From 0232edc10a4f796b76c688d8cc2cbccffcba45be Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Mon, 12 Jan 2026 18:35:06 +0900
Subject: [PATCH] =?UTF-8?q?PC=20=EA=B3=A1=20=EC=83=81=EC=84=B8:=20?=
 =?UTF-8?q?=EC=88=98=EB=A1=9D=EA=B3=A1=20=EC=84=B9=EC=85=98=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EA=B0=9C=EC=84=A0=20(=ED=98=84=EC=9E=AC?=
 =?UTF-8?q?=20=EA=B3=A1=20=EA=B0=95=EC=A1=B0,=20=EC=9E=AC=EC=83=9D?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84,=20=EC=9D=8C=EC=95=85=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/pc/public/TrackDetail.jsx | 79 +++++++++++++-------
 1 file changed, 50 insertions(+), 29 deletions(-)

diff --git a/frontend/src/pages/pc/public/TrackDetail.jsx b/frontend/src/pages/pc/public/TrackDetail.jsx
index 9de747d..db35d98 100644
--- a/frontend/src/pages/pc/public/TrackDetail.jsx
+++ b/frontend/src/pages/pc/public/TrackDetail.jsx
@@ -233,36 +233,57 @@ function TrackDetail() {
                                 <div className="w-1 h-5 bg-primary rounded-full"></div>
                                 수록곡
                             </h2>
-                            <div className="space-y-1">
-                                {track.otherTracks?.map((t) => (
-                                    <Link
-                                        key={t.id}
-                                        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-primary/10 text-primary' 
-                                                : 'hover:bg-gray-50'
-                                        }`}
-                                    >
-                                        <span className={`w-7 h-7 flex items-center justify-center text-xs rounded-lg ${
-                                            t.title === track.title 
-                                                ? 'bg-primary text-white font-bold' 
-                                                : 'bg-gray-100 text-gray-500'
-                                        }`}>
-                                            {String(t.track_number).padStart(2, '0')}
-                                        </span>
-                                        <span className={`flex-1 text-sm truncate ${
-                                            t.title === track.title ? 'font-semibold' : ''
-                                        }`}>
-                                            {t.title}
-                                        </span>
-                                        {t.is_title_track === 1 && (
-                                            <span className="px-2 py-0.5 bg-primary text-white text-[10px] font-bold rounded-md">
-                                                TITLE
+                            <div className="space-y-0.5">
+                                {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={`group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${
+                                                isCurrent 
+                                                    ? 'bg-primary text-white' 
+                                                    : 'hover:bg-gray-50'
+                                            }`}
+                                        >
+                                            {/* 트랙 번호 / 재생 아이콘 */}
+                                            <div className={`w-6 text-center text-xs tabular-nums ${
+                                                isCurrent ? 'text-white/80' : 'text-gray-400'
+                                            }`}>
+                                                {isCurrent ? (
+                                                    <Music size={14} className="mx-auto text-white" />
+                                                ) : (
+                                                    String(t.track_number).padStart(2, '0')
+                                                )}
+                                            </div>
+                                            
+                                            {/* 곡 제목 */}
+                                            <span className={`flex-1 text-sm truncate ${
+                                                isCurrent ? 'font-semibold' : 'group-hover:text-gray-900'
+                                            }`}>
+                                                {t.title}
                                             </span>
-                                        )}
-                                    </Link>
-                                ))}
+                                            
+                                            {/* 타이틀 배지 */}
+                                            {t.is_title_track === 1 && (
+                                                <span className={`px-2 py-0.5 text-[10px] font-bold rounded-full ${
+                                                    isCurrent 
+                                                        ? 'bg-white/20 text-white' 
+                                                        : 'bg-primary/10 text-primary'
+                                                }`}>
+                                                    TITLE
+                                                </span>
+                                            )}
+                                            
+                                            {/* 재생 시간 */}
+                                            <span className={`text-xs tabular-nums ${
+                                                isCurrent ? 'text-white/70' : 'text-gray-400'
+                                            }`}>
+                                                {t.duration || ''}
+                                            </span>
+                                        </Link>
+                                    );
+                                })}
                             </div>
                         </motion.div>
                     </div>