[#3] feat: Common Modal->ModalContainer

src/common/ModalContainer/ModalContainer.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  isPopup?: boolean;
+  contentComponent?: React.ReactNode;
+  onClickOverlay?: (e: React.MouseEvent<HTMLElement>) => void;
+  onClickClose?: (e: React.MouseEvent<HTMLElement>) => void;
+};
+
+const ModalContainer = ({
+  isPopup = false,
+  contentComponent,
+  onClickOverlay,
+  onClickClose,
+}: Props) => {
+  return isPopup ? (
+    <Overlay onClick={onClickOverlay}>{contentComponent}</Overlay>
+  ) : (
+    <></>
+  );
+};
+
+export default ModalContainer;
+
+const Overlay = styled.div`
+  display: flex;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+`;
+
+ModalContainer.defaultProps = {
+  isPopup: false,
+  onClickOverlay: () => {
+    console.log('modal overlay clicked');
+  },
+  onClickClose: () => {
+    console.log('modal close clicked');
+  },
+  contentComponent: '',
+};

src/common/ModalContainer/index.ts

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

src/components/Main/Main.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { datas } from 'data/main';
 import VideoWrapper from 'styles/mainStyles/videoComponents/videoWrapper';
-import Modal from 'common/Modal';
+import Modal from 'common/ModalContainer';
 import VideoModal from 'components/VideoModal';
 import LazyItem from './LazyItem';
 import VideoSelectBar from './VideoSelectBar';
@@ -13,15 +13,7 @@ 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 />}
-      />
+      <Modal isPopup={false} contentComponent={<VideoModal />} />
       <VideoWrapper>
         <div>
           {lVideos.map((data) => (