feat(Mobile Album): 앨범 상세 UI 개선
- 히어로 섹션 (커버 중앙 + 블러 배경) - 앨범 소개 바텀시트 다이얼로그 (드래그 닫기) - 수록곡 더보기/접기 기능 - 컨셉 포토 전체보기 버튼 모바일화 - 뮤직비디오 버튼 제거 - 라이트박스 showNav 조건 추가 - 앨범 API folder_name 검색으로 수정
This commit is contained in:
parent
79a3501ef1
commit
de2e02fcd9
2 changed files with 193 additions and 143 deletions
|
|
@ -81,13 +81,14 @@ router.get("/", async (req, res) => {
|
|||
}
|
||||
});
|
||||
|
||||
// 앨범명으로 조회
|
||||
// 앨범 folder_name으로 조회
|
||||
router.get("/by-name/:name", async (req, res) => {
|
||||
try {
|
||||
const albumName = decodeURIComponent(req.params.name);
|
||||
const [albums] = await pool.query("SELECT * FROM albums WHERE title = ?", [
|
||||
albumName,
|
||||
]);
|
||||
const folderName = decodeURIComponent(req.params.name);
|
||||
const [albums] = await pool.query(
|
||||
"SELECT * FROM albums WHERE folder_name = ?",
|
||||
[folderName]
|
||||
);
|
||||
|
||||
if (albums.length === 0) {
|
||||
return res.status(404).json({ error: "앨범을 찾을 수 없습니다." });
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft, Play, Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
|
||||
import { Play, Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download, ChevronDown, ChevronUp, FileText } from 'lucide-react';
|
||||
import { getAlbumByName } from '../../../api/public/albums';
|
||||
import { formatDate } from '../../../utils/date';
|
||||
|
||||
|
|
@ -11,8 +11,10 @@ function MobileAlbumDetail() {
|
|||
const navigate = useNavigate();
|
||||
const [album, setAlbum] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
|
||||
const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0, showNav: true });
|
||||
const [imageLoaded, setImageLoaded] = useState(false);
|
||||
const [showAllTracks, setShowAllTracks] = useState(false);
|
||||
const [showDescriptionModal, setShowDescriptionModal] = useState(false);
|
||||
|
||||
// 라이트박스 네비게이션
|
||||
const goToPrev = useCallback(() => {
|
||||
|
|
@ -60,13 +62,13 @@ function MobileAlbumDetail() {
|
|||
|
||||
// 라이트박스 body 스크롤 방지
|
||||
useEffect(() => {
|
||||
if (lightbox.open) {
|
||||
if (lightbox.open || showDescriptionModal) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, [lightbox.open]);
|
||||
}, [lightbox.open, showDescriptionModal]);
|
||||
|
||||
useEffect(() => {
|
||||
getAlbumByName(name)
|
||||
|
|
@ -113,80 +115,97 @@ function MobileAlbumDetail() {
|
|||
|
||||
// 모든 컨셉 포토를 하나의 배열로
|
||||
const allPhotos = album.conceptPhotos ? Object.values(album.conceptPhotos).flat() : [];
|
||||
const displayTracks = showAllTracks ? album.tracks : album.tracks?.slice(0, 5);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="pb-6">
|
||||
{/* 헤더 */}
|
||||
<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">
|
||||
<button onClick={() => navigate(-1)} className="p-1 -ml-1">
|
||||
<ArrowLeft size={22} />
|
||||
</button>
|
||||
<span className="font-semibold truncate">{album.title}</span>
|
||||
{/* 앨범 히어로 섹션 - 커버 이미지 배경 */}
|
||||
<div className="relative">
|
||||
{/* 배경 블러 이미지 */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<img
|
||||
src={album.cover_medium_url}
|
||||
alt=""
|
||||
className="w-full h-full object-cover blur-2xl scale-110 opacity-30"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white/60 via-white/80 to-white" />
|
||||
</div>
|
||||
|
||||
{/* 앨범 정보 섹션 */}
|
||||
<div className="px-4 pt-5 pb-4">
|
||||
<div className="flex gap-4">
|
||||
{/* 콘텐츠 */}
|
||||
<div className="relative px-5 pt-4 pb-5">
|
||||
<div className="flex flex-col items-center">
|
||||
{/* 앨범 커버 */}
|
||||
<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"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="w-44 h-44 rounded-2xl overflow-hidden shadow-xl mb-4"
|
||||
onClick={() => setLightbox({
|
||||
open: true,
|
||||
images: [album.cover_original_url || album.cover_medium_url],
|
||||
index: 0
|
||||
index: 0,
|
||||
showNav: false
|
||||
})}
|
||||
>
|
||||
{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"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-center"
|
||||
>
|
||||
<span className="inline-block px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-2">
|
||||
<span className="inline-block px-3 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>
|
||||
<h1 className="text-2xl font-bold mb-2">{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 justify-center gap-4 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar size={12} />
|
||||
<Calendar size={14} />
|
||||
<span>{formatDate(album.release_date, 'YYYY.MM.DD')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Music2 size={12} />
|
||||
<Music2 size={14} />
|
||||
<span>{album.tracks?.length || 0}곡</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock size={12} />
|
||||
<Clock size={14} />
|
||||
<span>{getTotalDuration()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 앨범 소개 버튼 */}
|
||||
{album.description && (
|
||||
<button
|
||||
onClick={() => setShowDescriptionModal(true)}
|
||||
className="mt-3 flex items-center gap-1.5 mx-auto px-3 py-1.5 text-xs text-gray-500 bg-white/80 rounded-full shadow-sm"
|
||||
>
|
||||
<FileText size={12} />
|
||||
앨범 소개
|
||||
</button>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 티저 포토 */}
|
||||
{album.teasers && album.teasers.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="px-4 mb-5"
|
||||
className="px-4 py-4 border-b border-gray-100"
|
||||
>
|
||||
<p className="text-xs text-gray-400 mb-2">티저 포토</p>
|
||||
<div className="flex gap-2 overflow-x-auto pb-1 -mx-4 px-4">
|
||||
<p className="text-sm font-semibold mb-3">티저 포토</p>
|
||||
<div className="flex gap-3 overflow-x-auto pb-1 -mx-4 px-4 scrollbar-hide">
|
||||
{album.teasers.map((teaser, index) => (
|
||||
<div
|
||||
key={index}
|
||||
|
|
@ -194,9 +213,10 @@ function MobileAlbumDetail() {
|
|||
open: true,
|
||||
images: album.teasers.map(t => t.original_url),
|
||||
index,
|
||||
teasers: album.teasers
|
||||
teasers: album.teasers,
|
||||
showNav: true
|
||||
})}
|
||||
className="w-20 h-20 flex-shrink-0 bg-gray-200 rounded-xl overflow-hidden relative"
|
||||
className="w-24 h-24 flex-shrink-0 bg-gray-100 rounded-2xl overflow-hidden relative shadow-sm"
|
||||
>
|
||||
{teaser.media_type === 'video' ? (
|
||||
<>
|
||||
|
|
@ -206,8 +226,8 @@ function MobileAlbumDetail() {
|
|||
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 className="w-8 h-8 bg-white/90 rounded-full flex items-center justify-center">
|
||||
<Play size={14} fill="currentColor" className="ml-0.5 text-gray-800" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -229,50 +249,44 @@ function MobileAlbumDetail() {
|
|||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="px-4 mb-5"
|
||||
className="px-4 py-4 border-b border-gray-100"
|
||||
>
|
||||
<h2 className="text-base font-bold mb-3">수록곡</h2>
|
||||
<div className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
{album.tracks.map((track, index) => (
|
||||
<p className="text-sm font-semibold mb-3">수록곡</p>
|
||||
<div className="space-y-1">
|
||||
{displayTracks?.map((track) => (
|
||||
<div
|
||||
key={track.id}
|
||||
className={`flex items-center gap-3 px-4 py-3 ${
|
||||
index !== album.tracks.length - 1 ? 'border-b border-gray-100' : ''
|
||||
}`}
|
||||
className="flex items-center gap-3 py-2.5 px-3 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<span className="text-xs text-gray-500">
|
||||
<span className="w-6 text-center text-sm text-gray-400 tabular-nums">
|
||||
{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' : ''}`}>
|
||||
<div className="flex-1 min-w-0 flex items-center gap-2">
|
||||
<p className={`text-sm font-medium truncate ${track.is_title_track ? 'text-primary' : 'text-gray-800'}`}>
|
||||
{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">
|
||||
<span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-bold rounded flex-shrink-0">
|
||||
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>
|
||||
{/* 더보기/접기 버튼 */}
|
||||
{album.tracks.length > 5 && (
|
||||
<button
|
||||
onClick={() => setShowAllTracks(!showAllTracks)}
|
||||
className="w-full mt-2 py-2 text-sm text-gray-500 flex items-center justify-center gap-1"
|
||||
>
|
||||
{showAllTracks ? '접기' : `${album.tracks.length - 5}곡 더보기`}
|
||||
{showAllTracks ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
||||
</button>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
|
|
@ -282,27 +296,20 @@ function MobileAlbumDetail() {
|
|||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="px-4"
|
||||
className="px-4 py-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>
|
||||
<p className="text-sm font-semibold mb-3">컨셉 포토</p>
|
||||
<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
|
||||
images: [photo.original_url],
|
||||
index: 0,
|
||||
showNav: false
|
||||
})}
|
||||
className="aspect-square bg-gray-200 rounded-xl overflow-hidden"
|
||||
className="aspect-square bg-gray-100 rounded-xl overflow-hidden shadow-sm"
|
||||
>
|
||||
<img
|
||||
src={photo.thumb_url || photo.medium_url}
|
||||
|
|
@ -313,24 +320,69 @@ function MobileAlbumDetail() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 설명 */}
|
||||
{album.description && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="px-4 mt-5"
|
||||
{/* 전체보기 버튼 - 모바일 스타일 */}
|
||||
<button
|
||||
onClick={() => navigate(`/album/${name}/gallery`)}
|
||||
className="w-full mt-3 py-3 text-sm text-primary font-medium bg-primary/5 rounded-xl flex items-center justify-center gap-1"
|
||||
>
|
||||
<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>
|
||||
전체 {allPhotos.length}장 보기
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 앨범 소개 다이얼로그 */}
|
||||
<AnimatePresence>
|
||||
{showDescriptionModal && album?.description && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/60 z-[60] flex items-end justify-center"
|
||||
onClick={() => setShowDescriptionModal(false)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ y: '100%' }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: '100%' }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
drag="y"
|
||||
dragConstraints={{ top: 0, bottom: 0 }}
|
||||
dragElastic={{ top: 0, bottom: 0.5 }}
|
||||
onDragEnd={(_, info) => {
|
||||
if (info.offset.y > 200 || info.velocity.y > 500) {
|
||||
setShowDescriptionModal(false);
|
||||
}
|
||||
}}
|
||||
className="bg-white rounded-t-3xl w-full max-h-[80vh] overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 드래그 핸들 */}
|
||||
<div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
|
||||
<div className="w-10 h-1 bg-gray-300 rounded-full" />
|
||||
</div>
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between px-5 pb-3 border-b border-gray-100">
|
||||
<h3 className="text-lg font-bold">앨범 소개</h3>
|
||||
<button
|
||||
onClick={() => setShowDescriptionModal(false)}
|
||||
className="p-1.5"
|
||||
>
|
||||
<X size={20} className="text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
{/* 내용 */}
|
||||
<div className="px-5 py-4 overflow-y-auto max-h-[60vh]">
|
||||
<p className="text-sm text-gray-600 leading-relaxed whitespace-pre-line">
|
||||
{album.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 라이트박스 */}
|
||||
<AnimatePresence>
|
||||
{lightbox.open && (
|
||||
|
|
@ -338,7 +390,7 @@ function MobileAlbumDetail() {
|
|||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black z-50 flex items-center justify-center"
|
||||
className="fixed inset-0 bg-black z-[60] flex items-center justify-center"
|
||||
onClick={closeLightbox}
|
||||
>
|
||||
{/* 상단 버튼 */}
|
||||
|
|
@ -360,8 +412,8 @@ function MobileAlbumDetail() {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{/* 이전 버튼 */}
|
||||
{lightbox.images.length > 1 && (
|
||||
{/* 이전 버튼 - showNav가 true일 때만 */}
|
||||
{lightbox.showNav && lightbox.images.length > 1 && (
|
||||
<button
|
||||
className="absolute left-2 p-2 text-white/70 z-10"
|
||||
onClick={(e) => {
|
||||
|
|
@ -400,8 +452,8 @@ function MobileAlbumDetail() {
|
|||
/>
|
||||
)}
|
||||
|
||||
{/* 다음 버튼 */}
|
||||
{lightbox.images.length > 1 && (
|
||||
{/* 다음 버튼 - showNav가 true일 때만 */}
|
||||
{lightbox.showNav && lightbox.images.length > 1 && (
|
||||
<button
|
||||
className="absolute right-2 p-2 text-white/70 z-10"
|
||||
onClick={(e) => {
|
||||
|
|
@ -413,17 +465,14 @@ function MobileAlbumDetail() {
|
|||
</button>
|
||||
)}
|
||||
|
||||
{/* 인디케이터 */}
|
||||
{lightbox.images.length > 1 && (
|
||||
<div className="absolute bottom-6 left-0 right-0 flex justify-center gap-1.5">
|
||||
{lightbox.images.map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`w-1.5 h-1.5 rounded-full transition-colors ${
|
||||
i === lightbox.index ? 'bg-white' : 'bg-white/40'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
{/* 인디케이터 - showNav가 true일 때만 */}
|
||||
{lightbox.showNav && lightbox.images.length > 1 && (
|
||||
<div className="absolute bottom-8 left-0 right-0 flex justify-center">
|
||||
<div className="bg-black/50 rounded-full px-3 py-1.5">
|
||||
<span className="text-white text-sm tabular-nums">
|
||||
{lightbox.index + 1} / {lightbox.images.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue