caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
caadiq 2026-01-12 18:51:38 +09:00
parent 5d4c2f32fc
commit 5f2c86b783
1 changed files with 30 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/pages/mobile/public/TrackDetail.jsx
View file

@ -1,8 +1,8 @@
import { useMemo } from 'react'; import { useState, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom'; import { useParams, useNavigate, Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { motion } from 'framer-motion'; 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'; import { getTrack } from '../../../api/public/albums';
// 유튜브 URL에서 비디오 ID 추출 // 유튜브 URL에서 비디오 ID 추출
@ -39,6 +39,9 @@ function TrackDetail() {
}); });
const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.music_video_url), [track?.music_video_url]); const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.music_video_url), [track?.music_video_url]);
// 가사 펼침 상태
const [showFullLyrics, setShowFullLyrics] = useState(false);
if (loading) { if (loading) {
return ( return (
@ -61,7 +64,7 @@ function TrackDetail() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.3 }} 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"> <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 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.3 }} 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"> <h2 className="text-base font-bold mb-3 flex items-center gap-2">
<div className="w-1 h-4 bg-primary rounded-full"></div> <div className="w-1 h-4 bg-primary rounded-full"></div>
@ -216,9 +219,29 @@ function TrackDetail() {
</h2> </h2>
<div className="bg-gray-50 rounded-xl p-4"> <div className="bg-gray-50 rounded-xl p-4">
{track.lyrics ? ( {track.lyrics ? (
<div className="text-gray-700 leading-[1.8] whitespace-pre-line text-sm max-h-[400px] overflow-y-auto"> <>
{track.lyrics} <div className={`text-gray-700 leading-[1.8] whitespace-pre-line text-sm overflow-hidden ${
</div> !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"> <div className="text-center py-8 text-gray-400">
<Mic2 size={36} className="mx-auto mb-2 opacity-20" /> <Mic2 size={36} className="mx-auto mb-2 opacity-20" />