🚨chore: Sync Sass

src/styles/_contents.scss

@@ -1,29 +1,32 @@
 // CanvasPage
-.canvas-wrap{
+// .canvas-wrap{
-    height: calc(100vh - 47px);
+//     height: calc(100vh - 47px);
-    display: flex;
+//     display: flex;
-    flex-direction: column;
+//     flex-direction: column;
-    .canvas-content{
+//     .canvas-content{
-        flex: 1 1 auto;
+//         flex: 1 1 auto;
-        .canvas-layout{
+//         .canvas-layout{
-            height: 100%;
+//             height: 100%;
-        }
+//         }
-    }
+//     }
-    &.sub-wrap{
+//     &.sub-wrap{
-        overflow: hidden;
+//         overflow: hidden;
-        .canvas-content{
+//         .canvas-content{
-            height: calc(100% - 47px);
+//             height: calc(100% - 47px);
-        }
+//         }
-    }
+//     }
-}
+// }
 // CanvasMenu
 .canvas-menu-wrap{
-    position: relative;
+    position: fixed;
+    top: 46px;
+    left: 0;
     display: block;
     width: 100%;
     padding-bottom: 0;
     background-color: #383838;
     transition: padding .17s ease-in-out;
+    z-index: 999;
     .canvas-menu-inner{
         position: relative;
         display: flex;
@@ -302,12 +305,34 @@
 }
 
 // canvas-layout
+.canvas-content{
+    padding-top: 46.8px;
+    transition: all .17s ease-in-out;
+    .canvas-frame{
+        height: 86.3vh;
+    }
+    &.active{
+        padding-top: calc(46.8px + 50px);
+        .canvas-frame{
+            height: 81vh;
+        }
+    }
+}
 .canvas-layout{
+    padding-top: 37px;
     .canvas-page-list{
+        position: fixed;
+        top: 92.8px;
+        left: 0;
         display: flex;
         background-color: #1C1C1C;
         border-top: 1px solid #000;
         width: 100%;
+        transition: all .17s ease-in-out;
+        z-index: 999;
+        &.active{
+            top: calc(92.8px + 50px);
+        }
         .canvas-plane-wrap{
             display: flex;
             align-items: center;
@@ -383,9 +408,24 @@
 
 .canvas-frame{
     position: relative;
-    height: calc(100% - 36.5px);
+    // height: calc(100% - 36.5px);
-    background-color: #fff;
+    background-color: #F4F4F7;
+    overflow: auto;
+    transition: all .17s ease-in-out;
+    // &::-webkit-scrollbar {
+    //     width: 10px;
+    //     height: 10px;
+    //     background-color: #fff;
+    // }
+    // &::-webkit-scrollbar-thumb {
+    //     background-color: #C1CCD7;
+    //     border-radius: 30px;
+    // }
+    // &::-webkit-scrollbar-track {
+    //     background-color: #fff;
+    // }
     canvas{
+        background-color: #fff;
         position: absolute;
         top: 0;
         left: 0;
@@ -514,8 +554,6 @@
     &.estimate{
         display: flex;
         flex-direction: column;
-        height: calc(100% - 36.5px);
-        overflow-y: auto;
         padding-top: 0;
         .sub-content-inner{
             flex: 1;
@@ -1200,4 +1238,18 @@
             background-color: #F4F4F7;
         }
     }
+}
+
+.file-down-nodata{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 148px;
+    padding: 24px;
+    border-radius: 4px;
+    border: 1px solid #E5E5E5;
+    font-size: 16px;
+    font-weight: 500;
+    color: #344356;
 }

src/styles/_main.scss

@@ -112,8 +112,8 @@
             border-radius: 6px;
             background: #FFF;
             box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            &.item01{flex: 1; max-height: 400px;}
+            &.item01{flex: 1; height: 400px;}
-            &.item02{flex: none; width: 451px; max-height: 400px;}
+            &.item02{flex: none; width: 451px; height: 400px;}
             &.item03{flex: 1;}
             &.item04{flex: none; width: 351px;}
             &.item05{flex: none; width: 451px;}
@@ -566,17 +566,17 @@
                 transition: background .05s ease-in-out;
             }
         }
-    }
+        input[type=checkbox]:checked + label::before{
-    input[type=checkbox]:checked + label::before{
+            border-color: #A8B6C7;
-        border-color: #A8B6C7;
+            background-color: #A8B6C7;
-        background-color: #A8B6C7;
+        }
-    }
+        input[type=checkbox]:checked + label::after{
-    input[type=checkbox]:checked + label::after{
+            border-color: #fff;
-        border-color: #fff;
+            width: 7px;
-        width: 7px;
+            height: 11px;
-        height: 11px;
+            top: -2px;
-        top: -2px;
+            left: 1px;
-        left: 1px;
+        }
     }
 }
 

src/styles/_modal.scss

@@ -26,6 +26,8 @@ $alert-color: #101010;
 
 .modal-pop-wrap{
     position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: -webkit-fit-content;
     height: -moz-fit-content;
@@ -453,7 +455,7 @@ $alert-color: #101010;
     gap: 20px;
 }
 .select-wrap{
-    div{
+    .sort-select{
         width: 100%;
     }
 }
@@ -1624,7 +1626,7 @@ $alert-color: #101010;
         align-items: center;
         justify-content: center;
         width: 100%;
-        height: 80px;
+        min-height: 80px;
         background-color: #fff;
     }
     

src/styles/_reset.scss

@@ -804,4 +804,88 @@ input[type=text]{
         background-size: 14px 15px;
         cursor: pointer;
     }
+}
+
+// react select
+.react-select-custom{
+    width: 100%;
+    .custom__control{
+        height: 30px;
+        min-height: unset;
+        border-radius: 2px;
+        border-color: #EEE;
+        background-color: #fff;
+        &:hover{
+            border-color: #EEE;
+        }
+    }
+    .custom__control--is-focused{
+        border-color: #EEE;
+        box-shadow: unset;
+        &:hover{
+            border-color: #EEE;
+
+        }
+    }
+    .custom__value-container {
+        height: 100%;
+        padding: 0 10px;
+    }
+    .custom__placeholder,
+    .custom__single-value{
+        margin: 0;
+    }
+    .custom__single-value{
+        font-size: 13px;
+        color: #45576F;
+        font-weight: 400;
+    }
+    .custom__placeholder{
+        font-size: 13px;
+        color: #bbbbbb;
+        font-weight: 400;
+    }
+    .custom__indicator{
+        padding: 0;
+        svg{
+            display: none;
+        }
+    }
+    .custom__clear-indicator{
+        width: 30px;
+        height: 100%;
+        background: url(../../public/static/images/common/select_del.svg) no-repeat center;
+        background-size: 8px 8px;
+    }
+    .custom__dropdown-indicator{
+        width: 30px;
+        height: 100%;
+        background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
+    }
+
+    .custom__menu {
+        margin: 1px 0;
+        border-radius: 2px;
+        overflow: hidden;
+    }
+    .custom__menu-list {
+        padding: 0;
+    }
+    .custom__option{
+        font-size: 13px;
+        padding: 7px 10px;
+        color: #45576F;
+    }
+    .custom__option--is-selected{
+        color: #fff;
+    }
+    // disable
+    &.custom--is-disabled{
+        .custom__control{
+            background-color: #FAFAFA ;
+        }
+        .custom__single-value{
+            color: #999999;
+        }
+    }
 }