Merge pull request #26 from DDD-Community/feature/8-modal

[Feature/8] 공통 모달 컴포넌트

.eslintrc.json

@@ -48,6 +48,11 @@
       {
         "html": "ignore"
       }
+    ],
+    "react/require-default-props": [
+      "error", {
+        "functions" : "defaultArguments"
+      }
     ]
   }
 }

.storybook/main.ts

@@ -14,5 +14,23 @@ const config: StorybookConfig = {
     options: {},
   },
   staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    config.module = config.module || {}
+    config.module.rules = config.module.rules || []
+    const imageRule = config.module.rules.find((rule) =>
+      // @ts-ignore
+      rule?.['test']?.test('.svg'),
+    )
+    if (imageRule) {
+      // @ts-ignore
+      imageRule['exclude'] = /\.svg$/
+    }
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    })
+
+    return config
+  },
 }
 export default config

.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="modal-root"/>

package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@storybook/preview-api": "^8.1.11",
     "eslint-import-resolver-typescript": "^3.6.1",
     "next": "14.2.4",
     "react": "^18",

src/components/Button/index.tsx

@@ -3,17 +3,17 @@ import { twMerge } from 'tailwind-merge'
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary'
-  size: 'sm' | 'md' | 'lg'
+  size?: 'sm' | 'md' | 'lg'
   className?: string
   isSubmit?: boolean
 }
 
 function Button({
-  className,
-  size,
+  className = '',
+  size = 'md',
   children,
-  variant,
-  isSubmit,
+  variant = 'primary',
+  isSubmit = false,
   ...props
 }: ButtonProps) {
   const getSizeClass = () => {
@@ -51,10 +51,4 @@ function Button({
   )
 }
 
-Button.defaultProps = {
-  variant: 'primary',
-  className: '',
-  isSubmit: false,
-}
-
 export default Button

src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,152 @@
+/* eslint-disable react-hooks/rules-of-hooks,@typescript-eslint/naming-convention */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable-next-line @typescript-eslint/naming-convention */
+
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { useArgs } from '@storybook/preview-api'
+import BottomModalSvg from 'public/icons/bottom_modal.svg'
+import ModalSvg from 'public/icons/modal.svg'
+import Button from '@/components/Button'
+import Modal from './index'
+
+const meta: Meta<typeof Modal> = {
+  title: 'Modal',
+  component: Modal,
+  argTypes: {
+    isOpen: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Modal>
+
+export const Bottom_Modal_Confirm: Story = {
+  render: () => {
+    const [{ isOpen }, setIsOpen] = useArgs()
+
+    const onClose = () => {
+      setIsOpen({ isOpen: false })
+    }
+    return (
+      <div>
+        <Button type="button" onClick={() => setIsOpen({ isOpen: true })}>
+          Show Modal
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.BottomModal icon={<BottomModalSvg />}>
+            <Modal.Close />
+            <Modal.Body>
+              <Modal.BodyTitle>링크가 복사되었습니다!</Modal.BodyTitle>
+              <Modal.BodyContent>
+                {'POLABO를\n지인들에게도 알려주세요!'}
+              </Modal.BodyContent>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.FooterConfirm confirmText="확인" />
+            </Modal.Footer>
+          </Modal.BottomModal>
+        </Modal>
+      </div>
+    )
+  },
+}
+
+export const Bottom_Modal_Confirm_Cancel: Story = {
+  render: () => {
+    const [{ isOpen }, setIsOpen] = useArgs()
+
+    const onClose = () => {
+      setIsOpen({ isOpen: false })
+    }
+    return (
+      <div>
+        <Button type="button" onClick={() => setIsOpen({ isOpen: true })}>
+          Show Modal
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.BottomModal icon={<BottomModalSvg />}>
+            <Modal.Close />
+            <Modal.Body>
+              <Modal.BodyTitle>링크가 복사되었습니다!</Modal.BodyTitle>
+              <Modal.BodyContent>
+                {'POLABO를\n지인들에게도 알려주세요!'}
+              </Modal.BodyContent>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.FooterConfirmCancel
+                cancelText="돌아가기"
+                confirmText="확인"
+              />
+            </Modal.Footer>
+          </Modal.BottomModal>
+        </Modal>
+      </div>
+    )
+  },
+}
+
+export const Center_Modal_Confirm: Story = {
+  render: () => {
+    const [{ isOpen }, setIsOpen] = useArgs()
+
+    const onClose = () => {
+      setIsOpen({ isOpen: false })
+    }
+    return (
+      <div>
+        <Button type="button" onClick={() => setIsOpen({ isOpen: true })}>
+          Show Modal
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.CenterModal icon={<ModalSvg />}>
+            <Modal.Close />
+            <Modal.Body>
+              <Modal.BodyTitle>링크가 복사되었습니다!</Modal.BodyTitle>
+              <Modal.BodyContent>
+                {'POLABO를\n지인들에게도 알려주세요!'}
+              </Modal.BodyContent>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.FooterConfirm confirmText="확인" />
+            </Modal.Footer>
+          </Modal.CenterModal>
+        </Modal>
+      </div>
+    )
+  },
+}
+
+export const Center_Modal_Confirm_Cancel: Story = {
+  render: () => {
+    const [{ isOpen }, setIsOpen] = useArgs()
+
+    const onClose = () => {
+      setIsOpen({ isOpen: false })
+    }
+    return (
+      <div>
+        <Button type="button" onClick={() => setIsOpen({ isOpen: true })}>
+          Show Modal
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.CenterModal icon={<ModalSvg />}>
+            <Modal.Close />
+            <Modal.Body>
+              <Modal.BodyTitle>링크가 복사되었습니다!</Modal.BodyTitle>
+              <Modal.BodyContent>
+                {'POLABO를\n지인들에게도 알려주세요!'}
+              </Modal.BodyContent>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.FooterConfirmCancel
+                cancelText="돌아가기"
+                confirmText="확인"
+              />
+            </Modal.Footer>
+          </Modal.CenterModal>
+        </Modal>
+      </div>
+    )
+  },
+}