🔍 문제 현상

• 공유하기 모달을 처음 클릭할 때 모달이 바로 닫히는 현상 발생
• 두 번째 이후 클릭부터는 정상적으로 작동하는 불규칙한 동작

🧪 원인 분석

1. 모달 생명주기와 상태 관리 충돌

• 컴포넌트가 두 개의 독립적인 상태 저장소를 사용함
  • useSaveShareModalStore (공유 모달 전용 상태)
  • useCommonModalStore (공통 모달 UI 상태)
• 상태 변경 시 각 저장소의 업데이트 시점 차이로 인한 충돌 발생

2. useEffect의 cleanup 함수 문제

useEffect(() => {
  if (isOpen && cardId) {
    openCommonModal({ ... });
  } else {
    closeCommonModal();
  }

  // 컴포넌트 언마운트 시 모달 닫기
  return () => {
    if (isOpen) {  // 이 조건이 문제!
      closeCommonModal();
      close();
    }
  };
}, [...]);

• React 생명주기 특성상, 상태 변화로 리렌더링될 때마다 이전 useEffect의 cleanup 함수가 실행됨
• 첫 클릭 시:
  1. isOpen이 false에서 true로 변경
  2. 상태 변화로 리렌더링 발생
  3. 이전 useEffect의 cleanup이 먼저 실행됨 (isOpen은 여전히 true)
  4. cleanup에서 closeCommonModal()과 close() 실행되어 모달이 닫힘
  5. 새 useEffect 실행 시점에서 모달은 이미 닫혀 있음

3. 상태 동기화 부재

• CommonModalStore와 SaveShareModalStore 간의 상태 동기화 로직이 없어서 두 상태가 일치하지 않는 경우 발생

💡 해결 방법

1. 모달 초기화 상태 추적

const [modalInitialized, setModalInitialized] = useState(false);

• 모달이 정상적으로 초기화되었는지 추적하는 플래그 추가

2. 조건부 모달 관리 로직 개선

// cardId가 없거나 isOpen이 false면 모달 처리하지 않음
if (!isOpen) {
  if (modalInitialized) {
    closeCommonModal();
    setModalInitialized(false);
  }
  return;
}

// cardId가 있고 isOpen이 true인 경우만 모달 처리
if (cardId && isOpen) {
  openCommonModal({ ... });
  setModalInitialized(true);
}

• 명확한 조건부 로직으로 cleanup 함수에서 발생하는 예기치 않은 동작 방지

3. 양방향 상태 동기화 추가

// CommonModal 상태 모니터링 추가
const commonModalIsOpen = useCommonModalStore((state) => state.isOpen);

// CommonModal이 닫힐 때 SaveShareModal 상태도 업데이트
useEffect(() => {
  if (!commonModalIsOpen && isOpen && modalInitialized) {
    close();
    setModalInitialized(false);
  }
}, [commonModalIsOpen, isOpen, close, modalInitialized]);

• CommonModalStore의 상태 변화를 감지하여 SaveShareModalStore와 동기화

4. 불필요한 cleanup 로직 제거

• 기존 코드의 문제였던 useEffect cleanup에서 모달을 무조건 닫는 로직 제거
• 대신 상태에 따라 조건부로 처리하도록 변경

📚 교훈

다중 상태 관리 시스템 사용 시 주의점

• 여러 상태 관리 도구를 사용할 때는 상태 간 동기화 로직이 필수적
• 특히 모달처럼 여러 컴포넌트가 관여하는 UI 요소는 상태 관리에 더 주의해야 함

useEffect cleanup 함수의 정확한 이해

• cleanup 함수는 컴포넌트 언마운트뿐만 아니라 의존성 배열의 값이 변경될 때마다 이전 useEffect의 cleanup이 실행됨
• cleanup에서 수행하는 작업이 다음 렌더링 사이클에 영향을 줄 수 있음을 인지해야 함

상태 변화 디버깅의 중요성

• React 개발자 도구나 로깅을 통해 상태 변화 순서와 타이밍을 확인하는 것이 중요

위 트러블슈팅을 통해 모달의 첫 번째 클릭 시에도 안정적으로 작동하도록 문제를 해결했습니다.