feat: 모바일 멤버 페이지 카드 애니메이션 추가

- 페이드인 + 슬라이드업 애니메이션 적용
- 순차적 딜레이로 자연스러운 등장 효과
This commit is contained in:
caadiq 2026-01-10 00:09:13 +09:00
parent 24fc1f2b87
commit dc879fc60d

View file

@ -19,11 +19,14 @@ function MobileMembers() {
}, []);
//
const renderMemberCard = (member, isFormer = false) => (
const renderMemberCard = (member, index, isFormer = false) => (
<motion.div
key={member.id}
onClick={() => setSelectedMember(member)}
className="text-center cursor-pointer"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.05, duration: 0.3 }}
whileTap={{ scale: 0.95 }}
>
<div className={`aspect-square rounded-2xl overflow-hidden bg-gray-200 mb-2 shadow-sm ${isFormer ? 'grayscale' : ''}`}>
@ -44,7 +47,7 @@ function MobileMembers() {
<div className="px-4 py-4">
{/* 현재 멤버 */}
<div className="grid grid-cols-3 gap-3">
{members.map((member) => renderMemberCard(member))}
{members.map((member, index) => renderMemberCard(member, index))}
</div>
{/* 전 멤버 */}
@ -54,7 +57,7 @@ function MobileMembers() {
<h2 className="text-lg font-bold text-gray-400"> 멤버</h2>
</div>
<div className="grid grid-cols-3 gap-3">
{formerMembers.map((member) => renderMemberCard(member, true))}
{formerMembers.map((member, index) => renderMemberCard(member, index, true))}
</div>
</>
)}