Feat/#152 대회 개최 및 참여시 모달 형식으로 변경

__test__/components/MakeChannel/SelectGame.test.tsx

@@ -1,25 +1,26 @@
 import SelectGame from '@components/MakeChannel/SelectGame';
 import MakeGameProvider from '@components/providers/MakeGameProvider';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 describe('대회 개최 게임 테스트', () => {
-  it('총 4개의 게임이 화면에 나타난다.', () => {
+  const mockFn = jest.fn();
+
+  it('총 5개의 버튼(게임 종류 4개의 버튼과 뒤로가기 버튼)이 화면에 나타난다.', () => {
     render(
       <MakeGameProvider>
-        <SelectGame />
+        <SelectGame handleCurrentModalStep={mockFn} />
       </MakeGameProvider>,
     );
 
     const btnsEl = screen.getAllByRole('button');
 
-    expect(btnsEl.length).toBe(4);
+    expect(btnsEl.length).toBe(5);
   });
 
   it('TFT 버튼이 화면에 있다.', () => {
     render(
       <MakeGameProvider>
-        <SelectGame />
+        <SelectGame handleCurrentModalStep={mockFn} />
       </MakeGameProvider>,
     );
 

__test__/components/MakeChannel/SelectRule.test.tsx

@@ -1,14 +1,26 @@
 import SelectRule from '@components/MakeChannel/SelectRule';
+import ChannelsProvider from '@components/providers/ChannelsProvider';
 import MakeGameProvider from '@components/providers/MakeGameProvider';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import mockRouter from 'next-router-mock';
 
+jest.mock('next/router', () => require('next-router-mock'));
 describe('룰 작성 컴포넌트 테스트', () => {
+  const queryClient = new QueryClient();
+
+  const mockFn = jest.fn();
+
   it('대회 방식을 선택하는 버튼이 있다.', () => {
     render(
-      <MakeGameProvider>
-        <SelectRule />
-      </MakeGameProvider>,
+      <QueryClientProvider client={queryClient}>
+        <ChannelsProvider>
+          <MakeGameProvider>
+            <SelectRule handleCurrentModalStep={mockFn} />
+          </MakeGameProvider>
+        </ChannelsProvider>
+      </QueryClientProvider>,
     );
 
     const ruleBtnEl = screen.getByText('프리포올');
@@ -18,9 +30,13 @@ describe('룰 작성 컴포넌트 테스트', () => {
 
   it('참여자 수 Input에는 숫자를 입력할 수 있다.', async () => {
     render(
-      <MakeGameProvider>
-        <SelectRule />
-      </MakeGameProvider>,
+      <QueryClientProvider client={queryClient}>
+        <ChannelsProvider>
+          <MakeGameProvider>
+            <SelectRule handleCurrentModalStep={mockFn} />
+          </MakeGameProvider>
+        </ChannelsProvider>
+      </QueryClientProvider>,
     );
 
     const inputEl: HTMLInputElement = screen.getByPlaceholderText('참여자 수 ex) 32');
@@ -31,9 +47,13 @@ describe('룰 작성 컴포넌트 테스트', () => {
 
   it('참여자 수 Input에는 숫자를 제외한 문자를 입력할 수 없다.', async () => {
     render(
-      <MakeGameProvider>
-        <SelectRule />
-      </MakeGameProvider>,
+      <QueryClientProvider client={queryClient}>
+        <ChannelsProvider>
+          <MakeGameProvider>
+            <SelectRule handleCurrentModalStep={mockFn} />
+          </MakeGameProvider>
+        </ChannelsProvider>
+      </QueryClientProvider>,
     );
 
     const inputEl: HTMLInputElement = screen.getByPlaceholderText('참여자 수 ex) 32');
@@ -44,9 +64,13 @@ describe('룰 작성 컴포넌트 테스트', () => {
 
   it('최대 티어를 설정하는 컴포넌트는 최초에 보이지 않는다.', () => {
     render(
-      <MakeGameProvider>
-        <SelectRule />
-      </MakeGameProvider>,
+      <QueryClientProvider client={queryClient}>
+        <ChannelsProvider>
+          <MakeGameProvider>
+            <SelectRule handleCurrentModalStep={mockFn} />
+          </MakeGameProvider>
+        </ChannelsProvider>
+      </QueryClientProvider>,
     );
 
     const selectEl = screen.queryByRole('combobox');

__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx

@@ -1,69 +1,72 @@
-import Modal from '@components/Modal';
 import SelectChannelType from '@components/Sidebar/ChannelBar/SelectChannelType';
 import { render, screen } from '@testing-library/react';
-import mockRouter from 'next-router-mock';
 import userEvent from '@testing-library/user-event';
 import ChannelsProvider from '@components/providers/ChannelsProvider';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-jest.mock('next/router', () => require('next-router-mock'));
+import MakeGameProvider from '@components/providers/MakeGameProvider';
 
 describe('채널 추가 테스트', () => {
   const queryClient = new QueryClient();
 
-  const mockFn = jest.fn();
-
   it('초기에는 대회 개최 버튼과 대회 참여 버튼이 있다.', () => {
     render(
       <QueryClientProvider client={queryClient}>
         <ChannelsProvider>
-          <SelectChannelType
-            handleModal={() => {
-              return;
-            }}
-          />
+          <MakeGameProvider>
+            <SelectChannelType
+              handleModal={() => {
+                return;
+              }}
+            />
+          </MakeGameProvider>
         </ChannelsProvider>
       </QueryClientProvider>,
     );
 
     const btns = screen.getAllByRole('button');
+
     expect(btns[0].innerHTML).toBe('대회 개최');
-    expect(btns[1].innerHTML).toBe('대회 참여');
+    expect(btns[1].innerHTML).toBe('채널 참여');
   });
 
-  it('대회 개최하기 버튼을 누르면 make-channel 페이지로 이동한다.', async () => {
+  it('대회 개최하기 버튼을 누르면 게임을 선택하는 화면이 나타난다..', async () => {
     render(
       <QueryClientProvider client={queryClient}>
         <ChannelsProvider>
-          <SelectChannelType
-            handleModal={() => {
-              return;
-            }}
-          />
+          <MakeGameProvider>
+            <SelectChannelType
+              handleModal={() => {
+                return;
+              }}
+            />
+          </MakeGameProvider>
         </ChannelsProvider>
       </QueryClientProvider>,
     );
 
     const makeBtn = screen.getByText('대회 개최');
     await userEvent.click(makeBtn);
 
-    expect(mockRouter.asPath).toBe('/make-channel');
+    const title = screen.getByText('개최하실 게임을 선택해주세요.');
+    expect(title).toBeInTheDocument();
   });
 
-  it('대회 참여하기 버튼을 누르면 참여 코드를 입력하는 input이 표시된다.', async () => {
+  it('채널 참여하기 버튼을 누르면 참여 코드를 입력하는 input이 표시된다.', async () => {
     render(
       <QueryClientProvider client={queryClient}>
         <ChannelsProvider>
-          <SelectChannelType
-            handleModal={() => {
-              return;
-            }}
-          />
+          <MakeGameProvider>
+            <SelectChannelType
+              handleModal={() => {
+                return;
+              }}
+            />
+          </MakeGameProvider>
         </ChannelsProvider>
       </QueryClientProvider>,
     );
 
-    const enterBtn = screen.getByText('대회 참여');
+    const enterBtn = screen.getByText('채널 참여');
     await userEvent.click(enterBtn);
 
     const input = screen.getByPlaceholderText('참여 코드 입력');

src/components/MakeChannel/SelectGame.tsx

@@ -1,21 +1,36 @@
-import { GameEnum } from '@constants/MakeGame';
+import Button from '@components/Button';
+import { GameEnum, MakeChannelStep } from '@constants/MakeGame';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import useMakeGame from '@hooks/useMakeGame';
 
-const SelectGame = () => {
+interface Props {
+  handleCurrentModalStep: (step: keyof typeof MakeChannelStep) => void;
+}
+
+const SelectGame = ({ handleCurrentModalStep }: Props) => {
   const { handleSelectGameCategory } = useMakeGame();
 
+  const handleSelectGame = (category: keyof typeof GameEnum) => {
+    handleSelectGameCategory(GameEnum[category]);
+    handleCurrentModalStep('SettingRule');
+  };
+
   return (
     <Container>
       <Wrapper>
         <Title>개최하실 게임을 선택해주세요.</Title>
         <GameContainer>
-          <GameBtn onClick={() => handleSelectGameCategory(GameEnum.TFT)}>TFT</GameBtn>
-          <GameBtn onClick={() => handleSelectGameCategory(GameEnum.LOL)}>L.O.L</GameBtn>
-          <GameBtn onClick={() => handleSelectGameCategory(GameEnum.HSS)}>하스스톤</GameBtn>
-          <GameBtn onClick={() => handleSelectGameCategory(GameEnum.FIFA)}>FIFA</GameBtn>
+          <GameBtn onClick={() => handleSelectGame('TFT')}>TFT</GameBtn>
+          <GameBtn onClick={() => handleSelectGame('LOL')}>L.O.L</GameBtn>
+          <GameBtn onClick={() => handleSelectGame('HSS')}>하스스톤</GameBtn>
+          <GameBtn onClick={() => handleSelectGame('FIFA')}>FIFA</GameBtn>
         </GameContainer>
+        <BtnContainer>
+          <Button width={20} height={5} onClick={() => handleCurrentModalStep('MakeOrJoin')}>
+            뒤로 가기
+          </Button>
+        </BtnContainer>
       </Wrapper>
     </Container>
   );
@@ -35,7 +50,6 @@ export const fadeIn = keyframes`
 `;
 
 const Container = styled.div`
-  height: calc(100vh - 15.5rem);
   min-height: inherit;
   display: flex;
   align-items: center;
@@ -49,23 +63,30 @@ const Wrapper = styled.div``;
 const Title = styled.h1`
   text-align: center;
   font-size: 3rem;
-  margin: 5rem 0;
+  margin: 3rem 0;
 `;
 
 const GameContainer = styled.div`
   display: flex;
   align-items: center;
   column-gap: 2rem;
   justify-content: center;
+  flex-direction: column;
+
+  row-gap: 2rem;
 `;
 
 const GameBtn = styled.button`
   background-color: #202b37;
-  width: 20rem;
-  height: 12.5rem;
+  width: 100%;
+  height: 8rem;
   border-radius: 1rem;
   color: #f9fafb;
   border: none;
   font-size: 3rem;
   cursor: pointer;
 `;
+
+const BtnContainer = styled.div`
+  margin-top: 2rem;
+`;