From 34f02211622d2774cd9a8492f5770bad6eef0187 Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Sun, 23 Jul 2023 00:02:54 +0900
Subject: [PATCH 01/11] =?UTF-8?q?msw=EB=A1=9C=20api=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.tsx                   |  6 +++---
 src/mocks/handlers.ts          | 37 +++++++++++++++++++++++++++++++++-
 src/pages/GameResult/index.tsx | 34 +++++++++++++++++++++++++++----
 3 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 8361391..3ecdbf4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,9 +5,9 @@ import { BrowserRouter } from 'react-router-dom';
 
 import { worker } from './mocks/worker';
 
-// if (import.meta.env.DEV) {
-//   worker.start();
-// }
+if (import.meta.env.DEV) {
+  worker.start();
+}
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 2cdfca7..839fcca 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,6 +1,41 @@
 import { rest } from 'msw';
 
-const dummy = '테스트입니다.';
+const dummy = {
+  석차: [
+    {
+      nickname: '고양양양이',
+      score: 10,
+    },
+    {
+      nickname: 'hello',
+      score: 5,
+    },
+    {
+      nickname: 'hihi',
+      score: 5,
+    },
+    {
+      nickname: 'nodes',
+      score: 10,
+    },
+    {
+      nickname: '고양양양이',
+      score: 5,
+    },
+    {
+      nickname: '노든도나',
+      score: 2,
+    },
+    {
+      nickname: '고고',
+      score: 1,
+    },
+    {
+      nickname: '핑뭐시기',
+      score: 1,
+    },
+  ],
+};
 
 export const handlers = [
   // 테스트 mock api
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 1a1afc5..1a30d05 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -5,12 +5,35 @@ import DrawingRoom from '@/assets/DrawingRoomIcon.png';
 import { useNavigate } from 'react-router-dom';
 import wrong from '@/assets/wrong.png';
 import { DAY, USERRANK, bestPlayerName, crapeTalk } from '@/constants/rank';
+import { useQuery } from '@tanstack/react-query';
+import axios, { AxiosError } from 'axios';
+import { useState } from 'react';
+
 const GameResult = () => {
   const naviagte = useNavigate();
 
   const goToMain = () => naviagte('/');
   const goToDrwaingRoom = () => naviagte('/drawingroom');
 
+  const [resultScore, setResultScore] = useState([{ nickname: '', score: '' }]);
+  const getServerData = async () => {
+    const ResultAPI = await axios.get('/test');
+    return ResultAPI;
+  };
+  const { data } = useQuery(['Result'], getServerData, {
+    refetchOnWindowFocus: false,
+    onSuccess: (data) => {
+      setResultScore(data.data['석차']);
+    },
+    onError: (e) => {
+      console.log('onError', e);
+    },
+  });
+
+  if (resultScore) {
+    console.log(resultScore);
+  }
+
   return (
     <GameResultContainer>
       <TheFirstAward>
@@ -25,9 +48,12 @@ const GameResult = () => {
       <div className="right-items">
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
-          {USERRANK.map((user, index) => {
-            return <span key={index}>{user}</span>;
-          })}
+          {resultScore.map((u, index) => (
+            <>
+              <p>{u.nickname}</p>
+              <p>{u.score}</p>
+            </>
+          ))}
         </Ranking>
         <Buttons onClick={goToDrwaingRoom}>
           <img src={DrawingRoom} className="drawingRoom-icon" />
@@ -98,7 +124,7 @@ const TheFirstAward = styled.div`
     margin-bottom: 0;
   }
   span:nth-child(7) {
-    font-size: 1%.5;
+    font-size: 1.5;
     margin-top: 1rem;
     margin-bottom: 0;
   }

From 39fe53424e44a30b08260ccfda90865b681768f7 Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Sun, 23 Jul 2023 00:29:15 +0900
Subject: [PATCH 02/11] =?UTF-8?q?feat=20:=20sort=EB=A1=9C=20score=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mocks/handlers.ts          |  4 ++--
 src/pages/GameResult/index.tsx | 24 +++++++++++++-----------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 839fcca..32d0097 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -4,7 +4,7 @@ const dummy = {
   석차: [
     {
       nickname: '고양양양이',
-      score: 10,
+      score: 1,
     },
     {
       nickname: 'hello',
@@ -28,7 +28,7 @@ const dummy = {
     },
     {
       nickname: '고고',
-      score: 1,
+      score: 10,
     },
     {
       nickname: '핑뭐시기',
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 1a30d05..725675e 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -15,7 +15,11 @@ const GameResult = () => {
   const goToMain = () => naviagte('/');
   const goToDrwaingRoom = () => naviagte('/drawingroom');
 
-  const [resultScore, setResultScore] = useState([{ nickname: '', score: '' }]);
+  type resultScoreType = {
+    nickname: string;
+    score: number;
+  };
+  const [resultScore, setResultScore] = useState<resultScoreType[]>([]);
   const getServerData = async () => {
     const ResultAPI = await axios.get('/test');
     return ResultAPI;
@@ -30,10 +34,6 @@ const GameResult = () => {
     },
   });
 
-  if (resultScore) {
-    console.log(resultScore);
-  }
-
   return (
     <GameResultContainer>
       <TheFirstAward>
@@ -48,12 +48,14 @@ const GameResult = () => {
       <div className="right-items">
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
-          {resultScore.map((u, index) => (
-            <>
-              <p>{u.nickname}</p>
-              <p>{u.score}</p>
-            </>
-          ))}
+          {resultScore
+            .sort((a, b) => b.score - a.score)
+            .map((u, index) => (
+              <>
+                <p>{u.nickname}</p>
+                <p>{u.score}</p>
+              </>
+            ))}
         </Ranking>
         <Buttons onClick={goToDrwaingRoom}>
           <img src={DrawingRoom} className="drawingRoom-icon" />

From cd05f70bcbb52e193998ecfcef883525cadf018c Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Sun, 23 Jul 2023 03:21:56 +0900
Subject: [PATCH 03/11] =?UTF-8?q?feat=20:=20rank=EB=8F=84=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mocks/handlers.ts          |  5 +---
 src/pages/GameResult/index.tsx | 48 +++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 32d0097..f5e61f8 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -18,10 +18,7 @@ const dummy = {
       nickname: 'nodes',
       score: 10,
     },
-    {
-      nickname: '고양양양이',
-      score: 5,
-    },
+
     {
       nickname: '노든도나',
       score: 2,
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 725675e..e55929a 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -7,7 +7,7 @@ import wrong from '@/assets/wrong.png';
 import { DAY, USERRANK, bestPlayerName, crapeTalk } from '@/constants/rank';
 import { useQuery } from '@tanstack/react-query';
 import axios, { AxiosError } from 'axios';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 const GameResult = () => {
   const naviagte = useNavigate();
@@ -19,7 +19,17 @@ const GameResult = () => {
     nickname: string;
     score: number;
   };
-  const [resultScore, setResultScore] = useState<resultScoreType[]>([]);
+  type resultRankType = {
+    nickname: string;
+    rank: number;
+  };
+
+  const [resultScore, setResultScore] = useState<resultScoreType[]>([
+    { nickname: '', score: 0 },
+  ]);
+  const [resultRank, setResultRank] = useState<resultRankType[]>([
+    { nickname: '', rank: 0 },
+  ]);
   const getServerData = async () => {
     const ResultAPI = await axios.get('/test');
     return ResultAPI;
@@ -33,7 +43,24 @@ const GameResult = () => {
       console.log('onError', e);
     },
   });
+  useEffect(() => {
+    let currentRank = 1;
+
+    const sortedScore = [...resultScore].sort((a, b) => b.score - a.score);
+    if (sortedScore[0].score !== undefined) {
+      let prevScore = sortedScore[0].score;
+
+      const rankedScore = sortedScore.map((item) => {
+        if (item.score !== prevScore) {
+          currentRank++; // Increment rank when the score changes
+        }
+        prevScore = item.score; // Update prevScore for the next iteration
+        return { ...item, rank: currentRank }; // Add rank property to the item
+      });
 
+      setResultRank(rankedScore);
+    }
+  }, [resultScore]);
   return (
     <GameResultContainer>
       <TheFirstAward>
@@ -48,14 +75,12 @@ const GameResult = () => {
       <div className="right-items">
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
-          {resultScore
-            .sort((a, b) => b.score - a.score)
-            .map((u, index) => (
-              <>
-                <p>{u.nickname}</p>
-                <p>{u.score}</p>
-              </>
-            ))}
+          {resultRank.map((u, index) => (
+            <>
+              <p>{u.nickname}</p>
+              <p>{u.rank}</p>
+            </>
+          ))}
         </Ranking>
         <Buttons onClick={goToDrwaingRoom}>
           <img src={DrawingRoom} className="drawingRoom-icon" />
@@ -192,3 +217,6 @@ const Ranking = styled.div`
     font-weight: 700;
   }
 `;
+function rankedScore(rankedScore: any) {
+  throw new Error('Function not implemented.');
+}

From 7c45ee1965b65fe954b31df9d650f088fecc8575 Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Mon, 24 Jul 2023 15:26:15 +0900
Subject: [PATCH 04/11] =?UTF-8?q?feat=20:=20useMemo=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GameResult/index.tsx | 41 +++++++++++++++-------------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index e55929a..72576b2 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -7,7 +7,7 @@ import wrong from '@/assets/wrong.png';
 import { DAY, USERRANK, bestPlayerName, crapeTalk } from '@/constants/rank';
 import { useQuery } from '@tanstack/react-query';
 import axios, { AxiosError } from 'axios';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 
 const GameResult = () => {
   const naviagte = useNavigate();
@@ -19,21 +19,15 @@ const GameResult = () => {
     nickname: string;
     score: number;
   };
-  type resultRankType = {
-    nickname: string;
-    rank: number;
-  };
-
   const [resultScore, setResultScore] = useState<resultScoreType[]>([
     { nickname: '', score: 0 },
   ]);
-  const [resultRank, setResultRank] = useState<resultRankType[]>([
-    { nickname: '', rank: 0 },
-  ]);
+
   const getServerData = async () => {
     const ResultAPI = await axios.get('/test');
     return ResultAPI;
   };
+
   const { data } = useQuery(['Result'], getServerData, {
     refetchOnWindowFocus: false,
     onSuccess: (data) => {
@@ -43,24 +37,24 @@ const GameResult = () => {
       console.log('onError', e);
     },
   });
-  useEffect(() => {
-    let currentRank = 1;
 
+  const rankScored = useMemo(() => {
+    let currentRank = 1;
     const sortedScore = [...resultScore].sort((a, b) => b.score - a.score);
+
     if (sortedScore[0].score !== undefined) {
       let prevScore = sortedScore[0].score;
 
-      const rankedScore = sortedScore.map((item) => {
+      return sortedScore.map((item) => {
         if (item.score !== prevScore) {
-          currentRank++; // Increment rank when the score changes
+          currentRank++;
         }
-        prevScore = item.score; // Update prevScore for the next iteration
-        return { ...item, rank: currentRank }; // Add rank property to the item
+        prevScore = item.score;
+        return { ...item, rank: currentRank };
       });
-
-      setResultRank(rankedScore);
     }
   }, [resultScore]);
+
   return (
     <GameResultContainer>
       <TheFirstAward>
@@ -75,12 +69,13 @@ const GameResult = () => {
       <div className="right-items">
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
-          {resultRank.map((u, index) => (
-            <>
-              <p>{u.nickname}</p>
-              <p>{u.rank}</p>
-            </>
-          ))}
+          {rankScored !== undefined &&
+            rankScored.map((u, index) => (
+              <>
+                <p>{u.nickname}</p>
+                <p>{u.rank}</p>
+              </>
+            ))}
         </Ranking>
         <Buttons onClick={goToDrwaingRoom}>
           <img src={DrawingRoom} className="drawingRoom-icon" />

From 6ad6bdaa9fbae9e2388ea196f8175873e2117c08 Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:02:28 +0900
Subject: [PATCH 05/11] =?UTF-8?q?refactor=20:=20api,constant,type=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/gameResult.ts         | 14 ++++++++++++++
 src/constants/rank.ts          |  1 +
 src/pages/GameResult/index.tsx | 32 +++++++++++++++++---------------
 src/types/gameResult.ts        |  4 ++++
 4 files changed, 36 insertions(+), 15 deletions(-)
 create mode 100644 src/apis/gameResult.ts
 create mode 100644 src/types/gameResult.ts

diff --git a/src/apis/gameResult.ts b/src/apis/gameResult.ts
new file mode 100644
index 0000000..ace706f
--- /dev/null
+++ b/src/apis/gameResult.ts
@@ -0,0 +1,14 @@
+import { restFetcher } from '@/queryClient';
+import axios from 'axios';
+export const gameResultAPI = async () => {
+  try {
+    // const response = await restFetcher({
+    //   method:'GET',
+    //   path: '/result',
+    // });
+    const response = await axios.get('/test');
+    return response;
+  } catch (e) {
+    alert('연동 에러');
+  }
+};
diff --git a/src/constants/rank.ts b/src/constants/rank.ts
index b4a2409..579362d 100644
--- a/src/constants/rank.ts
+++ b/src/constants/rank.ts
@@ -13,6 +13,7 @@ export const USERRANK = [
   '8등급 최현정',
 ];
 
+export const InitialResult = [{ nickname: '', score: 0 }];
 export const bestPlayerName = '서 근 재';
 
 export const crapeTalk =
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 72576b2..05dc201 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -4,10 +4,17 @@ import RankingMemo from '@/assets/RankingMemo.png';
 import DrawingRoom from '@/assets/DrawingRoomIcon.png';
 import { useNavigate } from 'react-router-dom';
 import wrong from '@/assets/wrong.png';
-import { DAY, USERRANK, bestPlayerName, crapeTalk } from '@/constants/rank';
+import {
+  DAY,
+  bestPlayerName,
+  crapeTalk,
+  InitialResult,
+} from '@/constants/rank';
 import { useQuery } from '@tanstack/react-query';
-import axios, { AxiosError } from 'axios';
-import { useState, useEffect, useMemo } from 'react';
+import axios from 'axios';
+import { useState, useMemo } from 'react';
+import { gameResultAPI } from '@/apis/gameResult';
+import { resultScoreType } from '@/types/gameResult';
 
 const GameResult = () => {
   const naviagte = useNavigate();
@@ -15,23 +22,18 @@ const GameResult = () => {
   const goToMain = () => naviagte('/');
   const goToDrwaingRoom = () => naviagte('/drawingroom');
 
-  type resultScoreType = {
-    nickname: string;
-    score: number;
-  };
   const [resultScore, setResultScore] = useState<resultScoreType[]>([
-    { nickname: '', score: 0 },
+    InitialResult,
   ]);
 
-  const getServerData = async () => {
-    const ResultAPI = await axios.get('/test');
-    return ResultAPI;
+  const getServerData = () => {
+    return gameResultAPI();
   };
 
   const { data } = useQuery(['Result'], getServerData, {
     refetchOnWindowFocus: false,
     onSuccess: (data) => {
-      setResultScore(data.data['석차']);
+      if (data !== undefined) setResultScore(data.data['석차']);
     },
     onError: (e) => {
       console.log('onError', e);
@@ -70,10 +72,10 @@ const GameResult = () => {
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
           {rankScored !== undefined &&
-            rankScored.map((u, index) => (
+            rankScored.map((i, index) => (
               <>
-                <p>{u.nickname}</p>
-                <p>{u.rank}</p>
+                <p>{i.nickname}</p>
+                <p>{i.rank}</p>
               </>
             ))}
         </Ranking>
diff --git a/src/types/gameResult.ts b/src/types/gameResult.ts
new file mode 100644
index 0000000..334e0bd
--- /dev/null
+++ b/src/types/gameResult.ts
@@ -0,0 +1,4 @@
+export type resultScoreType = {
+  nickname: string;
+  score: number;
+};

From 24b3106a6192f19d28f7695efc75438539f88f41 Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:08:05 +0900
Subject: [PATCH 06/11] =?UTF-8?q?design=20:=20css=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/gameResult.ts         |  2 +-
 src/constants/rank.ts          |  2 +-
 src/font/defalut.css           |  5 ++++
 src/pages/GameResult/index.tsx | 52 ++++++++++++++++++++++++++++------
 src/types/gameResult.ts        |  5 ++++
 5 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/apis/gameResult.ts b/src/apis/gameResult.ts
index ace706f..4595340 100644
--- a/src/apis/gameResult.ts
+++ b/src/apis/gameResult.ts
@@ -6,7 +6,7 @@ export const gameResultAPI = async () => {
     //   method:'GET',
     //   path: '/result',
     // });
-    const response = await axios.get('/test');
+    const response = await axios.get('/test'); //msw
     return response;
   } catch (e) {
     alert('연동 에러');
diff --git a/src/constants/rank.ts b/src/constants/rank.ts
index 579362d..3d3f2e7 100644
--- a/src/constants/rank.ts
+++ b/src/constants/rank.ts
@@ -13,7 +13,7 @@ export const USERRANK = [
   '8등급 최현정',
 ];
 
-export const InitialResult = [{ nickname: '', score: 0 }];
+export const InitialResult = { nickname: '', score: 0 };
 export const bestPlayerName = '서 근 재';
 
 export const crapeTalk =
diff --git a/src/font/defalut.css b/src/font/defalut.css
index ca2c90c..022cac2 100644
--- a/src/font/defalut.css
+++ b/src/font/defalut.css
@@ -15,3 +15,8 @@
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: 'KyoboHandwriting2019';
+  src: url('../font/KyoboHandwriting2019/KyoboHandwriting2019.woff')
+
+}
\ No newline at end of file
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 05dc201..c957739 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -1,4 +1,4 @@
-import { styled } from 'styled-components';
+import { styled, css } from 'styled-components';
 import Award from '@/assets/Award.png';
 import RankingMemo from '@/assets/RankingMemo.png';
 import DrawingRoom from '@/assets/DrawingRoomIcon.png';
@@ -14,7 +14,7 @@ import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useState, useMemo } from 'react';
 import { gameResultAPI } from '@/apis/gameResult';
-import { resultScoreType } from '@/types/gameResult';
+import { resultScoreType, RankTextProps } from '@/types/gameResult';
 
 const GameResult = () => {
   const naviagte = useNavigate();
@@ -61,9 +61,10 @@ const GameResult = () => {
     <GameResultContainer>
       <TheFirstAward>
         <span className="right-items">발급번호: Techeer-600000호</span>
+
         <span className="center-items">상장</span>
         <span className="center-items">The Best Player of Game</span>
-        <span className="right-items">성명 {bestPlayerName}</span>
+        <span className="right-items">성명</span>
         <span className="center-items">{crapeTalk}</span>
         <span className="center-items">{DAY}</span>
         <span className="center-items">Team D 대표 최현정</span>
@@ -72,11 +73,13 @@ const GameResult = () => {
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
           {rankScored !== undefined &&
-            rankScored.map((i, index) => (
-              <>
-                <p>{i.nickname}</p>
-                <p>{i.rank}</p>
-              </>
+            rankScored.map((i) => (
+              <RankWrap key={i.nickname}>
+                <RankText rank={i.rank}>{i.rank}등급</RankText>
+                <RankText rank={i.rank} nickname>
+                  {i.nickname}
+                </RankText>
+              </RankWrap>
             ))}
         </Ranking>
         <Buttons onClick={goToDrwaingRoom}>
@@ -188,7 +191,6 @@ const Ranking = styled.div`
   background-size: 35vw 60vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
   margin-left: 10rem;
   padding-top: 13rem;
   & > img {
@@ -214,6 +216,38 @@ const Ranking = styled.div`
     font-weight: 700;
   }
 `;
+
+const RankWrap = styled.div`
+  display: flex;
+  margin: 0.5rem 7rem 1.1rem 10rem;
+`;
+
+const RankText = styled.h3<RankTextProps>`
+  font-family: 'KyoboHandwriting2019';
+  font-size: 3rem;
+  ${(props) =>
+    props.nickname &&
+    css`
+      margin-left: 2rem;
+    `}
+
+  ${(props) =>
+    props.rank === 1 &&
+    css`
+      color: #e91700;
+    `}
+    ${(props) =>
+    props.rank === 2 &&
+    css`
+      color: #5282ff;
+    `}
+
+  ${(props) =>
+    props.rank === 3 &&
+    css`
+      color: #bc00fe;
+    `}
+`;
 function rankedScore(rankedScore: any) {
   throw new Error('Function not implemented.');
 }
diff --git a/src/types/gameResult.ts b/src/types/gameResult.ts
index 334e0bd..3848407 100644
--- a/src/types/gameResult.ts
+++ b/src/types/gameResult.ts
@@ -2,3 +2,8 @@ export type resultScoreType = {
   nickname: string;
   score: number;
 };
+
+export type RankTextProps = {
+  nickname?: boolean;
+  rank?: number;
+};

From 7bbf2e0849bb6b2edfe1b420bf0358ffbcc6611d Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:08:36 +0900
Subject: [PATCH 07/11] =?UTF-8?q?feat=20:=20=EC=83=81=EC=9E=A5=20=EC=84=B1?=
 =?UTF-8?q?=EB=AA=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/font/defalut.css           | 5 ++---
 src/pages/GameResult/index.tsx | 7 ++++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/font/defalut.css b/src/font/defalut.css
index 022cac2..a9dda32 100644
--- a/src/font/defalut.css
+++ b/src/font/defalut.css
@@ -17,6 +17,5 @@
 }
 @font-face {
   font-family: 'KyoboHandwriting2019';
-  src: url('../font/KyoboHandwriting2019/KyoboHandwriting2019.woff')
-
-}
\ No newline at end of file
+  src: url('../font/KyoboHandwriting2019/KyoboHandwriting2019.woff');
+}
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index c957739..b6ea819 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -56,6 +56,11 @@ const GameResult = () => {
       });
     }
   }, [resultScore]);
+  const winner =
+    rankScored !== undefined &&
+    rankScored
+      .filter((item) => item.rank === 1)
+      .map((item) => item.nickname + ' ');
 
   return (
     <GameResultContainer>
@@ -64,7 +69,7 @@ const GameResult = () => {
 
         <span className="center-items">상장</span>
         <span className="center-items">The Best Player of Game</span>
-        <span className="right-items">성명</span>
+        <span className="right-items">성명 : {winner}</span>
         <span className="center-items">{crapeTalk}</span>
         <span className="center-items">{DAY}</span>
         <span className="center-items">Team D 대표 최현정</span>

From fbdbe58f47b447b6e6367631b46a30367d4410de Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:53:09 +0900
Subject: [PATCH 08/11] =?UTF-8?q?refactor=20:=20=EC=A3=BC=EC=84=9D?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GameResult/index.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index b6ea819..5c7c34c 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -253,6 +253,3 @@ const RankText = styled.h3<RankTextProps>`
       color: #bc00fe;
     `}
 `;
-function rankedScore(rankedScore: any) {
-  throw new Error('Function not implemented.');
-}

From 85a07399773cbb9de3481c208799b90f48d6eeda Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Thu, 27 Jul 2023 03:30:00 +0900
Subject: [PATCH 09/11] =?UTF-8?q?refactor=20:=20=EC=BF=BC=EB=A6=AC?=
 =?UTF-8?q?=ED=82=A4=20=EC=A0=84=EC=97=AD=EA=B4=80=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GameResult/index.tsx | 4 ++--
 src/queryClient.ts             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 5c7c34c..812be1c 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -15,7 +15,7 @@ import axios from 'axios';
 import { useState, useMemo } from 'react';
 import { gameResultAPI } from '@/apis/gameResult';
 import { resultScoreType, RankTextProps } from '@/types/gameResult';
-
+import { QueryKeys } from '@/queryClient';
 const GameResult = () => {
   const naviagte = useNavigate();
 
@@ -30,7 +30,7 @@ const GameResult = () => {
     return gameResultAPI();
   };
 
-  const { data } = useQuery(['Result'], getServerData, {
+  const { data } = useQuery([QueryKeys.result], getServerData, {
     refetchOnWindowFocus: false,
     onSuccess: (data) => {
       if (data !== undefined) setResultScore(data.data['석차']);
diff --git a/src/queryClient.ts b/src/queryClient.ts
index 1c13a09..aa6a057 100644
--- a/src/queryClient.ts
+++ b/src/queryClient.ts
@@ -65,4 +65,4 @@ export const restFetcher = async ({
   }
 };
 
-export const QueryKeys = {};
+export const QueryKeys = { result: 'result' };

From 059475ff396afcbc4ef1d14fc266e9be9c9b80de Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Thu, 27 Jul 2023 03:40:50 +0900
Subject: [PATCH 10/11] =?UTF-8?q?refactor=20:=20if=EB=AC=B8=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20,=20=EA=B0=80=EB=8F=85=EC=84=B1=EC=A6=9D=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GameResult/index.tsx | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 812be1c..dd6e8a9 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -33,7 +33,7 @@ const GameResult = () => {
   const { data } = useQuery([QueryKeys.result], getServerData, {
     refetchOnWindowFocus: false,
     onSuccess: (data) => {
-      if (data !== undefined) setResultScore(data.data['석차']);
+      if (data) setResultScore(data.data['석차']);
     },
     onError: (e) => {
       console.log('onError', e);
@@ -44,23 +44,19 @@ const GameResult = () => {
     let currentRank = 1;
     const sortedScore = [...resultScore].sort((a, b) => b.score - a.score);
 
-    if (sortedScore[0].score !== undefined) {
-      let prevScore = sortedScore[0].score;
-
-      return sortedScore.map((item) => {
-        if (item.score !== prevScore) {
-          currentRank++;
-        }
-        prevScore = item.score;
-        return { ...item, rank: currentRank };
-      });
-    }
+    let prevScore = sortedScore[0].score;
+
+    return sortedScore.map((item) => {
+      if (item.score !== prevScore) {
+        currentRank++;
+      }
+      prevScore = item.score;
+      return { ...item, rank: currentRank };
+    });
   }, [resultScore]);
-  const winner =
-    rankScored !== undefined &&
-    rankScored
-      .filter((item) => item.rank === 1)
-      .map((item) => item.nickname + ' ');
+  const winner = rankScored
+    .filter((item) => item.rank === 1)
+    .map((item) => item.nickname + ' ');
 
   return (
     <GameResultContainer>

From 52db44e2bd036df5848651f917e9a657de8a8c10 Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Thu, 27 Jul 2023 15:28:50 +0900
Subject: [PATCH 11/11] =?UTF-8?q?refactor=20:=20=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EA=B0=80=EB=8F=85=EC=84=B1=EC=A6=9D=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GameResult/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index dd6e8a9..9211e22 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -73,7 +73,7 @@ const GameResult = () => {
       <div className="right-items">
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
-          {rankScored !== undefined &&
+          {rankScored &&
             rankScored.map((i) => (
               <RankWrap key={i.nickname}>
                 <RankText rank={i.rank}>{i.rank}등급</RankText>