Feat/#139: 참여자 체크인 및 관리자 호출할 수 있는 페이지 추가

__mocks__/browser.ts

@@ -8,6 +8,7 @@ import statHandlers from '@mocks/handlers/statHandlers';
 import makeGameHandlers from './handlers/makeGameHandlers';
 import mypageHandlers from './handlers/mypageHandlers';
 import bracketHandlers from './handlers/bracketHandlers';
+import matchHandler from '@mocks/handlers/matchHandlers';
 
 export const worker = setupWorker(
   ...testHandlers,
@@ -18,4 +19,5 @@ export const worker = setupWorker(
   ...makeGameHandlers,
   ...mypageHandlers,
   ...bracketHandlers,
+  ...matchHandler,
 );

__mocks__/handlers/channelHandlers.ts

@@ -7,25 +7,25 @@ const getChannels: ChannelCircleProps[][] = [
     {
       channelLink: '123',
       title: '부경대 총장기',
-      category: 0,
+      gameCategory: 0,
       customChannelIndex: 0,
     },
     {
       channelLink: '234',
       title: '부경대 총장기',
-      category: 1,
+      gameCategory: 1,
       customChannelIndex: 1,
     },
     {
       channelLink: '345',
       title: '부경대 총장기',
-      category: 2,
+      gameCategory: 2,
       customChannelIndex: 2,
     },
     {
       channelLink: '456',
       title: '부경대 총장기',
-      category: 3,
+      gameCategory: 3,
       customChannelIndex: 3,
     },
   ],
@@ -36,7 +36,7 @@ const postChannels: ChannelCircleProps[] = [
   {
     channelLink: '26734',
     title: '부경대 추가대회',
-    category: 1,
+    gameCategory: 1,
     customChannelIndex: 4,
   },
 ];

__mocks__/handlers/matchHandlers.ts

@@ -0,0 +1,81 @@
+import { SERVER_URL } from '@config/index';
+import { rest } from 'msw';
+
+const players = {
+  requestMatchPlayerId: '유리',
+  matchPlayerScoreInfos: [
+    {
+      matchPlayerId: 0,
+      participnatId: 0,
+      matchRank: 1,
+      participantImageUrl: '',
+      participantGameId: '짱구',
+      playerScore: 10,
+    },
+    {
+      matchPlayerId: 1,
+      participnatId: 1,
+      matchRank: 2,
+      participantImageUrl: '',
+      participantGameId: '철수',
+      playerScore: 9,
+    },
+    {
+      matchPlayerId: 2,
+      participnatId: 2,
+      matchRank: 3,
+      participantImageUrl: '',
+      participantGameId: '유리',
+      playerScore: 8,
+    },
+    {
+      matchPlayerId: 3,
+      participnatId: 3,
+      matchRank: 4,
+      participantImageUrl: '',
+      participantGameId: '맹구',
+      playerScore: 7,
+    },
+    {
+      matchPlayerId: 4,
+      participnatId: 4,
+      matchRank: 5,
+      participantImageUrl: '',
+      participantGameId: '훈이',
+      playerScore: 6,
+    },
+    {
+      matchPlayerId: 5,
+      participnatId: 5,
+      matchRank: 6,
+      participantImageUrl: '',
+      participantGameId: '흑곰',
+      playerScore: 5,
+    },
+    {
+      matchPlayerId: 6,
+      participnatId: 6,
+      matchRank: 7,
+      participantImageUrl: '',
+      participantGameId: '수지',
+      playerScore: 3,
+    },
+    {
+      matchPlayerId: 7,
+      participnatId: 7,
+      matchRank: 8,
+      participantImageUrl: '',
+      participantGameId: '키자루',
+      playerScore: 2,
+    },
+  ],
+};
+
+const matchHandler = [
+  rest.get(SERVER_URL + '/api/match/:matchId/player/info', (req, res, ctx) => {
+    console.log('qwe');
+    return res(ctx.status(200), ctx.json(players));
+  }),
+];
+
+export default matchHandler;

__mocks__/server.ts

@@ -8,6 +8,7 @@ import statHandlers from '@mocks/handlers/statHandlers';
 import makeGameHandlers from './handlers/makeGameHandlers';
 import mypageHandlers from './handlers/mypageHandlers';
 import bracketHandlers from './handlers/bracketHandlers';
+import matchHandler from '@mocks/handlers/matchHandlers';
 
 export const server = setupServer(
   ...testHandlers,
@@ -18,4 +19,5 @@ export const server = setupServer(
   ...makeGameHandlers,
   ...mypageHandlers,
   ...bracketHandlers,
+  ...matchHandler,
 );

src/components/RoundCheckIn/CallAdminChat.tsx

@@ -0,0 +1,77 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const CallAdminChat = () => {
+  return (
+    <Container>
+      <Header>
+        <div>Chat</div>
+        <CallAdminButton>Call Admin</CallAdminButton>
+      </Header>
+      <ChattingWrapper></ChattingWrapper>
+      <div
+        css={css`
+          position: relative;
+        `}
+      >
+        <InputChat />
+        <SubmitButton>입력</SubmitButton>
+      </div>
+    </Container>
+  );
+};
+
+export default CallAdminChat;
+
+const Container = styled.div`
+  height: 40rem;
+  background: #fff;
+  border-radius: 0.5rem;
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+  color: white;
+  background: #202b37;
+  border-radius: 0.5rem;
+  font-size: 1.5rem;
+`;
+
+const CallAdminButton = styled.button`
+  background: #fddc8b;
+  width: 9rem;
+  border: none;
+  border-radius: 0.3rem;
+`;
+
+const ChattingWrapper = styled.div`
+  height: 30rem;
+`;
+
+const InputChat = styled.input`
+  width: 90%;
+  height: 4rem;
+  padding-left: 1rem;
+  margin: 1rem;
+  border-radius: 0.5rem;
+  background: #f9fafb;
+  border: none;
+  padding-right: 6rem;
+`;
+
+const SubmitButton = styled.button`
+  position: absolute;
+  width: 4rem;
+  top: 1.8rem;
+  right: 3.5rem;
+  background: #344051;
+  color: white;
+  border: none;
+  border-radius: 0.3rem;
+  height: 2.5rem;
+  &: hover {
+    cursor: pointer;
+  }
+`;

src/components/RoundCheckIn/CheckInPage.tsx

@@ -0,0 +1,64 @@
+import Icon from '@components/Icon';
+import CallAdminChat from '@components/RoundCheckIn/CallAdminChat';
+import styled from '@emotion/styled';
+
+const CheckInPage = () => {
+  return (
+    <Container>
+      <RemainTimeWrapper>
+        <Icon kind='clock' />
+        <RemainTimeItem>남은시간</RemainTimeItem>
+        <RemainTimeItem>04:59</RemainTimeItem>
+      </RemainTimeWrapper>
+      <ButtonWrapper>
+        <Button>준비</Button>
+        <Button>기권</Button>
+      </ButtonWrapper>
+      <ChattingWrapper>
+        <CallAdminChat />
+      </ChattingWrapper>
+    </Container>
+  );
+};
+
+export default CheckInPage;
+
+const Container = styled.div`
+  width: 30%;
+  padding: 0 2rem 0 2rem;
+`;
+
+const RemainTimeWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  border-radius: 0.5rem;
+  background: #202b37;
+  color: white;
+  height: 5rem;
+  padding: 1rem;
+  font-size: 1.3rem;
+  align-items: center;
+  margin-bottom: 1rem;
+`;
+
+const RemainTimeItem = styled.div`
+  padding-left: 0.3rem;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+`;
+
+const Button = styled.button`
+  width: 48%;
+  height: 5rem;
+  color: white;
+  background: #637083;
+  border: none;
+  border-radius: 0.5rem;
+`;
+
+const ChattingWrapper = styled.div``;

src/components/RoundCheckIn/PlayerLists.tsx

@@ -0,0 +1,85 @@
+import authAPI from '@apis/authAPI';
+import Icon from '@components/Icon';
+import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
+
+interface MatchPlayerScoreInfos {
+  matchPlayerId: number;
+  participantId: number;
+  matchRank: number;
+  participantImageUrl: string;
+  participantGameId: string;
+  playerScore: number;
+}
+
+const PlayerLists = () => {
+  const [players, setPlayers] = useState<MatchPlayerScoreInfos[]>([]);
+
+  const fetchData = async (matchId: string) => {
+    const res = await authAPI({ method: 'get', url: `/api/match/${matchId}/player/info` });
+    if (res.status !== 200) return;
+    setPlayers(res.data.matchPlayerScoreInfos);
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      fetchData('matchId');
+    }, 1000);
+  }, []);
+
+  return (
+    <Container>
+      <MenuList>
+        <MenuItem>순위</MenuItem>
+        <MenuItem>게임ID</MenuItem>
+        <MenuItem>점수</MenuItem>
+        <MenuItem>준비</MenuItem>
+      </MenuList>
+      {players.length !== 0 &&
+        players.map((player) => (
+          <MenuList>
+            <MenuItem># {player.matchRank}</MenuItem>
+            <MenuItem>{player.participantGameId}</MenuItem>
+            <MenuItem>{player.playerScore}</MenuItem>
+            <MenuItem>
+              <Icon kind='checked' color='1975FF' size={24} />
+            </MenuItem>
+          </MenuList>
+        ))}
+    </Container>
+  );
+};
+
+export default PlayerLists;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+`;
+
+const MenuList = styled.ul`
+  display: flex;
+  height: 6rem;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 1.4rem;
+  border: 1px solid #e4e7ec;
+  border-radius: 0.5rem;
+  padding: 1rem 0 1rem;
+  margin-bottom: 0.5rem;
+  background: #fff;
+
+  &: first-of-type {
+    color: #97a1af;
+    margin-bottom: 1rem;
+  }
+`;
+
+const MenuItem = styled.li`
+  width: 5rem;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+`;