Merge pull request #51 from Hanaemong/#48

[feat] 지역 변경, 사용자 정보 api 연결
Hanaemong · Jul 3, 2024 · 2e58083 · 2e58083
2 parents f7f8312 + a6474e0
commit 2e58083
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 51 deletions.
diff --git a/src/apis/domains/memberApi.ts b/src/apis/domains/memberApi.ts
@@ -39,4 +39,17 @@ export class memberApi extends ApiClient {
     );
     return response;
   }
+
+  async updateRegion(updatereq: UpdateRegionReqType) {
+    const response = await this._http.put<null>(
+      "/member/regionChange",
+      updatereq
+    );
+    return response;
+  }
+
+  async getMemberInfo() {
+    const response = await this._http.get<MemberInfoType>("/member");
+    return response;
+  }
 }
diff --git a/src/pages/auth/Join.tsx b/src/pages/auth/Join.tsx
@@ -18,7 +18,7 @@ import { memberApi } from "../../apis/domains/memberApi";
 import { setCookie } from "../../utils/cookie";
 
 const geolocationOptions = {
-  enableHighAccuracy: true,
+  enableHighAccuracy: false,
   timeout: 0,
 };
 
@@ -41,7 +41,7 @@ const Join = () => {
     name: "",
   });
   const [sigungu, setSigungu] = useState<{ id: number; name: string }>();
-  const [region, setRegion] = useState<string>();
+  const [region, setRegion] = useState<string>("");
   const [pwd, setPwd] = useState<string>("");
   const [confirm, checkConfirm] = useState<boolean>(true);
   const [regionCheckResult, setRegionCheckResult] = useState<string>("");
@@ -181,6 +181,19 @@ const Join = () => {
 
     if (step === 4 && gender !== "") {
       setInputs({ ...inputs, gender: gender });
+      if (gender === "m") {
+        setInputs({
+          ...inputs,
+          profile:
+            "https://hanalinkbucket.s3.ap-northeast-2.amazonaws.com/%E1%84%87%E1%85%A7%E1%86%AF%E1%84%83%E1%85%A9%E1%86%AF%E1%84%8B%E1%85%B5.svg",
+        });
+      } else {
+        setInputs({
+          ...inputs,
+          profile:
+            "https://hanalinkbucket.s3.ap-northeast-2.amazonaws.com/%E1%84%87%E1%85%A7%E1%86%AF%E1%84%89%E1%85%A9%E1%86%BC%E1%84%8B%E1%85%B5.svg",
+        });
+      }
       setStep((prev) => prev + 1);
       setIsActive(false);
     }
@@ -284,6 +297,9 @@ const Join = () => {
     console.log(latitude);
     console.log(longitude);
 
+    setRegionCheckResult("");
+    setIsActive(false);
+
     checkRegion({
       latitude,
       longitude,
@@ -535,9 +551,9 @@ const Join = () => {
                 <input
                   className={`w-3/4 h-[4rem] rounded-2xl border ${
                     data?.success && data.data?.match && "border-blue-500"
-                  }  ${
+                  } ${
                     data?.success && !data.data?.match && "border-red-500"
-                  }border-spacing-1 text-left text-2xl font-hanaMedium px-4 text-[#979797]`}
+                  } border-spacing-1 text-left text-2xl font-hanaMedium px-4 text-[#979797]`}
                   type="button"
                   value={region || "지역 선택"}
                   onClick={() => {

diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Password, Topbar } from "../../components";
+import { Password } from "../../components";
 import { useNavigate } from "react-router-dom";
 import { getCookie, setCookie } from "../../utils/cookie";
 import { useMutation } from "@tanstack/react-query";

diff --git a/src/pages/my/CertiRegion.tsx b/src/pages/my/CertiRegion.tsx
@@ -1,63 +1,140 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button, RegionItem, RegionModal, Topbar } from "../../components";
 import { useNavigate } from "react-router-dom";
+import { useGeolocation } from "../../hooks/useGeolocation";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { regionApi } from "../../apis/domains/regionApi";
+import { memberApi } from "../../apis/domains/memberApi";
+import { setCookie } from "../../utils/cookie";
+
+const geolocationOptions = {
+  enableHighAccuracy: false,
+  timeout: 0,
+};
 
 const CertiRegion = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { location } = useGeolocation(geolocationOptions);
+
   const [modal, openModal] = useState<boolean>(false);
-  const [sigun, setSigun] = useState<string>("");
-  const [sigungu, setSigungu] = useState<string>("");
+  const [sigun, setSigun] = useState<{ id: number; name: string }>({
+    id: 1,
+    name: "",
+  });
+  const [sigungu, setSigungu] = useState<{ id: number; name: string }>();
   const [region, setRegion] = useState<string>("");
+  const [regionCheckResult, setRegionCheckResult] = useState<string>("");
   const [isActive, setIsActive] = useState<boolean>(false);
 
-  const selectSigun = (selectedSigun: string) => {
-    setSigun(selectedSigun);
+  const { data: siguns } = useQuery({
+    queryKey: ["sigun"],
+    queryFn: () => {
+      const res = regionApi.getInstance().getSigun();
+      return res;
+    },
+  });
+
+  const { data: sigungus } = useQuery({
+    queryKey: ["sigungu"],
+    queryFn: () => {
+      const res = regionApi.getInstance().getSigungu(sigun?.id!);
+      return res;
+    },
+  });
+
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ["sigungu"] });
+  }, [sigun]);
+
+  const { mutate: checkRegion, data } = useMutation({
+    mutationFn: (region: CheckRegionType) => {
+      return regionApi.getInstance().postRegionCheck(region);
+    },
+    onSuccess: (response) => {
+      console.log(response);
+      if (response.data?.match) {
+        setRegionCheckResult("위치가 인증되었습니다");
+        setIsActive(true);
+      } else {
+        setRegionCheckResult("선택한 지역과 일치하지 않습니다");
+      }
+    },
+    onError: (err) => {
+      console.log(err.message);
+    },
+  });
+
+  const { mutate: changeRegion } = useMutation({
+    mutationFn: (region: UpdateRegionReqType) => {
+      return memberApi.getInstance().updateRegion(region);
+    },
+    onSuccess: (response) => {
+      console.log(response);
+      setCookie("siGunGu", sigungu?.name!);
+      navigate("/my");
+    },
+    onError: (err) => {
+      console.log(err.message);
+    },
+  });
+
+  const selectSigun = (id: number, name: string) => {
+    setSigun({ id, name });
   };
 
-  const selectSigungu = (selectedSigungu: string) => {
-    setSigungu(selectedSigungu);
+  const selectSigungu = (id: number, name: string) => {
+    setSigungu({ id, name });
   };
 
   const regionHandler = () => {
     if (sigun && sigungu) {
-      setRegion(`${sigun} ${sigungu}`);
+      setRegion(`${sigun.name} ${sigungu.name}`);
     }
     openModal((prev) => !prev);
   };
 
+  const getCurrentRegion = () => {
+    const latitude = location?.latitude!;
+    const longitude = location?.longitude!;
+    console.log(latitude);
+    console.log(longitude);
+
+    setRegionCheckResult("");
+    setIsActive(false);
+
+    checkRegion({
+      latitude,
+      longitude,
+      siGunId: sigun.id,
+      siGunGuId: sigungu?.id!,
+    });
+  };
+
   return (
     <>
       {modal && (
         <RegionModal sigun="시군" sigungu="시군구" onClose={regionHandler}>
           <div className="w-full flex justify-between">
             <div className="w-1/2 border-r-2 ">
-              <RegionItem
-                title="서울"
-                onClick={() => selectSigun("서울")}
-                region={sigun}
-              />
-              <RegionItem
-                title="경기"
-                onClick={() => selectSigun("경기")}
-                region={sigun}
-              />
-              <RegionItem
-                title="인천"
-                onClick={() => selectSigun("인천")}
-                region={sigun}
-              />
+              {siguns?.map((item, index) => (
+                <RegionItem
+                  key={index}
+                  title={item.siGun}
+                  onClick={() => selectSigun(item.siGunId, item.siGun)}
+                  region={sigun?.name!}
+                />
+              ))}
             </div>
             <div className="w-1/2">
-              <RegionItem
-                title="고양시 일산서구"
-                onClick={() => selectSigungu("고양시 일산서구")}
-                region={sigungu}
-              />
-              <RegionItem
-                title="창원시 마산 합포구"
-                onClick={() => selectSigungu("창원시 마산 합포구")}
-                region={sigungu}
-              />
+              {sigungus?.map((item, index) => (
+                <RegionItem
+                  key={index}
+                  title={item.siGunGu}
+                  onClick={() => selectSigungu(item.siGunGuId, item.siGunGu)}
+                  region={sigungu?.name!}
+                />
+              ))}
             </div>
           </div>
         </RegionModal>
@@ -71,7 +148,11 @@ const CertiRegion = () => {
             </span>
             <div className="w-full flex justify-between gap-1">
               <input
-                className="w-3/4 h-[4rem] rounded-2xl border border-spacing-1 text-left text-2xl font-hanaMedium px-4 text-[#979797]"
+                className={`w-3/4 h-[4rem] rounded-2xl border ${
+                  data?.success && data.data?.match && "border-blue-500"
+                } ${
+                  data?.success && !data.data?.match && "border-red-500"
+                } border-spacing-1 text-left text-2xl font-hanaMedium px-4 text-[#979797]`}
                 type="button"
                 value={region || "지역 선택"}
                 onClick={() => {
@@ -80,20 +161,33 @@ const CertiRegion = () => {
               />
               <button
                 className="px-3 py-2 bg-hanaPurple rounded-2xl text-white font-hanaRegular text-xl"
-                onClick={() => setIsActive(true)}
+                onClick={getCurrentRegion}
               >
                 위치 확인
               </button>
             </div>
-            <div className="w-full text-lg text-left font-hanaRegular text-[#979797]">
-              선택 위치를 GPS로 인증을 받아와요
-            </div>
+            {regionCheckResult === "" ? (
+              <div className="w-full text-lg text-left font-hanaRegular text-[#979797]">
+                선택 위치를 GPS로 인증을 받아와요
+              </div>
+            ) : (
+              <div
+                className={`w-full text-lg text-left font-hanaRegular ${
+                  data?.data?.match === true ? "text-blue-500" : "text-red-500"
+                } `}
+              >
+                {regionCheckResult}
+              </div>
+            )}
           </div>
           <Button
             text="완료"
             isActive={isActive}
             onClick={() => {
-              navigate("/my");
+              changeRegion({
+                siGunId: sigun.id,
+                siGunGuId: sigungu?.id!,
+              });
             }}
           />
         </div>

diff --git a/src/pages/my/My.tsx b/src/pages/my/My.tsx
@@ -1,34 +1,76 @@
 import { GoChevronRight } from "react-icons/go";
 import { TeamItem } from "../../components";
 import { useNavigate } from "react-router-dom";
+import { getCookie } from "../../utils/cookie";
+import { useQuery } from "@tanstack/react-query";
+import { memberApi } from "../../apis/domains/memberApi";
+import { accountApi } from "../../apis/domains/accountApi";
+import { teamApi } from "../../apis/domains/teamApi";
+import { useEffect } from "react";
 
 const My = () => {
   const navigate = useNavigate();
   const balance = 50000000;
+
+  const { data: memberInfo } = useQuery({
+    queryKey: ["memberInfo"],
+    queryFn: () => {
+      const response = memberApi.getInstance().getMemberInfo();
+      return response;
+    },
+  });
+
+  const { data: accountInfo } = useQuery({
+    queryKey: ["accountInfo"],
+    queryFn: () => {
+      const response = accountApi.getInstance().getAccount();
+      return response;
+    },
+  });
+
+  const {
+    data: list,
+    error,
+    isError,
+  } = useQuery({
+    queryKey: ["list"],
+    queryFn: () => {
+      const res = teamApi.getInstance().getMyTeam();
+      return res;
+    },
+  });
+
+  useEffect(() => {
+    if (isError) {
+      console.log(error.message);
+      alert("채팅방을 불러오는 데 실패했습니다.");
+    }
+  }, [isError]);
+
   return (
     <section className="min-h-real-screen bg-hanaGray">
       <div className="flex flex-col p-7 gap-4 bg-custom-light-gradient h-88">
         <div
           className="flex items-center font-hanaBold text-3xl py-3"
           onClick={() => navigate("/certificate-region")}
         >
-          망원제1동
+          {getCookie("siGunGu")}
           <GoChevronRight size={25} />
         </div>
         {/* 사용자 정보 */}
         <div className="w-full flex bg-white rounded-2xl p-5">
-          <div className="w-1/3 flex flex-col items-center justify-center">
-            <img src="/img/별돌이.png" className="size-32" />
-            <p className="font-hanaRegular text-2xl pl-4">별돌이 님</p>
+          <div className="w-1/3 flex flex-col gap-2 items-center justify-center">
+            <img src={memberInfo?.data?.profile} className="size-24" />
+            <p className="font-hanaMedium text-2xl">{memberInfo?.data?.name}</p>
           </div>
           <div className="w-2/3 flex flex-col gap-2 rounded-2xl border font-hanaRegular p-5 text-xl">
             <div className="flex">
               <img src="/img/hanaLogo.png" className="size-6 mr-1" />
-              <p>영하나 플러스</p>
+              <p>{accountInfo?.data?.accountName}</p>
             </div>
-            <div>123-456789-12345</div>
+            <div>{accountInfo?.data?.accountNumber}</div>
             <p className="h-full flex justify-end items-end font-hanaMedium text-xl">
-              {balance.toLocaleString()} 원
+              {accountInfo?.data?.balance.toLocaleString()} 원
             </p>
           </div>
         </div>

diff --git a/src/types/accountType.ts → src/types/account.d.ts b/src/types/accountType.ts → src/types/account.d.ts