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

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