[#3] feat: Common Modal l implementing - 1

src/common/Modal/Modal.tsx

@@ -0,0 +1,84 @@
+import React, { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+
+type Props = {
+  isOverlayOn?: boolean;
+  isPopup?: boolean;
+  width?: string;
+  height?: string;
+  borderRadius?: number;
+  borderStyle?: string;
+  contentComponent?: React.ReactNode;
+  onClickOverlay?: (e: React.MouseEvent<HTMLElement>) => void;
+  onClickClose?: (e: React.MouseEvent<HTMLElement>) => void;
+};
+
+interface IModalProps {
+  width: string;
+  height: string;
+  borderRadius?: number;
+  borderStyle?: string;
+}
+
+const Modal = ({
+  isOverlayOn,
+  isPopup = false,
+  width = '100%',
+  height = '1rem',
+  borderRadius = 5,
+  borderStyle = 'none',
+  contentComponent,
+  onClickOverlay,
+  onClickClose,
+}: Props) => {
+  const themeStyle = useContext(ThemeContext);
+  return (
+    <Overlay gray={themeStyle.color.grayScale[500]}>
+      <ModalStyle
+        width={width}
+        height={height}
+        borderRadius={borderRadius}
+        borderStyle={borderStyle}
+      >
+        {contentComponent}
+      </ModalStyle>
+    </Overlay>
+  );
+};
+
+export default Modal;
+
+const Overlay = styled.div<{ gray: string }>`
+  display: flex;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: ${(props) => props.gray};
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalStyle = styled.div<IModalProps>`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  border: ${({ borderStyle }) => borderStyle};
+`;
+
+Modal.defaultProps = {
+  isOverlayOn: true,
+  isPopup: false,
+  width: '',
+  height: 0,
+  borderRadius: 0,
+  borderStyle: 'none',
+  onClickOverlay: () => {
+    return 1;
+  },
+  onClickClose: () => {
+    return 1;
+  },
+  contentComponent: '',
+};

src/common/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from './Modal';

src/components/Main/Main.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { datas } from 'data/main';
 import VideoWrapper from 'styles/mainStyles/videoComponents/videoWrapper';
+import Modal from 'common/Modal';
+import VideoModal from 'components/VideoModal';
 import LazyItem from './LazyItem';
 import VideoSelectBar from './VideoSelectBar';
 
@@ -11,6 +13,15 @@ const Main = () => {
   return (
     <div style={{ width: '65%', margin: 'auto' }}>
       <VideoSelectBar popularTags={datas.popularTags} />
+      <Modal
+        isOverlayOn
+        isPopup
+        width="50%"
+        height="50%"
+        borderRadius={5}
+        borderStyle="none"
+        contentComponent={<VideoModal />}
+      />
       <VideoWrapper>
         <div>
           {lVideos.map((data) => (