feat: 모바일 멤버 페이지 그리드 레이아웃으로 리디자인

- 카드 스와이프에서 2열 그리드 레이아웃으로 변경
- 현재 멤버와 전 멤버 섹션 분리
- 멤버 선택 시 드래그 가능한 바텀 시트 다이얼로그
- AnimatePresence로 열기/닫기 애니메이션 추가
- 그리드에서 image_medium, 다이얼로그에서 image_thumb 사용
- 디자인 비교용 미리보기 페이지 추가 (/members-preview)

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

frontend/src/pages/mobile/members/Members.jsx

@@ -1,30 +1,69 @@
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { Instagram, Calendar } from 'lucide-react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
 import { useMembers } from '@/hooks';
 
 /**
- * Mobile 멤버 페이지 - 카드 스와이프 스타일
+ * 멤버 카드 컴포넌트 (외부 정의로 리렌더링 방지)
+ */
+const MemberCard = ({ member, index, onClick, shouldAnimate }) => (
+  <motion.button
+    initial={shouldAnimate ? { opacity: 0, y: 20 } : false}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ delay: index * 0.05 }}
+    whileTap={{ scale: 0.97 }}
+    onClick={onClick}
+    className={`relative aspect-[3/4] rounded-2xl overflow-hidden shadow-md ${member.is_former ? 'grayscale' : ''}`}
+  >
+    {member.image_medium || member.image_url ? (
+      <img
+        src={member.image_medium || member.image_url}
+        alt={member.name}
+        className="w-full h-full object-cover"
+      />
+    ) : (
+      <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
+        <span className="text-4xl text-gray-400 font-bold">
+          {member.name[0]}
+        </span>
+      </div>
+    )}
+    <div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/70 to-transparent">
+      <p className="text-white font-semibold text-lg">{member.name}</p>
+    </div>
+  </motion.button>
+);
+
+/**
+ * Mobile 멤버 페이지 - 그리드 레이아웃
  */
 function MobileMembers() {
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [selectedMember, setSelectedMember] = useState(null);
-  const swiperRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
-  const indicatorRef = useRef(null);
+  const hasAnimated = useRef(false);
 
   // 멤버 데이터 로드
   const { data: allMembers = [] } = useMembers();
 
-  // 현재/전 멤버 정렬 (현재 멤버 먼저, 전 멤버 나중)
+  // 초기 애니메이션 완료 추적
-  const members = useMemo(() => {
+  useEffect(() => {
-    return [...allMembers].sort((a, b) => {
+    if (allMembers.length > 0 && !hasAnimated.current) {
-      if (a.is_former !== b.is_former) {
+      const timer = setTimeout(() => {
-        return a.is_former ? 1 : -1;
+        hasAnimated.current = true;
+      }, allMembers.length * 50 + 300);
+      return () => clearTimeout(timer);
     }
-      return 0;
+  }, [allMembers.length]);
-    });
+
-  }, [allMembers]);
+  // 현재/전 멤버 분리
+  const currentMembers = useMemo(
+    () => allMembers.filter((m) => !m.is_former),
+    [allMembers]
+  );
+  const formerMembers = useMemo(
+    () => allMembers.filter((m) => m.is_former),
+    [allMembers]
+  );
 
   // 나이 계산
   const calculateAge = (birthDate) => {
@@ -42,31 +81,14 @@ function MobileMembers() {
     return age;
   };
 
-  // 인디케이터 자동 스크롤
+  // 드래그 종료 시 닫기 판단
-  useEffect(() => {
+  const handleDragEnd = (_, info) => {
-    if (indicatorRef.current && members.length > 0) {
+    if (info.offset.y > 100 || info.velocity.y > 500) {
-      const container = indicatorRef.current;
+      setSelectedMember(null);
-      const itemWidth = 64; // 52px 썸네일 + 12px 간격
-      const containerWidth = container.offsetWidth;
-      const paddingLeft = 16; // px-4
-      const targetScroll =
-        paddingLeft + currentIndex * itemWidth + 26 - containerWidth / 2;
-
-      container.scrollTo({
-        left: Math.max(0, targetScroll),
-        behavior: 'smooth',
-      });
-    }
-  }, [currentIndex, members.length]);
-
-  // 인디케이터 클릭 핸들러
-  const handleIndicatorClick = (index) => {
-    if (swiperRef.current) {
-      swiperRef.current.slideTo(index);
     }
   };
 
-  if (members.length === 0) {
+  if (allMembers.length === 0) {
     return (
       <div className="flex items-center justify-center h-[calc(100vh-200px)]">
         <p className="text-gray-400">멤버 정보가 없습니다</p>
@@ -74,163 +96,131 @@ function MobileMembers() {
     );
   }
 
-  return (
+  const shouldAnimate = !hasAnimated.current;
-    <div className="flex flex-col h-[calc(100dvh-120px)] overflow-hidden overscroll-none touch-none">
-      {/* 상단 썸네일 인디케이터 */}
-      <motion.div
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4, ease: 'easeOut' }}
-        className="bg-white shadow-sm"
-      >
-        <div
-          ref={indicatorRef}
-          className="flex gap-3 px-4 py-4 overflow-x-auto scrollbar-hide"
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-        >
-          {members.map((member, index) => {
-            const isSelected = index === currentIndex;
-            const isFormer = member.is_former;
 
   return (
-              <button
+    <div className="bg-gray-50 p-4">
+      {/* 현재 멤버 */}
+      <div className="grid grid-cols-2 gap-3">
+        {currentMembers.map((member, index) => (
+          <MemberCard
             key={member.id}
-                onClick={() => handleIndicatorClick(index)}
+            member={member}
-                className={`flex-shrink-0 w-[52px] h-[52px] rounded-full p-[2px] transition-all duration-200
+            index={index}
-                  ${
+            onClick={() => setSelectedMember(member)}
-                    isSelected
+            shouldAnimate={shouldAnimate}
-                      ? 'ring-[2.5px] ring-primary shadow-[0_0_8px_rgba(var(--primary-rgb),0.35)]'
+          />
-                      : 'ring-[1.5px] ring-gray-300'
+        ))}
-                  }`}
+      </div>
+
+      {/* 전 멤버 섹션 */}
+      {formerMembers.length > 0 && (
+        <>
+          <div className="flex items-center gap-3 my-6">
+            <div className="flex-1 h-px bg-gray-300" />
+            <span className="text-gray-400 text-sm font-medium">전 멤버</span>
+            <div className="flex-1 h-px bg-gray-300" />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            {formerMembers.map((member, index) => (
+              <MemberCard
+                key={member.id}
+                member={member}
+                index={index}
+                onClick={() => setSelectedMember(member)}
+                shouldAnimate={shouldAnimate}
+              />
+            ))}
+          </div>
+        </>
+      )}
+
+      {/* 선택된 멤버 모달 */}
+      <AnimatePresence>
+        {selectedMember && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 z-[100] bg-black/60 flex items-end"
+            onClick={() => setSelectedMember(null)}
           >
-                <div
+            <motion.div
-                  className={`w-full h-full rounded-full overflow-hidden bg-gray-200
+              initial={{ y: '100%' }}
-                    ${isFormer ? 'grayscale' : ''}`}
+              animate={{ y: 20 }}
+              exit={{ y: '100%' }}
+              transition={{ type: 'spring', damping: 28, stiffness: 350 }}
+              drag="y"
+              dragConstraints={{ top: 20, bottom: 20 }}
+              dragElastic={{ top: 0, bottom: 0.6 }}
+              onDragStart={() => setIsDragging(true)}
+              onDragEnd={(e, info) => {
+                setIsDragging(false);
+                handleDragEnd(e, info);
+              }}
+              className="relative w-full bg-white rounded-t-3xl touch-none pb-10"
+              onClick={(e) => e.stopPropagation()}
             >
-                  {member.image_url ? (
+              {/* 드래그 핸들 */}
+              <div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
+                <div className="w-10 h-1 bg-gray-300 rounded-full" />
+              </div>
+
+              <div className="px-5">
+                <div className="flex gap-4">
+                  {/* 이미지 */}
+                  <div className="w-24 h-32 rounded-xl overflow-hidden flex-shrink-0">
+                    {selectedMember.image_thumb || selectedMember.image_url ? (
                       <img
-                      src={member.image_url}
+                        src={selectedMember.image_thumb || selectedMember.image_url}
-                      alt={member.name}
+                        alt={selectedMember.name}
                         className="w-full h-full object-cover"
                       />
                     ) : (
-                    <div className="w-full h-full flex items-center justify-center bg-gray-300 text-white font-bold">
+                      <div className="w-full h-full bg-gray-200 flex items-center justify-center text-2xl font-bold text-gray-400">
-                      {member.name[0]}
+                        {selectedMember.name[0]}
                       </div>
                     )}
                   </div>
-              </button>
-            );
-          })}
-        </div>
-      </motion.div>
 
-      {/* 메인 카드 영역 */}
+                  {/* 정보 영역 */}
-      <motion.div
+                  <div className="flex-1 flex flex-col justify-between py-1">
-        initial={{ opacity: 0, y: 40 }}
+                    <div>
-        animate={{ opacity: 1, y: 0 }}
+                      <h3 className="text-xl font-bold">{selectedMember.name}</h3>
-        transition={{ duration: 0.5, delay: 0.2, ease: 'easeOut' }}
+                      {selectedMember.birth_date && (
-        className="flex-1 overflow-visible"
+                        <div className="flex items-center gap-1 text-gray-500 text-sm mt-2">
-      >
+                          <Calendar size={14} />
-        <Swiper
+                          <span>
-          onSwiper={(swiper) => {
+                            {selectedMember.birth_date?.slice(0, 10).replaceAll('-', '.')}
-            swiperRef.current = swiper;
-          }}
-          onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
-          slidesPerView={1.12}
-          centeredSlides={true}
-          spaceBetween={0}
-          className="h-full !overflow-visible [&>.swiper-wrapper]:!overflow-visible"
-          style={{ padding: '8px 0' }}
-        >
-          {members.map((member) => {
-            const isFormer = member.is_former;
-            const age = calculateAge(member.birth_date);
-
-            return (
-              <SwiperSlide
-                key={member.id}
-                className="!flex items-center justify-center"
-              >
-                {({ isActive }) => (
-                  <div
-                    className={`relative w-full h-full max-h-[calc(100%-16px)] rounded-3xl overflow-hidden shadow-xl
-                      transition-transform duration-300
-                      ${isActive ? 'scale-100' : 'scale-[0.92]'}`}
-                  >
-                    {/* 배경 이미지 */}
-                    {member.image_url ? (
-                      <img
-                        src={member.image_url}
-                        alt={member.name}
-                        className={`absolute inset-0 w-full h-full object-cover
-                          ${isFormer ? 'grayscale' : ''}`}
-                      />
-                    ) : (
-                      <div className="absolute inset-0 bg-gradient-to-br from-gray-300 to-gray-400" />
-                    )}
-
-                    {/* 하단 그라데이션 오버레이 */}
-                    <div className="absolute inset-x-0 bottom-0 h-[220px] bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
-
-                    {/* 전 멤버 라벨 */}
-                    {isFormer && (
-                      <div className="absolute top-4 right-4 px-3 py-1.5 bg-black/60 rounded-full">
-                        <span className="text-white/70 text-xs font-medium">
-                          전 멤버
                           </span>
-                      </div>
+                          {calculateAge(selectedMember.birth_date) && (
-                    )}
+                            <span className="ml-1 text-primary">
-
+                              ({calculateAge(selectedMember.birth_date)}세)
-                    {/* 멤버 정보 */}
-                    <div className="absolute inset-x-0 bottom-0 p-6">
-                      {/* 이름 */}
-                      <h2 className="text-[32px] font-bold text-white drop-shadow-lg">
-                        {member.name}
-                      </h2>
-
-                      {/* 생일 정보 */}
-                      {member.birth_date && (
-                        <div className="flex items-center gap-1.5 mt-1.5 text-white/80">
-                          <Calendar size={16} className="text-white/70" />
-                          <span className="text-sm">
-                            {member.birth_date
-                              ?.slice(0, 10)
-                              .replaceAll('-', '.')}
-                          </span>
-                          {age && (
-                            <span className="ml-2 px-2 py-0.5 bg-white/20 rounded-lg text-xs text-white font-medium">
-                              {age}세
                             </span>
                           )}
                         </div>
                       )}
-
+                    </div>
-                      {/* 인스타그램 버튼 */}
+                    {!selectedMember.is_former && selectedMember.instagram && (
-                      {!isFormer && member.instagram && (
                       <a
-                          href={member.instagram}
+                        href={selectedMember.instagram}
                         target="_blank"
                         rel="noopener noreferrer"
-                          className="inline-flex items-center gap-2 mt-4 px-4 py-2.5
+                        onClick={(e) => isDragging && e.preventDefault()}
-                            bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737]
+                        className="inline-flex items-center gap-1.5 self-start px-4 py-2 bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737] rounded-full"
-                            rounded-full shadow-lg shadow-[#E1306C]/40
-                            active:scale-95 transition-transform"
                       >
-                          <Instagram size={18} className="text-white" />
+                        <Instagram size={14} className="text-white" />
-                          <span className="text-white text-sm font-semibold">
+                        <span className="text-white text-xs font-medium">Instagram</span>
-                            Instagram
-                          </span>
                       </a>
                     )}
                   </div>
                 </div>
-                )}
+              </div>
-              </SwiperSlide>
-            );
-          })}
-        </Swiper>
             </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }

frontend/src/pages/mobile/members/MembersPreview.jsx

@@ -0,0 +1,488 @@
+import { motion } from 'framer-motion';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { Instagram, Calendar, ChevronRight } from 'lucide-react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { useMembers } from '@/hooks';
+
+/**
+ * 디자인 미리보기 페이지 - 여러 디자인 옵션 비교
+ */
+function MembersPreview() {
+  const [designType, setDesignType] = useState('card');
+
+  const designs = [
+    { id: 'current', label: '현재' },
+    { id: 'card', label: '카드 분리' },
+    { id: 'grid', label: '그리드' },
+    { id: 'sheet', label: '하단 시트' },
+  ];
+
+  return (
+    <div className="flex flex-col h-[calc(100dvh-56px)] overflow-hidden">
+      {/* 디자인 선택 탭 */}
+      <div className="flex gap-2 px-4 py-3 bg-white border-b overflow-x-auto">
+        {designs.map((d) => (
+          <button
+            key={d.id}
+            onClick={() => setDesignType(d.id)}
+            className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all
+              ${designType === d.id
+                ? 'bg-primary text-white'
+                : 'bg-gray-100 text-gray-600'
+              }`}
+          >
+            {d.label}
+          </button>
+        ))}
+      </div>
+
+      {/* 선택된 디자인 렌더링 */}
+      <div className="flex-1 overflow-hidden">
+        {designType === 'current' && <CurrentDesign />}
+        {designType === 'card' && <CardDesign />}
+        {designType === 'grid' && <GridDesign />}
+        {designType === 'sheet' && <SheetDesign />}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 공통 훅 - 멤버 데이터 및 유틸
+ */
+function useMemberUtils() {
+  const { data: allMembers = [] } = useMembers();
+
+  const members = useMemo(() => {
+    return [...allMembers].sort((a, b) => {
+      if (a.is_former !== b.is_former) return a.is_former ? 1 : -1;
+      return 0;
+    });
+  }, [allMembers]);
+
+  const calculateAge = (birthDate) => {
+    if (!birthDate) return null;
+    const birth = new Date(birthDate);
+    const today = new Date();
+    let age = today.getFullYear() - birth.getFullYear();
+    const monthDiff = today.getMonth() - birth.getMonth();
+    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+      age--;
+    }
+    return age;
+  };
+
+  return { members, calculateAge };
+}
+
+/**
+ * 디자인 1: 현재 디자인 (기존 그대로)
+ */
+function CurrentDesign() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const swiperRef = useRef(null);
+  const indicatorRef = useRef(null);
+  const { members, calculateAge } = useMemberUtils();
+
+  useEffect(() => {
+    if (indicatorRef.current && members.length > 0) {
+      const container = indicatorRef.current;
+      const itemWidth = 64;
+      const containerWidth = container.offsetWidth;
+      const targetScroll = 16 + currentIndex * itemWidth + 26 - containerWidth / 2;
+      container.scrollTo({ left: Math.max(0, targetScroll), behavior: 'smooth' });
+    }
+  }, [currentIndex, members.length]);
+
+  if (members.length === 0) return <div className="flex items-center justify-center h-full"><p className="text-gray-400">로딩 중...</p></div>;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* 썸네일 인디케이터 */}
+      <div className="bg-white shadow-sm">
+        <div ref={indicatorRef} className="flex gap-3 px-4 py-4 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
+          {members.map((member, index) => (
+            <button
+              key={member.id}
+              onClick={() => swiperRef.current?.slideTo(index)}
+              className={`flex-shrink-0 w-[52px] h-[52px] rounded-full p-[2px] transition-all duration-200
+                ${index === currentIndex ? 'ring-[2.5px] ring-primary' : 'ring-[1.5px] ring-gray-300'}`}
+            >
+              <div className={`w-full h-full rounded-full overflow-hidden bg-gray-200 ${member.is_former ? 'grayscale' : ''}`}>
+                {member.image_url ? (
+                  <img src={member.image_url} alt={member.name} className="w-full h-full object-cover" />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center bg-gray-300 text-white font-bold">{member.name[0]}</div>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 메인 카드 */}
+      <div className="flex-1 overflow-visible">
+        <Swiper
+          onSwiper={(swiper) => { swiperRef.current = swiper; }}
+          onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
+          slidesPerView={1.12}
+          centeredSlides={true}
+          className="h-full !overflow-visible"
+          style={{ padding: '8px 0' }}
+        >
+          {members.map((member) => {
+            const age = calculateAge(member.birth_date);
+            return (
+              <SwiperSlide key={member.id} className="!flex items-center justify-center">
+                {({ isActive }) => (
+                  <div className={`relative w-full h-full max-h-[calc(100%-16px)] rounded-3xl overflow-hidden shadow-xl transition-transform duration-300 ${isActive ? 'scale-100' : 'scale-[0.92]'}`}>
+                    {member.image_url ? (
+                      <img src={member.image_url} alt={member.name} className={`absolute inset-0 w-full h-full object-cover ${member.is_former ? 'grayscale' : ''}`} />
+                    ) : (
+                      <div className="absolute inset-0 bg-gradient-to-br from-gray-300 to-gray-400" />
+                    )}
+                    <div className="absolute inset-x-0 bottom-0 h-[220px] bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
+                    {member.is_former && (
+                      <div className="absolute top-4 right-4 px-3 py-1.5 bg-black/60 rounded-full">
+                        <span className="text-white/70 text-xs font-medium">전 멤버</span>
+                      </div>
+                    )}
+                    <div className="absolute inset-x-0 bottom-0 p-6">
+                      <h2 className="text-[32px] font-bold text-white drop-shadow-lg">{member.name}</h2>
+                      {member.birth_date && (
+                        <div className="flex items-center gap-1.5 mt-1.5 text-white/80">
+                          <Calendar size={16} className="text-white/70" />
+                          <span className="text-sm">{member.birth_date?.slice(0, 10).replaceAll('-', '.')}</span>
+                          {age && <span className="ml-2 px-2 py-0.5 bg-white/20 rounded-lg text-xs text-white font-medium">{age}세</span>}
+                        </div>
+                      )}
+                      {!member.is_former && member.instagram && (
+                        <a href={member.instagram} target="_blank" rel="noopener noreferrer"
+                          className="inline-flex items-center gap-2 mt-4 px-4 py-2.5 bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737] rounded-full shadow-lg active:scale-95 transition-transform">
+                          <Instagram size={18} className="text-white" />
+                          <span className="text-white text-sm font-semibold">Instagram</span>
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 디자인 2: 카드 분리형 - 이미지 고정 비율 + 하단 정보 분리
+ */
+function CardDesign() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const swiperRef = useRef(null);
+  const { members, calculateAge } = useMemberUtils();
+
+  if (members.length === 0) return <div className="flex items-center justify-center h-full"><p className="text-gray-400">로딩 중...</p></div>;
+
+  return (
+    <div className="h-full bg-gray-50">
+      <Swiper
+        onSwiper={(swiper) => { swiperRef.current = swiper; }}
+        onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
+        slidesPerView={1.15}
+        centeredSlides={true}
+        spaceBetween={12}
+        className="h-full py-4"
+      >
+        {members.map((member) => {
+          const age = calculateAge(member.birth_date);
+          return (
+            <SwiperSlide key={member.id}>
+              {({ isActive }) => (
+                <motion.div
+                  animate={{ scale: isActive ? 1 : 0.95, opacity: isActive ? 1 : 0.7 }}
+                  transition={{ duration: 0.2 }}
+                  className="h-full flex flex-col bg-white rounded-3xl overflow-hidden shadow-lg"
+                >
+                  {/* 이미지 영역 - 고정 비율 */}
+                  <div className={`relative w-full aspect-[3/4] ${member.is_former ? 'grayscale' : ''}`}>
+                    {member.image_url ? (
+                      <img src={member.image_url} alt={member.name} className="w-full h-full object-cover" />
+                    ) : (
+                      <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
+                        <span className="text-6xl text-gray-400 font-bold">{member.name[0]}</span>
+                      </div>
+                    )}
+                    {member.is_former && (
+                      <div className="absolute top-3 right-3 px-2.5 py-1 bg-black/50 rounded-full">
+                        <span className="text-white/80 text-xs">전 멤버</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 정보 영역 */}
+                  <div className="flex-1 p-5 flex flex-col justify-center">
+                    <h2 className="text-2xl font-bold text-gray-900">{member.name}</h2>
+                    {member.birth_date && (
+                      <div className="flex items-center gap-2 mt-2 text-gray-500">
+                        <Calendar size={16} />
+                        <span className="text-sm">{member.birth_date?.slice(0, 10).replaceAll('-', '.')}</span>
+                        {age && (
+                          <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium">
+                            {age}세
+                          </span>
+                        )}
+                      </div>
+                    )}
+                    {!member.is_former && member.instagram && (
+                      <a href={member.instagram} target="_blank" rel="noopener noreferrer"
+                        className="inline-flex items-center gap-2 mt-4 px-4 py-2.5 bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737] rounded-full self-start active:scale-95 transition-transform">
+                        <Instagram size={16} className="text-white" />
+                        <span className="text-white text-sm font-medium">Instagram</span>
+                      </a>
+                    )}
+                  </div>
+                </motion.div>
+              )}
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+
+      {/* 하단 인디케이터 */}
+      <div className="absolute bottom-6 left-0 right-0 flex justify-center gap-1.5">
+        {members.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => swiperRef.current?.slideTo(index)}
+            className={`w-2 h-2 rounded-full transition-all ${
+              index === currentIndex ? 'bg-primary w-6' : 'bg-gray-300'
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 디자인 3: 그리드 레이아웃 - 2열 그리드 + 선택 시 확장
+ */
+function GridDesign() {
+  const [selectedMember, setSelectedMember] = useState(null);
+  const { members, calculateAge } = useMemberUtils();
+
+  // 현재 멤버와 전 멤버 분리
+  const currentMembers = useMemo(() => members.filter(m => !m.is_former), [members]);
+  const formerMembers = useMemo(() => members.filter(m => m.is_former), [members]);
+
+  if (members.length === 0) return <div className="flex items-center justify-center h-full"><p className="text-gray-400">로딩 중...</p></div>;
+
+  const MemberCard = ({ member }) => (
+    <motion.button
+      key={member.id}
+      whileTap={{ scale: 0.97 }}
+      onClick={() => setSelectedMember(member)}
+      className={`relative aspect-[3/4] rounded-2xl overflow-hidden shadow-md ${member.is_former ? 'grayscale' : ''}`}
+    >
+      {(member.image_medium || member.image_url) ? (
+        <img src={member.image_medium || member.image_url} alt={member.name} className="w-full h-full object-cover" />
+      ) : (
+        <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
+          <span className="text-4xl text-gray-400 font-bold">{member.name[0]}</span>
+        </div>
+      )}
+      <div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/70 to-transparent">
+        <p className="text-white font-semibold text-lg">{member.name}</p>
+      </div>
+    </motion.button>
+  );
+
+  return (
+    <div className="h-full overflow-y-auto bg-gray-50 p-4">
+      {/* 현재 멤버 */}
+      <div className="grid grid-cols-2 gap-3">
+        {currentMembers.map((member) => (
+          <MemberCard key={member.id} member={member} />
+        ))}
+      </div>
+
+      {/* 전 멤버 섹션 */}
+      {formerMembers.length > 0 && (
+        <>
+          <div className="flex items-center gap-3 my-6">
+            <div className="flex-1 h-px bg-gray-300" />
+            <span className="text-gray-400 text-sm font-medium">전 멤버</span>
+            <div className="flex-1 h-px bg-gray-300" />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            {formerMembers.map((member) => (
+              <MemberCard key={member.id} member={member} />
+            ))}
+          </div>
+        </>
+      )}
+
+      {/* 선택된 멤버 모달 */}
+      {selectedMember && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-50 bg-black/60 flex items-end"
+          onClick={() => setSelectedMember(null)}
+        >
+          <motion.div
+            initial={{ y: '100%' }}
+            animate={{ y: 0 }}
+            exit={{ y: '100%' }}
+            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+            className="w-full bg-white rounded-t-3xl overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="w-12 h-1 bg-gray-300 rounded-full mx-auto mt-3" />
+            <div className="p-5">
+              <div className="flex gap-4">
+                <div className={`w-24 h-32 rounded-xl overflow-hidden flex-shrink-0 ${selectedMember.is_former ? 'grayscale' : ''}`}>
+                  {(selectedMember.image_thumb || selectedMember.image_url) ? (
+                    <img src={selectedMember.image_thumb || selectedMember.image_url} alt={selectedMember.name} className="w-full h-full object-cover" />
+                  ) : (
+                    <div className="w-full h-full bg-gray-200 flex items-center justify-center text-2xl font-bold text-gray-400">
+                      {selectedMember.name[0]}
+                    </div>
+                  )}
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-xl font-bold">{selectedMember.name}</h3>
+                  {selectedMember.birth_date && (
+                    <p className="text-gray-500 text-sm mt-1">
+                      {selectedMember.birth_date?.slice(0, 10).replaceAll('-', '.')}
+                      {calculateAge(selectedMember.birth_date) && (
+                        <span className="ml-2 text-primary">({calculateAge(selectedMember.birth_date)}세)</span>
+                      )}
+                    </p>
+                  )}
+                  {selectedMember.is_former && (
+                    <span className="inline-block mt-2 px-2 py-0.5 bg-gray-200 text-gray-600 text-xs rounded">전 멤버</span>
+                  )}
+                  {!selectedMember.is_former && selectedMember.instagram && (
+                    <a href={selectedMember.instagram} target="_blank" rel="noopener noreferrer"
+                      className="inline-flex items-center gap-2 mt-3 px-3 py-2 bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737] rounded-full">
+                      <Instagram size={14} className="text-white" />
+                      <span className="text-white text-xs font-medium">Instagram</span>
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 디자인 4: Full-bleed 이미지 + 하단 시트
+ */
+function SheetDesign() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const swiperRef = useRef(null);
+  const { members, calculateAge } = useMemberUtils();
+
+  if (members.length === 0) return <div className="flex items-center justify-center h-full"><p className="text-gray-400">로딩 중...</p></div>;
+
+  const currentMember = members[currentIndex];
+  const age = calculateAge(currentMember?.birth_date);
+
+  return (
+    <div className="relative h-full bg-black">
+      {/* 전체 화면 이미지 슬라이더 */}
+      <Swiper
+        onSwiper={(swiper) => { swiperRef.current = swiper; }}
+        onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
+        slidesPerView={1}
+        className="h-[65%]"
+      >
+        {members.map((member) => (
+          <SwiperSlide key={member.id}>
+            <div className={`w-full h-full ${member.is_former ? 'grayscale' : ''}`}>
+              {member.image_url ? (
+                <img src={member.image_url} alt={member.name} className="w-full h-full object-cover object-top" />
+              ) : (
+                <div className="w-full h-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
+                  <span className="text-8xl text-gray-600 font-bold">{member.name[0]}</span>
+                </div>
+              )}
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      {/* 하단 정보 시트 */}
+      <div className="absolute bottom-0 left-0 right-0 h-[40%] bg-white rounded-t-[32px] shadow-2xl">
+        <div className="w-12 h-1 bg-gray-300 rounded-full mx-auto mt-3" />
+
+        {currentMember && (
+          <div className="px-6 pt-4 pb-8">
+            <div className="flex items-start justify-between">
+              <div>
+                <h2 className="text-3xl font-bold text-gray-900">{currentMember.name}</h2>
+                {currentMember.birth_date && (
+                  <div className="flex items-center gap-2 mt-2 text-gray-500">
+                    <Calendar size={16} />
+                    <span>{currentMember.birth_date?.slice(0, 10).replaceAll('-', '.')}</span>
+                    {age && (
+                      <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-md text-sm font-medium">
+                        {age}세
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+              {currentMember.is_former && (
+                <span className="px-3 py-1 bg-gray-100 text-gray-500 text-sm rounded-full">전 멤버</span>
+              )}
+            </div>
+
+            {!currentMember.is_former && currentMember.instagram && (
+              <a href={currentMember.instagram} target="_blank" rel="noopener noreferrer"
+                className="flex items-center justify-between mt-6 px-5 py-4 bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737] rounded-2xl active:scale-[0.98] transition-transform">
+                <div className="flex items-center gap-3">
+                  <Instagram size={22} className="text-white" />
+                  <span className="text-white font-semibold">Instagram 방문하기</span>
+                </div>
+                <ChevronRight size={20} className="text-white/80" />
+              </a>
+            )}
+
+            {/* 멤버 선택 인디케이터 */}
+            <div className="flex justify-center gap-2 mt-6">
+              {members.map((member, index) => (
+                <button
+                  key={member.id}
+                  onClick={() => swiperRef.current?.slideTo(index)}
+                  className={`w-10 h-10 rounded-full overflow-hidden border-2 transition-all ${
+                    index === currentIndex ? 'border-primary scale-110' : 'border-transparent opacity-50'
+                  }`}
+                >
+                  {member.image_url ? (
+                    <img src={member.image_url} alt={member.name} className="w-full h-full object-cover" />
+                  ) : (
+                    <div className="w-full h-full bg-gray-200 flex items-center justify-center text-xs font-bold">
+                      {member.name[0]}
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default MembersPreview;

frontend/src/routes/mobile/index.jsx

@@ -6,6 +6,7 @@ import { Layout } from '@/components/mobile';
 // 페이지
 import Home from '@/pages/mobile/home/Home';
 import Members from '@/pages/mobile/members/Members';
+import MembersPreview from '@/pages/mobile/members/MembersPreview';
 import Schedule from '@/pages/mobile/schedule/Schedule';
 import ScheduleDetail from '@/pages/mobile/schedule/ScheduleDetail';
 import Birthday from '@/pages/mobile/schedule/Birthday';
@@ -37,6 +38,14 @@ export default function MobileRoutes() {
           </Layout>
         }
       />
+      <Route
+        path="/members-preview"
+        element={
+          <Layout pageTitle="디자인 비교" noShadow>
+            <MembersPreview />
+          </Layout>
+        }
+      />
       <Route
         path="/schedule"
         element={