From 8239bd70278b66781e7e1a96c419234d6e8c72e0 Mon Sep 17 00:00:00 2001
From: sikkzz <sling0623@gmail.com>
Date: Sun, 2 Feb 2025 19:03:35 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=99=88=20=EC=9D=B4=EB=8F=99=20?=
 =?UTF-8?q?=EC=95=88=EB=82=B4=20=EB=AA=A8=EB=8B=AC=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/preview-head.html                  |  1 +
 .../HomeNavigateConfirmModal.module.scss      |  2 +
 .../HomeNavigateConfirmModal.stories.tsx      | 81 +++++++++++++++++++
 .../HomeNavigateConfirmModal.tsx              |  4 +-
 4 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 .storybook/preview-head.html
 create mode 100644 src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.stories.tsx

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..2e3ae13
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1 @@
+<div id="modal"></div>
diff --git a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss
index 49e31b0..c8a4771 100644
--- a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss
+++ b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss
@@ -23,6 +23,8 @@
   justify-content: center;
   gap: 0.375rem;
   margin-top: 0.75rem;
+  width: 100%;
+  cursor: pointer;
 
   & > svg > path {
     fill: rgba(0, 0, 0, 0.15);
diff --git a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.stories.tsx b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.stories.tsx
new file mode 100644
index 0000000..da92eed
--- /dev/null
+++ b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.stories.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+
+import classNames from "classnames";
+
+import styles from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss";
+import Button from "@/components/ui/Button/Button";
+import Icon from "@/components/ui/Icon/Icon";
+import Modal from "@/components/ui/Modal/Modal";
+import Text from "@/components/ui/Text/Text";
+
+import { useOverlay } from "@/hooks/common/useOverlay";
+
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+
+interface HomeNavigateConfirmModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+}
+
+const HomeNavigateConfirmModalStory = ({ isOpen, handleClose }: HomeNavigateConfirmModalProps) => {
+  const [isShowButtonChecked, setIsShowButtonChecked] = useState(false);
+
+  const handleShowButtonClick = () => {
+    setIsShowButtonChecked((prev) => !prev);
+  };
+  return (
+    <Modal isOpen={isOpen}>
+      <div className={styles.Modal}>
+        <Text variant="titleSm" color="primary" align="center" as="h2">
+          홈으로 가시겠어요?
+        </Text>
+        <Text variant="bodyM" color="secondary" align="center" as="p">
+          복사하지 않은 리뷰는 삭제돼요.
+        </Text>
+        <div className={styles.ButtonWrapper}>
+          <Button text="아니요" variant="tertiary" onClick={handleClose} />
+          <Button text="네" variant="primary" onClick={handleClose} />
+        </div>
+        <button
+          className={classNames(styles.ShowButtonWrapper, {
+            [styles.isChecked]: isShowButtonChecked,
+          })}
+          onClick={handleShowButtonClick}
+        >
+          <Icon name="checkCircle" />
+          <Text variant="bodyXsm" color={isShowButtonChecked ? "primary" : "tertiary"}>
+            다시 안볼래요
+          </Text>
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+const meta: Meta<typeof HomeNavigateConfirmModalStory> = {
+  title: "Example/HomeNavigateConfirmModal",
+  component: HomeNavigateConfirmModalStory,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["!autodocs"],
+};
+
+export default meta;
+
+const ModalTemplate = () => {
+  const { isOpen, handleOpen, handleClose } = useOverlay();
+
+  return (
+    <>
+      <Button text="open modal" onClick={handleOpen} />
+      <HomeNavigateConfirmModalStory isOpen={isOpen} handleClose={handleClose} />
+    </>
+  );
+};
+
+const Template: StoryFn<typeof ModalTemplate> = ModalTemplate;
+
+export const ModalStory: StoryObj<HomeNavigateConfirmModalProps> = {
+  render: Template,
+};
diff --git a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx
index 9948774..ea02283 100644
--- a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx
+++ b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx
@@ -42,7 +42,7 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
           <Button text="아니요" variant="tertiary" onClick={handleClose} />
           <Button text="네" variant="primary" onClick={handleNavigateHome} />
         </div>
-        <div
+        <button
           className={classNames(styles.ShowButtonWrapper, {
             [styles.isChecked]: isShowButtonChecked,
           })}
@@ -52,7 +52,7 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
           <Text variant="bodyXsm" color={isShowButtonChecked ? "primary" : "tertiary"}>
             다시 안볼래요
           </Text>
-        </div>
+        </button>
       </div>
     </Modal>
   );