1. 먼저 package.json에 zustand가 있는지 확인합니다. zustand가 없으면 npm install zustand 하시면 됩니다!

1. zustand를 사용하기 위해 store.ts를 생성합니다. (store.ts는 깃허브 develop-front 브랜치에 푸시돼있습니다!)

   import create from "zustand";
   
   // 각 모달의 상태를 관리하기 위한 타입
   interface ModalState {
     modals: {
       [key: string]: { isOpen: boolean };
     };
     openModal: (id: string) => void;
     closeModal: (id: string) => void;
     isAnyModalOpen: () => boolean;
   }
   
   // Zustand 스토어 생성
   export const ModalStore = create<ModalState>((set) => ({
     modals: {},
   
     openModal: (id: string) => {
       set((state) => ({
         modals: {
           ...state.modals,
           [id]: { isOpen: true },
         },
       }));
     },
   
     closeModal: (id: string) => {
       set((state) => ({
         modals: {
           ...state.modals,
           [id]: { isOpen: false },
         },
       }));
     },
   
     isAnyModalOpen: (): boolean => {
       const { modals } = ModalStore.getState();
       return Object.values(modals).some((modal) => modal.isOpen);
     },
   }));
   
   

2. 위 작성한 store.ts를 이용해 모달의 상태를 관리합니다.

   • 모달이 필요한 컴포넌트에 이 코드를 넣으시면 됩니다(ex: ExerciseSearch.tsx, ExerciseDetails.tsx 등)

   import { ModalStore } from '../../store/store';
   
   const {modals, openModal, closeModal} = ModalStore();
   

• 모달 상태관리를 위해 다음과 같이 구성합니다.(handleModalClose 이름은 바꾸셔도 됩니다)

const handleModalClose = () => {
	closeModal("customExerciseModal");
}

return(
	<div>
		<button onClick={() => openModal("customExerciseModal")}>직접 입력하기</button>
  </button>
	<CustomExerciseModal
                isOpen={modals.customExerciseModal?.isOpen}
                onClose={handleModalClose}
            />
)

• 설명
  • 모달을 열 때는 openModal(”모달이름”);
  • 모달을 닫을 때에는 closeModal(”모달이름”);
  • 만약 모달 컴포넌트에 isOpen(boolean 값)이 필요하시다면 modals.모달이름?.isOpen ⇒ 이것을 사용하시면 됩니다.