refactor(members): PC 멤버 페이지 2/3 배열 레이아웃으로 변경

- 5열에서 2/3 배열로 변경
- 카드 크기 축소 (max-w-3xl)
- 첫 줄 2명, 둘째 줄 3명 가운데 정렬

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/pc/public/members/Members.jsx

@@ -5,48 +5,11 @@ import { Loading } from '@/components/common';
 import { formatDate } from '@/utils';
 
 /**
- * PC 멤버 페이지
+ * 멤버 카드 컴포넌트
  */
-function Members() {
+function MemberCard({ member, index }) {
-  const { data: members = [], isLoading: loading } = useMembers();
-
-  if (loading) {
   return (
-      <div className="py-16 flex justify-center items-center min-h-[60vh]">
-        <Loading />
-      </div>
-    );
-  }
-
-  return (
-    <div className="py-16">
-      <div className="max-w-4xl mx-auto px-6">
-        {/* 헤더 */}
-        <div className="text-center mb-12">
-          <motion.h1
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="text-4xl font-bold mb-4"
-          >
-            멤버
-          </motion.h1>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 0.2 }}
-            className="text-gray-500"
-          >
-            프로미스나인의 멤버를 소개합니다
-          </motion.p>
-        </div>
-
-        {/* 멤버 그리드 - 3열, 마지막 줄 가운데 정렬 */}
-        <div className="flex flex-wrap justify-center gap-6">
-          {members
-            .filter((m) => !m.is_former)
-            .map((member, index) => (
     <motion.div
-                key={member.id}
       initial={{ opacity: 0, y: 30 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ delay: index * 0.1 }}
@@ -89,6 +52,63 @@ function Members() {
         <div className="absolute bottom-0 left-0 right-0 h-1 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
       </div>
     </motion.div>
+  );
+}
+
+/**
+ * PC 멤버 페이지
+ */
+function Members() {
+  const { data: members = [], isLoading: loading } = useMembers();
+
+  if (loading) {
+    return (
+      <div className="py-16 flex justify-center items-center min-h-[60vh]">
+        <Loading />
+      </div>
+    );
+  }
+
+  const currentMembers = members.filter((m) => !m.is_former);
+
+  // 2/3 배열
+  const rows = [
+    currentMembers.slice(0, 2),
+    currentMembers.slice(2, 5),
+  ];
+
+  let globalIndex = 0;
+
+  return (
+    <div className="py-16">
+      <div className="max-w-3xl mx-auto px-6">
+        {/* 헤더 */}
+        <div className="text-center mb-12">
+          <motion.h1
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-4xl font-bold mb-4"
+          >
+            멤버
+          </motion.h1>
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2 }}
+            className="text-gray-500"
+          >
+            프로미스나인의 멤버를 소개합니다
+          </motion.p>
+        </div>
+
+        {/* 멤버 그리드 - 2/3/3 배열 */}
+        <div className="space-y-6">
+          {rows.map((row, rowIndex) => (
+            <div key={rowIndex} className="flex justify-center gap-6">
+              {row.map((member) => (
+                <MemberCard key={member.id} member={member} index={globalIndex++} />
+              ))}
+            </div>
           ))}
         </div>
       </div>