From dc879fc60dccfa499efff4e60320936ee09edc79 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sat, 10 Jan 2026 00:09:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=A9=A4?=
 =?UTF-8?q?=EB=B2=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 페이드인 + 슬라이드업 애니메이션 적용
- 순차적 딜레이로 자연스러운 등장 효과
---
 frontend/src/pages/mobile/public/Members.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/mobile/public/Members.jsx b/frontend/src/pages/mobile/public/Members.jsx
index 27b256a..acad70e 100644
--- a/frontend/src/pages/mobile/public/Members.jsx
+++ b/frontend/src/pages/mobile/public/Members.jsx
@@ -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>
                 </>
             )}