feature-070: 회원탈퇴 모달 구현

src/components/ProfilePage/index.ts

@@ -1,3 +1,2 @@
 export { Account } from './Account';
-export { LogoutModal } from './LogoutModal';
 export { ServiceSetting } from './ServiceSetting';

src/components/layout/sideBar/AddCategory.tsx

@@ -4,20 +4,20 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { topCategoryModalState } from '@/stores/modal';
 import { userTokenState } from '@/stores/user';
 import { useState } from 'react';
-import GuestNoticeModal from '@/components/modals/GuestNoticeModal';
+import NoticeModal from '@/components/modals/NoticeModal';
 
 const AddCategory = () => {
   const isUser = useRecoilValue(userTokenState);
   const setTopCategoryModal = useSetRecoilState(topCategoryModalState);
-  const [isGuestNoticeModalOpen, setIsGuestNoticeModalOpen] = useState(false);
+  const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
 
   const openAddModal = (e: React.MouseEvent<HTMLButtonElement>) => {
     setTopCategoryModal(true);
     e.stopPropagation();
   };
 
   const openGuestNoticeModal = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setIsGuestNoticeModalOpen(true);
+    setIsNoticeModalOpen(true);
     e.stopPropagation();
   };
 
@@ -29,9 +29,13 @@ const AddCategory = () => {
       <AddCategoryStyle.Button onClick={handleClickedAdd}>
         <PlusSvg width={20} height={20} />
       </AddCategoryStyle.Button>
-      {isGuestNoticeModalOpen && (
-        <GuestNoticeModal
-          setIsGuestNoticeModalOpen={setIsGuestNoticeModalOpen}
+      {isNoticeModalOpen && (
+        <NoticeModal
+          title="로그인하고 중요한 영상 저장하기"
+          subTitle="로그인 후 더 많은 서비스를 이용해보세요!"
+          to="/sign-in"
+          buttonTitle="로그인 하기"
+          setIsNoticeModalOpen={setIsNoticeModalOpen}
         />
       )}
     </AddCategoryStyle.Wrap>

src/components/modals/NoticeModal.tsx

@@ -0,0 +1,47 @@
+import {
+  BlurBackground,
+  CommonCategoryContainer,
+  CommonCloseButton,
+} from '@/styles/modals/common.style';
+import CloseSvg from '@/assets/icons/close.svg?react';
+import useOutsideClick from '@/hooks/useOutsideClick';
+import AfterLogin from '@/assets/after-login.png';
+import * as NoticeModalStyles from '@/styles/modals/NoticeModal.style';
+
+interface IGuestNoticeModalProp {
+  title: string;
+  subTitle: string;
+  to: string;
+  buttonTitle: string;
+  onButtonClick?: () => void;
+  setIsNoticeModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const NoticeModal = ({
+  title,
+  subTitle,
+  to,
+  buttonTitle,
+  onButtonClick,
+  setIsNoticeModalOpen,
+}: IGuestNoticeModalProp) => {
+  const onCloseModal = () => setIsNoticeModalOpen(false);
+  const [noticeModalRef] = useOutsideClick<HTMLDivElement>(onCloseModal);
+  return (
+    <BlurBackground>
+      <CommonCategoryContainer ref={noticeModalRef}>
+        <CommonCloseButton onClick={onCloseModal}>
+          <CloseSvg width={21.42} height={21.42} />
+        </CommonCloseButton>
+        <img src={AfterLogin} />
+        <NoticeModalStyles.Title>{title}</NoticeModalStyles.Title>
+        <NoticeModalStyles.SubTitle>{subTitle}</NoticeModalStyles.SubTitle>
+        <NoticeModalStyles.Button to={to} onClick={onButtonClick}>
+          {buttonTitle}
+        </NoticeModalStyles.Button>
+      </CommonCategoryContainer>
+    </BlurBackground>
+  );
+};
+
+export default NoticeModal;

src/components/modals/WIthdrawModal.tsx

@@ -0,0 +1,87 @@
+import {
+  BlurBackground,
+  CommonCategoryContainer,
+  CommonCloseButton,
+} from '@/styles/modals/common.style';
+import CloseSvg from '@/assets/icons/close.svg?react';
+import useOutsideClick from '@/hooks/useOutsideClick';
+import AfterLogin from '@/assets/after-login.png';
+import * as WithdrawModalStyles from '@/styles/modals/WIthdrawModal.style';
+
+interface IWithdrawModalProp {
+  reason: string;
+  setReason: React.Dispatch<React.SetStateAction<string>>;
+  etcReason: string;
+  setEtcReason: React.Dispatch<React.SetStateAction<string>>;
+  setIsWithdrawModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsNoticeModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const WithdrawModal = ({
+  reason,
+  setReason,
+  etcReason,
+  setEtcReason,
+  setIsWithdrawModalOpen,
+  setIsNoticeModalOpen,
+}: IWithdrawModalProp) => {
+  const onCloseModal = () => setIsWithdrawModalOpen(false);
+  const options = [
+    '기록을 삭제하고 싶어요',
+    '변환 결과가 마음에 들지 않아요',
+    '이용이 불편하고 장애가 많아요',
+    '사용빈도가 낮아요',
+    '기타',
+  ];
+  const [withdrawModalRef] = useOutsideClick<HTMLDivElement>(onCloseModal);
+
+  const handleModalState = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsWithdrawModalOpen(false);
+    setIsNoticeModalOpen(true);
+  };
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setEtcReason(e.target.value);
+
+  return (
+    <BlurBackground>
+      <CommonCategoryContainer ref={withdrawModalRef}>
+        <CommonCloseButton onClick={onCloseModal}>
+          <CloseSvg width={21.42} height={21.42} />
+        </CommonCloseButton>
+        <img src={AfterLogin} />
+        <WithdrawModalStyles.Title>
+          왜 탈퇴하시려고 하나요?
+        </WithdrawModalStyles.Title>
+        <WithdrawModalStyles.SubTitle>
+          탈퇴를 결심한 이유를 알려주세요
+        </WithdrawModalStyles.SubTitle>
+        {options.map((option) => (
+          <WithdrawModalStyles.SelectButton
+            key={option}
+            onClick={() => setReason(option)}
+            className={`${option === reason && 'selected'}`}
+          >
+            {option}
+          </WithdrawModalStyles.SelectButton>
+        ))}
+        <WithdrawModalStyles.EtcInputWrap
+          className={`${reason === '기타' && 'open'}`}
+        >
+          <WithdrawModalStyles.EtcInput
+            value={etcReason}
+            onChange={handleInput}
+          />
+        </WithdrawModalStyles.EtcInputWrap>
+        <WithdrawModalStyles.SubmitButton
+          disabled={!reason}
+          className={`${!reason && 'disabled'}`}
+          onClick={handleModalState}
+        >
+          선택하기
+        </WithdrawModalStyles.SubmitButton>
+      </CommonCategoryContainer>
+    </BlurBackground>
+  );
+};
+export default WithdrawModal;

src/pages/ProfilePage.tsx

@@ -1,17 +1,38 @@
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+import { Account, ServiceSetting } from '@/components/ProfilePage';
+import { userInfoState, userTokenState } from '@/stores/user';
+import { Wrapper } from '@/styles/ProfilePage';
+import { useState } from 'react';
+import WithdrawModal from '@/components/modals/WIthdrawModal';
+import NoticeModal from '@/components/modals/NoticeModal';
 
-import { Account, LogoutModal, ServiceSetting } from '@/components/ProfilePage';
+const ProfilePage = () => {
+  const [reason, setReason] = useState('');
+  const setUserToken = useSetRecoilState(userTokenState);
+  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
 
-import useBoolean from '@/hooks/useBoolean';
+  const [etcReason, setEtcReason] = useState('');
 
-import { userInfoState } from '@/stores/user';
+  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
+  const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
+  const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
 
-import { Wrapper } from '@/styles/ProfilePage';
+  const handleOpenModal = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const target = e.target as HTMLElement;
+    if (target.innerHTML === '회원탈퇴') {
+      setIsWithdrawModalOpen(true);
+      return;
+    }
+    setIsLogoutModalOpen(true);
+  };
 
-const ProfilePage = () => {
-  const userInfo = useRecoilValue(userInfoState);
-  const [isShowLogoutModal, , openLogoutModal, closeLogoutModal] =
-    useBoolean(false);
+  const onLogoutClick = () => {
+    setUserInfo(null);
+    setUserToken(null);
+  };
+
+  const onWithdrawClick = () => {};
 
   return (
     <>
@@ -33,15 +54,46 @@ const ProfilePage = () => {
           </div>
 
           <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
-            <button className="other">회원탈퇴</button>
-            <button className="other" onClick={openLogoutModal}>
+            <button className="other" onClick={handleOpenModal}>
+              회원탈퇴
+            </button>
+            <button className="other" onClick={handleOpenModal}>
               로그아웃
             </button>
           </div>
         </div>
       </Wrapper>
 
-      {isShowLogoutModal && <LogoutModal onClose={closeLogoutModal} />}
+      {isLogoutModalOpen && (
+        <NoticeModal
+          title="로그아웃 하시겠어요?"
+          subTitle="다시 돌아오길 기다릴게요"
+          buttonTitle="로그아웃 하기"
+          to="/"
+          onButtonClick={onLogoutClick}
+          setIsNoticeModalOpen={setIsLogoutModalOpen}
+        />
+      )}
+      {isWithdrawModalOpen && (
+        <WithdrawModal
+          setIsWithdrawModalOpen={setIsWithdrawModalOpen}
+          reason={reason}
+          setReason={setReason}
+          etcReason={etcReason}
+          setEtcReason={setEtcReason}
+          setIsNoticeModalOpen={setIsNoticeModalOpen}
+        />
+      )}
+      {isNoticeModalOpen && (
+        <NoticeModal
+          title="정말 탈퇴하시겠어요?"
+          subTitle="저장한 데이터는 다시 복구할 수 없어요"
+          buttonTitle="탈퇴하기"
+          to="/"
+          onButtonClick={onWithdrawClick}
+          setIsNoticeModalOpen={setIsNoticeModalOpen}
+        />
+      )}
     </>
   );
 };