feat: 모바일 곡 상세 페이지 애니메이션 개선

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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
+          <div className="w-24 h-24 rounded-xl overflow-hidden shadow-md flex-shrink-0">
-            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>
 
           {/* 트랙 정보 */}
           <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>
   );
 }
 

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>
         }