diff --git a/frontend/src/pages/pc/public/members/Members.jsx b/frontend/src/pages/pc/public/members/Members.jsx
index ef6ffca..6d93883 100644
--- a/frontend/src/pages/pc/public/members/Members.jsx
+++ b/frontend/src/pages/pc/public/members/Members.jsx
@@ -4,6 +4,57 @@ import { useMembers } from '@/hooks';
import { Loading } from '@/components/common';
import { formatDate } from '@/utils';
+/**
+ * 멤버 카드 컴포넌트
+ */
+function MemberCard({ member, index }) {
+ return (
+
+
+ {/* 이미지 */}
+
+

+
+
+ {/* 정보 */}
+
+
{member.name}
+
+
+
+ {formatDate(member.birth_date, 'YYYY.MM.DD')}
+
+
+ {/* 인스타그램 링크 */}
+ {member.instagram && (
+
+
+ Instagram
+
+ )}
+
+
+ {/* 호버 효과 - 컬러 바 */}
+
+
+
+ );
+}
+
/**
* PC 멤버 페이지
*/
@@ -18,9 +69,19 @@ function Members() {
);
}
+ const currentMembers = members.filter((m) => !m.is_former);
+
+ // 2/3 배열
+ const rows = [
+ currentMembers.slice(0, 2),
+ currentMembers.slice(2, 5),
+ ];
+
+ let globalIndex = 0;
+
return (
-
+
{/* 헤더 */}
- {/* 멤버 그리드 - 3열, 마지막 줄 가운데 정렬 */}
-
- {members
- .filter((m) => !m.is_former)
- .map((member, index) => (
-
-
- {/* 이미지 */}
-
-

-
-
- {/* 정보 */}
-
-
{member.name}
-
-
-
- {formatDate(member.birth_date, 'YYYY.MM.DD')}
-
-
- {/* 인스타그램 링크 */}
- {member.instagram && (
-
-
- Instagram
-
- )}
-
-
- {/* 호버 효과 - 컬러 바 */}
-
-
-
- ))}
+ {/* 멤버 그리드 - 2/3/3 배열 */}
+
+ {rows.map((row, rowIndex) => (
+
+ {row.map((member) => (
+
+ ))}
+
+ ))}