feat: 아티클 제거 컴포넌트 작성

YAPP-Github · Jan 7, 2024 · fefeccc · fefeccc
1 parent ac50fb7
commit fefeccc
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 14 deletions.
diff --git 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<typeof ModalContainer> = {
+import Modal from '.';
+
+const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
-  component: ModalContainer,
+  component: Modal,
   decorators: [
     (Story) => (
       <div style={{ height: '500px' }}>
@@ -16,8 +18,14 @@ const meta: Meta<typeof ModalContainer> = {
 
 export default meta;
 
-type Story = StoryObj<typeof ModalContainer>;
+type Story = StoryObj<typeof Modal>;
+
+export const DeleteArticle: Story = {
+  render: function Render() {
+    const { openModal } = useModalStore();
+
+    openModal('deleteArticle');
 
-export const Second: Story = {
-  args: { title: '제목', children: '설명' },
+    return <Modal />;
+  },
 };
diff --git 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 (
-    <ModalContainer
-      title="해당 글을 삭제할까요?"
-      secondButtonProps={{
-        text: '삭제하기',
-        onClick: () => {},
-      }}
-    >
-      {'삭제한 글은 복구할 수 없어요!\n삭제하시겠어요'}
+    <ModalContainer>
+      <strong className={styles.title}>해당 글을 삭제할까요?</strong>
+      <p className={styles.body}>
+        {'삭제한 글은 복구할 수 없어요!\n삭제하시겠어요'}
+      </p>
+      <div>
+        <button
+          type="button"
+          className={styles.button}
+          style={assignInlineVars({
+            [styles.buttonColor]: COLORS['Grey/600'],
+            [styles.buttonBackgroundColor]: COLORS['Grey/150'],
+          })}
+          onClick={closeModal}
+        >
+          취소
+        </button>
+        <button
+          type="button"
+          className={styles.button}
+          style={assignInlineVars({
+            [styles.buttonColor]: COLORS['Grey/White'],
+            [styles.buttonBackgroundColor]: COLORS['Blue/Default'],
+          })}
+        >
+          만들기
+        </button>
+      </div>
     </ModalContainer>
   );
 };