From 58eb25676eab171b361e8e7bb1988bacc6543eb9 Mon Sep 17 00:00:00 2001
From: yeon <vantovan7414@gmail.com>
Date: Thu, 12 Dec 2019 16:00:29 +0900
Subject: [PATCH] =?UTF-8?q?[Add]=20modal=20=EA=B0=80=EC=9A=B4=EB=8D=B0?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC=20#86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

모달이 가운데 정렬되도록 설정
---
 .../src/composition/DetailFeed/CommonModal.tsx  | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/client/src/composition/DetailFeed/CommonModal.tsx b/client/src/composition/DetailFeed/CommonModal.tsx
index 7a9a5f4a..1e218de6 100644
--- a/client/src/composition/DetailFeed/CommonModal.tsx
+++ b/client/src/composition/DetailFeed/CommonModal.tsx
@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 const ModalFrame = styled.div`
   background-color: white;
   height: 80%;
-  position: fixed;
+  position: absolute;
   z-index: 2000;
   display: flex;
 `;
@@ -21,12 +21,21 @@ const ModalBackgroud = styled.div`
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const Wrapper = styled.div`
   position: fixed;
   z-index: 1000;
+  width: 100%;
+  height: 100%;
   top: 0;
   left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
-
 const CloseModal = styled.p`
   color: white;
   float: right;
@@ -52,7 +61,7 @@ function Commonmodal({
     setIsOpen(false);
   };
   return isOpen ? (
-    <>
+    <Wrapper>
       <ModalBackgroud>
         <CloseModal onClick={closeModal}>X</CloseModal>
       </ModalBackgroud>
@@ -61,7 +70,7 @@ function Commonmodal({
         {imageChildren && <ImageContent>{imageChildren}</ImageContent>}
         <TextContent>{textChildren}</TextContent>
       </ModalFrame>
-    </>
+    </Wrapper>
   ) : (
     <></>
   );