105 lines
5.1 KiB
React
105 lines
5.1 KiB
React
|
import { motion } from 'framer-motion';
|
||
|
|
import { Calendar, Music } from 'lucide-react';
|
||
|
|
import { albums } from '../../data/dummy';
|
||
|
|
|
||
|
|
function Discography() {
|
||
|
|
return (
|
||
|
|
<div className="py-16">
|
||
|
|
<div className="max-w-7xl mx-auto px-6">
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="text-center mb-12">
|
||
|
|
<motion.h1
|
||
|
|
initial={{ opacity: 0, y: -20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="text-4xl font-bold mb-4"
|
||
|
|
>
|
||
|
|
디스코그래피
|
||
|
|
</motion.h1>
|
||
|
|
<motion.p
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
transition={{ delay: 0.2 }}
|
||
|
|
className="text-gray-500"
|
||
|
|
>
|
||
|
|
프로미스나인의 음악을 만나보세요
|
||
|
|
</motion.p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 앨범 그리드 */}
|
||
|
|
<div className="grid grid-cols-4 gap-8">
|
||
|
|
{albums.map((album, index) => (
|
||
|
|
<motion.div
|
||
|
|
key={album.id}
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: index * 0.1 }}
|
||
|
|
className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300"
|
||
|
|
>
|
||
|
|
{/* 앨범 커버 */}
|
||
|
|
<div className="relative aspect-square bg-gray-100 overflow-hidden">
|
||
|
|
<img
|
||
|
|
src={album.coverUrl}
|
||
|
|
alt={album.title}
|
||
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* 앨범 타입 배지 */}
|
||
|
|
<span className="absolute top-4 left-4 px-3 py-1 bg-primary text-white text-xs font-medium rounded-full">
|
||
|
|
{album.albumType}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
{/* 호버 오버레이 */}
|
||
|
|
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||
|
|
<div className="text-center text-white">
|
||
|
|
<Music size={40} className="mx-auto mb-2" />
|
||
|
|
<p className="text-sm">앨범 상세보기</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 앨범 정보 */}
|
||
|
|
<div className="p-6">
|
||
|
|
<h3 className="font-bold text-lg mb-1 truncate">{album.title}</h3>
|
||
|
|
<p className="text-primary text-sm font-medium mb-3">
|
||
|
|
{album.titleTrack}
|
||
|
|
</p>
|
||
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||
|
|
<Calendar size={14} />
|
||
|
|
<span>{album.releaseDate}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 통계 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.5 }}
|
||
|
|
className="mt-16 grid grid-cols-4 gap-6"
|
||
|
|
>
|
||
|
|
<div className="bg-gray-50 rounded-2xl p-6 text-center">
|
||
|
|
<p className="text-3xl font-bold text-primary mb-1">1</p>
|
||
|
|
<p className="text-gray-500 text-sm">정규 앨범</p>
|
||
|
|
</div>
|
||
|
|
<div className="bg-gray-50 rounded-2xl p-6 text-center">
|
||
|
|
<p className="text-3xl font-bold text-primary mb-1">2</p>
|
||
|
|
<p className="text-gray-500 text-sm">미니 앨범</p>
|
||
|
|
</div>
|
||
|
|
<div className="bg-gray-50 rounded-2xl p-6 text-center">
|
||
|
|
<p className="text-3xl font-bold text-primary mb-1">1</p>
|
||
|
|
<p className="text-gray-500 text-sm">싱글 앨범</p>
|
||
|
|
</div>
|
||
|
|
<div className="bg-gray-50 rounded-2xl p-6 text-center">
|
||
|
|
<p className="text-3xl font-bold text-primary mb-1">4+</p>
|
||
|
|
<p className="text-gray-500 text-sm">총 앨범</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Discography;
|