🚨chore: Sync Sass

public/static/images/common/select_del.svg

@@ -0,0 +1,4 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.998535 1L3.99723 3.99594L6.99593 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 6.98376L3.99319 3.99595L1.00263 6.99999" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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;
@@ -34,6 +36,9 @@ $alert-color: #101010;
     border-radius: 4px;
     background-color: #272727;
     z-index: 9999999;
+    &.xsm{
+        width: 200px;
+    }
     &.xxxm{
         width: 240px;
     }
@@ -450,7 +455,7 @@ $alert-color: #101010;
     gap: 20px;
 }
 .select-wrap{
-    div{
+    .sort-select{
         width: 100%;
     }
 }
@@ -1505,7 +1510,7 @@ $alert-color: #101010;
             width: 16px;
             height: 16px;
             &.pink{
-                border: 2px solid #EA10AC;
+                border: 2px solid #ce1c9c;
                 background-color: #16417D;
             }
             &.white{
@@ -1514,4 +1519,264 @@ $alert-color: #101010;
             }
         }
     }
+}
+
+// color setting
+.color-setting-wrap{
+    padding-bottom: 15px;
+    border-bottom: 1px solid #424242;
+    .color-tit{
+        font-size: 13px;
+        font-weight: 500;
+        color: #ffffff;
+        margin-bottom: 10px;
+    }
+    .color-picker{
+        .react-colorful{
+            width: 100%;
+            height: auto;
+            gap: 20px;
+            .react-colorful__pointer{
+                width: 15px;
+                height: 15px;
+                border: 4px solid #Fff;
+            }
+            .react-colorful__saturation{
+                border-radius: 2px;
+                height: 200px;
+                border-bottom: 5px solid #000;
+            }
+            .react-colorful__last-control{
+                border-radius: 2px;
+                height: 10px;
+            }
+        }
+        .hex-color-box{
+            display: flex;
+            align-items: center;
+            margin-top: 15px;
+            .color-box-tit{
+                font-size: 12px;
+                color: #fff;
+                font-weight: 500;
+                margin-right: 10px;
+            }
+            .color-hex-input{
+                width: 150px;
+                margin-right: 5px;
+                input{
+                    width: 100%;
+                }
+            }
+            .color-box{
+                display: block;
+                width: 30px;
+                height: 30px;
+                border-radius: 4px;
+            }
+        }
+        .default-color-wrap{
+            margin-top: 25px;
+            .default-tit{
+                font-size: 12px;
+                font-weight: 500;
+                color: #fff;
+                margin-bottom: 10px;
+            }
+            .color-button-wrap{
+                display: grid;
+                grid-template-columns: repeat(8, 1fr);
+                gap: 21px;
+                .default-color{
+                    display: block;
+                    width: 100%;
+                    height: 30px;
+                    border-radius: 4px;
+                }
+            }
+        }
+    }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px 5px;
+    margin-bottom: 15px;
+    .font-option-item{
+        .option-item-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            margin-bottom: 10px;
+        }
+    }
+}
+.font-ex-wrap{
+    margin-bottom: 15px;
+    .font-ex-tit{
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+        margin-bottom: 10px;
+    }
+    .font-ex-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 80px;
+        background-color: #fff;
+    }
+    
+}
+
+// 치수선 설정
+.font-btn-wrap{
+    margin-bottom: 15px;
+    button{
+        width: 100%;
+        height: 30px;
+        line-height: 28px;
+    }
+}
+
+.line-color-wrap{
+    margin-bottom: 15px;
+    .color-btn{
+        display: block;
+        width: 100%;
+        height: 30px;
+        border-radius: 2px;
+    }
+}
+
+.form-box{
+    width: 100%;
+    background-color: #fff;
+    padding: 10px 0 20px;
+    .line-form{
+        position: relative;
+        width: 102px;
+        height: 40px;
+        margin: 0 auto;
+        border-left: 1px dashed #101010;
+        border-right: 1px dashed #101010;
+        .line-font-box{
+            position: absolute;
+            bottom: -3px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            .font{
+                display: block;
+                padding-bottom: 6px;
+                color: #101010;
+            }
+            .line{
+                position: relative;
+                display: block;
+                width: 100%;
+                height: 1px;
+                border-radius: 30px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    left: 1px;
+                    width: 9px;
+                    height: 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-top: none;
+                    border-right: none;
+                }
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    right: 1px;
+                    width: 9px;
+                    height: 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-bottom: none;
+                    border-left: none;
+                }
+            }
+        }
+    }
+}
+
+// 사이즈 변경
+.size-inner-warp{
+    position: relative;
+}
+.size-check-wrap{
+    position: relative;
+    display: block;
+    width: 132px;
+    height: 132px;
+    margin: 0 auto;
+    .size-btn{
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        &.act{
+            &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 8px;
+                height: 8px;
+                background-color: #fff;
+                border-radius: 50%;
+            }
+        }
+        &:nth-child(1){ top: 0; left: 0; }
+        &:nth-child(2){ top: 0; right: 0; }
+        &:nth-child(3){ bottom: 0; left: 0; }
+        &:nth-child(4){ bottom: 0; right: 0; }
+    }
+    .size-box{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100px;
+        height: 100px;
+        background-color: #fff;
+    }
+}
+
+.size-option-top{
+    margin-bottom: 15px;
+}
+.size-option-side{
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+}
+.size-option-wrap{
+    width: 88px;
+    margin: 0 auto;
+    .size-option{
+        display: flex;
+        align-items: center;
+        input{
+            width: 100%;
+            flex: 1;
+        }
+        span{
+            flex: none;
+        }
+    }
 }

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;
+        }
+    }
 }