From 0c6d250a9d9ae4eec957eb853d8afd726feb26a8 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sat, 24 Jan 2026 10:38:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EA=B3=A1?=
 =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=95=A0?=
 =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 앨범 상세 페이지와 동일한 순차 애니메이션 적용
- 툴바 제목 "곡 상세" → "앨범"으로 변경

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/pages/mobile/album/TrackDetail.jsx    | 33 +++++++++----------
 frontend/src/routes/mobile/index.jsx          |  2 +-
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages/mobile/album/TrackDetail.jsx b/frontend/src/pages/mobile/album/TrackDetail.jsx
index 58c4b19..888e101 100644
--- a/frontend/src/pages/mobile/album/TrackDetail.jsx
+++ b/frontend/src/pages/mobile/album/TrackDetail.jsx
@@ -92,19 +92,18 @@ function MobileTrackDetail() {
   }
 
   return (
-    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }} className="pb-4">
+    <div className="pb-4">
       {/* 트랙 정보 헤더 */}
-      <div className="px-4 py-5">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        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"
-          >
+          <div 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>
 
           {/* 트랙 정보 */}
           <div className="flex-1 min-w-0">
@@ -129,14 +128,14 @@ function MobileTrackDetail() {
             )}
           </div>
         </div>
-      </div>
+      </motion.div>
 
       {/* 뮤직비디오 섹션 */}
       {youtubeVideoId && (
         <motion.div
-          initial={{ opacity: 0, y: 10 }}
+          initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.1, duration: 0.3 }}
+          transition={{ delay: 0.15 }}
           className="px-4 mb-5"
         >
           <h2 className="text-base font-bold mb-3 flex items-center gap-2">
@@ -158,9 +157,9 @@ function MobileTrackDetail() {
       {/* 크레딧 */}
       {(track.lyricist || track.composer || track.arranger) && (
         <motion.div
-          initial={{ opacity: 0, y: 10 }}
+          initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.15, duration: 0.3 }}
+          transition={{ delay: 0.2 }}
           className="px-4 mb-5"
         >
           <h2 className="text-base font-bold mb-3 flex items-center gap-2">
@@ -207,9 +206,9 @@ function MobileTrackDetail() {
 
       {/* 가사 */}
       <motion.div
-        initial={{ opacity: 0, y: 10 }}
+        initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.2, duration: 0.3 }}
+        transition={{ delay: 0.25 }}
         className="px-4"
       >
         <h2 className="text-base font-bold mb-3 flex items-center gap-2">
@@ -251,7 +250,7 @@ function MobileTrackDetail() {
           )}
         </div>
       </motion.div>
-    </motion.div>
+    </div>
   );
 }
 
diff --git a/frontend/src/routes/mobile/index.jsx b/frontend/src/routes/mobile/index.jsx
index 9c5f0d1..a342752 100644
--- a/frontend/src/routes/mobile/index.jsx
+++ b/frontend/src/routes/mobile/index.jsx
@@ -75,7 +75,7 @@ export default function MobileRoutes() {
       <Route
         path="/album/:name/track/:trackTitle"
         element={
-          <Layout pageTitle="곡 상세">
+          <Layout pageTitle="앨범">
             <TrackDetail />
           </Layout>
         }