caadiq
980ae3fe1d
- frontend 폴더를 새로 리팩토링된 frontend-temp로 교체 - docs/architecture.md: 현재 프로젝트 구조 반영 - docs/development.md: API 클라이언트 구조 업데이트 - docs/frontend-improvement.md 삭제 (완료된 개선 계획) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { getAlbums } from '@/api';
|
|
|
|
/**
|
|
* Mobile 앨범 목록 페이지
|
|
*/
|
|
function MobileAlbum() {
|
|
const navigate = useNavigate();
|
|
|
|
const { data: albums = [], isLoading: loading } = useQuery({
|
|
queryKey: ['albums'],
|
|
queryFn: getAlbums,
|
|
});
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 py-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{albums.map((album, index) => (
|
|
<motion.div
|
|
key={album.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
onClick={() => navigate(`/album/${encodeURIComponent(album.title)}`)}
|
|
className="bg-white rounded-2xl overflow-hidden shadow-md"
|
|
>
|
|
<div className="aspect-square bg-gray-200">
|
|
{album.cover_thumb_url && (
|
|
<img
|
|
src={album.cover_thumb_url}
|
|
alt={album.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="p-3">
|
|
<p className="font-semibold text-sm truncate">{album.title}</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">
|
|
{album.album_type_short} · {album.release_date?.slice(0, 4)}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MobileAlbum;
|