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> <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) => {
<Link const isCurrent = t.title === track.title;
key={t.id} return (
to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`} <Link
className={`flex items-center gap-3 p-3 rounded-xl transition-all ${ key={t.id}
t.title === track.title to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`}
? 'bg-primary/10 text-primary' className={`group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${
: 'hover:bg-gray-50' isCurrent
}`} ? 'bg-primary text-white'
> : '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' <div className={`w-6 text-center text-xs tabular-nums ${
}`}> isCurrent ? 'text-white/80' : 'text-gray-400'
{String(t.track_number).padStart(2, '0')} }`}>
</span> {isCurrent ? (
<span className={`flex-1 text-sm truncate ${ <Music size={14} className="mx-auto text-white" />
t.title === track.title ? 'font-semibold' : '' ) : (
}`}> String(t.track_number).padStart(2, '0')
{t.title} )}
</span> </div>
{t.is_title_track === 1 && (
<span className="px-2 py-0.5 bg-primary text-white text-[10px] font-bold rounded-md"> {/* 곡 제목 */}
TITLE <span className={`flex-1 text-sm truncate ${
isCurrent ? 'font-semibold' : 'group-hover:text-gray-900'
}`}>
{t.title}
</span> </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> </div>
</motion.div> </motion.div>
</div> </div>