diff --git a/src/components/ChallengeDetail/Progress.tsx b/src/components/ChallengeDetail/Progress.tsx index d71ed13..97b1334 100644 --- 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 (
-
+

@@ -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 index c4a84be..271771a 100644 --- 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` width: ${({ rate }) => rate}%; ${tw` @@ -37,4 +46,5 @@ const Progress = styled.div` bg-fontColor3 break-keep `} + animation: ${({ rate }) => fillAnimation(rate)} 1s ease-out forwards; `; diff --git a/src/components/MyPage/BadgeBoard.tsx b/src/components/MyPage/BadgeBoard.tsx index 0fa00f1..254494f 100644 --- a/src/components/MyPage/BadgeBoard.tsx +++ b/src/components/MyPage/BadgeBoard.tsx @@ -125,7 +125,7 @@ const BadgeBoard = () => {

챌린지 달성 뱃지 - 00개의 챌린지를 성공적으로 마쳤어요. 성장하고 계시는군요! + 14개의 챌린지를 성공적으로 마쳤어요. 성장하고 계시는군요!
diff --git a/src/components/MyPage/CanaryAuth.tsx b/src/components/MyPage/CanaryAuth.tsx index 430e34a..45f26cf 100644 --- a/src/components/MyPage/CanaryAuth.tsx +++ b/src/components/MyPage/CanaryAuth.tsx @@ -5,12 +5,17 @@ import { getCanaryStatus } from "../../apis/canary"; import useAuthStore from "../../storage/useAuthStore"; import { useQuery } from "@tanstack/react-query"; -const CanaryAuth = ({ onClick }: { onClick: () => void }) => { +type CanaryStatus = { + applyStatus: number; + onClick: () => void; +}; + +const CanaryAuth = ({ + applyStatus, + onClick, + isLoading, +}: CanaryStatus & { isLoading: boolean }) => { const { userData, accessToken } = useAuthStore.getState(); - const { data: applyStatus, isLoading } = useQuery({ - queryKey: ["getCanaryStatus", userData.id, accessToken], - queryFn: () => getCanaryStatus(userData.id!, accessToken!), - }); if (isLoading) return
; @@ -23,7 +28,7 @@ const CanaryAuth = ({ onClick }: { onClick: () => void }) => { 멘토링을 신청할 수 있어요.
- {applyStatus.data === 0 && ( + {applyStatus === 0 && (