웹: PC 곡 상세 화면 구현 (TrackDetail 페이지)
This commit is contained in:
parent
dc65858d6b
commit
b18183a9f9
5 changed files with 318 additions and 0 deletions
|
|
@ -122,4 +122,59 @@ router.get("/:id", async (req, res) => {
|
|||
}
|
||||
});
|
||||
|
||||
// 앨범명과 트랙명으로 트랙 상세 조회
|
||||
router.get("/by-name/:albumName/track/:trackTitle", async (req, res) => {
|
||||
try {
|
||||
const albumName = decodeURIComponent(req.params.albumName);
|
||||
const trackTitle = decodeURIComponent(req.params.trackTitle);
|
||||
|
||||
// 앨범 조회
|
||||
const [albums] = await pool.query(
|
||||
"SELECT * FROM albums WHERE folder_name = ? OR title = ?",
|
||||
[albumName, albumName]
|
||||
);
|
||||
|
||||
if (albums.length === 0) {
|
||||
return res.status(404).json({ error: "앨범을 찾을 수 없습니다." });
|
||||
}
|
||||
|
||||
const album = albums[0];
|
||||
|
||||
// 해당 앨범의 트랙 조회
|
||||
const [tracks] = await pool.query(
|
||||
"SELECT * FROM tracks WHERE album_id = ? AND title = ?",
|
||||
[album.id, trackTitle]
|
||||
);
|
||||
|
||||
if (tracks.length === 0) {
|
||||
return res.status(404).json({ error: "트랙을 찾을 수 없습니다." });
|
||||
}
|
||||
|
||||
const track = tracks[0];
|
||||
|
||||
// 앨범의 다른 트랙 목록 조회
|
||||
const [otherTracks] = await pool.query(
|
||||
"SELECT id, track_number, title, is_title_track, duration FROM tracks WHERE album_id = ? ORDER BY track_number",
|
||||
[album.id]
|
||||
);
|
||||
|
||||
res.json({
|
||||
...track,
|
||||
album: {
|
||||
id: album.id,
|
||||
title: album.title,
|
||||
folder_name: album.folder_name,
|
||||
cover_thumb_url: album.cover_thumb_url,
|
||||
cover_medium_url: album.cover_medium_url,
|
||||
release_date: album.release_date,
|
||||
album_type: album.album_type,
|
||||
},
|
||||
otherTracks,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("트랙 조회 오류:", error);
|
||||
res.status(500).json({ error: "트랙 정보를 가져오는데 실패했습니다." });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import PCMembers from './pages/pc/public/Members';
|
|||
import PCAlbum from './pages/pc/public/Album';
|
||||
import PCAlbumDetail from './pages/pc/public/AlbumDetail';
|
||||
import PCAlbumGallery from './pages/pc/public/AlbumGallery';
|
||||
import PCTrackDetail from './pages/pc/public/TrackDetail';
|
||||
import PCSchedule from './pages/pc/public/Schedule';
|
||||
|
||||
// 모바일 페이지
|
||||
|
|
@ -78,6 +79,7 @@ function App() {
|
|||
<Route path="/album" element={<PCAlbum />} />
|
||||
<Route path="/album/:name" element={<PCAlbumDetail />} />
|
||||
<Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
|
||||
<Route path="/album/:name/track/:trackTitle" element={<PCTrackDetail />} />
|
||||
<Route path="/schedule" element={<PCSchedule />} />
|
||||
</Routes>
|
||||
</PCLayout>
|
||||
|
|
|
|||
|
|
@ -27,3 +27,12 @@ export async function getAlbumPhotos(albumId) {
|
|||
export async function getAlbumTracks(albumId) {
|
||||
return fetchApi(`/api/albums/${albumId}/tracks`);
|
||||
}
|
||||
|
||||
// 트랙 상세 조회 (앨범명, 트랙명으로)
|
||||
export async function getTrack(albumName, trackTitle) {
|
||||
return fetchApi(
|
||||
`/api/albums/by-name/${encodeURIComponent(
|
||||
albumName
|
||||
)}/track/${encodeURIComponent(trackTitle)}`
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -341,6 +341,7 @@ function AlbumDetail() {
|
|||
{album.tracks?.map((track, index) => (
|
||||
<div
|
||||
key={track.id}
|
||||
onClick={() => navigate(`/album/${encodeURIComponent(album.title)}/track/${encodeURIComponent(track.title)}`)}
|
||||
className={`group flex items-center gap-4 p-4 hover:bg-primary/5 transition-all duration-200 cursor-pointer ${
|
||||
index !== album.tracks.length - 1 ? 'border-b border-gray-100' : ''
|
||||
}`}
|
||||
|
|
|
|||
251
frontend/src/pages/pc/public/TrackDetail.jsx
Normal file
251
frontend/src/pages/pc/public/TrackDetail.jsx
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
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 { getTrack } from '../../../api/public/albums';
|
||||
import { formatDate } from '../../../utils/date';
|
||||
|
||||
// PC 곡 상세 페이지
|
||||
function TrackDetail() {
|
||||
const { name: albumName, trackTitle } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// useQuery로 트랙 데이터 로드
|
||||
const { data: track, isLoading: loading, error } = useQuery({
|
||||
queryKey: ['track', albumName, trackTitle],
|
||||
queryFn: () => getTrack(albumName, trackTitle),
|
||||
enabled: !!albumName && !!trackTitle,
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="py-16 flex justify-center items-center min-h-[60vh]"
|
||||
>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !track) {
|
||||
return (
|
||||
<div className="py-16 text-center">
|
||||
<p className="text-gray-500">트랙을 찾을 수 없습니다.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="py-16"
|
||||
>
|
||||
<div className="max-w-5xl mx-auto px-6">
|
||||
{/* 브레드크럼 네비게이션 */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
|
||||
<Link to="/album" className="hover:text-primary transition-colors">
|
||||
앨범
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<Link
|
||||
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
|
||||
className="hover:text-primary transition-colors"
|
||||
>
|
||||
{track.album?.title}
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<span className="text-gray-700">{track.title}</span>
|
||||
</div>
|
||||
|
||||
{/* 트랙 정보 헤더 */}
|
||||
<div className="flex gap-8 mb-10">
|
||||
{/* 앨범 커버 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-56 h-56 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg cursor-pointer group"
|
||||
onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
|
||||
>
|
||||
<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-300"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* 트랙 정보 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1, duration: 0.4 }}
|
||||
className="flex-1"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
{track.is_title_track === 1 && (
|
||||
<span className="px-3 py-1 bg-primary text-white text-sm font-medium rounded-full">
|
||||
TITLE
|
||||
</span>
|
||||
)}
|
||||
<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>
|
||||
|
||||
{/* 메타 정보 */}
|
||||
<div className="flex items-center gap-6 text-gray-500 mb-6">
|
||||
<Link
|
||||
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
|
||||
className="flex items-center gap-2 hover:text-primary transition-colors"
|
||||
>
|
||||
<Music size={18} />
|
||||
<span>{track.album?.title}</span>
|
||||
</Link>
|
||||
{track.duration && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={18} />
|
||||
<span>{track.duration}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 뮤직비디오 링크 */}
|
||||
{track.music_video_url && (
|
||||
<a
|
||||
href={track.music_video_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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"
|
||||
>
|
||||
<Play size={18} fill="currentColor" />
|
||||
뮤직비디오 보기
|
||||
<ExternalLink size={14} />
|
||||
</a>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 크레딧 & 가사 영역 */}
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{/* 왼쪽: 크레딧 + 수록곡 */}
|
||||
<div className="col-span-1 space-y-6">
|
||||
{/* 크레딧 */}
|
||||
{(track.lyricist || track.composer || track.arranger) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.4 }}
|
||||
className="bg-gray-50 rounded-2xl p-6"
|
||||
>
|
||||
<h2 className="text-lg font-bold mb-4">크레딧</h2>
|
||||
<div className="space-y-4">
|
||||
{track.lyricist && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<Mic2 size={14} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-0.5">작사</p>
|
||||
<p className="text-sm text-gray-700">{track.lyricist}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{track.composer && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<Music size={14} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-0.5">작곡</p>
|
||||
<p className="text-sm text-gray-700">{track.composer}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{track.arranger && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<User size={14} className="text-gray-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-0.5">편곡</p>
|
||||
<p className="text-sm text-gray-700">{track.arranger}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 수록곡 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3, duration: 0.4 }}
|
||||
className="bg-white border border-gray-100 rounded-2xl p-6"
|
||||
>
|
||||
<h2 className="text-lg font-bold mb-4">수록곡</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-2.5 rounded-lg transition-colors ${
|
||||
t.title === track.title
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<span className="w-6 text-center text-sm text-gray-400 tabular-nums">
|
||||
{String(t.track_number).padStart(2, '0')}
|
||||
</span>
|
||||
<span className={`flex-1 text-sm truncate ${
|
||||
t.title === track.title ? 'font-medium' : ''
|
||||
}`}>
|
||||
{t.title}
|
||||
</span>
|
||||
{t.is_title_track === 1 && (
|
||||
<span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-bold rounded">
|
||||
T
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 가사 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.25, duration: 0.4 }}
|
||||
className="col-span-2"
|
||||
>
|
||||
<div className="bg-white border border-gray-100 rounded-2xl p-8">
|
||||
<h2 className="text-lg font-bold mb-6">가사</h2>
|
||||
{track.lyrics ? (
|
||||
<div className="text-gray-700 leading-loose whitespace-pre-line">
|
||||
{track.lyrics}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12 text-gray-400">
|
||||
<Music size={48} className="mx-auto mb-4 opacity-30" />
|
||||
<p>가사 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TrackDetail;
|
||||
Loading…
Add table
Reference in a new issue