refactor(members): PC 멤버 페이지 3열 레이아웃 + 마지막 줄 가운데 정렬

- 5열에서 3열 레이아웃으로 변경
- max-w-4xl로 카드 크기 축소
- flexbox로 마지막 줄 가운데 정렬

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-02-08 22:12:21 +09:00
parent 45da9c6277
commit d50488d7e3

View file

@ -20,7 +20,7 @@ function Members() {
return ( return (
<div className="py-16"> <div className="py-16">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-4xl mx-auto px-6">
{/* 헤더 */} {/* 헤더 */}
<div className="text-center mb-12"> <div className="text-center mb-12">
<motion.h1 <motion.h1
@ -40,8 +40,8 @@ function Members() {
</motion.p> </motion.p>
</div> </div>
{/* 현재 멤버 그리드 */} {/* 멤버 그리드 - 3열, 마지막 줄 가운데 정렬 */}
<div className="grid grid-cols-5 gap-8"> <div className="flex flex-wrap justify-center gap-6">
{members {members
.filter((m) => !m.is_former) .filter((m) => !m.is_former)
.map((member, index) => ( .map((member, index) => (
@ -50,7 +50,7 @@ function Members() {
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }} transition={{ delay: index * 0.1 }}
className="group h-full" 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="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
{/* 이미지 */} {/* 이미지 */}