[ refactor ] extract basic object on Modal styles

TeamPiickle · Feb 24, 2023 · 62dc662 · 62dc662
1 parent cfed6dc
commit 62dc662
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 22 deletions.
diff --git 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
@@ -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,
 };