[🥁 : feat] 회원 탈퇴 (#21)

- 프로필 수정 버튼과 동일하게 로그인 유저에게만 회원 탈퇴 버튼 노출
- 회원 탈퇴 시 auth, firestore의 users컬렉션 문서, storage의 avatar 이미지 데이터 일괄 삭제 진행 후 /auth로 이동

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>
   );

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`

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;
 `;