feat: 로그아웃 Dialog

Central-MakeUs · Feb 3, 2025 · b5f65e2 · b5f65e2
1 parent b676b17
commit b5f65e2
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 7 deletions.
diff --git a/src/features/settingsMenu/settingsMenuItem.tsx b/src/features/settingsMenu/settingsMenuItem.tsx
@@ -1,8 +1,13 @@
+import { Button } from "@repo/design-system/Button";
+import { Dialog } from "@repo/design-system/Dialog";
+import { MaxWidthBox } from "@repo/design-system/MaxWidthBox";
 import { Text, textVariants } from "@repo/design-system/Text";
 import { cn } from "@repo/design-system/cn";
 import { Flex } from "@repo/ui/Flex";
+import { JustifyBetween } from "@repo/ui/JustifyBetween";
+import { Stack } from "@repo/ui/Stack";
+import { overlay } from "overlay-kit";
 import { useState } from "react";
-import { useNavigate } from "react-router";
 import { openExternalUrl } from "~/shared/utils/openExternalUrl";
 
 interface SettingMenuItemProps {
@@ -20,15 +25,13 @@ export const SettingMenuItem = ({
   link,
   defaultValue,
 }: SettingMenuItemProps) => {
-  const _router = useNavigate();
   const [isOn, setIsOn] = useState(defaultValue || false);
-  const [_isModalOpen, setIsModalOpen] = useState(false);
 
   const handleClick = () => {
     if (type === "toggle") {
       setIsOn(!isOn);
     } else if (type === "exit") {
-      setIsModalOpen(true);
+      _LogoutOverlay.open();
     } else if (type === "link" && link) {
       openExternalUrl(link);
     }
@@ -56,3 +59,57 @@ export const SettingMenuItem = ({
     </Flex>
   );
 };
+
+const _LogoutOverlay = {
+  open: () => {
+    return overlay.open(({ isOpen, close, unmount }) => {
+      return (
+        <LogoutDialog
+          isOpen={isOpen}
+          onOpenChange={() => {
+            close();
+            setTimeout(unmount, 2000);
+          }}
+        />
+      );
+    });
+  },
+};
+
+const LogoutDialog = (props: {
+  isOpen?: boolean;
+  onOpenChange?: (bool: boolean) => void;
+}) => {
+  const { isOpen, onOpenChange } = props;
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="z-[6]" />
+        <Dialog.Content>
+          <Dialog.Title className=" sr-only">로그아웃</Dialog.Title>
+          <Dialog.Description className=" sr-only">로그아웃을 합니다.</Dialog.Description>
+          <MaxWidthBox className="flex z-[7] justify-center items-center fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]  px-6">
+            <Stack className=" bg-white rounded-[14px] pt-10 pb-4 px-4 justify-center items-center">
+              <Text className=" whitespace-pre-wrap text-gray-800" variant={"title/20_sb"}>
+                정말 로그아웃할까요?
+              </Text>
+              <JustifyBetween className=" w-full mt-9 gap-2">
+                <Button
+                  size={"small"}
+                  className=" w-full rounded-[14px]"
+                  variant={"gray"}
+                  onClick={() => onOpenChange?.(false)}
+                >
+                  아니요
+                </Button>
+                <Button size={"small"} className=" w-full rounded-[14px]" variant={"warning"}>
+                  로그아웃
+                </Button>
+              </JustifyBetween>
+            </Stack>
+          </MaxWidthBox>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
diff --git a/src/pages/SettingPage.tsx b/src/pages/SettingPage.tsx
@@ -2,9 +2,12 @@ import { Text } from "@repo/design-system/Text";
 import { TopNavigation } from "@repo/design-system/TopNavigation";
 import { Spacing } from "@repo/ui/Spacing";
 import { Stack } from "@repo/ui/Stack";
+import { useNavigate } from "react-router";
 import { SettingMenuItem } from "~/features/settingsMenu/settingsMenuItem";
 
 export default function SettingPage() {
+  const _navigate = useNavigate();
+
   return (
     <Stack className="w-full h-full">
       <TopNavigation.Root className="w-full" left={<TopNavigation.Back />}>
@@ -13,9 +16,13 @@ export default function SettingPage() {
 
       <Stack className="px-4 mt-5">
         <SettingMenuItem type="toggle" menuName="알림설정" />
-        <SettingMenuItem type="link" menuName="문의하기" />
-        <SettingMenuItem type="link" menuName="이용약관 및 개인정보 처리방침" />
-        <SettingMenuItem type="link" menuName="공지사항" />
+        <SettingMenuItem type="link" menuName="문의하기" link={SETTINGS_LINKS.FQA} />
+        <SettingMenuItem
+          type="link"
+          menuName="이용약관 및 개인정보 처리방침"
+          link={SETTINGS_LINKS.TERMSANDPRIVACY}
+        />
+        <SettingMenuItem type="link" menuName="공지사항" link={SETTINGS_LINKS.NOTICE} />
         <SettingMenuItem type="exit" menuName="로그아웃" />
         <SettingMenuItem type="exit" menuName="탈퇴하기" />
 
@@ -31,3 +38,9 @@ export default function SettingPage() {
     </Stack>
   );
 }
+
+const SETTINGS_LINKS = {
+  FQA: "https://burly-jar-165.notion.site/18828ba3580d80f8b23ef2a7082f8412?pvs=4",
+  TERMSANDPRIVACY: "https://burly-jar-165.notion.site/use-policy?pvs=4",
+  NOTICE: "https://burly-jar-165.notion.site/announcement?pvs=4",
+};