From d874c1fe5c8e6b90984e12ae72106e3b76b7e604 Mon Sep 17 00:00:00 2001
From: chsua <csj1919@naver.com>
Date: Sun, 6 Aug 2023 03:06:26 +0900
Subject: [PATCH] =?UTF-8?q?test:=20(#258)=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=EB=B3=84/=EC=9C=84=EC=B9=98=EB=B3=84=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Toast/Toast.stories.tsx | 123 ++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 frontend/src/components/common/Toast/Toast.stories.tsx

diff --git a/frontend/src/components/common/Toast/Toast.stories.tsx b/frontend/src/components/common/Toast/Toast.stories.tsx
new file mode 100644
index 000000000..d0ca8993f
--- /dev/null
+++ b/frontend/src/components/common/Toast/Toast.stories.tsx
@@ -0,0 +1,123 @@
+import type { Meta } from '@storybook/react';
+
+import { useToast } from '@hooks/useToast';
+
+import Toast from '.';
+
+const meta: Meta<typeof Toast> = {
+  component: Toast,
+};
+
+export default meta;
+
+export const SizeCase = () => {
+  const { isOpen: isSmOpen, openComponent: openSmComponent } = useToast();
+  const { isOpen: isMdOpen, openComponent: openMdComponent } = useToast();
+  const { isOpen: isLgOpen, openComponent: openLgComponent } = useToast();
+  const { isOpen: isFreeOpen, openComponent: openFreeComponent } = useToast();
+
+  const handleSmButtonClick = () => {
+    openSmComponent();
+  };
+
+  const handleMdButtonClick = () => {
+    openMdComponent();
+  };
+
+  const handleLgButtonClick = () => {
+    openLgComponent();
+  };
+
+  const handleFreeButtonClick = () => {
+    openFreeComponent();
+  };
+
+  return (
+    <>
+      <button
+        onClick={handleSmButtonClick}
+        style={{ display: 'block', margin: '10px', background: 'gray', cursor: 'pointer' }}
+      >
+        sm 사이즈 토스트 열기 버튼
+      </button>
+      {isSmOpen && (
+        <Toast size="sm" position="bottom">
+          게시물이 삭제되었습니다.
+        </Toast>
+      )}
+      <button
+        onClick={handleMdButtonClick}
+        style={{ display: 'block', margin: '10px', background: 'gray', cursor: 'pointer' }}
+      >
+        md 사이즈 토스트 열기 버튼
+      </button>
+      {isMdOpen && (
+        <Toast size="md" position="bottom">
+          게시물이 삭제되었습니다.
+        </Toast>
+      )}
+      <button
+        onClick={handleLgButtonClick}
+        style={{ display: 'block', margin: '10px', background: 'gray', cursor: 'pointer' }}
+      >
+        lg 사이즈 토스트 열기 버튼
+      </button>
+      {isLgOpen && (
+        <Toast size="lg" position="bottom">
+          게시물이 삭제되었습니다.
+        </Toast>
+      )}
+      <button
+        onClick={handleFreeButtonClick}
+        style={{ display: 'block', margin: '10px', background: 'gray', cursor: 'pointer' }}
+      >
+        free 사이즈 토스트 열기 버튼
+      </button>
+      {isFreeOpen && (
+        <Toast size="free" position="bottom">
+          게시물이 삭제되었습니다.
+        </Toast>
+      )}
+    </>
+  );
+};
+
+export const PositionCase = () => {
+  const { isOpen: isTopOpen, openComponent: openTopComponent } = useToast();
+  const { isOpen: isBottomOpen, openComponent: openBottomComponent } = useToast();
+
+  const handleSmButtonClick = () => {
+    openTopComponent();
+  };
+
+  const handleMdButtonClick = () => {
+    openBottomComponent();
+  };
+
+  return (
+    <>
+      <button
+        onClick={handleSmButtonClick}
+        style={{ display: 'block', margin: '10px', background: 'gray', cursor: 'pointer' }}
+      >
+        top position 토스트 열기 버튼
+      </button>
+      {isTopOpen && (
+        <Toast size="sm" position="top">
+          게시물이 삭제되었습니다.
+        </Toast>
+      )}
+      <button
+        onClick={handleMdButtonClick}
+        style={{ display: 'block', margin: '10px', background: 'gray', cursor: 'pointer' }}
+      >
+        bottom position 토스트 열기 버튼
+      </button>
+      {isBottomOpen && (
+        <Toast size="sm" position="bottom">
+          게시물이 삭제되었습니다.
+        </Toast>
+      )}
+    </>
+  );
+};