feat: storybook 생성

web-app/app/shared/components/modal/Modal.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Button } from '../button/Button'
+import { ModalBody, ModalFooter, ModalHeader, ModalRoot } from './Modal'
+
+const meta = {
+  title: 'Components/Modal',
+  component: ModalRoot,
+  argTypes: {
+    isDismissable: { control: 'boolean' },
+    isKeyboardDismissDisabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ModalRoot>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>모달 열기</Button>
+        <ModalRoot isOpen={isOpen} onOpenChange={setIsOpen}>
+          <ModalHeader>모달 제목</ModalHeader>
+          <ModalBody>
+            <p className="text-sm">모달 내용입니다.</p>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="gray" size="large" onClick={() => setIsOpen(false)}>
+              취소
+            </Button>
+            <Button color="primary" size="large" onClick={() => setIsOpen(false)}>
+              확인
+            </Button>
+          </ModalFooter>
+        </ModalRoot>
+      </>
+    )
+  },
+}
+
+export const WithoutCloseButton: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>모달 열기</Button>
+        <ModalRoot isOpen={isOpen} onOpenChange={setIsOpen}>
+          <ModalHeader hasCloseButton={false}>닫기 버튼 없음</ModalHeader>
+          <ModalBody>
+            <p className="text-sm">헤더에 닫기 버튼이 없습니다.</p>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="primary" size="large" onClick={() => setIsOpen(false)}>
+              확인
+            </Button>
+          </ModalFooter>
+        </ModalRoot>
+      </>
+    )
+  },
+}
+
+export const LongContent: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>모달 열기</Button>
+        <ModalRoot isOpen={isOpen} onOpenChange={setIsOpen}>
+          <ModalHeader>긴 내용</ModalHeader>
+          <ModalBody className="max-h-60 overflow-y-auto">
+            {Array.from({ length: 20 }, (_, i) => (
+              <p key={i} className="text-sm mb-2">
+                내용 {i + 1}: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              </p>
+            ))}
+          </ModalBody>
+          <ModalFooter>
+            <Button color="primary" size="large" onClick={() => setIsOpen(false)}>
+              확인
+            </Button>
+          </ModalFooter>
+        </ModalRoot>
+      </>
+    )
+  },
+}
+
+export const NotDismissable: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>모달 열기</Button>
+        <ModalRoot
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          isDismissable={false}
+          isKeyboardDismissDisabled={true}
+        >
+          <ModalHeader hasCloseButton={false}>닫을 수 없음</ModalHeader>
+          <ModalBody>
+            <p className="text-sm">배경 클릭이나 ESC로 닫을 수 없습니다.</p>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="primary" size="large" onClick={() => setIsOpen(false)}>
+              확인
+            </Button>
+          </ModalFooter>
+        </ModalRoot>
+      </>
+    )
+  },
+}
+
+export const ConfirmDialog: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button color="primary" onClick={() => setIsOpen(true)}>삭제하기</Button>
+        <ModalRoot isOpen={isOpen} onOpenChange={setIsOpen} className="w-75">
+          <ModalBody className="px-7.5 py-8">
+            <p className="text-sm text-dabeeo-black-34 font-medium text-center">
+              정말 삭제하시겠습니까?
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="gray" size="large" onClick={() => setIsOpen(false)}>
+              취소
+            </Button>
+            <Button color="primary" size="large" onClick={() => setIsOpen(false)}>
+              삭제
+            </Button>
+          </ModalFooter>
+        </ModalRoot>
+      </>
+    )
+  },
+}