Merge pull request #355 from TripInfoWeb/dev_mypage

Dev mypage
TripInfoWeb · Sep 21, 2024 · bdb4d3b · bdb4d3b
2 parents 7d5bb88 + f1aa377
commit bdb4d3b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 21 deletions.
diff --git a/src/components/mypage/MyProfile.tsx b/src/components/mypage/MyProfile.tsx
@@ -38,7 +38,7 @@ const MyProfile = (props: IMyProfileProps) => {
       >
         <div
           className={
-            "relative flex h-full w-[calc(100vw-1rem)] max-w-[40rem] flex-col gap-y-[1rem] overflow-y-scroll rounded-b-xl bg-white p-[1rem] scrollbar-hide"
+            "relative flex gap-y-[1rem] max-h-[24rem] p-[2.75rem] w-[calc(100vw-1rem)] max-w-[40rem] flex-col overflow-y-scroll rounded-b-xl bg-white scrollbar-hide"
           }
         >
           <div className={"flex flex-col gap-y-[.5rem]"}>
@@ -53,8 +53,9 @@ const MyProfile = (props: IMyProfileProps) => {
             </p>
             <p>3. 필요한 정보는 회원탈퇴하기전에 따로 보관해주시기 바랍니다.</p>
           </div>
-          <div className="select-none text-orange-400">
-            {"'회원탈퇴를 하겠습니다.' 라고 입력해주세요."}
+          <div className="select-none flex items-end gap-x-[.25rem]">
+            <span className={"text-main text-lg"}> '회원탈퇴를 하겠습니다.' </span>
+            <span> 라고 입력해주세요. </span>
           </div>
           <input
             className="w-full rounded-[1rem] px-4 py-4 outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
@@ -65,14 +66,14 @@ const MyProfile = (props: IMyProfileProps) => {
             disabled={props.userDeleteText !== "회원탈퇴를 하겠습니다."}
             onClick={props.userDeleteHandler}
             className={
-              "h-[3rem] w-full rounded-full bg-main text-white disabled:bg-gray2"
+              "h-[3rem] flex-shrink-0 w-full rounded-full bg-main text-white disabled:bg-gray2"
             }
           >
             회원탈퇴
           </button>
         </div>
       </Modal>
-      <div className={"flex flex-col gap-y-[2.375rem] mt-[1rem]"}>
+      <div className={"mt-[1rem] flex flex-col gap-y-[2.375rem]"}>
         <article>
           <div className={"flex w-full items-center gap-x-[2.375rem]"}>
             <div className={"relative w-[3.5rem] flex-shrink-0"}>
@@ -159,26 +160,43 @@ const MyProfile = (props: IMyProfileProps) => {
               연동된 계정
             </div>
             <div className={"flex items-center justify-between"}>
-              <span> 카카오톡 </span>
+              <span> {props.userInfo.provider} </span>
               <div className={"flex items-center gap-x-[.875rem]"}>
                 <span className={"font-medium text-gray1"}>
                   {props.userInfo.userImage.createdDate}
                 </span>
                 <div className="relative flex h-[2.5rem] w-[2.5rem] items-center justify-center rounded-[18px] bg-[#FEE501]">
-                  <Image
-                    src={"/user/kakao-icon.svg"}
-                    alt={"kakao-icon-image"}
-                    width={20}
-                    height={20}
-                  />
+                  {
+                    props.userInfo.provider == "kakao" &&
+                    <Image
+                      src={"/user/kakao-icon.svg"}
+                      alt={"kakao-icon-image"}
+                      width={20}
+                      height={20}
+                    />
+                  }
+                  {
+                    props.userInfo.provider == "google" &&
+                    <Image
+                      src={"/user/google-icon.svg"}
+                      alt={"google-icon-image"}
+                      width={20}
+                      height={20}
+                    />
+                  }
                 </div>
               </div>
             </div>
           </div>
         </article>
       </div>
       <div className="flex w-full justify-end pt-[3rem] text-[#999999]">
-        <button className={"hover:text-main hover:font-bold"} onClick={props.modalState.openModal}>회원탈퇴</button>
+        <button
+          className={"hover:font-bold hover:text-main"}
+          onClick={props.modalState.openModal}
+        >
+          회원탈퇴
+        </button>
       </div>
     </div>
   );

diff --git a/src/containers/mypage/MyProfileContainer.tsx b/src/containers/mypage/MyProfileContainer.tsx
@@ -2,6 +2,7 @@
 
 import MyProfile from "@/components/mypage/MyProfile";
 import useModalState from "@/hooks/useModalState";
+import useAuthStore from "@/store/authStore";
 import useToastifyStore from "@/store/toastifyStore";
 import { userResponseDto } from "@/types/UserDto";
 import { fetchWithAuth } from "@/utils/fetchWithAuth";
@@ -20,6 +21,7 @@ const MyProfileContainer = ({userInfo}: IMyProfileContainer) => {
   const [userDeleteText, setUserDeleteText] = useState("");
   const router = useRouter();
   const toastifyStore = useToastifyStore();
+  const authStore = useAuthStore();
 
   const submitChangeNicknameHandler = async () => {
     if (nickname == "" && nickname == defaultNickname) return;
@@ -50,28 +52,33 @@ const MyProfileContainer = ({userInfo}: IMyProfileContainer) => {
   }
 
   const userDeleteHandler = async () => {
-
-    const response = await fetchWithAuth("/api/auth/user", {
+    const response = await fetchWithAuth(`/api/auth/user?type=${userInfo.provider}`, {
       method: "DELETE",
       "Content-Type": "application/json",
     });
 
     if (response.ok) {
-      toastifyStore.setToastify({
+      modalState.closeModal();
+      await toastifyStore.setToastify({
         type: "success",
-        message: "회원탈퇴에 성공했습니다."
-      })
-      router.push("/");
+        message: "회원탈퇴에 성공했습니다.",
+      });
+      authStore.initialize();
+      setTimeout(() => {
+        router.replace("/");
+      }, 300);
     }
-
+    else {
       toastifyStore.setToastify({
         type: "error",
         message: "회원탈퇴에 실패했습니다.",
       });
+    }
   }
 
 
   return (
+    <>
     <MyProfile
       userInfo={userInfo}
       submitChangeNicknameHandler={submitChangeNicknameHandler}
@@ -83,7 +90,8 @@ const MyProfileContainer = ({userInfo}: IMyProfileContainer) => {
       changeUserDeleteText={changeUserDeleteText}
       userDeleteText={userDeleteText}
       userDeleteHandler={userDeleteHandler}
-    />
+      />
+      </>
   );
 };
 export default MyProfileContainer;