feat: 모바일 멤버 페이지 카드 애니메이션 추가
- 페이드인 + 슬라이드업 애니메이션 적용 - 순차적 딜레이로 자연스러운 등장 효과
This commit is contained in:
parent
24fc1f2b87
commit
dc879fc60d
1 changed files with 6 additions and 3 deletions
|
|
@ -19,11 +19,14 @@ function MobileMembers() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// 멤버 카드 렌더링 함수
|
// 멤버 카드 렌더링 함수
|
||||||
const renderMemberCard = (member, isFormer = false) => (
|
const renderMemberCard = (member, index, isFormer = false) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={member.id}
|
key={member.id}
|
||||||
onClick={() => setSelectedMember(member)}
|
onClick={() => setSelectedMember(member)}
|
||||||
className="text-center cursor-pointer"
|
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 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
>
|
>
|
||||||
<div className={`aspect-square rounded-2xl overflow-hidden bg-gray-200 mb-2 shadow-sm ${isFormer ? 'grayscale' : ''}`}>
|
<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="px-4 py-4">
|
||||||
{/* 현재 멤버 */}
|
{/* 현재 멤버 */}
|
||||||
<div className="grid grid-cols-3 gap-3">
|
<div className="grid grid-cols-3 gap-3">
|
||||||
{members.map((member) => renderMemberCard(member))}
|
{members.map((member, index) => renderMemberCard(member, index))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 전 멤버 */}
|
{/* 전 멤버 */}
|
||||||
|
|
@ -54,7 +57,7 @@ function MobileMembers() {
|
||||||
<h2 className="text-lg font-bold text-gray-400">전 멤버</h2>
|
<h2 className="text-lg font-bold text-gray-400">전 멤버</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-3 gap-3">
|
<div className="grid grid-cols-3 gap-3">
|
||||||
{formerMembers.map((member) => renderMemberCard(member, true))}
|
{formerMembers.map((member, index) => renderMemberCard(member, index, true))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue