refactor: Modal Context 게임 시작 부분 적용 #272

frontend/src/components/StartButtonContainer/StartButton/hooks/useGameStart.ts

@@ -3,16 +3,19 @@ import { useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
 import { startGame } from '@/apis/room';
+import AlertModal from '@/components/common/AlertModal/AlertModal';
+import useModal from '@/hooks/useModal';
 import useToast from '@/hooks/useToast';
 import { memberInfoState } from '@/recoil/atom';
 import { CustomError, NetworkError } from '@/utils/error';
 
 const isServerError = (status: number) => status >= 500 && status !== 555;
 
-export const useGameStart = (showModal: () => void) => {
+export const useGameStart = () => {
   const [memberInfo, setMemberInfo] = useRecoilState(memberInfoState);
   const { roomId } = useParams();
   const { show } = useToast();
+  const { show: showModal } = useModal();
 
   const startGameMutation = useMutation({
     mutationFn: () => startGame(Number(roomId)),
@@ -22,7 +25,7 @@ export const useGameStart = (showModal: () => void) => {
         return;
       }
 
-      showModal();
+      showModal(AlertModal, { title: '게임 시작 에러', message: error.message });
     },
     networkMode: 'always',
     throwOnError: (error: CustomError) => isServerError(error.status),

frontend/src/components/StartButtonContainer/StartButtonContainer.tsx

@@ -1,22 +1,7 @@
 import StartButton from './StartButton/StartButton';
-import AlertModal from '../common/AlertModal/AlertModal';
-
-import useModal from '@/hooks/useModal';
 
 const StartButtonContainer = () => {
-  const { isOpen, show, close } = useModal();
-
-  return (
-    <>
-      <StartButton show={show} />
-      <AlertModal
-        isOpen={isOpen}
-        onClose={close}
-        title="게임 시작 에러"
-        message="게임을 시작할 수 없습니다."
-      />
-    </>
-  );
+  return <StartButton />;
 };
 
 export default StartButtonContainer;

frontend/src/hooks/useModal.ts

@@ -1,16 +1,13 @@
-import { useState } from 'react';
+import { useContext } from 'react';
 
-const useModal = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const show = () => {
-    setIsOpen(true);
-  };
+import { ModalDispatchContext } from '@/providers/ModalProvider/ModalProvider';
 
-  const close = () => {
-    setIsOpen(false);
-  };
+const useModal = () => {
+  const dispatch = useContext(ModalDispatchContext);
 
-  return { isOpen, show, close };
+  if (dispatch === null) {
+    throw new Error('ModalDispatchContext가 존재하지 않습니다.');
+  }
+  return dispatch;
 };
 export default useModal;