diff --git a/src/apis/gameResult.ts b/src/apis/gameResult.ts
new file mode 100644
index 0000000..4595340
--- /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'); //msw
+    return response;
+  } catch (e) {
+    alert('연동 에러');
+  }
+};
diff --git a/src/constants/rank.ts b/src/constants/rank.ts
index b4a2409..3d3f2e7 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/font/defalut.css b/src/font/defalut.css
index ca2c90c..a9dda32 100644
--- a/src/font/defalut.css
+++ b/src/font/defalut.css
@@ -15,3 +15,7 @@
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: 'KyoboHandwriting2019';
+  src: url('../font/KyoboHandwriting2019/KyoboHandwriting2019.woff');
+}
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..f5e61f8 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,6 +1,38 @@
 import { rest } from 'msw';
 
-const dummy = '테스트입니다.';
+const dummy = {
+  석차: [
+    {
+      nickname: '고양양양이',
+      score: 1,
+    },
+    {
+      nickname: 'hello',
+      score: 5,
+    },
+    {
+      nickname: 'hihi',
+      score: 5,
+    },
+    {
+      nickname: 'nodes',
+      score: 10,
+    },
+
+    {
+      nickname: '노든도나',
+      score: 2,
+    },
+    {
+      nickname: '고고',
+      score: 10,
+    },
+    {
+      nickname: '핑뭐시기',
+      score: 1,
+    },
+  ],
+};
 
 export const handlers = [
   // 테스트 mock api
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 1a1afc5..9211e22 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -1,23 +1,71 @@
-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';
 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 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();
 
   const goToMain = () => naviagte('/');
   const goToDrwaingRoom = () => naviagte('/drawingroom');
 
+  const [resultScore, setResultScore] = useState<resultScoreType[]>([
+    InitialResult,
+  ]);
+
+  const getServerData = () => {
+    return gameResultAPI();
+  };
+
+  const { data } = useQuery([QueryKeys.result], getServerData, {
+    refetchOnWindowFocus: false,
+    onSuccess: (data) => {
+      if (data) setResultScore(data.data['석차']);
+    },
+    onError: (e) => {
+      console.log('onError', e);
+    },
+  });
+
+  const rankScored = useMemo(() => {
+    let currentRank = 1;
+    const sortedScore = [...resultScore].sort((a, b) => b.score - a.score);
+
+    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
+    .filter((item) => item.rank === 1)
+    .map((item) => item.nickname + ' ');
+
   return (
     <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">성명 : {winner}</span>
         <span className="center-items">{crapeTalk}</span>
         <span className="center-items">{DAY}</span>
         <span className="center-items">Team D 대표 최현정</span>
@@ -25,9 +73,15 @@ const GameResult = () => {
       <div className="right-items">
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
-          {USERRANK.map((user, index) => {
-            return <span key={index}>{user}</span>;
-          })}
+          {rankScored &&
+            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}>
           <img src={DrawingRoom} className="drawingRoom-icon" />
@@ -98,7 +152,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;
   }
@@ -138,7 +192,6 @@ const Ranking = styled.div`
   background-size: 35vw 60vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
   margin-left: 10rem;
   padding-top: 13rem;
   & > img {
@@ -164,3 +217,35 @@ 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;
+    `}
+`;
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' };
diff --git a/src/types/gameResult.ts b/src/types/gameResult.ts
new file mode 100644
index 0000000..3848407
--- /dev/null
+++ b/src/types/gameResult.ts
@@ -0,0 +1,9 @@
+export type resultScoreType = {
+  nickname: string;
+  score: number;
+};
+
+export type RankTextProps = {
+  nickname?: boolean;
+  rank?: number;
+};