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

import { motion, AnimatePresence } from 'framer-motion';
import { useState, useMemo, useRef, useEffect } from 'react';
import { Instagram, Calendar } 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 [isDragging, setIsDragging] = useState(false);
  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 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 handleDragEnd = (_, info) => {
    if (info.offset.y > 100 || info.velocity.y > 500) {
      setSelectedMember(null);
    }
  };

  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-3">
        {currentMembers.map((member, index) => (
          <MemberCard
            key={member.id}
            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)}
          >
            <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()}
            >
              {/* 드래그 핸들 */}
              <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={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 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>
                          {calculateAge(selectedMember.birth_date) && (
                            <span className="ml-1 text-primary">
                              ({calculateAge(selectedMember.birth_date)}세)
                            </span>
                          )}
                        </div>
                      )}
                    </div>
                    {!selectedMember.is_former && selectedMember.instagram && (
                      <a
                        href={selectedMember.instagram}
                        target="_blank"
                        rel="noopener noreferrer"
                        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={14} className="text-white" />
                        <span className="text-white text-xs font-medium">Instagram</span>
                      </a>
                    )}
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default MobileMembers;