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" > {/* 헤더 - 뒤로가기 */}
@@ -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" >

@@ -216,9 +219,29 @@ function TrackDetail() {

{track.lyrics ? ( -
- {track.lyrics} -
+ <> +
+ {track.lyrics} +
+ + ) : (