[Wip] 공통 컴포넌트 제작 (9) MyModal

package.json

@@ -22,8 +22,8 @@
     "framer-motion": "^10.16.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.12.0",
     "react-hook-form": "^7.49.2",
+    "react-icons": "^4.12.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.1",
     "storybook-addon-react-router-v6": "^2.0.10"

src/components/common/MyModal/index.tsx

@@ -0,0 +1,73 @@
+import {
+  Button,
+  Heading,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalOverlay,
+  ModalProps,
+  Portal,
+} from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+interface MyModal extends ModalProps {
+  onClose(): void;
+  isOpen: boolean;
+  title: string;
+  children: ReactNode;
+  buttonText: string;
+  onButtonClick: () => void;
+}
+
+const MyModal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  buttonText,
+  onButtonClick,
+  ...props
+}: MyModal) => {
+  return (
+    <>
+      <Portal>
+        <Modal isOpen={isOpen} onClose={onClose} {...props}>
+          <ModalOverlay />
+          <ModalContent maxW="modal.w" h="modal.h" borderRadius="10px">
+            <Heading
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              fontSize="1.6rem"
+              bg="pink.300"
+              h="modal.header.h"
+              borderTopRadius="10px"
+              color="white"
+            >
+              {title}
+            </Heading>
+            <ModalCloseButton />
+            <ModalBody>{children}</ModalBody>
+            <ModalFooter justifyContent="center">
+              <Button
+                h="modal.button.h"
+                w="modal.button.w"
+                bg="pink.100"
+                onClick={onButtonClick}
+                mb="28px"
+                color="pink.300"
+                fontSize="1.4rem"
+              >
+                {buttonText}
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </Portal>
+    </>
+  );
+};
+
+export default MyModal;

src/main.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import App from './App.tsx';
+import App from './app/App.tsx';
 import ReactDOM from 'react-dom/client';
 import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
 import { theme } from './theme/index.ts';

src/stories/components/MyModal.stories.tsx

@@ -0,0 +1,51 @@
+import MyModal from '@/components/common/MyModal';
+import { Button, Text, useDisclosure } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof MyModal> = {
+  component: MyModal,
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+    },
+    onClose: {
+      type: 'function',
+    },
+    title: {
+      control: 'text',
+    },
+    buttonText: {
+      control: 'text',
+    },
+    onButtonClick: {
+      type: 'function',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MyModal>;
+
+const ModalTest = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <Button onClick={onOpen}>모달 켜세용</Button>
+      <MyModal
+        title="테스트 모달 제목"
+        isOpen={isOpen}
+        onClose={onClose}
+        buttonText="누르면 알림창"
+        onButtonClick={() => alert('하이')}
+      >
+        <Text align="center" fontSize="2rem">
+          하이 아임내용
+        </Text>
+      </MyModal>
+    </>
+  );
+};
+
+export const Deafult: Story = {
+  render: () => <ModalTest />,
+};

src/theme/index.ts

@@ -66,6 +66,17 @@ export const theme = extendTheme({
   },
   sizes: {
     icon: '2.4rem',
+    modal: {
+      h: '343px',
+      w: '392px',
+      header: {
+        h: '54px',
+      },
+      button: {
+        w: '178px',
+        h: '36px',
+      },
+    },
   },
   zIndices: {
     normal: 100,