fix: 주소 오류 수정

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

Hide file tree

Showing 6 changed files with 64 additions and 42 deletions.
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/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>