diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx index 90c4342b..4277ebf2 100644 --- a/src/components/Modal/Modal.stories.tsx +++ b/src/components/Modal/Modal.stories.tsx @@ -1,10 +1,12 @@ import type { Meta, StoryObj } from '@storybook/react'; -import ModalContainer from './ModalContainer'; +import { useModalStore } from '@/src/stores/modalStore'; -const meta: Meta = { +import Modal from '.'; + +const meta: Meta = { title: 'Components/Modal', - component: ModalContainer, + component: Modal, decorators: [ (Story) => (
@@ -16,8 +18,14 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; + +export const DeleteArticle: Story = { + render: function Render() { + const { openModal } = useModalStore(); + + openModal('deleteArticle'); -export const Second: Story = { - args: { title: '제목', children: '설명' }, + return ; + }, }; diff --git a/src/components/Modal/components/DeleteArticle.tsx b/src/components/Modal/components/DeleteArticle.tsx index 203da58a..4ea5f779 100644 --- a/src/components/Modal/components/DeleteArticle.tsx +++ b/src/components/Modal/components/DeleteArticle.tsx @@ -1,15 +1,43 @@ +import { assignInlineVars } from '@vanilla-extract/dynamic'; + +import { useModalStore } from '@/src/stores/modalStore'; +import { COLORS } from '@/src/styles/tokens'; + import ModalContainer from '../ModalContainer'; +import * as styles from '../style.css'; const DeleteArticle = () => { + const { closeModal } = useModalStore(); + return ( - {}, - }} - > - {'삭제한 글은 복구할 수 없어요!\n삭제하시겠어요'} + + 해당 글을 삭제할까요? +

+ {'삭제한 글은 복구할 수 없어요!\n삭제하시겠어요'} +

+
+ + +
); };