diff --git a/__mocks__/browser.ts b/__mocks__/browser.ts
index af5c195..b7b8241 100644
--- a/__mocks__/browser.ts
+++ b/__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,
);
diff --git a/__mocks__/handlers/channelHandlers.ts b/__mocks__/handlers/channelHandlers.ts
index 390e002..ede2f9c 100644
--- a/__mocks__/handlers/channelHandlers.ts
+++ b/__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,
},
];
diff --git a/__mocks__/handlers/matchHandlers.ts b/__mocks__/handlers/matchHandlers.ts
new file mode 100644
index 0000000..cc13dea
--- /dev/null
+++ b/__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;
diff --git a/__mocks__/server.ts b/__mocks__/server.ts
index 4353590..750713a 100644
--- a/__mocks__/server.ts
+++ b/__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,
);
diff --git a/src/components/RoundCheckIn/CallAdminChat.tsx b/src/components/RoundCheckIn/CallAdminChat.tsx
new file mode 100644
index 0000000..2866e9f
--- /dev/null
+++ b/src/components/RoundCheckIn/CallAdminChat.tsx
@@ -0,0 +1,77 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const CallAdminChat = () => {
+ return (
+
+
+
+
+
+ 입력
+
+
+ );
+};
+
+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;
+ }
+`;
diff --git a/src/components/RoundCheckIn/CheckInPage.tsx b/src/components/RoundCheckIn/CheckInPage.tsx
new file mode 100644
index 0000000..611914e
--- /dev/null
+++ b/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 (
+
+
+
+ 남은시간
+ 04:59
+
+
+
+
+
+
+
+
+
+ );
+};
+
+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``;
diff --git a/src/components/RoundCheckIn/PlayerLists.tsx b/src/components/RoundCheckIn/PlayerLists.tsx
new file mode 100644
index 0000000..d0e466a
--- /dev/null
+++ b/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([]);
+
+ 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 (
+
+
+
+
+
+
+
+ {players.length !== 0 &&
+ players.map((player) => (
+
+
+
+
+
+
+ ))}
+
+ );
+};
+
+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;
+`;
diff --git a/src/components/RoundCheckIn/index.tsx b/src/components/RoundCheckIn/index.tsx
new file mode 100644
index 0000000..6002b53
--- /dev/null
+++ b/src/components/RoundCheckIn/index.tsx
@@ -0,0 +1,64 @@
+import Icon from '@components/Icon';
+import CheckInPage from '@components/RoundCheckIn/CheckInPage';
+import PlayerLists from '@components/RoundCheckIn/PlayerLists';
+import styled from '@emotion/styled';
+
+const RoundCheckIn = () => {
+ return (
+
+
+ 2 of 3
+
+
+
+ 8
+
+
+
+ 5
+
+
+
+
+
+
+
+
+ );
+};
+
+export default RoundCheckIn;
+
+const Container = styled.div`
+ padding: 2rem 0 0 2rem;
+`;
+
+const ContainerHeader = styled.div`
+ display: flex;
+ justify-content: space-between;
+ width: 70%;
+ font-size: 2rem;
+ margin-bottom: 5rem;
+`;
+
+const RoundInfo = styled.div`
+ padding-top: 3rem;
+ padding-left: 5rem;
+`;
+
+const FlexWrapper = styled.div`
+ display: flex;
+`;
+
+const CheckInfo = styled.div`
+ display: flex;
+ background-color: #e4e7ec;
+ padding: 1rem;
+ margin: 3rem 1rem 1rem 1rem;
+ border-radius: 0.5rem;
+ font-size: 1.6rem;
+ width: 10rem;
+ height: 3rem;
+ align-items: center;
+ justify-content: space-between;
+`;
diff --git a/src/components/Sidebar/ChannelBar/SelectChannelType.tsx b/src/components/Sidebar/ChannelBar/SelectChannelType.tsx
index 377191e..e48bf6d 100644
--- a/src/components/Sidebar/ChannelBar/SelectChannelType.tsx
+++ b/src/components/Sidebar/ChannelBar/SelectChannelType.tsx
@@ -39,7 +39,7 @@ const SelectChannelType = (props: Props) => {
const newChannel: ChannelCircleProps = {
channelLink: res.data.channelLink,
title: res.data.title,
- category: res.data.category,
+ gameCategory: res.data.gameCategory,
imgSrc: res.data?.imgSrc,
customChannelIndex: res.data.customChannelIndex,
};
diff --git a/src/pages/contents/[channelLink]/checkIn.tsx b/src/pages/contents/[channelLink]/checkIn.tsx
new file mode 100644
index 0000000..2b52bde
--- /dev/null
+++ b/src/pages/contents/[channelLink]/checkIn.tsx
@@ -0,0 +1,11 @@
+import RoundCheckIn from '@components/RoundCheckIn';
+
+const CheckIn = () => {
+ return (
+ <>
+
+
+ );
+};
+
+export default CheckIn;
diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx
index 7b0c817..835d416 100644
--- a/src/styles/GlobalStyle.tsx
+++ b/src/styles/GlobalStyle.tsx
@@ -9,7 +9,7 @@ export default GlobalStyle;
const globalCss = css`
html {
font-size: 62.5%;
- background-color: #fffef9;
+ background-color: #f9fafb;
}
*,
*::before,