155 lines
4.4 KiB
TypeScript
155 lines
4.4 KiB
TypeScript
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}
|
|
/>
|
|
</>
|
|
)
|
|
},
|
|
}
|