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

PC 곡 상세: 중복 앨범아트 제거, 클릭 이벤트 제거

Browse source
This commit is contained in:
caadiq 2026-01-12 18:10:26 +09:00
parent a73658854b
commit 5bd8d50022
1 changed files with 9 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/pages/pc/public/TrackDetail.jsx
View file

@ -2,7 +2,7 @@ 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, Play, ExternalLink, ChevronRight } from 'lucide-react';
import { Clock, User, Music, Mic2, ChevronRight } from 'lucide-react';
import { getTrack } from '../../../api/public/albums';
// 유튜브 URL에서 비디오 ID 추출
@ -85,19 +85,18 @@ function TrackDetail() {
</div>
{/* 트랙 정보 헤더 */}
<div className="flex gap-10 items-start mb-10">
<div className="flex gap-8 items-start mb-10">
{/* 앨범 커버 */}
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.4 }}
className="w-56 h-56 rounded-2xl overflow-hidden shadow-lg cursor-pointer group flex-shrink-0"
onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
className="w-48 h-48 rounded-2xl overflow-hidden shadow-lg flex-shrink-0"
>
<img
src={track.album?.cover_medium_url}
alt={track.album?.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
className="w-full h-full object-cover"
/>
</motion.div>
@ -119,22 +118,14 @@ function TrackDetail() {
</span>
</div>
<h1 className="text-4xl font-bold mb-4 text-gray-900">{track.title}</h1>
<h1 className="text-4xl font-bold mb-3 text-gray-900">{track.title}</h1>
{/* 앨범 정보 */}
{/* 앨범 정보 (텍스트만) */}
<Link
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
className="inline-flex items-center gap-3 mb-4 group"
className="text-gray-500 hover:text-primary transition-colors mb-3 block"
>
<img
src={track.album?.cover_thumb_url}
alt=""
className="w-10 h-10 rounded-lg object-cover"
/>
<div>
<p className="text-xs text-gray-400">{track.album?.album_type}</p>
<p className="font-medium text-gray-700 group-hover:text-primary transition-colors">{track.album?.title}</p>
</div>
{track.album?.album_type} · {track.album?.title}
</Link>
{/* 재생 시간 */}
@ -289,7 +280,7 @@ function TrackDetail() {
가사
</h2>
{track.lyrics ? (
<div className="text-gray-700 leading-[2] whitespace-pre-line text-[15px] max-h-[600px] overflow-y-auto pr-4 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
<div className="text-gray-700 leading-[2] whitespace-pre-line text-[15px] max-h-[600px] overflow-y-auto pr-4">
{track.lyrics}
</div>
) : (