diff --git a/src/common/Modal/Modal.tsx b/src/common/Modal/Modal.tsx
deleted file mode 100644
index b943ea0..0000000
--- a/src/common/Modal/Modal.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import styled 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) => {
-  return (
-    <Overlay>
-      <ModalStyle
-        width={width}
-        height={height}
-        borderRadius={borderRadius}
-        borderStyle={borderStyle}
-      >
-        {contentComponent}
-      </ModalStyle>
-    </Overlay>
-  );
-};
-
-export default Modal;
-
-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;
-`;
-
-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: '',
-};
diff --git a/src/common/Modal/index.ts b/src/common/Modal/index.ts
deleted file mode 100644
index 0690fec..0000000
--- a/src/common/Modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Modal';
diff --git a/src/common/ModalContainer/ModalContainer.tsx b/src/common/ModalContainer/ModalContainer.tsx
new file mode 100644
index 0000000..acaba5c
--- /dev/null
+++ b/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: '',
+};
diff --git a/src/common/ModalContainer/index.ts b/src/common/ModalContainer/index.ts
new file mode 100644
index 0000000..553b07e
--- /dev/null
+++ b/src/common/ModalContainer/index.ts
@@ -0,0 +1 @@
+export { default } from './ModalContainer';
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 3aa69f5..bcbfbdb 100644
--- a/src/components/Main/Main.tsx
+++ b/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) => (