- 스타일 추가 / 수정

src/styles/_contents.scss

@@ -3,6 +3,7 @@
   height: calc(100vh - 47px);
   display: flex;
   flex-direction: column;
+  background-color: #fff;
 
   .canvas-content {
     flex: 1 1 auto;

src/styles/_layout.scss

@@ -5,9 +5,12 @@
   min-height: 100vh;
   overflow-x: hidden;
 }
+
 .content {
+  position: relative;
   flex: 1 1 auto;
   padding-top: 46px;
+  background-color: #F4F4F7;
 }
 
 // header
@@ -23,6 +26,7 @@
   padding-right: 12px;
   transition: color .17s ease-in-out;
 }
+
 header {
   position: fixed;
   top: 0;
@@ -33,15 +37,18 @@ header{
   background-color: #1C1C1C;
   border-bottom: 1px solid #000;
   z-index: 9999;
+
   .header-inner {
     display: flex;
     align-items: center;
     height: 100%;
     padding: 0 40px;
+
     .header-right {
       display: flex;
       height: 100%;
       align-items: center;
+
       .logo {
         a {
           display: block;
@@ -51,22 +58,28 @@ header{
           background-size: contain;
         }
       }
+
       nav {
         margin-left: 50px;
         height: 100%;
+
         .nav-list {
           display: flex;
           align-items: center;
           height: 100%;
+
           .nav-item {
             position: relative;
             margin-right: 62px;
             height: 100%;
+
             a {
               @include navitem;
             }
+
             button {
               @include navitem;
+
               &:after {
                 content: '';
                 position: absolute;
@@ -79,9 +92,11 @@ header{
                 transition: all .17s ease-in-out;
               }
             }
+
             &:last-child {
               margin-right: 0;
             }
+
             .nav-depth2 {
               position: absolute;
               top: calc(100% - 2px);
@@ -94,21 +109,26 @@ header{
               opacity: 0;
               visibility: hidden;
               transition: all .17s ease-in-out;
+
               .nav-depth2-item {
                 margin-bottom: 10px;
                 transition: all .17s ease-in-out;
+
                 a {
                   font-size: 13px;
                   font-weight: normal;
                   white-space: nowrap;
                 }
+
                 &:last-child {
                   margin-bottom: 0;
                 }
+
                 &.mouse {
                   opacity: 0.55;
                 }
               }
+
               &::before {
                 content: '';
                 position: absolute;
@@ -122,22 +142,27 @@ header{
                 border-left: 1px solid #464646;
               }
             }
+
             &.mouse {
               > a {
                 color: rgba(255, 255, 255, 0.30);
               }
+
               > button {
                 color: rgba(255, 255, 255, 0.30);
+
                 &:after {
                   opacity: 0.3;
                 }
               }
             }
+
             &:hover {
               .nav-depth2 {
                 opacity: 1;
                 visibility: visible;
               }
+
               > button {
                 &:after {
                   transform: translateY(-50%) rotate(90deg);
@@ -148,11 +173,13 @@ header{
         }
       }
     }
+
     .header-left {
       margin-left: auto;
       height: 100%;
       display: flex;
       align-items: center;
+
       .profile-box {
         position: relative;
         padding-left: 30px;
@@ -161,11 +188,13 @@ header{
         align-items: center;
         margin-right: 20px;
         cursor: pointer;
+
         .profile {
           font-size: 13px;
           font-weight: normal;
           color: #fff;
         }
+
         &::after {
           content: '';
           position: absolute;
@@ -178,6 +207,7 @@ header{
           background-size: cover;
         }
       }
+
       .sign-out-box {
         position: relative;
         padding-left: 30px;
@@ -186,11 +216,13 @@ header{
         align-items: center;
         margin-right: 20px;
         cursor: pointer;
+
         .sign-out {
           font-size: 13px;
           font-weight: normal;
           color: #fff;
         }
+
         &::after {
           content: '';
           position: absolute;
@@ -203,9 +235,11 @@ header{
           background-size: cover;
         }
       }
+
       .select-box {
         min-width: 165px;
         margin-right: 8px;
+
         > div {
           width: 100%;
         }

src/styles/_modal.scss

@@ -1,10 +1,23 @@
 @keyframes mountpop {
-    from{opacity: 0; scale: 0.95;}
+  from {
-    to{opacity: 1; scale: 1;}
+    opacity: 0;
+    scale: 0.95;
   }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
 @keyframes unmountpop {
-    from{opacity: 1; scale: 1;}
+  from {
-    to{opacity: 0; scale: 0.95;}
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
 .modal-pop-wrap {
@@ -21,27 +34,37 @@
   border-radius: 4px;
   background-color: #272727;
   z-index: 9999999;
+
   &.sm {
     max-width: 450px;
   }
+
+  &.ssm {
+    max-width: 380px;
+  }
+
   &.mount {
     animation: mountpop .17s ease-in-out forwards;
   }
+
   &.unmount {
     animation: unmountpop .17s ease-in-out forwards;
   }
 }
+
 .modal-head {
   display: flex;
   align-items: center;
   padding: 10px 24px;
   background-color: #000;
   cursor: pointer;
+
   h1.title {
     font-size: 13px;
     color: #fff;
     font-weight: 700;
   }
+
   .modal-close {
     margin-left: auto;
     color: #fff;
@@ -51,36 +74,53 @@
     background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
   }
 }
+
 .modal-body {
   padding: 15px;
+
   .modal-btn-wrap {
     display: flex;
     align-items: center;
     gap: 5px;
+
     button {
       flex: 1;
     }
   }
+
   .modal-check-btn-wrap {
     margin-top: 15px;
+
     .check-wrap-title {
       font-size: 12px;
       color: #fff;
       font-weight: 600;
+
       &.light {
         font-weight: 400;
       }
     }
+
     .flex-check-box {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin-top: 15px;
+
       &.for2 {
         button {
           width: calc(50% - 5px);
         }
+
+        &.btn {
+          gap: 5px;
+
+          button {
+            width: calc(50% - 2.5px);
           }
+        }
+      }
+
       &.for-line {
         button {
           flex: 1;
@@ -88,4 +128,19 @@
       }
     }
   }
+
+  .outer-line-wrap {
+    border-top: 1px solid #3C3C3C;
+    margin-top: 10px;
+    padding-top: 15px;
+    margin-bottom: 15px;
+
+    > div {
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }

src/styles/style.scss

@@ -1,3 +1 @@
-@import '_layout.scss';
+@import '_main.scss';
-@import '_contents.scss';
-@import '_modal.scss';