🔍 문제 현상

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

🧪 원인 분석

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 함수에서 발생하는 예기치 않은 동작 방지