Merge pull request #237 from depromeet/feature/my-page-edit

[MyPage] 회원 탈퇴 페이지 개발

src/app/mypage/index.tsx

@@ -70,7 +70,7 @@ const About = ({ onClick }: Temp) => {
   );
 };
 
-const Bottom = ({ onClick }: Temp) => {
+const Bottom = () => {
   const nav = useNavigate();
   const { setAuth } = useAuthStore();
   const { confirm } = useContext(ConfirmContext);
@@ -95,12 +95,16 @@ const Bottom = ({ onClick }: Temp) => {
     nav("/");
   };
 
+  const onClickUnregister = () => {
+    nav("/mypage/unregister");
+  };
+
   // TODO: add link to
   return (
     <div className="flex grow flex-col gap-5 bg-white px-20px py-36px">
       {[
         { onClick: onClickLogout, label: "로그아웃" },
-        { onClick, label: "회원탈퇴" },
+        { onClick: onClickUnregister, label: "회원탈퇴" },
       ].map(({ onClick, label }, idx) => (
         <button
           className="text-b2-compact text-start text-secondary"
@@ -165,7 +169,7 @@ export const MyPage = () => {
       </div>
       <div className="flex grow flex-col gap-2">
         <About onClick={onClickDevelop} />
-        <Bottom onClick={onClickDevelop} />
+        <Bottom />
       </div>
     </DefaultLayout>
   );

src/app/mypage/mypage-edit.tsx

@@ -60,7 +60,7 @@ export const MyPageEdit = () => {
       }
     >
       <div className="flex flex-col gap-9 py-4">
-        <Header text="{사용할 닉네임을 입력해주세요}" />
+        <Header text="닉네임 수정" />
         <Input
           placeholder="닉네임을 설정해주세요"
           limit={4}

src/app/mypage/unregister/unregister-confirm.tsx

@@ -0,0 +1,112 @@
+import clsx from "clsx";
+import Cookies from "js-cookie";
+import { useContext, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { ChevronLeftEdgeSVG } from "@/assets/icons/chevron-left";
+import { Appbar } from "@/components/common/appbar";
+import { ConfirmContext } from "@/components/common/confirm/confirm-context";
+import { DefaultLayout } from "@/components/layout/default";
+import { useApiUnregister } from "@/hooks/api/my-page/useApiUnregister";
+import { useAuthStore } from "@/store/auth";
+
+type TLocation = {
+  state: {
+    text: string;
+    historyStack: number;
+  };
+};
+
+const notificationData = [
+  "모든 활동 내용은 다시 볼 수 없어요",
+  "칭찬 게시글이 모두 사라져요",
+  "칭찬 받았던 내용(구슬)이 모두 사라져요",
+  "다른 사용자에게 남긴 칭찬 내용은 삭제되지 않아요",
+  "사용자 정보는 보관 없이 바로 파기돼요",
+  "탈퇴 시 모든 데이터는 복구가 불가능해요",
+];
+
+const btnDefaultStyle =
+  "flex basis-0 items-center justify-center py-4 font-semibold rounded-lg h-fit grow";
+
+export const MyPageUnregisterConfirm = () => {
+  const nav = useNavigate();
+  const location = useLocation() as TLocation;
+  const { confirm } = useContext(ConfirmContext);
+  const { auth, setAuth } = useAuthStore();
+  const { mutate: unregister, isSuccess } = useApiUnregister();
+
+  const onClickClose = () => {
+    nav(-(location.state.historyStack + 1));
+  };
+
+  const onSubmit = async () => {
+    const result = await confirm({
+      message: {
+        title: "praise up을 탈퇴할까요?",
+        description:
+          "짧은 기간 내 탈퇴와 재가입이 반복되면<br/>서비스 이용이 어려울 수 있어요",
+      },
+      confirm: {
+        text: "탈퇴하기",
+      },
+      cancel: {
+        text: "닫기",
+      },
+    });
+
+    if (!result) {
+      onClickClose();
+      return;
+    }
+
+    unregister({ userId: auth.userId, reason: location.state.text });
+  };
+
+  useEffect(() => {
+    if (!isSuccess) return;
+
+    Cookies.remove("k-u-id");
+    setAuth(0);
+
+    nav("/mypage/unregister/done");
+  }, [isSuccess]);
+
+  return (
+    <DefaultLayout
+      appbar={
+        <Appbar
+          left={
+            <button onClick={() => nav(-1)}>
+              <ChevronLeftEdgeSVG />
+            </button>
+          }
+        />
+      }
+    >
+      <p className="text-h2">탈퇴 전 꼭 확인해 주세요</p>
+      <ul className="flex list-disc flex-col gap-[18px] py-9">
+        {notificationData.map((text, idx) => (
+          <li key={idx} className="ml-6 pl-1">
+            {text}
+          </li>
+        ))}
+      </ul>
+
+      <div className="fixed bottom-0 left-1/2 mx-auto flex w-full max-w-[480px] translate-x-[-50%] gap-2.5 self-stretch px-4 pb-9">
+        <button
+          className={clsx(btnDefaultStyle, "bg-gray-300")}
+          onClick={onClickClose}
+        >
+          <p className="w-fit text-primary">닫기</p>
+        </button>
+        <button
+          className={clsx(btnDefaultStyle, "bg-[#242B37]")}
+          onClick={onSubmit}
+        >
+          <p className="w-fit text-white">확인했습니다</p>
+        </button>
+      </div>
+    </DefaultLayout>
+  );
+};

src/app/mypage/unregister/unregister-done.tsx

@@ -0,0 +1,36 @@
+import { useNavigate } from "react-router-dom";
+
+import FirstImg from "@/assets/images/on-boarding/first.svg?react";
+import { Background } from "@/components/app/comment/background";
+import { ArticleWrapper } from "@/components/app/post/common/ArticleWrapper";
+import { ButtonProvider } from "@/components/common/button-provider";
+import { Header } from "@/components/common/header";
+import { DefaultLayout } from "@/components/layout/default";
+
+export const MyPageUnregisterDone = () => {
+  const nav = useNavigate();
+
+  return (
+    <DefaultLayout>
+      <Background angle={0} />
+      <ArticleWrapper className="flex flex-col items-center justify-center gap-[140px]">
+        <Header
+          text="praise up을\n이용해주셔서 감사합니다"
+          className="!text-h3 w-full text-center"
+        />
+        <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-y-[39px]">
+          <FirstImg width={193} height={161} className="-z-10 w-full" />
+        </div>
+      </ArticleWrapper>
+      <ButtonProvider className="!bg-transparent">
+        <ButtonProvider.Primary
+          onClick={() => {
+            nav("/");
+          }}
+        >
+          처음으로 돌아가기
+        </ButtonProvider.Primary>
+      </ButtonProvider>
+    </DefaultLayout>
+  );
+};

src/app/mypage/unregister/unregister-input.tsx

@@ -0,0 +1,69 @@
+import { ChangeEvent, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { ChevronLeftEdgeSVG } from "@/assets/icons/chevron-left";
+import { Appbar } from "@/components/common/appbar";
+import { ButtonProvider } from "@/components/common/button-provider";
+import { Textarea } from "@/components/common/textarea";
+import { DefaultLayout } from "@/components/layout/default";
+
+type TLocation = {
+  state: {
+    reason: string;
+    text: string;
+    historyStack: number;
+  };
+};
+
+export const MyPageUnregisterInput = () => {
+  const nav = useNavigate();
+  const location = useLocation() as TLocation;
+
+  const [optionalReason, setOptionalReason] = useState<string>("");
+
+  const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setOptionalReason(e.currentTarget.value);
+  };
+
+  const onSubmit = () => {
+    const { reason, historyStack } = location.state;
+
+    nav("/mypage/unregister/confirm", {
+      state: {
+        text: `${reason} ${optionalReason}`,
+        historyStack,
+      },
+    });
+  };
+
+  return (
+    <DefaultLayout
+      appbar={
+        <Appbar
+          left={
+            <button onClick={() => nav(-1)}>
+              <ChevronLeftEdgeSVG />
+            </button>
+          }
+        />
+      }
+    >
+      <div className="flex flex-col gap-9 py-4">
+        <p className="text-h2">{location.state.text}</p>
+        <Textarea
+          placeholder="서비스의 개선을 위해 구체적인 이유를 공유해주세요 (선택)"
+          limit={300}
+          value={optionalReason}
+          currentLength={optionalReason.length}
+          onChange={onChange}
+        />
+      </div>
+
+      <ButtonProvider>
+        <ButtonProvider.Primary onClick={onSubmit}>
+          작성 완료
+        </ButtonProvider.Primary>
+      </ButtonProvider>
+    </DefaultLayout>
+  );
+};

src/app/mypage/unregister/unregister.tsx

@@ -0,0 +1,83 @@
+import { Link, useNavigate } from "react-router-dom";
+
+import { ChevronLeftEdgeSVG } from "@/assets/icons/chevron-left";
+import { ChevronRightEdgeSVG } from "@/assets/icons/chevron-right-edge";
+import { Appbar } from "@/components/common/appbar";
+import { DefaultLayout } from "@/components/layout/default";
+
+type ReasonText = {
+  reason: string;
+  text: string;
+  historyStack: number;
+};
+
+const ReasonData: ReasonText[] = [
+  {
+    reason: "사용하지 않는 앱이에요",
+    text: "사용하지 않는 이유가 무엇인가요?",
+    historyStack: 2,
+  },
+  {
+    reason: "함께 사용할 유저가 없어요",
+    text: "함께 사용할 유저가 없어요",
+    historyStack: 1,
+  },
+  {
+    reason: "개인정보 노출이 우려돼요",
+    text: "개인정보 노출이 우려돼요",
+    historyStack: 1,
+  },
+  {
+    reason: "사용 방법이 어려워요",
+    text: "어떤 부분에서 어려움을 느끼셨나요?",
+    historyStack: 2,
+  },
+  {
+    reason: "지속된 오류와 버그가 있어요",
+    text: "어떤 오류와 버그를 겪으셨나요?",
+    historyStack: 2,
+  },
+  {
+    reason: "기타",
+    text: "이유를 적어주세요.",
+    historyStack: 2,
+  },
+];
+
+const ReasonItem = ({ reason, text, historyStack }: ReasonText) => {
+  return (
+    <Link
+      to={`/mypage/unregister/${historyStack === 1 ? "confirm" : "input"}`}
+      state={{ reason, text, historyStack }}
+      className="flex justify-between"
+    >
+      <p>{reason}</p>
+      <ChevronRightEdgeSVG />
+    </Link>
+  );
+};
+
+export const MyPageUnregister = () => {
+  const nav = useNavigate();
+
+  return (
+    <DefaultLayout
+      appbar={
+        <Appbar
+          left={
+            <button onClick={() => nav(-1)}>
+              <ChevronLeftEdgeSVG />
+            </button>
+          }
+        />
+      }
+    >
+      <p className="text-h2">탈퇴하는 이유가 무엇인가요?</p>
+      <div className="flex flex-col gap-7 py-9">
+        {ReasonData.map((data, idx) => (
+          <ReasonItem {...data} key={idx} />
+        ))}
+      </div>
+    </DefaultLayout>
+  );
+};

src/components/common/confirm/confirm.tsx

@@ -20,7 +20,12 @@ export const Confirm = ({
             <div className="mt-2 text-lg font-semibold text-primary">
               {message.title}
             </div>
-            <div className="text-sm text-teritary">{message.description}</div>
+            <div
+              className="text-center text-sm text-teritary"
+              dangerouslySetInnerHTML={{
+                __html: message.description,
+              }}
+            />
           </div>
           <div className="flex gap-2.5 self-stretch">
             {cancel && (

src/components/layout/login-layout.tsx

@@ -33,5 +33,6 @@ export const RequireLoginLayout = ({ children }: Props) => {
     nav("/");
   };
 
+  if (!auth.isLogin) return null;
   return <Fragment>{children}</Fragment>;
 };

src/hooks/api/my-page/useApiUnregister.tsx

@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+
+import { api } from "@/api";
+
+type UnregisterUserParams = {
+  userId: number;
+  reason: string;
+};
+
+export const useApiUnregister = () => {
+  const deleteUser = async ({ userId, reason }: UnregisterUserParams) => {
+    const res = await api.delete(
+      `/praise-up/api/v1/user/${userId}/nickname?reason=${reason}`,
+    );
+    return res;
+  };
+
+  return useMutation({
+    mutationFn: (params: UnregisterUserParams) => deleteUser(params),
+  });
+};