feat: storybook 추가

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

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Button } from '../button/Button'
+import { AlertModal } from './AlertModal'
+import { ConfirmModal } from './ConfirmModal'
+
+const meta = {
+  title: 'Components/Modal/AlertModal',
+  component: AlertModal,
+} satisfies Meta<typeof AlertModal>
+
+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>
+        <AlertModal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="알림"
+          content="작업이 완료되었습니다."
+          onConfirm={() => console.log('확인 클릭')}
+        />
+      </>
+    )
+  },
+}
+
+export const WithoutTitle: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>알림 모달 열기</Button>
+        <AlertModal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          content="제목 없는 알림 메시지입니다."
+          onConfirm={() => console.log('확인 클릭')}
+        />
+      </>
+    )
+  },
+}
+
+export const CustomConfirmText: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>알림 모달 열기</Button>
+        <AlertModal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="알림"
+          content="파일이 성공적으로 업로드되었습니다."
+          confirmText="닫기"
+          onConfirm={() => console.log('닫기 클릭')}
+        />
+      </>
+    )
+  },
+}
+
+export const MultilineContent: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>알림 모달 열기</Button>
+        <AlertModal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="안내"
+          content={`처리가 완료되었습니다.\n\n총 3개의 파일이 업로드되었습니다.\n업로드된 파일은 목록에서 확인하실 수 있습니다.`}
+          onConfirm={() => console.log('확인 클릭')}
+        />
+      </>
+    )
+  },
+}
+
+const confirmMeta = {
+  title: 'Components/Modal/ConfirmModal',
+  component: ConfirmModal,
+} satisfies Meta<typeof ConfirmModal>
+
+export const Confirm: StoryObj<typeof ConfirmModal> = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>확인 모달 열기</Button>
+        <ConfirmModal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="확인"
+          content="정말 삭제하시겠습니까?"
+          onConfirm={() => console.log('삭제 확인')}
+          onCancel={() => console.log('취소 클릭')}
+        />
+      </>
+    )
+  },
+}
+
+export const ConfirmWithCustomText: StoryObj<typeof ConfirmModal> = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>확인 모달 열기</Button>
+        <ConfirmModal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="저장 확인"
+          content="변경사항을 저장하시겠습니까?"
+          confirmText="저장"
+          cancelText="저장 안 함"
+          onConfirm={() => console.log('저장 확인')}
+          onCancel={() => console.log('저장 안 함 클릭')}
+        />
+      </>
+    )
+  },
+}
+
+export const ConfirmWithAsyncAction: StoryObj<typeof ConfirmModal> = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    const handleConfirm = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+      console.log('비동기 작업 완료')
+    }
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>확인 모달 열기</Button>
+        <ConfirmModal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="삭제 확인"
+          content="삭제하면 복구할 수 없습니다. 계속하시겠습니까?"
+          confirmText="삭제"
+          cancelText="취소"
+          onConfirm={handleConfirm}
+        />
+      </>
+    )
+  },
+}