[#3] feat: VideoModal Overlay removed

OPGG-HACKTHON · Aug 7, 2021 · 48bbf82 · 48bbf82
1 parent 429dac1
commit 48bbf82
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 31 deletions.
diff --git a/src/common/Modal/Modal.tsx b/src/common/Modal/Modal.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import styled, { ThemeContext } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 
 type Props = {
   isOverlayOn?: boolean;
@@ -31,9 +31,8 @@ const Modal = ({
   onClickOverlay,
   onClickClose,
 }: Props) => {
-  const themeStyle = useContext(ThemeContext);
   return (
-    <Overlay gray={themeStyle.color.grayScale[500]}>
+    <Overlay>
       <ModalStyle
         width={width}
         height={height}
@@ -48,14 +47,14 @@ const Modal = ({
 
 export default Modal;
 
-const Overlay = styled.div<{ gray: string }>`
+const Overlay = styled.div`
   display: flex;
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
-  background-color: ${(props) => props.gray};
+  background-color: rgba(0, 0, 0, 0.5);
   justify-content: center;
   align-items: center;
 `;

diff --git a/src/components/VideoModal/VideoModal.tsx b/src/components/VideoModal/VideoModal.tsx
@@ -7,34 +7,18 @@ import CommentSection from './CommentSection';
 
 const VideoModal = () => {
   return (
-    <>
-      <ModalBackGround>
-        <ModalContentWrapper>
-          <ModalLeftContent>
-            <VideoSection />
-          </ModalLeftContent>
-          <ModalRightContent>
-            <UploaderSection />
-            <CommentSection />
-          </ModalRightContent>
-        </ModalContentWrapper>
-      </ModalBackGround>
-    </>
+    <ModalContentWrapper>
+      <ModalLeftContent>
+        <VideoSection />
+      </ModalLeftContent>
+      <ModalRightContent>
+        <UploaderSection />
+        <CommentSection />
+      </ModalRightContent>
+    </ModalContentWrapper>
   );
 };
 
-const ModalBackGround = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.4);
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
 const ModalContentWrapper = styled.div`
   position: fixed;
   height: 600px;