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:35:06 +09:00
parent 6fbad62cdc
commit 0232edc10a
1 changed files with 50 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -233,36 +233,57 @@ function TrackDetail() {
<div className="w-1 h-5 bg-primary rounded-full"></div>
수록곡
</h2>
<div className="space-y-1">
{track.otherTracks?.map((t) => (
<Link
key={t.id}
to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`}
className={`flex items-center gap-3 p-3 rounded-xl transition-all ${
t.title === track.title
? 'bg-primary/10 text-primary'
: 'hover:bg-gray-50'
}`}
>
<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')}
</span>
<span className={`flex-1 text-sm truncate ${
t.title === track.title ? 'font-semibold' : ''
}`}>
{t.title}
</span>
{t.is_title_track === 1 && (
<span className="px-2 py-0.5 bg-primary text-white text-[10px] font-bold rounded-md">
TITLE
<div className="space-y-0.5">
{track.otherTracks?.map((t, index) => {
const isCurrent = t.title === track.title;
return (
<Link
key={t.id}
to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`}
className={`group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${
isCurrent
? 'bg-primary text-white'
: 'hover:bg-gray-50'
}`}
>
{/* 트랙 번호 / 재생 아이콘 */}
<div className={`w-6 text-center text-xs tabular-nums ${
isCurrent ? 'text-white/80' : 'text-gray-400'
}`}>
{isCurrent ? (
<Music size={14} className="mx-auto text-white" />
) : (
String(t.track_number).padStart(2, '0')
)}
</div>
{/* 곡 제목 */}
<span className={`flex-1 text-sm truncate ${
isCurrent ? 'font-semibold' : 'group-hover:text-gray-900'
}`}>
{t.title}
</span>
)}
</Link>
))}
{/* 타이틀 배지 */}
{t.is_title_track === 1 && (
<span className={`px-2 py-0.5 text-[10px] font-bold rounded-full ${
isCurrent
? 'bg-white/20 text-white'
: 'bg-primary/10 text-primary'
}`}>
TITLE
</span>
)}
{/* 재생 시간 */}
<span className={`text-xs tabular-nums ${
isCurrent ? 'text-white/70' : 'text-gray-400'
}`}>
{t.duration || ''}
</span>
</Link>
);
})}
</div>
</motion.div>
</div>