feat: 모바일 멤버 페이지 그리드 레이아웃으로 리디자인
- 카드 스와이프에서 2열 그리드 레이아웃으로 변경 - 현재 멤버와 전 멤버 섹션 분리 - 멤버 선택 시 드래그 가능한 바텀 시트 다이얼로그 - AnimatePresence로 열기/닫기 애니메이션 추가 - 그리드에서 image_medium, 다이얼로그에서 image_thumb 사용 - 디자인 비교용 미리보기 페이지 추가 (/members-preview) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
8bc09e7c0d
commit
5fa9c2a9d0
3 changed files with 664 additions and 177 deletions
|
|
@ -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 swiperRef = useRef(null);
|
||||
const indicatorRef = useRef(null);
|
||||
const [selectedMember, setSelectedMember] = useState(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const hasAnimated = useRef(false);
|
||||
|
||||
// 멤버 데이터 로드
|
||||
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;
|
||||
// 초기 애니메이션 완료 추적
|
||||
useEffect(() => {
|
||||
if (allMembers.length > 0 && !hasAnimated.current) {
|
||||
const timer = setTimeout(() => {
|
||||
hasAnimated.current = true;
|
||||
}, allMembers.length * 50 + 300);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}, [allMembers]);
|
||||
}, [allMembers.length]);
|
||||
|
||||
// 현재/전 멤버 분리
|
||||
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(() => {
|
||||
if (indicatorRef.current && members.length > 0) {
|
||||
const container = indicatorRef.current;
|
||||
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);
|
||||
// 드래그 종료 시 닫기 판단
|
||||
const handleDragEnd = (_, info) => {
|
||||
if (info.offset.y > 100 || info.velocity.y > 500) {
|
||||
setSelectedMember(null);
|
||||
}
|
||||
};
|
||||
|
||||
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 (
|
||||
<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;
|
||||
const shouldAnimate = !hasAnimated.current;
|
||||
|
||||
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)}
|
||||
className={`flex-shrink-0 w-[52px] h-[52px] rounded-full p-[2px] transition-all duration-200
|
||||
${
|
||||
isSelected
|
||||
? 'ring-[2.5px] ring-primary shadow-[0_0_8px_rgba(var(--primary-rgb),0.35)]'
|
||||
: 'ring-[1.5px] ring-gray-300'
|
||||
}`}
|
||||
member={member}
|
||||
index={index}
|
||||
onClick={() => setSelectedMember(member)}
|
||||
shouldAnimate={shouldAnimate}
|
||||
/>
|
||||
))}
|
||||
</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
|
||||
className={`w-full h-full rounded-full overflow-hidden bg-gray-200
|
||||
${isFormer ? 'grayscale' : ''}`}
|
||||
<motion.div
|
||||
initial={{ y: '100%' }}
|
||||
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}
|
||||
alt={member.name}
|
||||
src={selectedMember.image_thumb || selectedMember.image_url}
|
||||
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">
|
||||
{member.name[0]}
|
||||
<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>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 메인 카드 영역 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2, ease: 'easeOut' }}
|
||||
className="flex-1 overflow-visible"
|
||||
>
|
||||
<Swiper
|
||||
onSwiper={(swiper) => {
|
||||
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">
|
||||
전 멤버
|
||||
{/* 정보 영역 */}
|
||||
<div className="flex-1 flex flex-col justify-between py-1">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold">{selectedMember.name}</h3>
|
||||
{selectedMember.birth_date && (
|
||||
<div className="flex items-center gap-1 text-gray-500 text-sm mt-2">
|
||||
<Calendar size={14} />
|
||||
<span>
|
||||
{selectedMember.birth_date?.slice(0, 10).replaceAll('-', '.')}
|
||||
</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}세
|
||||
{calculateAge(selectedMember.birth_date) && (
|
||||
<span className="ml-1 text-primary">
|
||||
({calculateAge(selectedMember.birth_date)}세)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 인스타그램 버튼 */}
|
||||
{!isFormer && member.instagram && (
|
||||
</div>
|
||||
{!selectedMember.is_former && selectedMember.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
|
||||
bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737]
|
||||
rounded-full shadow-lg shadow-[#E1306C]/40
|
||||
active:scale-95 transition-transform"
|
||||
onClick={(e) => isDragging && e.preventDefault()}
|
||||
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"
|
||||
>
|
||||
<Instagram size={18} className="text-white" />
|
||||
<span className="text-white text-sm font-semibold">
|
||||
Instagram
|
||||
</span>
|
||||
<Instagram size={14} className="text-white" />
|
||||
<span className="text-white text-xs font-medium">Instagram</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</SwiperSlide>
|
||||
);
|
||||
})}
|
||||
</Swiper>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
488
frontend/src/pages/mobile/members/MembersPreview.jsx
Normal file
488
frontend/src/pages/mobile/members/MembersPreview.jsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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={
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue