웹: 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;
|
export default router;
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import PCMembers from './pages/pc/public/Members';
|
||||||
import PCAlbum from './pages/pc/public/Album';
|
import PCAlbum from './pages/pc/public/Album';
|
||||||
import PCAlbumDetail from './pages/pc/public/AlbumDetail';
|
import PCAlbumDetail from './pages/pc/public/AlbumDetail';
|
||||||
import PCAlbumGallery from './pages/pc/public/AlbumGallery';
|
import PCAlbumGallery from './pages/pc/public/AlbumGallery';
|
||||||
|
import PCTrackDetail from './pages/pc/public/TrackDetail';
|
||||||
import PCSchedule from './pages/pc/public/Schedule';
|
import PCSchedule from './pages/pc/public/Schedule';
|
||||||
|
|
||||||
// 모바일 페이지
|
// 모바일 페이지
|
||||||
|
|
@ -78,6 +79,7 @@ function App() {
|
||||||
<Route path="/album" element={<PCAlbum />} />
|
<Route path="/album" element={<PCAlbum />} />
|
||||||
<Route path="/album/:name" element={<PCAlbumDetail />} />
|
<Route path="/album/:name" element={<PCAlbumDetail />} />
|
||||||
<Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
|
<Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
|
||||||
|
<Route path="/album/:name/track/:trackTitle" element={<PCTrackDetail />} />
|
||||||
<Route path="/schedule" element={<PCSchedule />} />
|
<Route path="/schedule" element={<PCSchedule />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</PCLayout>
|
</PCLayout>
|
||||||
|
|
|
||||||
|
|
@ -27,3 +27,12 @@ export async function getAlbumPhotos(albumId) {
|
||||||
export async function getAlbumTracks(albumId) {
|
export async function getAlbumTracks(albumId) {
|
||||||
return fetchApi(`/api/albums/${albumId}/tracks`);
|
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) => (
|
{album.tracks?.map((track, index) => (
|
||||||
<div
|
<div
|
||||||
key={track.id}
|
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 ${
|
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' : ''
|
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