feat(mobile-members): 매거진 풀블리드 스티키 스택 디자인
- 멤버를 화면 폭 전체 화보 카드로 (한글명 + 생일/나이 + 인스타) - 스티키 스택: 스크롤 시 다음 카드가 이전 카드를 덮으며 흐려짐/축소 - 스크롤 멈추면 가장 가까운 카드를 상단에 자석처럼 스냅 - 마지막 카드도 상단까지 올라오도록 동적 하단 여유 공간 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
9b2e4e190d
commit
f6ba4c8183
1 changed files with 136 additions and 150 deletions
|
|
@ -1,80 +1,143 @@
|
|||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useState, useMemo, useRef, useEffect } from 'react';
|
||||
import { Cake, X, Instagram } from 'lucide-react';
|
||||
import { useMemo, useRef, useEffect, forwardRef } from 'react';
|
||||
import { Cake, Instagram } from 'lucide-react';
|
||||
import { useMembers } from '@/hooks';
|
||||
|
||||
/**
|
||||
* 멤버 카드 컴포넌트 (외부 정의로 리렌더링 방지)
|
||||
*/
|
||||
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>
|
||||
);
|
||||
// 생일/나이 계산
|
||||
const formatBirth = (birthDate) => {
|
||||
if (!birthDate) return null;
|
||||
return birthDate.slice(0, 10).replaceAll('-', '.'); // YYYY.MM.DD
|
||||
};
|
||||
const calcAge = (birthDate) => {
|
||||
if (!birthDate) return null;
|
||||
const b = new Date(birthDate);
|
||||
const t = new Date();
|
||||
let age = t.getFullYear() - b.getFullYear();
|
||||
const m = t.getMonth() - b.getMonth();
|
||||
if (m < 0 || (m === 0 && t.getDate() < b.getDate())) age--;
|
||||
return age;
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 timer = setTimeout(() => {
|
||||
hasAnimated.current = true;
|
||||
}, allMembers.length * 50 + 300);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [allMembers.length]);
|
||||
const container = document.querySelector('.mobile-content');
|
||||
if (!container) return;
|
||||
|
||||
// 현재 멤버만 표시
|
||||
const currentMembers = useMemo(
|
||||
() => allMembers.filter((m) => !m.is_former),
|
||||
[allMembers]
|
||||
);
|
||||
// 마지막 카드가 top-3에서 딱 멈추도록 하단 여유 공간 계산
|
||||
const setSpacer = () => {
|
||||
const cards = cardRefs.current.filter(Boolean);
|
||||
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 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;
|
||||
};
|
||||
const onScroll = () => {
|
||||
const cards = cardRefs.current.filter(Boolean);
|
||||
if (cards.length === 0) return;
|
||||
const rects = cards.map((c) => c.getBoundingClientRect());
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
let coverage = 0;
|
||||
if (i < cards.length - 1) {
|
||||
const cur = rects[i];
|
||||
const next = rects[i + 1];
|
||||
coverage = Math.min(1, Math.max(0, (cur.bottom - next.top) / cur.height));
|
||||
}
|
||||
cards[i].style.opacity = String(1 - coverage * 0.55);
|
||||
cards[i].style.transform = `scale(${(1 - coverage * 0.05).toFixed(3)})`;
|
||||
}
|
||||
};
|
||||
|
||||
// 스크롤 멈추면, 올라오는 카드를 상단(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="grid grid-cols-2 gap-4">
|
||||
{currentMembers.map((member, index) => (
|
||||
<MemberCard
|
||||
<div className="bg-gray-50 px-4 pt-4">
|
||||
<div className="space-y-4">
|
||||
{currentMembers.map((member, i) => (
|
||||
<MemberHeroCard
|
||||
key={member.id}
|
||||
member={member}
|
||||
index={index}
|
||||
onClick={() => setSelectedMember(member)}
|
||||
shouldAnimate={shouldAnimate}
|
||||
ref={(el) => { cardRefs.current[i] = el; }}
|
||||
/>
|
||||
))}
|
||||
</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-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>
|
||||
{/* 마지막 카드가 top-3에서 멈추도록 동적 여유 공간 */}
|
||||
<div ref={spacerRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue