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

import { motion, AnimatePresence } from 'framer-motion';
import { useState, useMemo, useRef, useEffect } from 'react';
import { Cake, X, 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>
);

/**
 * Mobile 멤버 페이지 - 그리드 레이아웃
 */
function MobileMembers() {
  const [selectedMember, setSelectedMember] = useState(null);
  const hasAnimated = useRef(false);

  // 멤버 데이터 로드
  const { data: allMembers = [] } = useMembers();

  // 초기 애니메이션 완료 추적
  useEffect(() => {
    if (allMembers.length > 0 && !hasAnimated.current) {
      const timer = setTimeout(() => {
        hasAnimated.current = true;
      }, allMembers.length * 50 + 300);
      return () => clearTimeout(timer);
    }
  }, [allMembers.length]);

  // 현재 멤버만 표시
  const currentMembers = 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;
  };

  if (allMembers.length === 0) {
    return (
      <div className="flex items-center justify-center h-[calc(100vh-200px)]">
        <p className="text-gray-400">멤버 정보가 없습니다</p>
      </div>
    );
  }

  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
            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-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>
  );
}

export default MobileMembers;