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} +
+ + {/* 정보 */} +
+

{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} -
- - {/* 정보 */} -
-

{member.name}

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