caadiq
cf515aa1ee
- Docker Compose, Dockerfile, Vite 프로젝트 초기 세팅 - 메인 페이지: 택배 목록, 필터 탭, 운송장 등록 폼 - 상세 페이지: 배송 타임라인, 별칭 수정, 삭제 - 택배사 로고/컬러 배지, 커스텀 드롭다운 - framer-motion 애니메이션 적용 - PC/모바일 반응형 대응 - 계획서에 carriers 테이블, RustFS 로고 저장 반영 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
import { AnimatePresence, motion } from "framer-motion";
|
|
import ParcelCard from "./ParcelCard";
|
|
import { Package } from "lucide-react";
|
|
|
|
function ParcelList({ parcels }) {
|
|
if (parcels.length === 0) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center py-16 text-gray-400"
|
|
>
|
|
<Package size={48} className="mx-auto mb-3 opacity-50" />
|
|
<p className="text-sm lg:text-base">등록된 택배가 없습니다</p>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<AnimatePresence mode="popLayout">
|
|
{parcels.map((parcel, index) => (
|
|
<motion.div
|
|
key={parcel.id}
|
|
layout
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, x: -30 }}
|
|
transition={{ duration: 0.25, delay: index * 0.05 }}
|
|
>
|
|
<ParcelCard parcel={parcel} />
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ParcelList;
|