[refactor/#67] 그림 모아보기 페이지 반응형 구현

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('연동 에러');
+  }
+};

src/common/DrawingHeader /index.tsx

@@ -24,6 +24,14 @@ const WrapBtn = styled.div`
   position: absolute;
   left: 5rem;
   top: 4rem;
+  @media (max-width: 992px) {
+    left: 4rem;
+  }
+
+  @media (max-width: 768px) {
+    left: 3rem;
+    top: 3rem;
+  }
 `;
 const ExitBtn = styled(motion.button)`
   position: relative;
@@ -34,7 +42,17 @@ const ExitBtn = styled(motion.button)`
 const ExitImg = styled.img`
   width: 14rem;
   height: 9rem;
+
+  @media (max-width: 992px) {
+    width: 13rem;
+    height: 8rem;
+  }
+  @media (max-width: 768px) {
+    width: 12rem;
+    height: 8rem;
+  }
 `;
+
 const Text = styled.span`
   position: absolute;
   top: 55%;
@@ -43,13 +61,20 @@ const Text = styled.span`
   font-size: 3rem;
   font-weight: bold;
   color: #000000;
+  @media (max-width: 992px) {
+    font-size: 2.5rem;
+  }
 `;
 const PageHeader = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 180px;
   width: 100%;
+  @media (max-width: 768px) {
+    margin-top: 60px;
+    height: 120px;
+  }
 `;
 const CircleWrap = styled.div`
   width: 8rem;
@@ -63,4 +88,10 @@ const CircleWrap = styled.div`
   font-size: 5rem;
   text-shadow: 1px 1px 2px #b8b8b8;
   box-shadow: 4px 4px 3px -1px #a6a6a6;
+  @media (max-width: 992px) {
+    width: 7rem;
+    height: 7rem;
+    margin-left: 2rem;
+    line-height: 7.5rem;
+  }
 `;

src/constants/rank.ts

@@ -13,6 +13,7 @@ export const USERRANK = [
   '8등급 최현정',
 ];
 
+export const InitialResult = { nickname: '', score: 0 };
 export const bestPlayerName = '서 근 재';
 
 export const crapeTalk =

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');
+}

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>

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

src/pages/DrawingResult/index.tsx

@@ -58,8 +58,12 @@ const Blackboard = styled.div`
   border-radius: 20px;
   display: flex;
   align-items: center;
-  justify-content: center;
   position: relative;
+  justify-content: center;
+  @media (max-width: 480px) {
+    border: 5px solid #8e5501;
+    border-radius: 10px;
+  }
 `;
 
 const DoodleCompass = styled.img.attrs({
@@ -93,6 +97,12 @@ const CategoryWrap = styled.div`
   height: 17rem;
   display: flex;
   justify-content: space-evenly;
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+    width: auto;
+    height: auto;
+  }
 `;
 
 const Category = styled(motion.button)`
@@ -105,20 +115,50 @@ const Category = styled(motion.button)`
   position: relative;
   align-items: center;
   justify-content: center;
+
   cursor: pointer;
   &:hover {
     background-color: rgba(255, 255, 255, 0.18);
   }
   & > img {
-    height: 15rem;
-    width: 15rem;
+    height: 14rem;
+    width: 14rem;
   }
   & > label {
-    font-size: 4rem;
+    font-size: 3.5rem;
     color: #fff;
     position: absolute;
     bottom: 2rem;
   }
+
+  @media (max-width: 992px) {
+    width: 13.8rem;
+    height: 13.8rem;
+  }
+  @media (max-width: 768px) {
+    width: 11rem;
+    height: 11rem;
+    & > img {
+      height: 10rem;
+      width: 10rem;
+    }
+    & > label {
+      font-size: 2.5rem;
+    }
+  }
+  @media (max-width: 480px) {
+    width: 17rem;
+    height: 17rem;
+    border-radius: 20px;
+    margin-top: 5rem;
+    & > img {
+      height: 17rem;
+      width: 17rem;
+    }
+    & > label {
+      font-size: 4rem;
+    }
+  }
 `;
 
 const FireExtinguisher = styled.img.attrs({
@@ -129,3 +169,8 @@ const FireExtinguisher = styled.img.attrs({
   bottom: 0;
   width: 30rem;
 `;
+
+// @media (max-width: 768px) {
+//   // 태블릿
+//   font-size: 50%; // 8px
+// }

src/pages/GameResult/index.tsx

@@ -1,33 +1,91 @@
-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';
+
 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(['Result'], getServerData, {
+    refetchOnWindowFocus: false,
+    onSuccess: (data) => {
+      if (data !== undefined) 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);
+
+    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 };
+      });
+    }
+  }, [resultScore]);
+  const winner =
+    rankScored !== undefined &&
+    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>
       </TheFirstAward>
       <div className="right-items">
         <Buttons onClick={goToMain}></Buttons>
         <Ranking>
-          {USERRANK.map((user, index) => {
-            return <span key={index}>{user}</span>;
-          })}
+          {rankScored !== undefined &&
+            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 +156,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 +196,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 +221,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;
+    `}
+`;

src/types/gameResult.ts

@@ -0,0 +1,9 @@
+export type resultScoreType = {
+  nickname: string;
+  score: number;
+};
+
+export type RankTextProps = {
+  nickname?: boolean;
+  rank?: number;
+};