[REFACTOR] Context API를 활용하여 Modal 사용성 개선

frontend/.storybook/preview.tsx

@@ -9,6 +9,7 @@ import { Theme } from '../src/styles/Theme';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import { handlers } from '../src/mocks/handlers';
 import ToastProvider from '../src/providers/ToastProvider/ToastProvider';
+import ModalProvider from '../src/providers/ModalProvider/ModalProvider';
 
 initialize({
   serviceWorker: {
@@ -39,7 +40,9 @@ const preview: Preview = {
             <MemoryRouter initialEntries={['/']}>
               <Global styles={GlobalStyle} />
               <ToastProvider>
-                <Story />
+                <ModalProvider>
+                  <Story />
+                </ModalProvider>
               </ToastProvider>
             </MemoryRouter>
           </ThemeProvider>

frontend/src/components/GameResult/GameResult.hook.ts

@@ -2,11 +2,15 @@ import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
+import AlertModal from '../common/AlertModal/AlertModal';
+
 import { fetchMatchingResult } from '@/apis/balanceContent';
 import { resetRoom } from '@/apis/room';
 import { QUERY_KEYS } from '@/constants/queryKeys';
+import useModal from '@/hooks/useModal';
 import { memberInfoState } from '@/recoil/atom';
 import { MatchingResult, MemberMatchingInfo } from '@/types/balanceContent';
+import { CustomError } from '@/utils/error';
 
 type MatchingResultQueryResponse = UseQueryResult<MatchingResult, Error> & {
   matchedMembers?: MemberMatchingInfo[];
@@ -34,11 +38,13 @@ export const useMatchingResultQuery = (): MatchingResultQueryResponse => {
   };
 };
 
-export const useResetRoomMutation = (roomId: number, showModal: () => void) => {
+export const useResetRoomMutation = (roomId: number) => {
+  const { show: showModal } = useModal();
+
   return useMutation({
     mutationFn: async () => await resetRoom(roomId),
-    onError: () => {
-      showModal();
+    onError: (error: CustomError) => {
+      showModal(AlertModal, { title: '방 초기화 에러', message: error.message });
     },
   });
 };

frontend/src/components/GameResult/GameResult.tsx

@@ -7,16 +7,13 @@ import {
   noMatchingImg,
   noMatchingText,
 } from './GameResult.styled';
-import AlertModal from '../common/AlertModal/AlertModal';
 import FinalButton from '../common/FinalButton/FinalButton';
 import Spinner from '../common/Spinner/Spinner';
 import GameResultItem from '../GameResultItem/GameResultItem';
 
 import SadDdangKong from '@/assets/images/sadDdangkong.png';
-import useModal from '@/hooks/useModal';
 
 const GameResult = () => {
-  const { isOpen, show, close } = useModal();
   const { matchedMembers, existMatching, isLoading } = useMatchingResultQuery();
 
   return (
@@ -47,13 +44,7 @@ const GameResult = () => {
           </div>
         )}
       </div>
-      <FinalButton showModal={show} />
-      <AlertModal
-        isOpen={isOpen}
-        onClose={close}
-        title="방 초기화 에러"
-        message="방을 초기화하는데 실패했어요. 다시 시도해주세요"
-      />
+      <FinalButton />
     </>
   );
 };

frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.test.tsx

@@ -0,0 +1,21 @@
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import ReadyMembersContainer from './ReadyMembersContainer';
+
+import { customRender } from '@/utils/test-utils';
+
+describe('ReadyMembersContainer 테스트', () => {
+  it('초대하기 버튼을 클릭했을 때, 초대 모달이 뜬다.', async () => {
+    const user = userEvent.setup();
+    customRender(<ReadyMembersContainer />);
+
+    const inviteButton = await screen.findByText('초대하기');
+    await user.click(inviteButton);
+
+    await waitFor(() => {
+      const copyText = screen.getByText('초대 링크 복사');
+      expect(copyText).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.tsx

@@ -23,9 +23,13 @@ import { memberInfoState } from '@/recoil/atom';
 
 const ReadyMembersContainer = () => {
   const { members, master } = useGetRoomInfo();
-  const { isOpen, show, close } = useModal();
+  const { show } = useModal();
   const [memberInfo, setMemberInfo] = useRecoilState(memberInfoState);
 
+  const handleClickInvite = () => {
+    show(InviteModal);
+  };
+
   // 원래 방장이 아니다 + 방장의 memberId와 내 memberId가 같다 -> 방장으로 변경
   useEffect(() => {
     if (!memberInfo.isMaster && master.memberId === memberInfo.memberId) {
@@ -39,7 +43,7 @@ const ReadyMembersContainer = () => {
       <section css={membersContainer}>
         <ul css={memberList}>
           <li>
-            <button css={inviteButton} onClick={show}>
+            <button css={inviteButton} onClick={handleClickInvite}>
               <div css={profileBox}>
                 <img src={plusIcon} alt="추가 아이콘" />
               </div>
@@ -59,7 +63,6 @@ const ReadyMembersContainer = () => {
           ))}
         </ul>
       </section>
-      <InviteModal isOpen={isOpen} onClose={close} />
     </section>
   );
 };

frontend/src/components/SelectContainer/SelectContainer.test.tsx

@@ -4,6 +4,7 @@ import { http, HttpResponse } from 'msw';
 
 import SelectContainer from './SelectContainer';
 
+import { ERROR_MESSAGE } from '@/constants/message';
 import { MOCK_API_URL } from '@/constants/url';
 import BALANCE_CONTENT from '@/mocks/data/balanceContent.json';
 import { server } from '@/mocks/server';
@@ -15,7 +16,10 @@ describe('SelectContainer', () => {
     const user = userEvent.setup();
     server.use(
       http.post(MOCK_API_URL.vote, () => {
-        return new HttpResponse(JSON.stringify({ errorCode: '', message: '' }), { status: 400 });
+        return new HttpResponse(
+          JSON.stringify({ errorCode: 'ALREADY_VOTED', message: ERROR_MESSAGE.ALREADY_VOTED }),
+          { status: 400 },
+        );
       }),
     );
 

frontend/src/components/SelectContainer/SelectContainer.tsx

@@ -3,26 +3,22 @@ import { useParams } from 'react-router-dom';
 import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
 import Timer from './Timer/Timer';
-import AlertModal from '../common/AlertModal/AlertModal';
 import SelectButton from '../common/SelectButton/SelectButton';
 
 import SelectOption from '@/components/SelectOption/SelectOption';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
-import useModal from '@/hooks/useModal';
 
 const SelectContainer = () => {
   const { roomId } = useParams();
   const { balanceContent } = useBalanceContentQuery(Number(roomId));
   const { selectedOption, handleClickOption, completeSelection } = useSelectOption();
-  const { isOpen, show, close } = useModal();
 
   return (
     <div css={selectContainerLayout}>
       <Timer
         selectedId={selectedOption.id}
         isVoted={selectedOption.isCompleted}
         completeSelection={completeSelection}
-        showModal={show}
       />
       <section css={selectSection}>
         <SelectOption
@@ -41,13 +37,6 @@ const SelectContainer = () => {
         contentId={balanceContent.contentId}
         selectedId={selectedOption.id}
         completeSelection={completeSelection}
-        showModal={show}
-      />
-      <AlertModal
-        isOpen={isOpen}
-        onClose={close}
-        title="선택 에러"
-        message={'선택이 정상적으로 반영되지 않았어요.'}
       />
     </div>
   );

frontend/src/components/SelectContainer/Timer/Timer.tsx

@@ -19,18 +19,16 @@ interface TimerProps {
   selectedId: number;
   isVoted: boolean;
   completeSelection: () => void;
-  showModal: () => void;
 }
 
-const Timer = ({ selectedId, isVoted, completeSelection, showModal }: TimerProps) => {
+const Timer = ({ selectedId, isVoted, completeSelection }: TimerProps) => {
   const { roomId } = useParams();
   const { balanceContent, isFetching } = useBalanceContentQuery(Number(roomId));
   const { barWidthPercent, leftRoundTime, isAlmostFinished } = useVoteTimer({
     roomId: Number(roomId),
     selectedId,
     isVoted,
     completeSelection,
-    showModal,
   });
 
   useVoteIsFinished({

frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts

@@ -10,24 +10,16 @@ interface UseVoteTimerProps {
   selectedId: number;
   isVoted: boolean;
   completeSelection: () => void;
-  showModal: () => void;
 }
 
-const useVoteTimer = ({
-  roomId,
-  selectedId,
-  isVoted,
-  completeSelection,
-  showModal,
-}: UseVoteTimerProps) => {
+const useVoteTimer = ({ roomId, selectedId, isVoted, completeSelection }: UseVoteTimerProps) => {
   const { balanceContent } = useBalanceContentQuery(roomId);
   const timeLimit = balanceContent.timeLimit || DEFAULT_TIME_LIMIT_MSEC;
 
   const { mutate: vote } = useCompleteSelectionMutation({
     selectedId,
     contentId: balanceContent.contentId,
     completeSelection,
-    showModal,
   });
 
   const { leftRoundTime, barWidthPercent, isAlmostFinished } = useTimer({

frontend/src/components/StartButtonContainer/StartButton/StartButton.test.tsx

@@ -0,0 +1,37 @@
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+
+import StartButton from './StartButton';
+
+import { ERROR_MESSAGE } from '@/constants/message';
+import { MOCK_API_URL } from '@/constants/url';
+import { server } from '@/mocks/server';
+import { customRenderWithIsMaster } from '@/utils/test-utils';
+
+describe('StartButton 테스트', () => {
+  it('시작 버튼을 클릭했을 때, 게임 시작 API에서 에러가 발생하면 알림 모달이 뜬다.', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.patch(MOCK_API_URL.startGame, async () => {
+        return HttpResponse.json(
+          {
+            errorCode: 'NOT_READY_ROOM',
+            message: ERROR_MESSAGE.NOT_READY_ROOM,
+          },
+          { status: 400 },
+        );
+      }),
+    );
+
+    customRenderWithIsMaster(<StartButton />, true);
+
+    const startButton = await screen.findByRole('button', { name: '시작' });
+    await user.click(startButton);
+
+    await waitFor(() => {
+      const closeIcon = screen.getByAltText('닫기 버튼');
+      expect(closeIcon).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/StartButtonContainer/StartButton/StartButton.tsx

@@ -2,12 +2,8 @@ import { useGameStart } from './hooks/useGameStart';
 
 import Button from '@/components/common/Button/Button';
 
-interface StartButtonProps {
-  show: () => void;
-}
-
-const StartButton = ({ show }: StartButtonProps) => {
-  const { memberInfo, handleGameStart } = useGameStart({ showModal: show });
+const StartButton = () => {
+  const { memberInfo, handleGameStart } = useGameStart();
 
   return (
     <Button

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

@@ -3,20 +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;
 
-interface UseGameStartProps {
-  showModal: () => void;
-}
-
-export const useGameStart = ({ showModal }: UseGameStartProps) => {
+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)),
@@ -26,7 +25,7 @@ export const useGameStart = ({ showModal }: UseGameStartProps) => {
         return;
       }
 
-      showModal();
+      showModal(AlertModal, { title: '게임 시작 에러', message: error.message });
     },
     networkMode: 'always',
     throwOnError: (error: CustomError) => isServerError(error.status),

frontend/src/components/StartButtonContainer/StartButtonContainer.tsx

@@ -1,26 +1,17 @@
 import Countdown from './Countdown/Countdown';
-import useCountdown from './hooks/useCountdown';
 import StartButton from './StartButton/StartButton';
-import AlertModal from '../common/AlertModal/AlertModal';
+import useCountdown from '../hooks/useCountdown';
 
 import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
-import useModal from '@/hooks/useModal';
 
 const StartButtonContainer = () => {
-  const { isOpen, show, close } = useModal();
   const { isGameStart } = useGetRoomInfo();
   const { isCountdownStart, goToGame } = useCountdown({ isGameStart });
 
   return (
     <>
       {isCountdownStart && <Countdown goToGame={goToGame} />}
-      <StartButton show={show} />
-      <AlertModal
-        isOpen={isOpen}
-        onClose={close}
-        title="게임 시작 에러"
-        message="게임을 시작할 수 없습니다."
-      />
+      <StartButton />
     </>
   );
 };