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

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

@@ -76,7 +76,7 @@ export const barStyle = (percentage: number, isBigFirstOption: boolean) => css`
   font-weight: bold;
   font-size: 1.6rem;
   clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
-  transition: all 1s;
+  transition: all 2s;
   transform: translateX(5px);
 `;
 
@@ -94,7 +94,7 @@ export const barBackgroundStyle = (percentage: number, isBigFirstOption: boolean
   font-weight: bold;
   font-size: 1.6rem;
   clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
-  transition: all 1s;
+  transition: all 2s;
   transform: translateX(-5px);
 `;
 

frontend/src/components/RoundResultTab/RoundResultTab.tsx

@@ -16,6 +16,8 @@ import {
   tabWrapperStyle,
 } from './RoundResultTab.styled';
 
+import useCountAnimation from '@/hooks/useCountAnimation';
+
 interface Option {
   percentage: number;
   count: number;
@@ -42,6 +44,11 @@ const RoundResultTab = () => {
   const [groupResult, setGroupResult] = useState<Statistic>(INITIAL_STATISTIC);
   const [averageResult, setAverageResult] = useState<Statistic>(INITIAL_STATISTIC);
 
+  const animatedFirstPercentage = useCountAnimation({ target: groupResult.firstOption.percentage });
+  const animatedSecondPercentage = useCountAnimation({
+    target: groupResult.secondOption.percentage,
+  });
+
   const isBigFirstOption = groupResult.firstOption.percentage >= 50;
 
   useEffect(() => {
@@ -95,10 +102,10 @@ const RoundResultTab = () => {
             </div>
             <div css={barWrapperStyle}>
               <div css={barStyle(groupResult.firstOption.percentage, isBigFirstOption)}>
-                {groupResult.firstOption.percentage}%
+                {animatedFirstPercentage}%
               </div>
               <div css={barBackgroundStyle(groupResult.secondOption.percentage, isBigFirstOption)}>
-                {groupResult.secondOption.percentage}%
+                {animatedSecondPercentage}%
               </div>
             </div>
             <div css={resultTextStyle}>

frontend/src/hooks/useCountAnimation.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+// "ease out" : 빨라졌다가 천천히 끝나는 애니메이션
+const easeOutRate = (timingRate: number) => {
+  return timingRate === 1 ? 1 : 1 - Math.pow(2, -10 * timingRate);
+};
+
+interface UseCountAnimationProps {
+  target: number;
+  start?: number;
+  duration?: number;
+}
+
+const useCountAnimation = ({ target, start = 50, duration = 2000 }: UseCountAnimationProps) => {
+  const [count, setCount] = useState(start);
+  const frameRate = 500 / 60;
+  const totalFrame = Math.round(duration / frameRate);
+
+  useEffect(() => {
+    if (target === start) return; // target 값을 API로 불러올 경우 초기값이 애니메이션에 반영되므로 예외처리
+    let currentNumber = start;
+    const counter = setInterval(() => {
+      const progress = easeOutRate(++currentNumber / totalFrame);
+      setCount(Math.round(target * progress));
+
+      if (progress === 1) {
+        clearInterval(counter);
+      }
+    }, frameRate);
+  }, [target, frameRate, start, totalFrame]);
+
+  return count;
+};
+
+export default useCountAnimation;