feat(mobile-members): 매거진 풀블리드 스티키 스택 디자인

- 멤버를 화면 폭 전체 화보 카드로 (한글명 + 생일/나이 + 인스타)
- 스티키 스택: 스크롤 시 다음 카드가 이전 카드를 덮으며 흐려짐/축소
- 스크롤 멈추면 가장 가까운 카드를 상단에 자석처럼 스냅
- 마지막 카드도 상단까지 올라오도록 동적 하단 여유 공간

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

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

@@ -1,80 +1,143 @@
-import { motion, AnimatePresence } from 'framer-motion';
+import { useMemo, useRef, useEffect, forwardRef } from 'react';
-import { useState, useMemo, useRef, useEffect } from 'react';
+import { Cake, Instagram } from 'lucide-react';
-import { Cake, X, Instagram } from 'lucide-react';
 import { useMembers } from '@/hooks';
 
-/**
+// 생일/나이 계산
- * 멤버 카드 컴포넌트 (외부 정의로 리렌더링 방지)
+const formatBirth = (birthDate) => {
- */
+  if (!birthDate) return null;
-const MemberCard = ({ member, index, onClick, shouldAnimate }) => (
+  return birthDate.slice(0, 10).replaceAll('-', '.'); // YYYY.MM.DD
-  <motion.button
+};
-    initial={shouldAnimate ? { opacity: 0, y: 20 } : false}
+const calcAge = (birthDate) => {
-    animate={{ opacity: 1, y: 0 }}
+  if (!birthDate) return null;
-    transition={{ delay: index * 0.05 }}
+  const b = new Date(birthDate);
-    whileTap={{ scale: 0.97 }}
+  const t = new Date();
-    onClick={onClick}
+  let age = t.getFullYear() - b.getFullYear();
-    className={`relative aspect-[3/4] rounded-2xl overflow-hidden shadow-md ${member.is_former ? 'grayscale' : ''}`}
+  const m = t.getMonth() - b.getMonth();
-  >
+  if (m < 0 || (m === 0 && t.getDate() < b.getDate())) age--;
-    {member.image_medium || member.image_url ? (
+  return age;
-      <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 멤버 페이지 - 그리드 레이아웃
+ * 현재 멤버 화보 카드 (스티키 스택)
+ */
+const MemberHeroCard = forwardRef(function MemberHeroCard({ member }, ref) {
+  const birth = formatBirth(member.birth_date);
+  const age = calcAge(member.birth_date);
+
+  return (
+    <div
+      ref={ref}
+      className="sticky top-4 rounded-[28px] overflow-hidden shadow-xl aspect-[4/5]"
+      style={{ willChange: 'transform, opacity', transformOrigin: 'center top' }}
+    >
+      {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 text-5xl font-bold text-gray-400">
+          {member.name[0]}
+        </div>
+      )}
+
+      {/* 하단 그라데이션 + 정보 */}
+      <div className="absolute inset-x-0 bottom-0 pt-20 pb-5 px-5"
+        style={{ background: 'linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 45%, transparent 100%)' }}>
+        <p className="text-white text-3xl font-black tracking-tight leading-none drop-shadow-sm">
+          {member.name}
+        </p>
+        {birth && (
+          <div className="flex items-center gap-1.5 mt-2 text-white/80">
+            <Cake size={15} />
+            <span className="text-[15px] font-medium">{birth}{age != null && ` · ${age}세`}</span>
+          </div>
+        )}
+
+        {member.instagram && (
+          <a href={member.instagram} target="_blank" rel="noopener noreferrer"
+            className="mt-4 inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-white/95 active:bg-white transition-colors">
+            <Instagram size={15} className="text-[#E1306C]" />
+            <span className="text-sm font-bold text-gray-900">Instagram</span>
+          </a>
+        )}
+      </div>
+    </div>
+  );
+});
+
+/**
+ * Mobile 멤버 페이지 - 스티키 스택 (덮이며 흐려짐)
  */
 function MobileMembers() {
-  const [selectedMember, setSelectedMember] = useState(null);
-  const hasAnimated = useRef(false);
-
-  // 멤버 데이터 로드
   const { data: allMembers = [] } = useMembers();
+  const currentMembers = useMemo(() => allMembers.filter((m) => !m.is_former), [allMembers]);
 
-  // 초기 애니메이션 완료 추적
+  const cardRefs = useRef([]);
+  const spacerRef = useRef(null);
   useEffect(() => {
-    if (allMembers.length > 0 && !hasAnimated.current) {
+    const container = document.querySelector('.mobile-content');
-      const timer = setTimeout(() => {
+    if (!container) return;
-        hasAnimated.current = true;
-      }, allMembers.length * 50 + 300);
-      return () => clearTimeout(timer);
-    }
-  }, [allMembers.length]);
 
-  // 현재 멤버만 표시
+    // 마지막 카드가 top-3에서 딱 멈추도록 하단 여유 공간 계산
-  const currentMembers = useMemo(
+    const setSpacer = () => {
-    () => allMembers.filter((m) => !m.is_former),
+      const cards = cardRefs.current.filter(Boolean);
-    [allMembers]
+      if (!cards.length || !spacerRef.current) return;
-  );
+      const cardH = cards[cards.length - 1].getBoundingClientRect().height;
+      spacerRef.current.style.height = `${Math.max(0, container.clientHeight - cardH - 16)}px`;
+    };
 
-  // 나이 계산
+    const onScroll = () => {
-  const calculateAge = (birthDate) => {
+      const cards = cardRefs.current.filter(Boolean);
-    if (!birthDate) return null;
+      if (cards.length === 0) return;
-    const birth = new Date(birthDate);
+      const rects = cards.map((c) => c.getBoundingClientRect());
-    const today = new Date();
+      for (let i = 0; i < cards.length; i++) {
-    let age = today.getFullYear() - birth.getFullYear();
+        let coverage = 0;
-    const monthDiff = today.getMonth() - birth.getMonth();
+        if (i < cards.length - 1) {
-    if (
+          const cur = rects[i];
-      monthDiff < 0 ||
+          const next = rects[i + 1];
-      (monthDiff === 0 && today.getDate() < birth.getDate())
+          coverage = Math.min(1, Math.max(0, (cur.bottom - next.top) / cur.height));
-    ) {
+        }
-      age--;
+        cards[i].style.opacity = String(1 - coverage * 0.55);
-    }
+        cards[i].style.transform = `scale(${(1 - coverage * 0.05).toFixed(3)})`;
-    return age;
+      }
-  };
+    };
+
+    // 스크롤 멈추면, 올라오는 카드를 상단(top-4)에 덮이거나 되돌리도록 자석 스냅
+    let snapTimer;
+    const snapToNearest = () => {
+      const cards = cardRefs.current.filter(Boolean);
+      if (cards.length < 2) return;
+      const line = container.getBoundingClientRect().top + 16; // top-4
+      // 상단 라인 아래에서 올라오는 중인(=delta>0) 가장 가까운 카드
+      let riser = null;
+      let riserDelta = Infinity;
+      for (const c of cards) {
+        const d = c.getBoundingClientRect().top - line;
+        if (d > 1 && d < riserDelta) { riserDelta = d; riser = c; }
+      }
+      if (!riser) return;
+      const trigger = riser.getBoundingClientRect().height + 16; // rest(아래) → 덮임(상단) 이동량
+      // 절반 기준: 가까운 쪽(덮임 0 / 되돌림 trigger)으로 스냅
+      const target = riserDelta < trigger / 2 ? riserDelta : riserDelta - trigger;
+      if (Math.abs(target) > 1) {
+        container.scrollBy({ top: target, behavior: 'smooth' });
+      }
+    };
+
+    const handleScroll = () => {
+      onScroll();
+      clearTimeout(snapTimer);
+      snapTimer = setTimeout(snapToNearest, 90);
+    };
+
+    setSpacer();
+    onScroll();
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', setSpacer);
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', setSpacer);
+      clearTimeout(snapTimer);
+    };
+  }, [currentMembers.length]);
 
   if (allMembers.length === 0) {
     return (
@@ -84,96 +147,19 @@ function MobileMembers() {
     );
   }
 
-  const shouldAnimate = !hasAnimated.current;
-
   return (
-    <div className="bg-gray-50 p-4">
+    <div className="bg-gray-50 px-4 pt-4">
-      {/* 현재 멤버 */}
+      <div className="space-y-4">
-      <div className="grid grid-cols-2 gap-4">
+        {currentMembers.map((member, i) => (
-        {currentMembers.map((member, index) => (
+          <MemberHeroCard
-          <MemberCard
             key={member.id}
             member={member}
-            index={index}
+            ref={(el) => { cardRefs.current[i] = el; }}
-            onClick={() => setSelectedMember(member)}
-            shouldAnimate={shouldAnimate}
           />
         ))}
       </div>
-
+      {/* 마지막 카드가 top-3에서 멈추도록 동적 여유 공간 */}
-      {/* 선택된 멤버 모달 */}
+      <div ref={spacerRef} />
-      <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-center justify-center p-8"
-            onClick={() => setSelectedMember(null)}
-          >
-            <motion.div
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-              className="w-64 bg-white rounded-2xl overflow-hidden"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {/* 이미지 */}
-              <div className="relative aspect-[3/4] overflow-hidden">
-                {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-3xl font-bold text-gray-400">
-                    {selectedMember.name[0]}
-                  </div>
-                )}
-                {/* 닫기 버튼 */}
-                <button
-                  onClick={() => setSelectedMember(null)}
-                  className="absolute top-2 right-2 w-8 h-8 bg-black/50 rounded-full flex items-center justify-center"
-                >
-                  <X size={18} className="text-white" />
-                </button>
-              </div>
-
-              {/* 정보 영역 */}
-              <div className="p-4 text-center">
-                <h3 className="text-lg font-bold">{selectedMember.name}</h3>
-                {selectedMember.birth_date && (
-                  <div className="flex items-center justify-center gap-1 text-gray-500 text-sm mt-1.5">
-                    <Cake size={14} />
-                    <span>
-                      {selectedMember.birth_date?.slice(0, 10).replaceAll('-', '.')}
-                    </span>
-                    {calculateAge(selectedMember.birth_date) && (
-                      <span className="ml-0.5 text-primary">
-                        ({calculateAge(selectedMember.birth_date)}세)
-                      </span>
-                    )}
-                  </div>
-                )}
-                {!selectedMember.is_former && selectedMember.instagram && (
-                  <a
-                    href={selectedMember.instagram}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center justify-center gap-1.5 mt-3 w-full py-2.5 bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737] rounded-xl"
-                  >
-                    <Instagram size={16} className="text-white" />
-                    <span className="text-white text-sm font-medium">Instagram</span>
-                  </a>
-                )}
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </div>
   );
 }