Feature/#146 모달 공통 컴포넌트 구현 (#156)

* feat: 액션 모달 구현
#146

* feat: alert 모달 구현
#146

* feat: confirm 모달 구현
#146

* refactor: 필요없는 속성 제거 및 추가
#146

src/components/Modal/ActionModal/index.tsx

@@ -0,0 +1,36 @@
+import { Text, Modal, ModalOverlay, ModalContent, ModalFooter, ModalBody, Button } from '@chakra-ui/react';
+
+import { ActionModalProps } from '../types';
+
+const ActionModal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  subButtonText,
+  onSubButtonClick,
+  mainButtonText,
+  onMainButtonClick,
+}: ActionModalProps) => {
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent rounded="2xl">
+        <Text textStyle="bold_2xl" px="4" pt="4">
+          {title}
+        </Text>
+        <ModalBody p="4">{children}</ModalBody>
+        <ModalFooter justifyContent="end" gap="4" pt="0" pb="4">
+          <Button onClick={onSubButtonClick} variant="white">
+            {subButtonText}
+          </Button>
+          <Button onClick={onMainButtonClick} variant="orange">
+            {mainButtonText}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ActionModal;

src/components/Modal/AlertModal/index.tsx

@@ -0,0 +1,24 @@
+import { Text, Modal, ModalOverlay, ModalContent, ModalBody, Flex, ModalCloseButton } from '@chakra-ui/react';
+
+import { AlertModalProps } from '../types';
+
+const AlertModal = ({ isOpen, onClose, title, children }: AlertModalProps) => {
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent overflow="hidden" rounded="2xl">
+        <Text textStyle="bold_2xl" h="12" textColor="white" lineHeight="48px" textAlign="center" bg="orange">
+          {title}
+        </Text>
+        <ModalCloseButton color="white" size="md" />
+        <ModalBody p="4">
+          <Flex align="center" justify="center" minH="24">
+            {children}
+          </Flex>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AlertModal;

src/components/Modal/ConfirmModal/index.tsx

@@ -0,0 +1,38 @@
+import { Modal, ModalOverlay, ModalContent, ModalFooter, ModalBody, Button, Flex } from '@chakra-ui/react';
+
+import { ConfirmModalProps } from '../types';
+
+const ConfirmModal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  confirmButtonText,
+  onConfirmButtonClick,
+}: ConfirmModalProps) => {
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent overflow="hidden" rounded="2xl">
+        <Flex textStyle="bold_2xl" align="center" justify="center" h="12" textColor="white" bg="orange">
+          {title}
+        </Flex>
+        <ModalBody p="4">
+          <Flex align="center" justify="center" minH="20">
+            {children}
+          </Flex>
+        </ModalBody>
+        <ModalFooter justifyContent="center" gap="4" pt="0" pb="4">
+          <Button onClick={onClose} variant="white">
+            취소
+          </Button>
+          <Button onClick={onConfirmButtonClick} variant="orange">
+            {confirmButtonText}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmModal;

src/components/Modal/types.ts

@@ -0,0 +1,26 @@
+export interface ActionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  subButtonText: string;
+  onSubButtonClick: () => void;
+  mainButtonText: string;
+  onMainButtonClick: () => void;
+}
+
+export interface AlertModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export interface ConfirmModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  confirmButtonText: string;
+  onConfirmButtonClick: () => void;
+}