From c438e202f1c2e6fe88ccd532063ae553b738b6f5 Mon Sep 17 00:00:00 2001
From: sryung <sryung1225@gmail.com>
Date: Thu, 11 Jan 2024 04:00:25 +0900
Subject: [PATCH] =?UTF-8?q?[=F0=9F=A5=81=20:=20feat]=20=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=20=ED=83=88=ED=87=B4=20(#21)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 프로필 수정 버튼과 동일하게 로그인 유저에게만 회원 탈퇴 버튼 노출
- 회원 탈퇴 시 auth, firestore의 users컬렉션 문서, storage의 avatar 이미지 데이터 일괄 삭제 진행 후 /auth로 이동
---
 src/components/profile/user-profile.tsx | 58 +++++++++++++++++++++++--
 src/styles/popup.ts                     |  3 ++
 src/styles/profile.ts                   | 15 +++++--
 3 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/src/components/profile/user-profile.tsx b/src/components/profile/user-profile.tsx
index 5b41fd4..809d60c 100644
--- a/src/components/profile/user-profile.tsx
+++ b/src/components/profile/user-profile.tsx
@@ -1,5 +1,10 @@
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+import { deleteUser } from 'firebase/auth';
+import { deleteDoc, doc } from 'firebase/firestore';
+import { deleteObject, ref } from 'firebase/storage';
+import { auth, db, storage } from '@/firebase.ts';
 import currentUserAtom from '@atom/current-user.tsx';
 import IUser from '@type/IUser.ts';
 import EditProfileForm from '@compo/profile/edit-profile-form.tsx';
@@ -12,11 +17,35 @@ interface IUserProfile {
 }
 
 export default function UserProfile({ user }: IUserProfile) {
+  const navigate = useNavigate();
+  const [currentUser, setCurrentUser] = useRecoilState(currentUserAtom);
   const [editPopup, setEditPopup] = useState(false);
-  const currentUser = useRecoilValue(currentUserAtom);
+  const [withdrawPopup, setWithdrawPopup] = useState(false);
   const toggleEditPopup = () => {
     setEditPopup(!editPopup);
   };
+  const toggleWithdrawPopup = () => {
+    setWithdrawPopup(!withdrawPopup);
+  };
+  const withdrawAccount = async () => {
+    const authCurrentUser = auth.currentUser;
+    if (!authCurrentUser) return;
+    try {
+      await deleteDoc(doc(db, 'users', authCurrentUser.uid));
+      const photoRef = ref(storage, `avatars/${authCurrentUser.uid}`);
+      await deleteObject(photoRef);
+      await deleteUser(authCurrentUser);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setCurrentUser({
+        userId: '',
+        userAvatar: '',
+        userName: '',
+      });
+      navigate('/auth');
+    }
+  };
   return (
     <S.Profile>
       <S.Avatar>
@@ -33,7 +62,7 @@ export default function UserProfile({ user }: IUserProfile) {
       </S.Avatar>
       <S.Name>{user.userName}</S.Name>
       {user.userId === currentUser.userId && (
-        <>
+        <S.Buttons>
           <S.EditButton onClick={toggleEditPopup} type="button">
             프로필 수정
           </S.EditButton>
@@ -45,7 +74,28 @@ export default function UserProfile({ user }: IUserProfile) {
               </P.Popup>
             </P.PopupWrapper>
           )}
-        </>
+          <S.WithdrawButton onClick={toggleWithdrawPopup} type="button">
+            회원 탈퇴
+          </S.WithdrawButton>
+          {withdrawPopup && (
+            <P.PopupWrapper>
+              <P.MiniPopup>
+                <P.CloseButton onClick={toggleWithdrawPopup} type="button" />
+                <P.Text>
+                  정말 <span>탈퇴</span>하시겠습니까?
+                </P.Text>
+                <P.ButtonWrapper>
+                  <P.Button onClick={withdrawAccount} type="button">
+                    예
+                  </P.Button>
+                  <P.Button onClick={toggleWithdrawPopup} type="button">
+                    아니요
+                  </P.Button>
+                </P.ButtonWrapper>
+              </P.MiniPopup>
+            </P.PopupWrapper>
+          )}
+        </S.Buttons>
       )}
     </S.Profile>
   );
diff --git a/src/styles/popup.ts b/src/styles/popup.ts
index 9a07bd0..74cc83b 100644
--- a/src/styles/popup.ts
+++ b/src/styles/popup.ts
@@ -97,6 +97,9 @@ export const Text = styled.p`
   font-size: 18px;
   line-height: 30px;
   text-align: center;
+  span {
+    color: ${primaryColor};
+  }
 `;
 
 export const ButtonWrapper = styled.div`
diff --git a/src/styles/profile.ts b/src/styles/profile.ts
index 6bc6b4e..3316de1 100644
--- a/src/styles/profile.ts
+++ b/src/styles/profile.ts
@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 import { grayColor } from '@style/global.ts';
-import { LineButton } from '@style/button.ts';
+import { LineButton, SolidButton } from '@style/button.ts';
 
 export const Profile = styled.article`
   position: relative;
@@ -60,7 +60,16 @@ export const Name = styled.h2`
   font-size: 30px;
 `;
 
-export const EditButton = styled(LineButton)`
+export const Buttons = styled.div`
+  display: inline-block;
+`;
+
+export const EditButton = styled(SolidButton)`
+  width: auto;
+  margin: 0 5px;
+`;
+
+export const WithdrawButton = styled(LineButton)`
   width: auto;
-  margin: 0;
+  margin: 0 5px;
 `;