Modal 공통 컴포넌트 구현 (#49)

* chore: react bottom sheet 의존성 설치

* feat: Modal 공통 컴포넌트 구현

package.json

@@ -24,6 +24,7 @@
     "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable-bottom-sheet": "^1.14.0",
     "react-hook-form": "^7.47.0",
     "react-router-dom": "^6.17.0",
     "zustand": "^4.4.4"

src/components/shared/Modal/Modal.styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const ModalHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 10px;
+`;

src/components/shared/Modal/Modal.tsx

@@ -0,0 +1,76 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import BottomSheet from 'react-draggable-bottom-sheet';
+
+import { theme } from '@styles/theme';
+
+import Close from '@assets/close.svg';
+
+import { ModalHeader } from './Modal.styles';
+
+const ModalContent = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div data-no-drag {...props}>
+      {children}
+    </div>
+  );
+};
+
+type ModalProps = {
+  isOpen: boolean;
+  close: VoidFunction;
+  header?: boolean;
+} & PropsWithChildren;
+
+const Modal = ({ children, isOpen, header = false, close }: ModalProps) => {
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      close={close}
+      styles={{
+        bottomSheet: {
+          zIndex: 1000,
+        },
+        backdrop: {
+          opacity: 0.2,
+        },
+        dragIndicator: {
+          wrap: {
+            padding: '5px 0',
+          },
+          indicator: {
+            height: '3px',
+            backgroundColor: theme.PALETTE.GRAY_300,
+            borderRadius: '16px',
+          },
+        },
+        window: {
+          wrap: {
+            borderTopLeftRadius: '16px',
+            borderTopRightRadius: '16px',
+          },
+        },
+      }}
+    >
+      {header && (
+        <ModalHeader>
+          {/* TODO: svg fill 바꿔주기 */}
+          <img
+            src={Close}
+            alt="close"
+            width={30}
+            onClick={close}
+            color={theme.PALETTE.GRAY_400}
+          />
+        </ModalHeader>
+      )}
+      {children}
+    </BottomSheet>
+  );
+};
+
+Modal.Content = ModalContent;
+
+export { Modal };

src/components/shared/Modal/index.ts

@@ -0,0 +1 @@
+export * from './Modal';