fromis_9/frontend/src/pages/mobile/public/Members.jsx

import { motion, AnimatePresence } from 'framer-motion';
import { useState, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Instagram, Calendar, X } from 'lucide-react';
import { getMembers } from '../../../api/public/members';

// 모바일 멤버 페이지
function MobileMembers() {
    const [selectedMember, setSelectedMember] = useState(null);

    // useQuery로 멤버 데이터 로드
    const { data: allMembers = [] } = useQuery({
        queryKey: ['members'],
        queryFn: getMembers,
    });

    // useMemo로 현재/전 멤버 분리
    const members = useMemo(() => allMembers.filter(m => !m.is_former), [allMembers]);
    const formerMembers = useMemo(() => allMembers.filter(m => m.is_former), [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;
    };

    // 모달 닫기
    const closeModal = () => setSelectedMember(null);

    // 멤버 카드 렌더링 함수
    const renderMemberCard = (member, index, isFormer = false) => (
        <motion.div
            key={member.id}
            onClick={() => setSelectedMember(member)}
            className="cursor-pointer group"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.05, duration: 0.3 }}
            whileTap={{ scale: 0.95 }}
        >
            {/* 카드 컨테이너 */}
            <div className={`relative overflow-hidden rounded-2xl bg-white shadow-sm 
                transition-shadow duration-300 group-hover:shadow-lg
                ${isFormer ? 'grayscale' : ''}`}
            >
                {/* 이미지 영역 - 3:4 비율 */}
                <div className="aspect-[3/4] bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden">
                    {member.image_url && (
                        <img 
                            src={member.image_url} 
                            alt={member.name}
                            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                        />
                    )}
                </div>
                
                {/* 정보 영역 - 하단 그라데이션 오버레이 */}
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent p-3 pt-10">
                    <p className="font-bold text-white text-sm drop-shadow-md">
                        {member.name}
                    </p>
                </div>
                
                {/* 호버시 반짝이 효과 */}
                {!isFormer && (
                    <div className="absolute inset-0 bg-gradient-to-tr from-primary/0 via-white/0 to-white/20 
                        opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
                )}
            </div>
        </motion.div>
    );

    return (
        <div className="pb-4">
            {/* 현재 멤버 그리드 */}
            <div className="px-4 pt-4">
                <div className="grid grid-cols-3 gap-3">
                    {members.map((member, index) => renderMemberCard(member, index))}
                </div>
            </div>

            {/* 전 멤버 */}
            {formerMembers.length > 0 && (
                <div className="px-4 mt-8">
                    <div className="flex items-center gap-2 mb-4">
                        <div className="h-px flex-1 bg-gray-200" />
                        <h2 className="text-sm font-medium text-gray-400 px-2">전 멤버</h2>
                        <div className="h-px flex-1 bg-gray-200" />
                    </div>
                    <div className="grid grid-cols-3 gap-3">
                        {formerMembers.map((member, index) => renderMemberCard(member, index, true))}
                    </div>
                </div>
            )}

            {/* 멤버 상세 모달 - 드래그로 닫기 가능 */}
            <AnimatePresence>
                {selectedMember && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-end"
                        onClick={closeModal}
                    >
                        <motion.div
                            initial={{ y: '100%' }}
                            animate={{ y: 0 }}
                            exit={{ y: '100%' }}
                            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
                            drag="y"
                            dragConstraints={{ top: 0, bottom: 0 }}
                            dragElastic={{ top: 0, bottom: 0.5 }}
                            onDragEnd={(_, info) => {
                                if (info.offset.y > 100 || info.velocity.y > 300) {
                                    closeModal();
                                }
                            }}
                            className="bg-white w-full rounded-t-3xl overflow-hidden"
                            onClick={e => e.stopPropagation()}
                        >
                            {/* 드래그 핸들 */}
                            <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="flex items-center justify-between px-5 pb-3 border-b border-gray-100">
                                <h3 className="text-lg font-bold">멤버 정보</h3>
                                <button onClick={closeModal} className="p-1.5">
                                    <X size={20} className="text-gray-500" />
                                </button>
                            </div>
                            
                            {/* 모달 콘텐츠 */}
                            <div className="px-5 py-4 pb-5">
                                <div className="flex gap-4">
                                    {/* 프로필 이미지 - 원본 비율 */}
                                    <div className={`w-28 flex-shrink-0 ${selectedMember.is_former ? 'grayscale' : ''}`}>
                                        <div className="aspect-[3/4] rounded-2xl overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 shadow-lg">
                                            {selectedMember.image_url && (
                                                <img 
                                                    src={selectedMember.image_url} 
                                                    alt={selectedMember.name}
                                                    className="w-full h-full object-cover"
                                                />
                                            )}
                                        </div>
                                    </div>
                                    
                                    {/* 정보 */}
                                    <div className="flex-1 flex flex-col justify-between py-1">
                                        <div>
                                            <h2 className="text-2xl font-bold text-gray-900">{selectedMember.name}</h2>
                                            
                                            {selectedMember.position && (
                                                <p className="text-gray-500 text-sm mt-1">{selectedMember.position}</p>
                                            )}
                                            
                                            {selectedMember.birth_date && (
                                                <div className="flex items-center gap-1.5 mt-2 text-gray-400 text-sm">
                                                    <Calendar size={14} />
                                                    <span>
                                                        {selectedMember.birth_date?.slice(0, 10).replaceAll('-', '.')}
                                                        {calculateAge(selectedMember.birth_date) && (
                                                            <span className="ml-1 text-gray-300">
                                                                ({calculateAge(selectedMember.birth_date)}세)
                                                            </span>
                                                        )}
                                                    </span>
                                                </div>
                                            )}
                                        </div>
                                        
                                        {/* 인스타그램 버튼 - 정보 영역 아래쪽 */}
                                        {!selectedMember.is_former && selectedMember.instagram && (
                                            <a 
                                                href={selectedMember.instagram}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="inline-flex items-center gap-1.5 mt-3 px-4 py-2 
                                                    bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 
                                                    text-white text-sm rounded-full font-medium shadow-sm
                                                    hover:shadow-md transition-shadow w-fit"
                                            >
                                                <Instagram size={14} />
                                                <span>Instagram</span>
                                            </a>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}

export default MobileMembers;