Design/#280 theme 시스템 구축 및 관리자 페이지 디자인 변경

__test__/components/Sidebar/ChannelCircle/ChannelCircle.test.tsx

@@ -2,6 +2,8 @@ import { render, screen } from '@testing-library/react';
 import ChannelCircle from '@components/Sidebar/ChannelCircle/ChannelCircle';
 import { ChannelCircleProps } from '@type/channelCircle';
 
+jest.mock('next/router', () => require('next-router-mock'));
+
 describe('채널 테스트', () => {
   const initalState: ChannelCircleProps = {
     channelLink: 'ab5gx',

src/@types/emotion.d.ts

@@ -0,0 +1,17 @@
+import '@emotion/react';
+
+declare module '@emotion/react' {
+  export interface Theme {
+    bg: string;
+    'bg-100': string;
+    'bg-80': string;
+    'bg-75': string;
+    'bg-70': string;
+    'bg-60': string;
+    'bg-40': string;
+    text: string;
+    green: string;
+    white: string;
+    gray: string;
+  }
+}

src/apis/match.ts

@@ -1,5 +1,6 @@
 import authAPI from '@apis/authAPI';
 import { GetMatchPlayerScoreInfos } from '@components/RoundCheckIn';
+import { BracketContents } from '@type/bracket';
 import { MatchCountList } from '@type/channelConfig';
 
 export const fetchInitialMatchCount = async (channelLink: string) => {
@@ -21,12 +22,12 @@ export const fetchMatchInfos = async (channelLink: string, matchId: string) => {
 };
 
 export const fetchRoundInfo = async (channelLink: string, curRound: number) => {
-  const res = await authAPI({
+  const res = await authAPI<BracketContents>({
     method: 'get',
     url: `/api/match/${channelLink}/${curRound}`,
   });
 
-  return res;
+  return res.data;
 };
 
 export const updateRoundMatch = async (channelLink: string, matchSetCountList: number[]) => {

src/apis/roundInfo.ts

@@ -1,7 +1,7 @@
 import authAPI from '@apis/authAPI';
 import { BracketHeader } from '@type/bracket';
 
-export const fetchRoundInfo = async (channelLink: string): Promise<BracketHeader> => {
+export const fetchRoundListInfo = async (channelLink: string): Promise<BracketHeader> => {
   const res = await authAPI<BracketHeader>({ method: 'get', url: `/api/match/${channelLink}` });
   return res.data;
 };

src/components/Header/Header.tsx

@@ -73,12 +73,28 @@ const Header = () => {
           {router.pathname.startsWith('/contents') && (
             <>
               <Content onClick={copyInviteCode}>
+                <svg
+                  width='1.5rem'
+                  height='1.5rem'
+                  version='1.1'
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='0 0 24 24'
+                >
+                  <path d='M11 8c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v9c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h9c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-9c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 10h9c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v9c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-9c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-9c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM5 14h-1c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-9c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h9c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-9c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v9c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h1c0.552 0 1-0.448 1-1s-0.448-1-1-1z'></path>
+                </svg>
                 <ContentText>초대코드</ContentText>
-                <Icon kind='mail' size={20} />
               </Content>
               <Content>
+                <svg
+                  width='1.5rem'
+                  height='1.5rem'
+                  version='1.1'
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='0 0 24 24'
+                >
+                  <path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM10.033 9.332c0.183-0.521 0.559-0.918 1.022-1.14s1.007-0.267 1.528-0.083c0.458 0.161 0.819 0.47 1.050 0.859 0.183 0.307 0.284 0.665 0.286 1.037 0 0.155-0.039 0.309-0.117 0.464-0.080 0.16-0.203 0.325-0.368 0.49-0.709 0.709-1.831 1.092-1.831 1.092-0.524 0.175-0.807 0.741-0.632 1.265s0.741 0.807 1.265 0.632c0 0 1.544-0.506 2.613-1.575 0.279-0.279 0.545-0.614 0.743-1.010 0.2-0.4 0.328-0.858 0.328-1.369-0.004-0.731-0.204-1.437-0.567-2.049-0.463-0.778-1.19-1.402-2.105-1.724-1.042-0.366-2.135-0.275-3.057 0.167s-1.678 1.238-2.044 2.28c-0.184 0.521 0.090 1.092 0.611 1.275s1.092-0.091 1.275-0.611zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z'></path>
+                </svg>
                 <ContentText>문의</ContentText>
-                <Icon kind='message' size={20} />
               </Content>
             </>
           )}
@@ -88,8 +104,8 @@ const Header = () => {
             <LoginBtn onClick={handleDropDown}>
               <ProfileImg
                 src={profileContext.profile.profileUrl}
-                width={24}
-                height={24}
+                width={20}
+                height={20}
                 alt='profile'
               />
               <Text>{profileContext.profile.nickname}</Text>
@@ -108,19 +124,20 @@ const Header = () => {
 export default Header;
 
 const Headers = styled.header`
-  width: calc(100% - 5rem);
+  width: 100%;
+  height: 4.5rem;
+  padding: 0.5rem 1.5rem 0.5rem 1rem;
 
-  margin: 0 2.5rem;
+  display: flex;
+  align-items: center;
 
-  background-color: #f1f1f1;
-  border-radius: 0 0 16px 16px;
+  background-color: ${({ theme }) => theme['bg-100']};
+  border-radius: 1rem;
+  color: ${({ theme }) => theme.text};
 `;
 
 const Container = styled.div`
-  width: 95%;
-  height: 5.5rem;
-
-  margin: 0 auto;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -133,25 +150,29 @@ const ContentsWrapper = styled.div`
 `;
 
 const Content = styled.button`
-  height: 3.6rem;
-  border: none;
+  height: 3rem;
+  padding: 0 1rem;
+  margin-right: 1rem;
 
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 1rem;
-  padding: 0 1rem;
+  column-gap: 1rem;
+  border: none;
 
-  background-color: #ffffff;
-  border-radius: 10px;
+  background-color: ${({ theme }) => theme['bg-75']};
+  color: ${({ theme }) => theme.text};
+  border-radius: 1rem;
   font-size: 1.4rem;
   cursor: pointer;
-`;
 
-const ContentText = styled.span`
-  margin-right: 1rem;
+  > svg {
+    fill: ${({ theme }) => theme.text};
+  }
 `;
 
+const ContentText = styled.span``;
+
 const MyInfo = styled.div``;
 
 const ProfileImg = styled(Image)`
@@ -160,13 +181,13 @@ const ProfileImg = styled(Image)`
 
 const LoginBtn = styled.button`
   display: flex;
-  border: none;
   align-items: center;
   justify-content: center;
   column-gap: 0.5rem;
+  border: none;
 
+  color: ${({ theme }) => theme.text};
   background-color: inherit;
-  color: #000000;
   cursor: pointer;
 `;
 
@@ -176,16 +197,12 @@ const Text = styled.div`
 `;
 
 const DropDown = styled.ul<{ click: boolean }>`
-  position: absolute;
-
-  display: ${(prop) => (prop.click ? 'block' : 'none')};
-
   width: 10rem;
 
-  top: 5.5rem;
-  right: 2.5rem;
-
-  color: #020202;
+  display: ${(prop) => (prop.click ? 'block' : 'none')};
+  position: absolute;
+  top: 4.5rem;
+  right: 0.5rem;
 `;
 
 const DropList = styled.li`
@@ -196,9 +213,8 @@ const DropList = styled.li`
 
   display: flex;
 
-  background-color: #f1f1f1;
-  color: #000000;
-
+  background-color: ${({ theme }) => theme['bg-75']};
+  color: ${({ theme }) => theme.text};
   height: 4rem;
-  border: 1px solid #020202;
+  border: ${({ theme }) => `0.1rem solid ${theme['bg-70']}`};
 `;

src/components/Modal/index.tsx

@@ -36,12 +36,13 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: ${({ theme }) => theme['bg-70']};
+  opacity: 0.8;
   z-index: 10;
 `;
 
 const ModalContent = styled.div`
-  background-color: #fffef9;
+  background-color: ${({ theme }) => theme['bg-100']};
   border-radius: 2rem;
   text-align: center;
   margin: 0 auto;