From f90a5f4b171201fcd310677bfd028fdc1d457bee Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 8 Feb 2026 22:20:56 +0900
Subject: [PATCH] =?UTF-8?q?refactor(members):=20PC=20=EB=A9=A4=EB=B2=84=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=202/3=20=EB=B0=B0=EC=97=B4=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/pages/pc/public/members/Members.jsx   | 122 ++++++++++--------
 1 file changed, 71 insertions(+), 51 deletions(-)

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 (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.1 }}
+      className="group w-[calc(33.333%-1rem)]"
+    >
+      <div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
+        {/* 이미지 */}
+        <div className="aspect-[3/4] bg-gray-100 overflow-hidden flex-shrink-0">
+          <img
+            src={member.image_url}
+            alt={member.name}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+        </div>
+
+        {/* 정보 */}
+        <div className="p-6 flex-1 flex flex-col">
+          <h3 className="text-xl font-bold mb-3">{member.name}</h3>
+
+          <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+            <Cake size={14} />
+            <span>{formatDate(member.birth_date, 'YYYY.MM.DD')}</span>
+          </div>
+
+          {/* 인스타그램 링크 */}
+          {member.instagram && (
+            <a
+              href={member.instagram}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors mt-auto"
+            >
+              <Instagram size={16} />
+              <span>Instagram</span>
+            </a>
+          )}
+        </div>
+
+        {/* 호버 효과 - 컬러 바 */}
+        <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 멤버 페이지
  */
@@ -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 (
     <div className="py-16">
-      <div className="max-w-4xl mx-auto px-6">
+      <div className="max-w-3xl mx-auto px-6">
         {/* 헤더 */}
         <div className="text-center mb-12">
           <motion.h1
@@ -40,56 +101,15 @@ function Members() {
           </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 }}
-                className="group w-[calc(33.333%-1rem)]"
-              >
-                <div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
-                  {/* 이미지 */}
-                  <div className="aspect-[3/4] bg-gray-100 overflow-hidden flex-shrink-0">
-                    <img
-                      src={member.image_url}
-                      alt={member.name}
-                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                    />
-                  </div>
-
-                  {/* 정보 */}
-                  <div className="p-6 flex-1 flex flex-col">
-                    <h3 className="text-xl font-bold mb-3">{member.name}</h3>
-
-                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
-                      <Cake size={14} />
-                      <span>{formatDate(member.birth_date, 'YYYY.MM.DD')}</span>
-                    </div>
-
-                    {/* 인스타그램 링크 */}
-                    {member.instagram && (
-                      <a
-                        href={member.instagram}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors mt-auto"
-                      >
-                        <Instagram size={16} />
-                        <span>Instagram</span>
-                      </a>
-                    )}
-                  </div>
-
-                  {/* 호버 효과 - 컬러 바 */}
-                  <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>
-            ))}
+        {/* 멤버 그리드 - 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>
     </div>