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:00:41 +09:00
parent 4e52f79cd5
commit 61b8bf4815
1 changed files with 147 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

257
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 { 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, Play, ExternalLink, ChevronRight } from 'lucide-react'; import { Clock, User, Music, Mic2, Play, ExternalLink, ChevronRight, Disc3 } from 'lucide-react';
import { getTrack } from '../../../api/public/albums'; import { getTrack } from '../../../api/public/albums';
import { formatDate } from '../../../utils/date'; import { formatDate } from '../../../utils/date';
@ -43,96 +43,116 @@ function TrackDetail() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
className="py-16"
> >
<div className="max-w-5xl mx-auto px-6"> {/* 히어로 섹션 - 그라데이션 배경 */}
{/* 브레드크럼 네비게이션 */} <div className="relative bg-gradient-to-b from-primary/10 via-primary/5 to-white pt-10 pb-16">
<div className="flex items-center gap-2 text-sm text-gray-500 mb-8"> <div className="max-w-5xl mx-auto px-6">
<Link to="/album" className="hover:text-primary transition-colors"> {/* 브레드크럼 네비게이션 */}
앨범 <div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
</Link> <Link to="/album" className="hover:text-primary transition-colors">
<span>/</span> 앨범
<Link </Link>
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`} <ChevronRight size={14} />
className="hover:text-primary transition-colors" <Link
> to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
{track.album?.title} className="hover:text-primary transition-colors"
</Link> >
<span>/</span> {track.album?.title}
<span className="text-gray-700">{track.title}</span> </Link>
</div> <ChevronRight size={14} />
<span className="text-gray-700 font-medium">{track.title}</span>
</div>
{/* 트랙 정보 헤더 */} {/* 트랙 정보 헤더 */}
<div className="flex gap-8 mb-10"> <div className="flex gap-10 items-start">
{/* 앨범 커버 */} {/* 앨범 커버 */}
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.4 }} transition={{ duration: 0.4 }}
className="w-56 h-56 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg cursor-pointer group" className="relative group"
onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)} >
> <div
<img className="w-64 h-64 rounded-2xl overflow-hidden shadow-2xl cursor-pointer"
src={track.album?.cover_medium_url} onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
alt={track.album?.title} >
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" <img
/> src={track.album?.cover_medium_url}
</motion.div> alt={track.album?.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/>
</div>
{/* 재생 느낌의 오버레이 */}
<div className="absolute -bottom-3 -right-3 w-14 h-14 bg-primary rounded-full shadow-lg flex items-center justify-center">
<Disc3 size={28} className="text-white animate-spin" style={{ animationDuration: '3s' }} />
</div>
</motion.div>
{/* 트랙 정보 */} {/* 트랙 정보 */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1, duration: 0.4 }} transition={{ delay: 0.1, duration: 0.4 }}
className="flex-1" className="flex-1 pt-4"
> >
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-4">
{track.is_title_track === 1 && ( {track.is_title_track === 1 && (
<span className="px-3 py-1 bg-primary text-white text-sm font-medium rounded-full"> <span className="px-4 py-1.5 bg-gradient-to-r from-primary to-primary-dark text-white text-sm font-bold rounded-full shadow-md">
TITLE TITLE
</span>
)}
<span className="px-3 py-1 bg-white/80 backdrop-blur-sm text-gray-600 text-sm rounded-full shadow-sm">
Track {String(track.track_number).padStart(2, '0')}
</span> </span>
)} </div>
<span className="text-sm text-gray-500">
Track {String(track.track_number).padStart(2, '0')}
</span>
</div>
<h1 className="text-4xl font-bold mb-4">{track.title}</h1> <h1 className="text-5xl font-bold mb-5 text-gray-900">{track.title}</h1>
{/* 메타 정보 */} {/* 앨범 정보 카드 */}
<div className="flex items-center gap-6 text-gray-500 mb-6">
<Link <Link
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`} to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
className="flex items-center gap-2 hover:text-primary transition-colors" className="inline-flex items-center gap-4 px-5 py-3 bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm hover:shadow-md transition-all group mb-6"
> >
<Music size={18} /> <img
<span>{track.album?.title}</span> src={track.album?.cover_thumb_url}
</Link> alt=""
{track.duration && ( className="w-12 h-12 rounded-lg object-cover"
<div className="flex items-center gap-2"> />
<Clock size={18} /> <div>
<span>{track.duration}</span> <p className="text-xs text-gray-400 mb-0.5">{track.album?.album_type}</p>
<p className="font-semibold text-gray-800 group-hover:text-primary transition-colors">{track.album?.title}</p>
</div> </div>
)} <ChevronRight size={18} className="text-gray-400 group-hover:text-primary transition-colors" />
</div> </Link>
{/* 뮤직비디오 링크 */} {/* 재생 시간 & 뮤비 */}
{track.music_video_url && ( <div className="flex items-center gap-4">
<a {track.duration && (
href={track.music_video_url} <div className="flex items-center gap-2 text-gray-500">
target="_blank" <Clock size={18} />
rel="noopener noreferrer" <span className="font-medium">{track.duration}</span>
className="inline-flex items-center gap-2 px-5 py-2.5 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors" </div>
> )}
<Play size={18} fill="currentColor" /> {track.music_video_url && (
뮤직비디오 보기 <a
<ExternalLink size={14} /> href={track.music_video_url}
</a> target="_blank"
)} rel="noopener noreferrer"
</motion.div> className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-full hover:from-red-600 hover:to-red-700 transition-all shadow-lg hover:shadow-xl"
>
<Play size={18} fill="currentColor" />
뮤직비디오
<ExternalLink size={14} />
</a>
)}
</div>
</motion.div>
</div>
</div> </div>
</div>
{/* 크레딧 & 가사 영역 */} {/* 메인 콘텐츠 */}
<div className="max-w-5xl mx-auto px-6 py-10">
<div className="grid grid-cols-3 gap-8"> <div className="grid grid-cols-3 gap-8">
{/* 왼쪽: 크레딧 + 수록곡 */} {/* 왼쪽: 크레딧 + 수록곡 */}
<div className="col-span-1 space-y-6"> <div className="col-span-1 space-y-6">
@ -142,40 +162,43 @@ function TrackDetail() {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.4 }} transition={{ delay: 0.2, duration: 0.4 }}
className="bg-gray-50 rounded-2xl p-6" className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-6 border border-gray-100"
> >
<h2 className="text-lg font-bold mb-4">크레딧</h2> <h2 className="text-lg font-bold mb-5 flex items-center gap-2">
<div className="space-y-4"> <div className="w-1 h-5 bg-primary rounded-full"></div>
크레딧
</h2>
<div className="space-y-5">
{track.lyricist && ( {track.lyricist && (
<div className="flex items-start gap-3"> <div className="flex items-start gap-4">
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0"> <div className="w-10 h-10 bg-gradient-to-br from-primary/20 to-primary/10 rounded-xl flex items-center justify-center flex-shrink-0">
<Mic2 size={14} className="text-primary" /> <Mic2 size={18} className="text-primary" />
</div> </div>
<div> <div className="flex-1">
<p className="text-xs text-gray-400 mb-0.5">작사</p> <p className="text-xs text-gray-400 font-medium mb-1">작사</p>
<p className="text-sm text-gray-700">{track.lyricist}</p> <p className="text-sm text-gray-700 leading-relaxed">{track.lyricist}</p>
</div> </div>
</div> </div>
)} )}
{track.composer && ( {track.composer && (
<div className="flex items-start gap-3"> <div className="flex items-start gap-4">
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0"> <div className="w-10 h-10 bg-gradient-to-br from-blue-100 to-blue-50 rounded-xl flex items-center justify-center flex-shrink-0">
<Music size={14} className="text-primary" /> <Music size={18} className="text-blue-500" />
</div> </div>
<div> <div className="flex-1">
<p className="text-xs text-gray-400 mb-0.5">작곡</p> <p className="text-xs text-gray-400 font-medium mb-1">작곡</p>
<p className="text-sm text-gray-700">{track.composer}</p> <p className="text-sm text-gray-700 leading-relaxed">{track.composer}</p>
</div> </div>
</div> </div>
)} )}
{track.arranger && ( {track.arranger && (
<div className="flex items-start gap-3"> <div className="flex items-start gap-4">
<div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0"> <div className="w-10 h-10 bg-gradient-to-br from-purple-100 to-purple-50 rounded-xl flex items-center justify-center flex-shrink-0">
<User size={14} className="text-gray-500" /> <User size={18} className="text-purple-500" />
</div> </div>
<div> <div className="flex-1">
<p className="text-xs text-gray-400 mb-0.5">편곡</p> <p className="text-xs text-gray-400 font-medium mb-1">편곡</p>
<p className="text-sm text-gray-700">{track.arranger}</p> <p className="text-sm text-gray-700 leading-relaxed">{track.arranger}</p>
</div> </div>
</div> </div>
)} )}
@ -188,30 +211,37 @@ function TrackDetail() {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3, duration: 0.4 }} transition={{ delay: 0.3, duration: 0.4 }}
className="bg-white border border-gray-100 rounded-2xl p-6" className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm"
> >
<h2 className="text-lg font-bold mb-4">수록곡</h2> <h2 className="text-lg font-bold mb-4 flex items-center gap-2">
<div className="w-1 h-5 bg-primary rounded-full"></div>
수록곡
</h2>
<div className="space-y-1"> <div className="space-y-1">
{track.otherTracks?.map((t) => ( {track.otherTracks?.map((t) => (
<Link <Link
key={t.id} key={t.id}
to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`} to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`}
className={`flex items-center gap-3 p-2.5 rounded-lg transition-colors ${ className={`flex items-center gap-3 p-3 rounded-xl transition-all ${
t.title === track.title t.title === track.title
? 'bg-primary/10 text-primary' ? 'bg-gradient-to-r from-primary/10 to-primary/5 text-primary shadow-sm'
: 'hover:bg-gray-50' : 'hover:bg-gray-50'
}`} }`}
> >
<span className="w-6 text-center text-sm text-gray-400 tabular-nums"> <span className={`w-7 h-7 flex items-center justify-center text-xs rounded-lg ${
t.title === track.title
? 'bg-primary text-white font-bold'
: 'bg-gray-100 text-gray-500'
}`}>
{String(t.track_number).padStart(2, '0')} {String(t.track_number).padStart(2, '0')}
</span> </span>
<span className={`flex-1 text-sm truncate ${ <span className={`flex-1 text-sm truncate ${
t.title === track.title ? 'font-medium' : '' t.title === track.title ? 'font-semibold' : ''
}`}> }`}>
{t.title} {t.title}
</span> </span>
{t.is_title_track === 1 && ( {t.is_title_track === 1 && (
<span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-bold rounded"> <span className="px-2 py-0.5 bg-primary text-white text-[10px] font-bold rounded-md">
T T
</span> </span>
)} )}
@ -228,16 +258,19 @@ function TrackDetail() {
transition={{ delay: 0.25, duration: 0.4 }} transition={{ delay: 0.25, duration: 0.4 }}
className="col-span-2" className="col-span-2"
> >
<div className="bg-white border border-gray-100 rounded-2xl p-8"> <div className="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm min-h-[500px]">
<h2 className="text-lg font-bold mb-6">가사</h2> <h2 className="text-lg font-bold mb-6 flex items-center gap-2">
<div className="w-1 h-5 bg-primary rounded-full"></div>
가사
</h2>
{track.lyrics ? ( {track.lyrics ? (
<div className="text-gray-700 leading-loose whitespace-pre-line"> <div className="text-gray-700 leading-[2] whitespace-pre-line text-[15px]">
{track.lyrics} {track.lyrics}
</div> </div>
) : ( ) : (
<div className="text-center py-12 text-gray-400"> <div className="text-center py-20 text-gray-400">
<Music size={48} className="mx-auto mb-4 opacity-30" /> <Mic2 size={56} className="mx-auto mb-4 opacity-20" />
<p>가사 정보가 없습니다</p> <p className="text-lg">가사 정보가 없습니다</p>
</div> </div>
)} )}
</div> </div>