📌 개요

모달을 전역 상태로 관리하도록 수정하였습니다.

지역적으로 모달을 관리하다보니 불필요한 코드가 많이 발생하고, 서로 다른 지역 모달간의 open,close 동기화가 불필요하게 까다로워 모달을 전역 상태로 관리하도록 수정하였습니다.

369

✨ 작업 내용

zustand를 이용해 전역 상태 저장소 만들었습니다.
지역 모달을 사용하고 있는 모든 페이지 또는 컴포넌트에 대해 전역 상태 저장소를 사용해 전역적으로 모달을 관리할 수 있도록 만들었습니다.

📸 스크린샷(선택)

🔊 리뷰어에게(선택)

import { create } from "zustand";

interface ModalType {
  modal: React.ReactNode | null;
  isModalOpen: boolean;
  setModal: (newState: React.ReactNode | null) => void;
  closeModal: () => void;
}

export const useModalStore = create<ModalType>((set) => ({
  modal: null,
  isModalOpen: false,
  setModal: (newState) => {
    document.body.style.overflow = "hidden";
    set({ modal: newState, isModalOpen: true });
  },
  closeModal: () => {
    document.body.style.overflow = "unset";
    set({ isModalOpen: false });
  },
}));

setModal을 이용해서 모달을 설정할 수 있고 closeModal을 통해서 모달을 닫을 수 있습니다. 모달을 설정하면(setModal) 모달을 자동적으로 열도록 (isModalOpen: true) 만들었으므로 openModal을 해줄 필요가 없습니다.

사용 예시는 아래와 같이 사용하시면 됩니다.

const { setModal, closeModal } = useModalStore();

TeamTheGenius / TeamTheGenius_Web

Refactor/369 global status modal #376

📌 개요

369

✨ 작업 내용

📸 스크린샷(선택)

🔊 리뷰어에게(선택)

📚 추가 사항(선택)