From 5f2c86b783562fc808750e6ea3126a60ef9d9ba8 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Mon, 12 Jan 2026 18:51:38 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EA=B3=A1=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8:=20=EA=B0=80=EC=82=AC=20=EB=8D=94=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0/=EC=A0=91=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80,=20=ED=95=98=EB=8B=A8=20=EC=97=AC=EB=B0=B1=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/mobile/public/TrackDetail.jsx   | 37 +++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/mobile/public/TrackDetail.jsx b/frontend/src/pages/mobile/public/TrackDetail.jsx
index 5c7e17a..bf3af5b 100644
--- a/frontend/src/pages/mobile/public/TrackDetail.jsx
+++ b/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 추출
@@ -39,6 +39,9 @@ function TrackDetail() {
     });
 
     const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.music_video_url), [track?.music_video_url]);
+    
+    // 가사 펼침 상태
+    const [showFullLyrics, setShowFullLyrics] = useState(false);
 
     if (loading) {
         return (
@@ -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">
-                            {track.lyrics}
-                        </div>
+                        <>
+                            <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" />