From 62dc6622472c40ba8b73fd951f49dbd4c4943326 Mon Sep 17 00:00:00 2001
From: leeJooHaem <joohaem@vaultmicro.com>
Date: Fri, 24 Feb 2023 09:30:49 +0900
Subject: [PATCH] [ refactor ] extract basic object on Modal styles

---
 src/@components/@common/Modal/index.tsx |  8 ++++----
 src/@components/@common/Modal/style.ts  | 24 ++++++------------------
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/@components/@common/Modal/index.tsx b/src/@components/@common/Modal/index.tsx
index 52882e7b..6018974f 100644
--- a/src/@components/@common/Modal/index.tsx
+++ b/src/@components/@common/Modal/index.tsx
@@ -31,14 +31,14 @@ export default function Modal(props: PropsWithChildren<ModalContents>) {
 
   return (
     <ModalPortal>
-      <St.Root>
-        <St.Modal>
+      <St.DefaultRoot>
+        <St.DefaultModal>
           <St.CloseBtn type="button" className={closeBtnClassName} onClick={closeHandler}>
             <IcModalCloseBtn />
           </St.CloseBtn>
           <St.ModalContents>{children}</St.ModalContents>
-        </St.Modal>
-      </St.Root>
+        </St.DefaultModal>
+      </St.DefaultRoot>
     </ModalPortal>
   );
 }
diff --git a/src/@components/@common/Modal/style.ts b/src/@components/@common/Modal/style.ts
index 95af0035..76436dba 100644
--- a/src/@components/@common/Modal/style.ts
+++ b/src/@components/@common/Modal/style.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-const WhiteRoot = styled.div`
+const Root = styled.div`
   height: 100vh;
 
   position: absolute;
@@ -14,19 +14,9 @@ const WhiteRoot = styled.div`
   align-items: center;
 `;
 
-const Root = styled.div`
-  height: 100vh;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 10;
-
-  background-color: rgb(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
+const WhiteRoot = styled(Root)``;
 
+const DefaultRoot = styled(Root)`
   padding: 1.6rem;
 `;
 
@@ -36,17 +26,15 @@ const WhiteModal = styled.section`
   background-color: ${({ theme }) => theme.newColors.white};
 
   padding: 2rem 0 0;
-  width: 100%;
 `;
 
-const Modal = styled.section`
+const DefaultModal = styled.section`
   position: relative;
 
   background-color: ${({ theme }) => theme.colors.sub_green5};
   border-radius: 2rem;
 
   padding: 2rem 1.6rem;
-  width: 100%;
 `;
 
 const CloseBtn = styled.button`
@@ -69,8 +57,8 @@ const ModalContents = styled.main`
 const St = {
   WhiteRoot,
   WhiteModal,
-  Root,
-  Modal,
+  DefaultRoot,
+  DefaultModal,
   CloseBtn,
   ModalContents,
 };