239 lines
8.5 KiB
React
239 lines
8.5 KiB
React
|
import { motion } 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 멤버 페이지 - 카드 스와이프 스타일
|
||
|
|
*/
|
||
|
|
function MobileMembers() {
|
||
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||
|
|
const swiperRef = useRef(null);
|
||
|
|
const indicatorRef = useRef(null);
|
||
|
|
|
||
|
|
// 멤버 데이터 로드
|
||
|
|
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;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 인디케이터 자동 스크롤
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (members.length === 0) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center h-[calc(100vh-200px)]">
|
||
|
|
<p className="text-gray-400">멤버 정보가 없습니다</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
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'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className={`w-full h-full rounded-full overflow-hidden bg-gray-200
|
||
|
|
${isFormer ? '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>
|
||
|
|
</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">
|
||
|
|
전 멤버
|
||
|
|
</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>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 인스타그램 버튼 */}
|
||
|
|
{!isFormer && 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 shadow-[#E1306C]/40
|
||
|
|
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>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MobileMembers;
|