refactor: 다음 라운드 안내 모달 Modal Context 적용 #272

woowacourse-teams · Sep 20, 2024 · de1957d · de1957d
1 parent 45dd23b
commit de1957d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 30 deletions.
diff --git a/frontend/src/components/common/NextRoundButton/NextRoundButton.test.tsx b/frontend/src/components/common/NextRoundButton/NextRoundButton.test.tsx
@@ -7,30 +7,30 @@ import { customRenderWithIsMaster } from '@/test-utils';
 
 describe('NextRoundButton 컴포넌트 테스트', () => {
   it('방장은 활성화 되어 있는 "다음" 버튼이 화면에 보인다.', async () => {
-    customRenderWithIsMaster(<NextRoundButton showModal={jest.fn()} />, true);
+    customRenderWithIsMaster(<NextRoundButton />, true);
 
     const button = await screen.findByRole('button', { name: '다음' });
 
     expect(button).toBeEnabled();
   });
 
   it('방장이 아닌 참여자는 비활성화 되어 있는 "방장이 진행해 주세요" 버튼이 화면에 보인다.', async () => {
-    customRenderWithIsMaster(<NextRoundButton showModal={jest.fn()} />, false);
+    customRenderWithIsMaster(<NextRoundButton />, false);
 
     const button = await screen.findByRole('button', { name: '방장이 진행해 주세요' });
 
     expect(button).toBeDisabled();
   });
 
-  it('방장이 "다음" 버튼을 클릭하면 안내 모달을 여는 함수가 호출된다.', async () => {
-    const handleModalOpen = jest.fn();
-    customRenderWithIsMaster(<NextRoundButton showModal={handleModalOpen} />, true);
+  it('방장이 "다음" 버튼을 클릭하면 안내 모달이 열린다.', async () => {
+    customRenderWithIsMaster(<NextRoundButton />, true);
 
     const button = await screen.findByRole('button', { name: '다음' });
     await userEvent.click(button);
 
     await waitFor(() => {
-      expect(handleModalOpen).toHaveBeenCalledTimes(1);
+      const closeIcon = screen.getByAltText('닫기 버튼');
+      expect(closeIcon).toBeInTheDocument();
     });
   });
 });
diff --git a/frontend/src/components/common/NextRoundButton/NextRoundButton.tsx b/frontend/src/components/common/NextRoundButton/NextRoundButton.tsx
@@ -2,23 +2,29 @@ import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
 import useMoveNextRoundMutation from './NextRoundButton.hook';
+import AlertModal from '../AlertModal/AlertModal';
 import Button from '../Button/Button';
 import { bottomButtonLayout } from '../Button/Button.styled';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
+import useModal from '@/hooks/useModal';
+import createRandomNextRoundMessage from '@/pages/RoundResultPage/createRandomNextRoundMessage';
 import { memberInfoState } from '@/recoil/atom';
 
-interface NextRoundButtonProps {
-  showModal: () => void;
-}
-
-const NextRoundButton = ({ showModal }: NextRoundButtonProps) => {
+const NextRoundButton = () => {
   const { roomId } = useParams();
   const { balanceContent } = useBalanceContentQuery(Number(roomId));
   const { mutate: moveNextRound } = useMoveNextRoundMutation(Number(roomId));
   const memberInfo = useRecoilValue(memberInfoState);
+  const { show } = useModal();
+
+  const randomRoundNextMessage = createRandomNextRoundMessage();
   const isLastRound = balanceContent?.currentRound === balanceContent?.totalRound;
 
+  const showModal = () => {
+    show(AlertModal, { message: randomRoundNextMessage, onConfirm: moveNextRound });
+  };
+
   return (
     <div css={bottomButtonLayout}>
       {memberInfo.isMaster ? (

diff --git a/frontend/src/pages/RoundResultPage/RoundResultPage.tsx b/frontend/src/pages/RoundResultPage/RoundResultPage.tsx
@@ -1,32 +1,14 @@
-import { useParams } from 'react-router-dom';
-
-import createRandomNextRoundMessage from './createRandomNextRoundMessage';
-
-import InfoModal from '@/components/common/InfoModal/InfoModal';
 import NextRoundButton from '@/components/common/NextRoundButton/NextRoundButton';
-import useMoveNextRoundMutation from '@/components/common/NextRoundButton/NextRoundButton.hook';
 import Content from '@/components/layout/Content/Content';
 import RoundVoteContainer from '@/components/RoundVoteContainer/RoundVoteContainer';
 import TopicContainer from '@/components/TopicContainer/TopicContainer';
-import useModal from '@/hooks/useModal';
 
 const RoundResultPage = () => {
-  const { roomId } = useParams();
-  const { isOpen, show, close } = useModal();
-  const { mutate: moveNextRound } = useMoveNextRoundMutation(Number(roomId));
-  const randomRoundNextMessage = createRandomNextRoundMessage();
-
   return (
     <Content>
       <TopicContainer />
       <RoundVoteContainer />
-      <NextRoundButton showModal={show} />
-      <InfoModal
-        isOpen={isOpen}
-        onClose={close}
-        onConfirm={moveNextRound}
-        text={randomRoundNextMessage}
-      />
+      <NextRoundButton />
     </Content>
   );
 };