feat: 프로그래스 바 애니메이션 추가

K-Hackathon-Fledge · Aug 10, 2024 · 24e5b9d · 24e5b9d
1 parent af3c81c
commit 24e5b9d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/src/components/ChallengeDetail/Progress.tsx b/src/components/ChallengeDetail/Progress.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import tw from "twin.macro";
 
 type ProgressProps = {
@@ -15,10 +15,7 @@ const Progress = ({
     return (
         <Container>
             <div className="progress-bar">
-                <div
-                    className="progress"
-                    style={{ width: `${successRate}%` }}
-                />
+                <ProgressFill successRate={successRate} />
             </div>
             <div className="text-field">
                 <p>
@@ -46,9 +43,21 @@ const Container = styled.div`
             w-[1280px] h-[15.41px] rounded-[28px] border-[3px] border-subColor shadow-[black] bg-white
         `}
     }
-    .progress {
-        ${tw`
-            h-full rounded-[28px] bg-subColor
-        `}
+`;
+
+const fillAnimation = (successRate: number) => keyframes`
+    from {
+        width: 0;
+    }
+    to {
+        width: ${successRate}%;
     }
 `;
+
+const ProgressFill = styled.div<{ successRate: number }>`
+    ${tw`
+        h-full rounded-[28px] bg-subColor
+    `}
+    animation: ${({ successRate }) =>
+        fillAnimation(successRate)} 1s ease-out forwards;
+`;
diff --git a/src/components/Common/ProgressBar.tsx b/src/components/Common/ProgressBar.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import tw from "twin.macro";
 
 interface ProgressProps {
@@ -22,11 +22,20 @@ const Container = styled.div`
         border-2
         border-fontColor3
         rounded-[28px]
-        bg-[whilte]
+        bg-[white]
         relative
     `}
 `;
 
+const fillAnimation = (rate: number) => keyframes`
+    from {
+        width: 0;
+    }
+    to {
+        width: ${rate}%;
+    }
+`;
+
 const Progress = styled.div<ProgressProps>`
     width: ${({ rate }) => rate}%;
     ${tw`
@@ -37,4 +46,5 @@ const Progress = styled.div<ProgressProps>`
         bg-fontColor3
         break-keep
     `}
+    animation: ${({ rate }) => fillAnimation(rate)} 1s ease-out forwards;
 `;