feat(Album): PC 타이틀곡 텍스트 제거 + 모바일 상세 UI 개선
- PC: 앨범 상세에서 '타이틀곡: OOO' 텍스트 제거 - 모바일: 앨범 상세 UI 전면 개선 - 티저 포토 섹션 추가 - 수록곡 리스트 스타일 개선 (트랙번호, TITLE 뱃지) - 컨셉 포토 6장 프리뷰 + 전체보기 링크 - 라이트박스 (다운로드, 이전/다음 네비게이션) - 앨범 API에서 folder_name 반환 추가
This commit is contained in:
parent
8e3cab9b10
commit
79a3501ef1
3 changed files with 393 additions and 102 deletions
|
|
@ -62,7 +62,7 @@ async function getAlbumDetails(album) {
|
||||||
router.get("/", async (req, res) => {
|
router.get("/", async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const [albums] = await pool.query(
|
const [albums] = await pool.query(
|
||||||
"SELECT id, title, album_type, album_type_short, release_date, cover_original_url, cover_medium_url, cover_thumb_url FROM albums ORDER BY release_date DESC"
|
"SELECT id, title, folder_name, album_type, album_type_short, release_date, cover_original_url, cover_medium_url, cover_thumb_url FROM albums ORDER BY release_date DESC"
|
||||||
);
|
);
|
||||||
|
|
||||||
// 각 앨범에 트랙 정보 추가
|
// 각 앨범에 트랙 정보 추가
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,100 @@
|
||||||
import { motion } from 'framer-motion';
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useParams, useNavigate } from 'react-router-dom';
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
import { ArrowLeft, Play } from 'lucide-react';
|
import { ArrowLeft, Play, Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
|
||||||
import { getAlbums, getAlbumTracks } from '../../../api/public/albums';
|
import { getAlbumByName } from '../../../api/public/albums';
|
||||||
|
import { formatDate } from '../../../utils/date';
|
||||||
|
|
||||||
// 모바일 앨범 상세 페이지
|
// 모바일 앨범 상세 페이지
|
||||||
function MobileAlbumDetail() {
|
function MobileAlbumDetail() {
|
||||||
const { name } = useParams();
|
const { name } = useParams();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [album, setAlbum] = useState(null);
|
const [album, setAlbum] = useState(null);
|
||||||
const [tracks, setTracks] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
|
||||||
|
const [imageLoaded, setImageLoaded] = useState(false);
|
||||||
|
|
||||||
|
// 라이트박스 네비게이션
|
||||||
|
const goToPrev = useCallback(() => {
|
||||||
|
if (lightbox.images.length <= 1) return;
|
||||||
|
setImageLoaded(false);
|
||||||
|
setLightbox(prev => ({
|
||||||
|
...prev,
|
||||||
|
index: (prev.index - 1 + prev.images.length) % prev.images.length
|
||||||
|
}));
|
||||||
|
}, [lightbox.images.length]);
|
||||||
|
|
||||||
|
const goToNext = useCallback(() => {
|
||||||
|
if (lightbox.images.length <= 1) return;
|
||||||
|
setImageLoaded(false);
|
||||||
|
setLightbox(prev => ({
|
||||||
|
...prev,
|
||||||
|
index: (prev.index + 1) % prev.images.length
|
||||||
|
}));
|
||||||
|
}, [lightbox.images.length]);
|
||||||
|
|
||||||
|
const closeLightbox = useCallback(() => {
|
||||||
|
setLightbox(prev => ({ ...prev, open: false }));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 이미지 다운로드
|
||||||
|
const downloadImage = useCallback(async () => {
|
||||||
|
const imageUrl = lightbox.images[lightbox.index];
|
||||||
|
if (!imageUrl) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(imageUrl);
|
||||||
|
const blob = await response.blob();
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = `fromis9_photo_${String(lightbox.index + 1).padStart(2, '0')}.webp`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('다운로드 오류:', error);
|
||||||
|
}
|
||||||
|
}, [lightbox.images, lightbox.index]);
|
||||||
|
|
||||||
|
// 라이트박스 body 스크롤 방지
|
||||||
|
useEffect(() => {
|
||||||
|
if (lightbox.open) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
return () => { document.body.style.overflow = ''; };
|
||||||
|
}, [lightbox.open]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 앨범 정보 로드
|
getAlbumByName(name)
|
||||||
getAlbums()
|
|
||||||
.then(data => {
|
.then(data => {
|
||||||
const found = data.find(a => a.folder_name === name);
|
setAlbum(data);
|
||||||
if (found) {
|
|
||||||
setAlbum(found);
|
|
||||||
// 트랙 정보 로드
|
|
||||||
getAlbumTracks(found.id)
|
|
||||||
.then(setTracks)
|
|
||||||
.catch(console.error);
|
|
||||||
}
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
})
|
})
|
||||||
.catch(console.error);
|
.catch(error => {
|
||||||
|
console.error('앨범 로드 오류:', error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
}, [name]);
|
}, [name]);
|
||||||
|
|
||||||
|
// 총 재생 시간 계산
|
||||||
|
const getTotalDuration = () => {
|
||||||
|
if (!album?.tracks) return '';
|
||||||
|
let totalSeconds = 0;
|
||||||
|
album.tracks.forEach(track => {
|
||||||
|
if (track.duration) {
|
||||||
|
const parts = track.duration.split(':');
|
||||||
|
totalSeconds += parseInt(parts[0]) * 60 + parseInt(parts[1]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const mins = Math.floor(totalSeconds / 60);
|
||||||
|
const secs = totalSeconds % 60;
|
||||||
|
return `${mins}:${String(secs).padStart(2, '0')}`;
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center h-64">
|
<div className="flex items-center justify-center h-64">
|
||||||
|
|
@ -45,96 +111,325 @@ function MobileAlbumDetail() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 모든 컨셉 포토를 하나의 배열로
|
||||||
|
const allPhotos = album.conceptPhotos ? Object.values(album.conceptPhotos).flat() : [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pb-6">
|
<>
|
||||||
{/* 헤더 */}
|
<div className="pb-6">
|
||||||
<div className="sticky top-14 z-40 bg-white/80 backdrop-blur-sm px-4 py-3 flex items-center gap-3 border-b">
|
{/* 헤더 */}
|
||||||
<button onClick={() => navigate(-1)} className="p-1">
|
<div className="sticky top-14 z-40 bg-white/95 backdrop-blur-sm px-4 py-3 flex items-center gap-3 border-b border-gray-100">
|
||||||
<ArrowLeft size={24} />
|
<button onClick={() => navigate(-1)} className="p-1 -ml-1">
|
||||||
</button>
|
<ArrowLeft size={22} />
|
||||||
<span className="font-semibold truncate">{album.title}</span>
|
</button>
|
||||||
|
<span className="font-semibold truncate">{album.title}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 앨범 정보 섹션 */}
|
||||||
|
<div className="px-4 pt-5 pb-4">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{/* 앨범 커버 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
className="w-32 h-32 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg"
|
||||||
|
onClick={() => setLightbox({
|
||||||
|
open: true,
|
||||||
|
images: [album.cover_original_url || album.cover_medium_url],
|
||||||
|
index: 0
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{album.cover_medium_url && (
|
||||||
|
<img
|
||||||
|
src={album.cover_medium_url}
|
||||||
|
alt={album.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* 앨범 정보 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
className="flex-1 min-w-0"
|
||||||
|
>
|
||||||
|
<span className="inline-block px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-2">
|
||||||
|
{album.album_type}
|
||||||
|
</span>
|
||||||
|
<h1 className="text-xl font-bold mb-2 truncate">{album.title}</h1>
|
||||||
|
|
||||||
|
{/* 메타 정보 */}
|
||||||
|
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar size={12} />
|
||||||
|
<span>{formatDate(album.release_date, 'YYYY.MM.DD')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Music2 size={12} />
|
||||||
|
<span>{album.tracks?.length || 0}곡</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Clock size={12} />
|
||||||
|
<span>{getTotalDuration()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 티저 포토 */}
|
||||||
|
{album.teasers && album.teasers.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="px-4 mb-5"
|
||||||
|
>
|
||||||
|
<p className="text-xs text-gray-400 mb-2">티저 포토</p>
|
||||||
|
<div className="flex gap-2 overflow-x-auto pb-1 -mx-4 px-4">
|
||||||
|
{album.teasers.map((teaser, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
onClick={() => setLightbox({
|
||||||
|
open: true,
|
||||||
|
images: album.teasers.map(t => t.original_url),
|
||||||
|
index,
|
||||||
|
teasers: album.teasers
|
||||||
|
})}
|
||||||
|
className="w-20 h-20 flex-shrink-0 bg-gray-200 rounded-xl overflow-hidden relative"
|
||||||
|
>
|
||||||
|
{teaser.media_type === 'video' ? (
|
||||||
|
<>
|
||||||
|
<video
|
||||||
|
src={teaser.original_url}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
muted
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-black/30">
|
||||||
|
<div className="w-7 h-7 bg-white/90 rounded-full flex items-center justify-center">
|
||||||
|
<Play size={12} fill="currentColor" className="ml-0.5 text-gray-800" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={teaser.thumb_url || teaser.original_url}
|
||||||
|
alt={`Teaser ${index + 1}`}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 수록곡 */}
|
||||||
|
{album.tracks && album.tracks.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="px-4 mb-5"
|
||||||
|
>
|
||||||
|
<h2 className="text-base font-bold mb-3">수록곡</h2>
|
||||||
|
<div className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||||
|
{album.tracks.map((track, index) => (
|
||||||
|
<div
|
||||||
|
key={track.id}
|
||||||
|
className={`flex items-center gap-3 px-4 py-3 ${
|
||||||
|
index !== album.tracks.length - 1 ? 'border-b border-gray-100' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
{String(track.track_number).padStart(2, '0')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<p className={`text-sm font-medium truncate ${track.is_title_track ? 'text-primary' : ''}`}>
|
||||||
|
{track.title}
|
||||||
|
</p>
|
||||||
|
{track.is_title_track === 1 && (
|
||||||
|
<span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-medium rounded">
|
||||||
|
TITLE
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-400 tabular-nums">
|
||||||
|
{track.duration || '-'}
|
||||||
|
</span>
|
||||||
|
{track.music_video_url && (
|
||||||
|
<a
|
||||||
|
href={track.music_video_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="p-1.5 text-red-500"
|
||||||
|
>
|
||||||
|
<Play size={16} fill="currentColor" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 컨셉 포토 */}
|
||||||
|
{allPhotos.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="px-4"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h2 className="text-base font-bold">컨셉 포토</h2>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate(`/album/${name}/gallery`)}
|
||||||
|
className="text-xs text-primary"
|
||||||
|
>
|
||||||
|
전체보기 ({allPhotos.length}장)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{allPhotos.slice(0, 6).map((photo, idx) => (
|
||||||
|
<div
|
||||||
|
key={photo.id}
|
||||||
|
onClick={() => setLightbox({
|
||||||
|
open: true,
|
||||||
|
images: allPhotos.map(p => p.original_url),
|
||||||
|
index: idx
|
||||||
|
})}
|
||||||
|
className="aspect-square bg-gray-200 rounded-xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={photo.thumb_url || photo.medium_url}
|
||||||
|
alt={`컨셉 포토 ${idx + 1}`}
|
||||||
|
loading="lazy"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 설명 */}
|
||||||
|
{album.description && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="px-4 mt-5"
|
||||||
|
>
|
||||||
|
<h2 className="text-base font-bold mb-3">소개</h2>
|
||||||
|
<p className="text-sm text-gray-600 leading-relaxed bg-white p-4 rounded-2xl shadow-sm">
|
||||||
|
{album.description}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 앨범 정보 */}
|
{/* 라이트박스 */}
|
||||||
<div className="px-4 py-6">
|
<AnimatePresence>
|
||||||
<div className="flex gap-4">
|
{lightbox.open && (
|
||||||
<div className="w-32 h-32 rounded-2xl overflow-hidden bg-gray-200 shadow-lg flex-shrink-0">
|
<motion.div
|
||||||
{album.cover_medium_url && (
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="fixed inset-0 bg-black z-50 flex items-center justify-center"
|
||||||
|
onClick={closeLightbox}
|
||||||
|
>
|
||||||
|
{/* 상단 버튼 */}
|
||||||
|
<div className="absolute top-4 right-4 flex gap-3 z-10">
|
||||||
|
<button
|
||||||
|
className="text-white/70 p-2"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
downloadImage();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Download size={22} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="text-white/70 p-2"
|
||||||
|
onClick={closeLightbox}
|
||||||
|
>
|
||||||
|
<X size={24} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 이전 버튼 */}
|
||||||
|
{lightbox.images.length > 1 && (
|
||||||
|
<button
|
||||||
|
className="absolute left-2 p-2 text-white/70 z-10"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
goToPrev();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={32} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 로딩 스피너 */}
|
||||||
|
{!imageLoaded && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 이미지/비디오 */}
|
||||||
|
{lightbox.teasers?.[lightbox.index]?.media_type === 'video' ? (
|
||||||
|
<video
|
||||||
|
src={lightbox.images[lightbox.index]}
|
||||||
|
className={`max-w-full max-h-full object-contain transition-opacity ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
onCanPlay={() => setImageLoaded(true)}
|
||||||
|
controls
|
||||||
|
autoPlay
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
<img
|
<img
|
||||||
src={album.cover_medium_url}
|
src={lightbox.images[lightbox.index]}
|
||||||
alt={album.title}
|
alt="확대 이미지"
|
||||||
className="w-full h-full object-cover"
|
className={`max-w-full max-h-full object-contain transition-opacity ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
onLoad={() => setImageLoaded(true)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h1 className="text-xl font-bold">{album.title}</h1>
|
|
||||||
<p className="text-gray-500 text-sm mt-1">{album.album_type}</p>
|
|
||||||
<p className="text-gray-400 text-sm">{album.release_date}</p>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => navigate(`/album/${name}/gallery`)}
|
|
||||||
className="mt-4 px-4 py-2 bg-primary text-white rounded-full text-sm font-medium"
|
|
||||||
>
|
|
||||||
갤러리 보기
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 트랙 리스트 */}
|
{/* 다음 버튼 */}
|
||||||
{tracks.length > 0 && (
|
{lightbox.images.length > 1 && (
|
||||||
<div className="px-4">
|
<button
|
||||||
<h2 className="text-lg font-bold mb-3">수록곡</h2>
|
className="absolute right-2 p-2 text-white/70 z-10"
|
||||||
<div className="bg-white rounded-2xl overflow-hidden shadow-sm">
|
onClick={(e) => {
|
||||||
{tracks.map((track, index) => (
|
e.stopPropagation();
|
||||||
<motion.div
|
goToNext();
|
||||||
key={track.id}
|
}}
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ delay: index * 0.05 }}
|
|
||||||
className="flex items-center gap-3 p-4 border-b border-gray-100 last:border-none"
|
|
||||||
>
|
>
|
||||||
<span className="w-6 text-center text-gray-400 text-sm">
|
<ChevronRight size={32} />
|
||||||
{track.track_number}
|
</button>
|
||||||
</span>
|
)}
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className={`font-medium text-sm truncate ${track.is_title_track ? 'text-primary' : ''}`}>
|
|
||||||
{track.title}
|
|
||||||
{track.is_title_track && (
|
|
||||||
<span className="ml-2 text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
|
|
||||||
타이틀
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-400 truncate">{track.duration}</p>
|
|
||||||
</div>
|
|
||||||
{track.music_video_url && (
|
|
||||||
<a
|
|
||||||
href={track.music_video_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="p-2 text-red-500"
|
|
||||||
>
|
|
||||||
<Play size={18} fill="currentColor" />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 설명 */}
|
{/* 인디케이터 */}
|
||||||
{album.description && (
|
{lightbox.images.length > 1 && (
|
||||||
<div className="px-4 mt-6">
|
<div className="absolute bottom-6 left-0 right-0 flex justify-center gap-1.5">
|
||||||
<h2 className="text-lg font-bold mb-3">소개</h2>
|
{lightbox.images.map((_, i) => (
|
||||||
<p className="text-gray-600 text-sm leading-relaxed bg-white p-4 rounded-2xl">
|
<div
|
||||||
{album.description}
|
key={i}
|
||||||
</p>
|
className={`w-1.5 h-1.5 rounded-full transition-colors ${
|
||||||
</div>
|
i === lightbox.index ? 'bg-white' : 'bg-white/40'
|
||||||
)}
|
}`}
|
||||||
</div>
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -289,10 +289,6 @@ function AlbumDetail() {
|
||||||
<span>{getTotalDuration()}</span>
|
<span>{getTotalDuration()}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-sm text-primary font-medium mb-4">
|
|
||||||
타이틀곡: {album.tracks?.find(t => t.is_title_track === 1)?.title || album.tracks?.[0]?.title}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 앨범 티저 이미지/영상 */}
|
{/* 앨범 티저 이미지/영상 */}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue