[FEAT feature-41 UI 개발 완료

src/components/MyPage/UserInfo/index.tsx

@@ -1,6 +1,10 @@
 import React, { ChangeEvent, useState } from "react";
 import Input from "../Input";
 import { UserInfoProps } from "./types";
+import { getAuth, deleteUser } from "firebase/auth";
+import { app } from "firebaseApp";
+import { toast } from "react-toastify";
+import { useRouter } from "pages/routing";
 
 const UserInfo = () => {
   const [userInfo, setUserInfo] = useState<UserInfoProps>({
@@ -10,6 +14,11 @@ const UserInfo = () => {
     password: "",
     passwordCheck: "",
   });
+  const auth = getAuth(app);
+  const router = useRouter();
+
+  console.log(auth.currentUser?.uid);
+  console.log("=============");
 
   const handleUpdateUserInfo = (e: ChangeEvent<HTMLInputElement>) => {
     const { id, value } = e.target;
@@ -20,11 +29,23 @@ const UserInfo = () => {
     }));
   };
 
+  const handleDeleteUser = async () => {
+    try {
+      await deleteUser(auth.currentUser!).then(res => {
+        console.log(res);
+      });
+
+      toast.success("회원탈퇴를 완료하였습니다.");
+      router.push("/");
+    } catch (error: any) {
+      console.log(error);
+    }
+  };
+
   return (
     <div className="w-1/2 h-full flex-Center flex-col gap-2 border-1 p-2 border-cyan-600">
       <img className="w-28 h-28 bg-slate-400 rounded-full" src="" />
       <Input value={userInfo.name} placeholder="이름" id="name" onChange={handleUpdateUserInfo} />
-      <Input value={userInfo.id} placeholder="아이디" id="id" onChange={handleUpdateUserInfo} />
       <Input value={userInfo.email} placeholder="이메일" id="email" onChange={handleUpdateUserInfo} />
       <Input
         value={userInfo.password}
@@ -40,7 +61,9 @@ const UserInfo = () => {
         type="password"
         onChange={handleUpdateUserInfo}
       />
-      <button className="w-full h-10 bg-[#FF4A50] text-center text-cyan-50">탈퇴하기</button>
+      <button className="w-full h-10 bg-[#FF4A50] text-center text-cyan-50" onClick={handleDeleteUser}>
+        탈퇴하기
+      </button>
     </div>
   );
 };