모바일 곡 상세: 가사 더보기/접기 기능 추가, 하단 여백 조정

frontend/src/pages/mobile/public/TrackDetail.jsx

@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
+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, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Clock, User, Music, Mic2, ChevronLeft, ChevronDown, ChevronUp } from 'lucide-react';
 import { getTrack } from '../../../api/public/albums';
 
 // 유튜브 URL에서 비디오 ID 추출
@@ -40,6 +40,9 @@ function TrackDetail() {
 
     const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.music_video_url), [track?.music_video_url]);
     
+    // 가사 펼침 상태
+    const [showFullLyrics, setShowFullLyrics] = useState(false);
+
     if (loading) {
         return (
             <div className="flex justify-center items-center min-h-[60vh]">
@@ -61,7 +64,7 @@ function TrackDetail() {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.3 }}
-            className="pb-6"
+            className="pb-4"
         >
             {/* 헤더 - 뒤로가기 */}
             <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-100">
@@ -208,7 +211,7 @@ function TrackDetail() {
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.2, duration: 0.3 }}
-                className="px-4 mb-5"
+                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>
@@ -216,9 +219,29 @@ function TrackDetail() {
                 </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">
+                        <>
+                            <div className={`text-gray-700 leading-[1.8] whitespace-pre-line text-sm overflow-hidden ${
+                                !showFullLyrics ? 'max-h-32' : ''
+                            }`}>
                                 {track.lyrics}
                             </div>
+                            <button
+                                onClick={() => setShowFullLyrics(!showFullLyrics)}
+                                className="w-full mt-3 pt-3 border-t border-gray-200 flex items-center justify-center gap-1 text-sm text-gray-500"
+                            >
+                                {showFullLyrics ? (
+                                    <>
+                                        접기
+                                        <ChevronUp size={16} />
+                                    </>
+                                ) : (
+                                    <>
+                                        더보기
+                                        <ChevronDown size={16} />
+                                    </>
+                                )}
+                            </button>
+                        </>
                     ) : (
                         <div className="text-center py-8 text-gray-400">
                             <Mic2 size={36} className="mx-auto mb-2 opacity-20" />