Merge pull request #71 from seokkkkkk/develop

[FIX] API 변동되면서 발생한 오류들 수정
K-Hackathon-Fledge · Aug 10, 2024 · e948457 · e948457
2 parents e2a0354 + 3e81944
commit e948457
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 58 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;
 `;
diff --git a/src/components/MyPage/BadgeBoard.tsx b/src/components/MyPage/BadgeBoard.tsx
@@ -125,7 +125,7 @@ const BadgeBoard = () => {
             <Header>
                 <span className="title">챌린지 달성 뱃지</span>
                 <span className="desc">
-                    00개의 챌린지를 성공적으로 마쳤어요. 성장하고 계시는군요!
+                    14개의 챌린지를 성공적으로 마쳤어요. 성장하고 계시는군요!
                 </span>
             </Header>
             <Body>

diff --git 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 <div></div>;
 
@@ -23,18 +28,18 @@ const CanaryAuth = ({ onClick }: { onClick: () => void }) => {
                     멘토링을 신청할 수 있어요.
                 </span>
             </div>
-            {applyStatus.data === 0 && (
+            {applyStatus === 0 && (
                 <Button
                     title="자립준비청년 인증하기"
                     onClick={() => onClick()}
                     small
                     mainColor
                 />
             )}
-            {applyStatus.data === 1 && (
+            {applyStatus === 1 && (
                 <Button title="자립준비청년 인증대기" small />
             )}
-            {applyStatus.data === 2 && (
+            {applyStatus === 2 && (
                 <Button
                     title="자립준비청년 인증완료"
                     small

diff --git a/src/components/MyPage/CanaryModal.tsx b/src/components/MyPage/CanaryModal.tsx
@@ -9,7 +9,7 @@ import useAuthStore from "../../storage/useAuthStore";
 import { getPresignedUrl, uploadImageToS3 } from "../../apis/file-upload";
 import { postCanaryApply } from "../../apis/canary";
 
-interface postCode {
+export interface postCode {
     address: string;
     zonecode: number | string;
     detailAddress?: string;

diff --git a/src/components/MyPage/PersonalInfo.tsx b/src/components/MyPage/PersonalInfo.tsx
@@ -10,8 +10,11 @@ import GenderSelection from "./PersonalInfo/GenderSelection";
 import Introduction from "./PersonalInfo/Introduction";
 import PostalCode from "./PostalCode";
 import InterestArea from "./PersonalInfo/InterestArea";
+import { postCode } from "./CanaryModal";
+
 const PersonalInfo = () => {
     const { userData, accessToken } = useAuthStore.getState();
+    const [isViewDataLoading, setIsViewDataLoading] = useState(true);
     const [birthData, setBirthData] = useState({
         year: "2000",
         month: "1",
@@ -36,22 +39,27 @@ const PersonalInfo = () => {
         introduction: "",
         address: "",
         detailAddress: "",
-        zip: "",
+        zip: "" as number | string,
         latitude: 0,
         longitude: 0,
         interestArea: null as string | null,
     });
 
+    console.log(data);
+
     useEffect(() => {
-        if (data) {
-            setViewData(data.data);
-            setBirthData({
-                year: data.data.birth.split("-")[0],
-                month: data.data.birth.split("-")[1],
-                day: data.data.birth.split("-")[2],
-            });
+        if (!isLoading) {
+            if (data) {
+                setViewData(data.data);
+                setBirthData({
+                    year: data.data.birth.split("-")[0],
+                    month: data.data.birth.split("-")[1],
+                    day: data.data.birth.split("-")[2],
+                });
+            }
+            setIsViewDataLoading(false);
         }
-    }, [data]);
+    }, [data, isLoading]);
 
     const handleInterestArea = (area: string) => {
         if (viewData.interestArea === null) {
@@ -105,20 +113,17 @@ const PersonalInfo = () => {
         });
     };
 
-    const handleAddressChange = (data: any) => {
+    const handleAddressChange = (data: postCode) => {
         setViewData({
             ...viewData,
             address: data.address,
-            detailAddress: data.detailAddress,
+            detailAddress: data.detailAddress!,
             zip: data.zonecode,
         });
     };
 
-    useEffect(() => {
-        console.log(viewData);
-    }, [viewData]);
-
     if (isLoading) return <div></div>;
+    if (isViewDataLoading) return <div></div>;
 
     return (
         <>

diff --git a/src/components/MyPage/PostalCode.tsx b/src/components/MyPage/PostalCode.tsx
@@ -18,22 +18,16 @@ interface PostalCodeProps {
 const PostalCode = ({ initialAddress, onChange }: PostalCodeProps) => {
     const [popup, setPopup] = useState(false);
 
-    const [form, setForm] = useState<postCode>({
-        address: "",
-        zonecode: "",
-        detailAddress: "",
-    });
+    const [form, setForm] = useState<postCode>(
+        initialAddress
+            ? initialAddress
+            : { address: "", detailAddress: "", zonecode: "" }
+    );
 
     const handlePopup = () => {
         setPopup(!popup);
     };
 
-    useEffect(() => {
-        if (initialAddress) {
-            setForm(initialAddress);
-        }
-    }, [initialAddress]);
-
     useEffect(() => {
         if (onChange && form.address !== initialAddress?.address) {
             onChange(form);
@@ -71,7 +65,7 @@ const PostalCode = ({ initialAddress, onChange }: PostalCodeProps) => {
                 <Input
                     hint="우편번호"
                     placeholder="12345"
-                    width="102px"
+                    width="104px"
                     value={form.zonecode}
                 />
                 <Button title="우편번호 검색" mainColor onClick={handlePopup} />

diff --git a/src/pages/ChallengeDetail.tsx b/src/pages/ChallengeDetail.tsx
@@ -17,6 +17,7 @@ import RejectModal from "../components/ChallengeDetail/RejectModal";
 import CompleteModal from "../components/ChallengeDetail/CompleteModal";
 import Modal from "../components/ChallengeDetail/Modal";
 import Certification from "../components/ChallengeDetail/Certification";
+import { getCanaryStatus } from "../apis/canary";
 
 const ChallengeDetail = () => {
     const { userData, accessToken } = useAuthStore();
@@ -37,12 +38,18 @@ const ChallengeDetail = () => {
         queryKey: ["getChallengeDetail", challengeId, accessToken],
         queryFn: () => getChallengeDetail(challengeId!, accessToken),
     });
+    const { data: isCanary, isLoading: isCanaryLoading } = useQuery({
+        queryKey: ["getCanaryStatus", userData.id, accessToken],
+        queryFn: () => getCanaryStatus(userData.id!, accessToken!),
+    });
 
     const handleModalOpen = useCallback(() => {
-        if (userData.role === "CANARY") {
-            setIsModalOpen(true);
-        } else {
-            setFailModalOpen(true);
+        if (!isCanaryLoading) {
+            if (isCanary.data === 2) {
+                setIsModalOpen(true);
+            } else {
+                setFailModalOpen(true);
+            }
         }
     }, [userData.role]);
 
@@ -90,7 +97,7 @@ const ChallengeDetail = () => {
                         ChallengeDetailData.data.participantCount
                     }
                     successParticipants={ChallengeDetailData.data.successCount}
-                    successRate={ChallengeDetailData.data.successRate * 100}
+                    successRate={ChallengeDetailData.data.successRate}
                 />
                 <Challengers
                     challengeId={challengeId}

diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -3,7 +3,7 @@ import tw from "twin.macro";
 
 import ProfileHeader from "../components/MyPage/Header";
 import UserBasicInfo from "../components/MyPage/UserBasicInfo";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import BadgeBoard from "../components/MyPage/BadgeBoard";
 import CanaryAuth from "../components/MyPage/CanaryAuth";
 import PersonalInfo from "../components/MyPage/PersonalInfo";
@@ -13,8 +13,9 @@ import Slider from "../components/Sponsor/Slider";
 import ContentHeader from "../components/Common/ContentHeader";
 import { useNavigate } from "react-router-dom";
 import phone from "../assets/demos/gosemvhs.png";
-import gimbap from "../assets/demos/tkarla.png";
 import DefaultLayout from "../components/Common/DefaultLayout";
+import { useQuery } from "@tanstack/react-query";
+import { getCanaryStatus } from "../apis/canary";
 
 const demoItems = [
     {
@@ -116,10 +117,23 @@ const demoItemsExpired = [
 
 function MyPage() {
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const { userData } = useAuthStore.getState();
-    const isCanary = userData.role === "CANARY";
+    const { userData, accessToken } = useAuthStore.getState();
+    const [isCanary, setIsCanary] = useState(false);
     const navigate = useNavigate();
 
+    const { data: applyStatus, isLoading } = useQuery({
+        queryKey: ["getCanaryStatus", userData.id, accessToken],
+        queryFn: () => getCanaryStatus(userData.id!, accessToken!),
+    });
+
+    useEffect(() => {
+        if (applyStatus.data === 2) {
+            setIsCanary(true);
+        }
+    }, [applyStatus]);
+
+    if (isLoading) return <div></div>;
+
     return (
         <DefaultLayout>
             {/* 프로필 상단 */}
@@ -147,7 +161,11 @@ function MyPage() {
             <UserBasicInfo />
 
             {/* 자립준비청년 인증 */}
-            <CanaryAuth onClick={() => setIsModalOpen(true)} />
+            <CanaryAuth
+                onClick={() => setIsModalOpen(true)}
+                applyStatus={applyStatus.data}
+                isLoading={isLoading}
+            />
 
             {!isCanary && (
                 <SponsorWrapper>