[FEAT] 라운드 통계 화면 및 게임 결과 화면 구현

frontend/.eslintrc.json

@@ -27,6 +27,7 @@
     "jest.polyfills.js"
   ],
   "rules": {
+    "no-console": "error",
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/no-unused-vars": "warn",
     "react/no-unknown-property": ["error", { "ignore": ["css"] }],

frontend/.stylelintrc.json

@@ -27,9 +27,12 @@
           "bottom",
           "left",
           "z-index",
+          "flex",
+          "flex-basis",
           "flex-direction",
           "justify-content",
-          "align-items"
+          "align-items",
+          "gap"
         ]
       },
       {
@@ -49,7 +52,10 @@
           "padding-right",
           "padding-bottom",
           "padding-left",
-          "border"
+          "border",
+          "border-radius",
+          "border-top",
+          "border-bottom"
         ]
       },
       {

frontend/src/apis/balanceContent.ts

@@ -1,7 +1,8 @@
 import fetcher from './fetcher';
 
 import { API_URL } from '@/constants/url';
-import { BalanceContent } from '@/types/balanceContent';
+import { BalanceContent, GameFinalResult } from '@/types/balanceContent';
+import { RoundVoteResult } from '@/types/roundVoteResult';
 
 export const fetchBalanceContent = async (roomId = 1): Promise<BalanceContent> => {
   const res = await fetcher.get({ url: API_URL.balanceContent(roomId) });
@@ -24,3 +25,33 @@ export const voteBalanceContent = async (optionId: number, roomId = 1, contentId
 
   return data;
 };
+
+export const fetchRoundVoteResult = async (roomId = 1, contentId = 1): Promise<RoundVoteResult> => {
+  const res = await fetcher.get({
+    url: API_URL.roundVoteResult(roomId, contentId),
+  });
+
+  const data = await res.json();
+
+  return data;
+};
+
+export const moveNextRound = async (roomId = 1): Promise<RoundVoteResult> => {
+  const res = await fetcher.post({
+    url: API_URL.moveNextRound(roomId),
+  });
+
+  const data = await res.json();
+
+  return data;
+};
+
+export const fetchFinalGameResult = async (roomId = 1): Promise<GameFinalResult[]> => {
+  const res = await fetcher.get({
+    url: API_URL.finalResult(roomId),
+  });
+
+  const data = await res.json();
+
+  return data;
+};

frontend/src/components/GameResult/GameResult.hook.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { fetchFinalGameResult } from '@/apis/balanceContent';
+
+const useGameResultQuery = () => {
+  const gameResultQuery = useQuery({
+    queryKey: ['gameResult'],
+    queryFn: async () => await fetchFinalGameResult(),
+  });
+
+  return { ...gameResultQuery, gameResult: gameResultQuery.data };
+};
+
+export { useGameResultQuery };

frontend/src/components/GameResult/GameResult.styled.ts

@@ -1,20 +1,24 @@
 import { css } from '@emotion/react';
 
+import { Theme } from '@/styles/Theme';
+
 export const gameResultLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 40vh;
-  gap: 6rem;
+  gap: 4.8rem;
+  width: 100%;
 `;
 
-export const gameResultTitleWrapper = css`
-  display: flex;
-  flex-basis: 20%;
+export const gameResultTitle = css`
+  ${Theme.typography.slogan};
 `;
 
-export const gameResultTitle = css`
-  font-weight: bold;
-  font-size: 2.4rem;
+export const rankListContainer = css`
+  display: flex;
+  flex-basis: 60%;
+  flex-direction: column;
+  gap: 2rem;
+  width: 100%;
 `;

frontend/src/components/GameResult/GameResult.tsx

@@ -1,23 +1,22 @@
-import { useNavigate } from 'react-router-dom';
-
-import { gameResultTitle, gameResultTitleWrapper, gameResultLayout } from './GameResult.styled';
-
-import Button from '@/components/common/Button/Button';
+import { useGameResultQuery } from './GameResult.hook';
+import { gameResultTitle, gameResultLayout, rankListContainer } from './GameResult.styled';
+import FinalButton from '../common/FinalButton/FinalButton';
+import GameResultItem from '../GameResultItem/GameResultItem';
 
 const GameResult = () => {
-  const navigate = useNavigate();
-
-  const goToHome = () => {
-    navigate('/');
-  };
+  const { gameResult } = useGameResultQuery();
 
   return (
-    <div css={gameResultLayout}>
-      <div css={gameResultTitleWrapper}>
+    <>
+      <div css={gameResultLayout}>
         <h1 css={gameResultTitle}>게임 결과</h1>
+        <div css={rankListContainer}>
+          {gameResult &&
+            gameResult.map((item) => <GameResultItem key={item.rank} gameFinalResult={item} />)}
+        </div>
       </div>
-      <Button text="확인" onClick={goToHome} />
-    </div>
+      <FinalButton />
+    </>
   );
 };
 

frontend/src/components/GameResultItem/GameResultItem.styled.ts

@@ -0,0 +1,42 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const rankItem = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  ${Theme.typography.headline3};
+`;
+
+export const rankInfoContainer = css`
+  display: flex;
+  flex-basis: 85%;
+  align-items: center;
+  gap: 1.2rem;
+`;
+
+export const rankNumber = css`
+  ${Theme.typography.headline1}
+`;
+
+export const nicknameContainer = (percent: number) => css`
+  display: flex;
+  overflow: visible;
+  gap: 1rem;
+  width: ${percent > 5 ? percent - 5 : percent}%;
+  height: 100%;
+  padding: 1.2rem;
+  border-radius: ${Theme.borderRadius.radius20};
+
+  background-color: ${Theme.color.peanut400};
+  transition: all 2s;
+`;
+
+export const rankPercent = css`
+  ${Theme.typography.headline3}
+`;
+
+export const nickname = css`
+  min-width: 5.6rem;
+`;

frontend/src/components/GameResultItem/GameResultItem.tsx

@@ -0,0 +1,36 @@
+import {
+  nickname,
+  nicknameContainer,
+  rankInfoContainer,
+  rankItem,
+  rankNumber,
+  rankPercent,
+} from './GameResultItem.styled';
+
+import useCountAnimation from '@/hooks/useCountAnimation';
+import { GameFinalResult } from '@/types/balanceContent';
+
+interface GameResultItemProps {
+  gameFinalResult: GameFinalResult;
+}
+const GameResultItem = ({ gameFinalResult }: GameResultItemProps) => {
+  const animatedRankPercent = useCountAnimation({
+    target: gameFinalResult.percent,
+    duration: 3000,
+  });
+
+  return (
+    <div css={rankItem}>
+      <div css={rankInfoContainer}>
+        <span css={rankNumber}>{gameFinalResult.rank}</span>
+        <div css={nicknameContainer(animatedRankPercent)}>
+          <span>🥜</span>
+          <span css={nickname}>{gameFinalResult.name}</span>
+        </div>
+      </div>
+      <span css={rankPercent}>{animatedRankPercent}%</span>
+    </div>
+  );
+};
+
+export default GameResultItem;

frontend/src/components/RoundResultTab/RoundResultTab.styled.ts

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const tabButtonStyle = (isActive: boolean) => css`
+  flex: 1;
+  padding: 0.8rem;
+  border-radius: 1.2rem 1.2rem 0 0;
+
+  background-color: ${isActive ? Theme.color.peanut400 : Theme.color.gray};
+
+  color: black;
+  font-weight: bold;
+  transition: all 0.5s;
+`;

frontend/src/components/RoundResultTab/RoundResultTab.tsx

@@ -0,0 +1,23 @@
+import { tabButtonStyle } from './RoundResultTab.styled';
+
+type TabTitle = 'group' | 'total';
+
+interface RoundResultTabProps {
+  tab: TabTitle;
+  activeTab: TabTitle;
+  handleClickTab: (tab: TabTitle) => void;
+}
+
+const TAB_TITLE = {
+  group: '그룹',
+  total: '전체',
+} as const;
+
+const RoundResultTab = ({ tab, activeTab, handleClickTab }: RoundResultTabProps) => {
+  return (
+    <button css={tabButtonStyle(activeTab === tab)} onClick={() => handleClickTab(tab)}>
+      {TAB_TITLE[tab]}
+    </button>
+  );
+};
+export default RoundResultTab;

frontend/src/components/RoundVoteContainer/RoundVoteContainer.hook.ts

@@ -0,0 +1,21 @@
+import useCountAnimation from '@/hooks/useCountAnimation';
+import { Total, Group } from '@/types/roundVoteResult';
+
+export const useTotalCountAnimation = (groupRoundResult?: Group, totalResult?: Total) => {
+  const animatedFirstPercent = useCountAnimation({ target: groupRoundResult?.firstOption.percent });
+  const animatedSecondPercent = useCountAnimation({
+    target: groupRoundResult?.secondOption.percent,
+  });
+
+  const animatedTotalFirstPercent = useCountAnimation({ target: totalResult?.firstOption.percent });
+  const animatedTotalSecondPercent = useCountAnimation({
+    target: totalResult?.secondOption.percent,
+  });
+
+  return {
+    animatedFirstPercent,
+    animatedSecondPercent,
+    animatedTotalFirstPercent,
+    animatedTotalSecondPercent,
+  };
+};

frontend/src/components/RoundVoteContainer/RoundVoteContainer.styled.ts

@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+
+export const tabLayout = css`
+  display: flex;
+  flex-basis: 45%;
+  flex-direction: column;
+  width: 100%;
+
+  transition: all 1s;
+`;
+
+export const tabWrapperStyle = css`
+  display: flex;
+  width: 40%;
+  margin-left: 2.4rem;
+`;

frontend/src/components/RoundVoteContainer/RoundVoteContainer.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import { useTotalCountAnimation } from './RoundVoteContainer.hook';
+import { tabLayout, tabWrapperStyle } from './RoundVoteContainer.styled';
+import RoundResultTab from '../RoundResultTab/RoundResultTab';
+import TabContentContainer from '../TabContentContainer/TabContentContainer';
+
+import useRoundVoteResultQuery from '@/hooks/useRoundVoteResultQuery';
+
+const RoundVoteContainer = () => {
+  const [activeTab, setActiveTab] = useState<'group' | 'total'>('group');
+  const isGroupTabActive = activeTab === 'group';
+
+  const { groupRoundResult, totalResult } = useRoundVoteResultQuery();
+  const {
+    animatedFirstPercent,
+    animatedSecondPercent,
+    animatedTotalFirstPercent,
+    animatedTotalSecondPercent,
+  } = useTotalCountAnimation(groupRoundResult, totalResult);
+
+  const handleClickTab = (clickedTab: 'group' | 'total') => {
+    setActiveTab(clickedTab);
+  };
+
+  if (!groupRoundResult || !totalResult) return <div>데이터가 없습니다</div>;
+
+  return (
+    <div css={tabLayout}>
+      <div css={tabWrapperStyle}>
+        <RoundResultTab tab="group" activeTab={activeTab} handleClickTab={handleClickTab} />
+        <RoundResultTab tab="total" activeTab={activeTab} handleClickTab={handleClickTab} />
+      </div>
+      <TabContentContainer
+        isGroupTabActive={isGroupTabActive}
+        roundResult={isGroupTabActive ? groupRoundResult : totalResult}
+        animatedFirstPercent={isGroupTabActive ? animatedFirstPercent : animatedTotalFirstPercent}
+        animatedSecondPercent={
+          isGroupTabActive ? animatedSecondPercent : animatedTotalSecondPercent
+        }
+      />
+    </div>
+  );
+};
+
+export default RoundVoteContainer;