From 79139f53aa393e1e8040d5df549be88a66a91e81 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 15 Nov 2024 10:08:50 +0900
Subject: [PATCH] =?UTF-8?q?zoom=20clear=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx |   2 +-
 src/styles/_contents.scss                | 238 +++++++++++++++++++++++
 2 files changed, 239 insertions(+), 1 deletion(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 09758a1e..26538599 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -248,7 +248,7 @@ export default function CanvasMenu(props) {
                     handleZoom(false)
                   }}
                 ></button>
-                <span>{canvasZoom}%</span>
+                <span onClick={handleZoomClear}>{canvasZoom}%</span>
                 <button
                   className="control-btn plus"
                   onClick={() => {
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 441fccb4..446e003f 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -28,6 +28,7 @@
   background-color: #383838;
   transition: padding 0.17s ease-in-out;
   z-index: 999;
+
   .canvas-menu-inner {
     position: relative;
     display: flex;
@@ -36,14 +37,17 @@
     background-color: #2c2c2c;
     height: 46.8px;
     z-index: 999;
+
     .canvas-menu-list {
       display: flex;
       align-items: center;
       height: 100%;
+
       .canvas-menu-item {
         display: flex;
         align-items: center;
         height: 100%;
+
         button {
           display: flex;
           align-items: center;
@@ -54,6 +58,7 @@
           padding: 15px 20px;
           opacity: 0.55;
           transition: all 0.17s ease-in-out;
+
           .menu-icon {
             display: block;
             width: 14px;
@@ -62,53 +67,67 @@
             background-position: center;
             background-size: contain;
             margin-right: 10px;
+
             &.con00 {
               background-image: url(/static/images/canvas/menu_icon00.svg);
             }
+
             &.con01 {
               background-image: url(/static/images/canvas/menu_icon01.svg);
             }
+
             &.con02 {
               background-image: url(/static/images/canvas/menu_icon02.svg);
             }
+
             &.con03 {
               background-image: url(/static/images/canvas/menu_icon03.svg);
             }
+
             &.con04 {
               background-image: url(/static/images/canvas/menu_icon04.svg);
             }
+
             &.con05 {
               background-image: url(/static/images/canvas/menu_icon05.svg);
             }
+
             &.con06 {
               background-image: url(/static/images/canvas/menu_icon06.svg);
             }
           }
         }
+
         &.active {
           background-color: #383838;
+
           button {
             opacity: 1;
           }
         }
       }
     }
+
     .canvas-side-btn-wrap {
       display: flex;
       align-items: center;
       margin-left: auto;
+
       .select-box {
         width: 124px;
         margin: 0 5px;
         height: 30px;
+
         > div {
           width: 100%;
         }
       }
+
       .btn-from {
         display: flex;
         align-items: center;
         gap: 5px;
+
         button {
           display: block;
           width: 30px;
@@ -119,49 +138,63 @@
           background-repeat: no-repeat;
           background-size: 15px 15px;
           transition: all 0.17s ease-in-out;
+
           &.btn01 {
             background-image: url(../../public/static/images/canvas/side_icon03.svg);
           }
+
           &.btn02 {
             background-image: url(../../public/static/images/canvas/side_icon02.svg);
           }
+
           &.btn03 {
             background-image: url(../../public/static/images/canvas/side_icon01.svg);
           }
+
           &.btn04 {
             background-image: url(../../public/static/images/canvas/side_icon04.svg);
           }
+
           &.btn05 {
             background-image: url(../../public/static/images/canvas/side_icon05.svg);
           }
+
           &.btn06 {
             background-image: url(../../public/static/images/canvas/side_icon06.svg);
           }
+
           &.btn07 {
             background-image: url(../../public/static/images/canvas/side_icon07.svg);
           }
+
           &.btn08 {
             background-image: url(../../public/static/images/canvas/side_icon08.svg);
           }
+
           &.btn09 {
             background-image: url(../../public/static/images/canvas/side_icon09.svg);
           }
+
           &.btn10 {
             background-image: url(../../public/static/images/canvas/side_icon10.svg);
             background-size: 15px 14px;
           }
+
           &:hover {
             background-color: #1083e3;
           }
+
           &.active {
             background-color: #1083e3;
           }
         }
       }
+
       .ico-btn-from {
         display: flex;
         align-items: center;
         gap: 5px;
+
         button {
           .ico {
             display: block;
@@ -170,30 +203,37 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: contain;
+
             &.ico01 {
               background-image: url(../../public/static/images/canvas/ico-flx01.svg);
             }
+
             &.ico02 {
               background-image: url(../../public/static/images/canvas/ico-flx02.svg);
             }
+
             &.ico03 {
               background-image: url(../../public/static/images/canvas/ico-flx03.svg);
             }
+
             &.ico04 {
               background-image: url(../../public/static/images/canvas/ico-flx04.svg);
             }
           }
+
           .name {
             font-size: 12px;
             color: #fff;
           }
         }
+
         &.form06 {
           .name {
             font-size: 13px;
           }
         }
       }
+
       .vertical-horizontal {
         display: flex;
         min-width: 170px;
@@ -203,11 +243,13 @@
         background: #373737;
         line-height: 28px;
         overflow: hidden;
+
         span {
           padding: 0 10px;
           font-size: 13px;
           color: #fff;
         }
+
         button {
           margin-left: auto;
           height: 100%;
@@ -218,12 +260,14 @@
           padding: 0 7.5px;
           transition: all 0.17s ease-in-out;
         }
+
         &.on {
           button {
             background-color: #1083e3;
           }
         }
       }
+
       .size-control {
         display: flex;
         align-items: center;
@@ -234,10 +278,13 @@
         width: 100px;
         height: 30px;
         margin: 0 5px;
+
         span {
           font-size: 13px;
           color: #fff;
+          cursor: pointer;
         }
+
         .control-btn {
           display: block;
           width: 12px;
@@ -245,9 +292,11 @@
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center;
+
           &.minus {
             background-image: url(../../public/static/images/canvas/minus.svg);
           }
+
           &.plus {
             background-image: url(../../public/static/images/canvas/plus.svg);
           }
@@ -255,6 +304,7 @@
       }
     }
   }
+
   .canvas-depth2-wrap {
     position: absolute;
     top: -100%;
@@ -263,20 +313,24 @@
     width: 100%;
     height: 50px;
     transition: all 0.17s ease-in-out;
+
     .canvas-depth2-inner {
       display: flex;
       align-items: center;
       padding: 0 40px;
       height: 100%;
+
       .canvas-depth2-list {
         display: flex;
         align-items: center;
         height: 100%;
+
         .canvas-depth2-item {
           display: flex;
           align-items: center;
           margin-right: 26px;
           height: 100%;
+
           button {
             position: relative;
             opacity: 0.55;
@@ -286,10 +340,12 @@
             height: 100%;
             padding-right: 12px;
           }
+
           &.active {
             button {
               opacity: 1;
               font-weight: 600;
+
               &:after {
                 content: '';
                 position: absolute;
@@ -304,17 +360,20 @@
           }
         }
       }
+
       .canvas-depth2-btn-list {
         display: flex;
         align-items: center;
         margin-left: auto;
         height: 100%;
+
         .depth2-btn-box {
           display: flex;
           align-items: center;
           margin-right: 34px;
           height: 100%;
           transition: all 0.17s ease-in-out;
+
           button {
             position: relative;
             font-size: 12px;
@@ -322,6 +381,7 @@
             height: 100%;
             color: #fff;
             padding-right: 12px;
+
             &:after {
               content: '';
               position: absolute;
@@ -333,19 +393,23 @@
               background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
             }
           }
+
           &:last-child {
             margin-right: 0;
           }
+
           &.mouse {
             opacity: 0.55;
           }
         }
       }
     }
+
     &.active {
       top: 47px;
     }
   }
+
   &.active {
     padding-bottom: 50px;
   }
@@ -355,18 +419,23 @@
 .canvas-content {
   padding-top: 46.8px;
   transition: all 0.17s ease-in-out;
+
   .canvas-frame {
     height: calc(100vh - 129.3px);
   }
+
   &.active {
     padding-top: calc(46.8px + 50px);
+
     .canvas-frame {
       height: calc(100vh - 179.4px);
     }
   }
 }
+
 .canvas-layout {
   padding-top: 37px;
+
   .canvas-page-list {
     position: fixed;
     top: 92.8px;
@@ -378,13 +447,16 @@
     min-width: 1280px;
     transition: all 0.17s ease-in-out;
     z-index: 99;
+
     &.active {
       top: calc(92.8px + 50px);
     }
+
     .canvas-plane-wrap {
       display: flex;
       align-items: center;
       max-width: calc(100% - 45px);
+
       .canvas-page-box {
         display: flex;
         align-items: center;
@@ -393,6 +465,7 @@
         border-right: 1px solid #000;
         min-width: 0;
         transition: all 0.17s ease-in-out;
+
         span {
           display: flex;
           align-items: center;
@@ -404,6 +477,7 @@
           text-overflow: ellipsis;
           overflow: hidden;
         }
+
         .close {
           flex: none;
           display: block;
@@ -413,24 +487,30 @@
           background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
           background-size: cover;
         }
+
         &.on {
           background-color: #fff;
+
           span {
             font-weight: 600;
             color: #101010;
           }
+
           .close {
             background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
           }
+
           &:hover {
             background-color: #fff;
           }
         }
+
         &:hover {
           background-color: #000;
         }
       }
     }
+
     .plane-add {
       display: flex;
       align-items: center;
@@ -440,6 +520,7 @@
       background-color: #1c1c1c;
       border-right: 1px solid #000;
       transition: all 0.17s ease-in-out;
+
       span {
         display: block;
         width: 9px;
@@ -447,6 +528,7 @@
         background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
         background-size: cover;
       }
+
       &:hover {
         background-color: #000;
       }
@@ -476,6 +558,7 @@
     margin: 0 auto;
     background-color: #fff;
   }
+
   canvas {
     position: absolute;
     top: 0;
@@ -496,20 +579,25 @@
   border-bottom: 1px solid #000;
   background: #2c2c2c;
   z-index: 999;
+
   .sub-header-inner {
     display: flex;
     align-items: center;
     height: 100%;
     padding: 0 100px;
+
     .sub-header-title-wrap {
       display: flex;
       align-items: center;
+
       .title-item {
         position: relative;
         padding: 0 24px;
+
         a {
           display: flex;
           align-items: center;
+
           .icon {
             width: 22px;
             height: 22px;
@@ -517,11 +605,13 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
+
             &.drawing {
               background-image: url(../../public/static/images/main/drawing_icon.svg);
             }
           }
         }
+
         &:after {
           content: '';
           position: absolute;
@@ -532,31 +622,38 @@
           height: 16px;
           background-color: #d9d9d9;
         }
+
         &:first-child {
           padding-left: 0;
         }
+
         &:last-child {
           padding-right: 0;
+
           &:after {
             display: none;
           }
         }
       }
     }
+
     .sub-header-title {
       font-size: 16px;
       color: #fff;
       font-weight: 600;
     }
+
     .sub-header-location {
       margin-left: auto;
       display: flex;
       align-items: center;
+
       .location-item {
         position: relative;
         display: flex;
         align-items: center;
         padding: 0 10px;
+
         span {
           display: flex;
           font-size: 12px;
@@ -564,6 +661,7 @@
           font-weight: normal;
           cursor: default;
         }
+
         &:after {
           content: '';
           position: absolute;
@@ -574,14 +672,18 @@
           height: 6px;
           background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
         }
+
         &:first-child {
           padding-left: 0;
         }
+
         &:last-child {
           padding-right: 0;
+
           span {
             color: #fff;
           }
+
           &:after {
             display: none;
           }
@@ -594,56 +696,68 @@
 // sub content
 .sub-content {
   padding-top: 46px;
+
   .sub-content-inner {
     max-width: 1760px;
     margin: 0 auto;
     padding: 20px 20px 0;
+
     .sub-content-box {
       margin-bottom: 20px;
+
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
+
   &.estimate {
     display: flex;
     flex-direction: column;
     padding-top: 0;
+
     .sub-content-inner {
       flex: 1;
       width: 100%;
     }
   }
 }
+
 .sub-table-box {
   padding: 20px;
   border-radius: 6px;
   border: 1px solid #e9eaed;
   background: #fff;
   box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+
   .table-box-title-wrap {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
+
     .title-wrap {
       display: flex;
       align-items: center;
+
       h3 {
         display: block;
         font-size: 15px;
         color: #101010;
         font-weight: 600;
         margin-right: 14px;
+
         &.product {
           margin-right: 10px;
         }
       }
+
       .product_tit {
         position: relative;
         font-size: 15px;
         font-weight: 600;
         color: #1083e3;
         padding-left: 10px;
+
         &::before {
           content: '';
           position: absolute;
@@ -655,27 +769,33 @@
           background-color: #d9d9d9;
         }
       }
+
       .option {
         padding-left: 5px;
         font-size: 13px;
         color: #101010;
         font-weight: 400;
       }
+
       .info-wrap {
         display: flex;
         align-items: center;
+
         li {
           position: relative;
           padding: 0 6px;
           font-size: 12px;
           color: #101010;
           font-weight: normal;
+
           span {
             font-weight: 600;
+
             &.red {
               color: #e23d70;
             }
           }
+
           &:after {
             content: '';
             position: absolute;
@@ -686,11 +806,14 @@
             height: 11px;
             background-color: #d9d9d9;
           }
+
           &:first-child {
             padding-left: 0;
           }
+
           &:last-child {
             padding-right: 0;
+
             &::after {
               display: none;
             }
@@ -699,11 +822,13 @@
       }
     }
   }
+
   .left-unit-box {
     margin-left: auto;
     display: flex;
     align-items: center;
   }
+
   .promise-gudie {
     display: block;
     font-size: 13px;
@@ -711,15 +836,18 @@
     color: #101010;
     margin-bottom: 20px;
   }
+
   .important {
     color: #f00;
   }
+
   .sub-center-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
   }
+
   .sub-right-footer {
     display: flex;
     align-items: center;
@@ -727,6 +855,7 @@
     margin-top: 20px;
   }
 }
+
 .pagination-wrap {
   margin-top: 24px;
 }
@@ -738,19 +867,23 @@
 .infomation-box-wrap {
   display: flex;
   gap: 10px;
+
   .sub-table-box {
     flex: 1;
   }
+
   .info-title {
     font-size: 14px;
     font-weight: 500;
     color: #344356;
     margin-bottom: 10px;
   }
+
   .info-inner {
     position: relative;
     font-size: 13px;
     color: #344356;
+
     .copy-ico {
       position: absolute;
       bottom: 0;
@@ -768,6 +901,7 @@
   display: flex;
   align-items: center;
   margin-bottom: 10px;
+
   &.one {
     .estimate-box {
       &:last-child {
@@ -775,14 +909,17 @@
       }
     }
   }
+
   .estimate-box {
     flex: 1;
     display: flex;
     align-items: center;
+
     &:last-child {
       flex: none;
       min-width: 220px;
     }
+
     .estimate-tit {
       width: 105px;
       height: 30px;
@@ -794,16 +931,19 @@
       font-weight: 500;
       color: #344356;
     }
+
     .estimate-name {
       font-size: 13px;
       color: #344356;
       margin-left: 14px;
       font-weight: 400;
+
       &.blue {
         font-size: 16px;
         font-weight: 700;
         color: #1083e3;
       }
+
       &.red {
         font-size: 16px;
         font-weight: 700;
@@ -811,6 +951,7 @@
       }
     }
   }
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -819,9 +960,11 @@
 // file drag box
 .drag-file-box {
   padding: 10px;
+
   .btn-area {
     padding-bottom: 15px;
     border-bottom: 1px solid #ecf0f4;
+
     .file-upload {
       display: inline-block;
       height: 30px;
@@ -834,14 +977,17 @@
       font-weight: 500;
       cursor: pointer;
       transition: background 0.15s ease-in-out;
+
       &:hover {
         background-color: #607f9a;
       }
     }
   }
+
   .drag-file-area {
     position: relative;
     margin-top: 15px;
+
     p {
       position: absolute;
       top: 50%;
@@ -853,9 +999,11 @@
       cursor: default;
     }
   }
+
   .file-list {
     .file-item {
       margin-bottom: 15px;
+
       span {
         position: relative;
         font-size: 13px;
@@ -863,6 +1011,7 @@
         font-weight: 400;
         white-space: nowrap;
         padding-right: 55px;
+
         button {
           position: absolute;
           top: 50%;
@@ -874,6 +1023,7 @@
           background-size: cover;
         }
       }
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -892,22 +1042,27 @@
   background-image: url(../../public/static/images/canvas/estiment_arr.svg);
   background-size: 11px 7px;
   border-radius: 2px;
+
   &.up {
     rotate: 180deg;
   }
+
   &.on {
     background-color: #fff;
     border-color: #c2d0dd;
     background-image: url(../../public/static/images/canvas/estiment_arr_color.svg);
   }
 }
+
 .estimate-check-wrap {
   .estimate-check-inner {
     display: block;
   }
+
   &.hide {
     border-bottom: 1px solid #ecf0f4;
     margin-bottom: 15px;
+
     .estimate-check-inner {
       display: none;
     }
@@ -919,11 +1074,13 @@
   grid-template-columns: repeat(5, 1fr);
   border-radius: 3px;
   margin-bottom: 30px;
+
   .special-note-check-item {
     padding: 14px 10px;
     border: 1px solid #ecf0f4;
     margin-top: -1px;
     margin-right: -1px;
+
     &.act {
       background-color: #f7f9fa;
     }
@@ -937,38 +1094,47 @@
   max-height: 350px;
   overflow-y: auto;
   margin-bottom: 30px;
+
   dl {
     margin-bottom: 35px;
+
     &:last-child {
       margin-bottom: 0;
     }
+
     dt {
       font-size: 13px;
       font-weight: 600;
       color: #1083e3;
       margin-bottom: 15px;
     }
+
     dd {
       font-size: 12px;
       font-weight: 400;
       color: #45576f;
       margin-bottom: 8px;
+
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
+
   &::-webkit-scrollbar {
     width: 4px;
     background-color: transparent;
   }
+
   &::-webkit-scrollbar-thumb {
     background-color: #d9dee2;
   }
+
   &::-webkit-scrollbar-track {
     background-color: transparent;
   }
 }
+
 .esimate-wrap {
   margin-bottom: 20px;
 }
@@ -977,27 +1143,33 @@
   display: flex;
   align-items: center;
   margin-bottom: 15px;
+
   .product-price-wrap {
     display: flex;
     align-items: center;
+
     .product-price-tit {
       font-size: 13px;
       font-weight: 400;
       color: #45576f;
       margin-right: 10px;
     }
+
     .select-wrap {
       width: 110px;
     }
   }
+
   .product-edit-wrap {
     display: flex;
     align-items: center;
     margin-left: auto;
+
     .product-edit-explane {
       display: flex;
       align-items: center;
       margin-right: 15px;
+
       .explane-item {
         position: relative;
         display: flex;
@@ -1005,6 +1177,7 @@
         padding: 0 10px;
         font-size: 12px;
         font-weight: 400;
+
         span {
           width: 20px;
           height: 20px;
@@ -1013,6 +1186,7 @@
           background-repeat: no-repeat;
           background-position: center;
         }
+
         &:before {
           content: '';
           position: absolute;
@@ -1023,55 +1197,71 @@
           height: 12px;
           background-color: #d9d9d9;
         }
+
         &:first-child {
           padding-left: 0;
+
           &::before {
             display: none;
           }
         }
+
         &:last-child {
           padding-right: 0;
         }
+
         &.item01 {
           color: #3bbb48;
+
           span {
             background-image: url(../../public/static/images/sub/open_ico.svg);
           }
         }
+
         &.item02 {
           color: #909000;
+
           span {
             background-image: url(../../public/static/images/sub/change_ico.svg);
           }
         }
+
         &.item03 {
           color: #0191c9;
+
           span {
             background-image: url(../../public/static/images/sub/attachment_ico.svg);
           }
         }
+
         &.item04 {
           color: #f16a6a;
+
           span {
             background-image: url(../../public/static/images/sub/click_check_ico.svg);
           }
         }
       }
     }
+
     .product-edit-btn {
       display: flex;
       align-items: center;
+
       button {
         display: flex;
         align-items: center;
+
         span {
           width: 13px;
           height: 13px;
           margin-right: 5px;
           background-size: cover;
+
           &.plus {
             background: url(../../public/static/images/sub/plus_btn.svg) no-repeat center;
           }
+
           &.minus {
             background: url(../../public/static/images/sub/minus_btn.svg) no-repeat center;
           }
@@ -1086,22 +1276,28 @@
   display: flex;
   gap: 20px;
   width: 100%;
+
   .sub-table-box {
     height: 100%;
   }
+
   .chart-inner {
     flex: 1;
+
     .chart-box {
       margin-bottom: 30px;
     }
   }
+
   .chart-table-wrap {
     display: flex;
     flex-direction: column;
     flex: none;
     width: 650px;
+
     .sub-table-box {
       flex: 1;
+
       &:first-child {
         margin-bottom: 20px;
       }
@@ -1115,6 +1311,7 @@
     border-collapse: collapse;
     border: 1px solid #ecf0f4;
     border-radius: 4px;
+
     thead {
       th {
         padding: 4.5px 0;
@@ -1126,6 +1323,7 @@
         background-color: #f8f9fa;
       }
     }
+
     tbody {
       td {
         font-size: 13px;
@@ -1140,10 +1338,12 @@
 .simulation-guide-wrap {
   display: flex;
   padding: 20px;
+
   .simulation-tit-wrap {
     flex: none;
     padding-right: 40px;
     border-right: 1px solid #eeeeee;
+
     span {
       display: block;
       position: relative;
@@ -1151,6 +1351,7 @@
       font-size: 15px;
       color: #14324f;
       font-weight: 600;
+
       &::before {
         content: '';
         position: absolute;
@@ -1164,27 +1365,33 @@
       }
     }
   }
+
   .simulation-guide-box {
     flex: 1;
     padding-left: 40px;
+
     dl {
       margin-bottom: 25px;
+
       dt {
         font-size: 13px;
         color: #101010;
         font-weight: 600;
         margin-bottom: 5px;
       }
+
       dd {
         font-size: 12px;
         color: #45576f;
         font-weight: 400;
         line-height: 24px;
       }
+
       &:last-child {
         margin-bottom: 0;
       }
     }
+
     ul,
     ol {
       list-style: unset;
@@ -1200,6 +1407,7 @@
   margin-right: 4px;
   border: 1px solid #ecf0f4;
   border-top: none;
+
   .total-title {
     flex: 1;
     text-align: center;
@@ -1207,6 +1415,7 @@
     color: #344356;
     font-weight: 500;
   }
+
   .total-num {
     flex: none;
     width: 121px;
@@ -1224,12 +1433,14 @@
   background-color: #f4f4f4;
   border-radius: 4px;
   margin-bottom: 15px;
+
   .information-help-tit-wrap {
     position: relative;
     display: flex;
     align-items: center;
     padding-right: 40px;
     border-right: 1px solid #e0e0e3;
+
     .help-tit-icon {
       width: 40px;
       height: 40px;
@@ -1238,20 +1449,24 @@
       background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
       background-size: 20px 20px;
     }
+
     .help-tit {
       font-size: 13px;
       font-weight: 600;
       color: #45576f;
     }
   }
+
   .information-help-guide {
     padding-left: 40px;
+
     span {
       display: block;
       font-size: 12px;
       font-weight: 400;
       color: #45576f;
       margin-bottom: 7px;
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -1266,6 +1481,7 @@
   padding: 10px 0 30px 0;
   border-bottom: 1px solid #e5e5e5;
   margin-bottom: 24px;
+
   .community-search-box {
     position: relative;
     display: flex;
@@ -1276,16 +1492,19 @@
     margin-bottom: 20px;
     border-radius: 2px;
     border: 1px solid #101010;
+
     .community-input {
       width: 100%;
       height: 100%;
       font-size: 13px;
       font-weight: 400;
       color: #101010;
+
       &::placeholder {
         color: #c8c8c8;
       }
     }
+
     .community-search-ico {
       position: absolute;
       top: 50%;
@@ -1299,10 +1518,12 @@
       z-index: 3;
     }
   }
+
   .community-search-keyword {
     font-size: 13px;
     font-weight: 400;
     color: #45576f;
+
     span {
       font-weight: 600;
       color: #f16a6a;
@@ -1315,6 +1536,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
+
   .file-down-item {
     display: flex;
     align-items: center;
@@ -1323,6 +1545,7 @@
     border: 1px solid #e5e5e5;
     background: #fff;
     transition: all 0.15s ease-in-out;
+
     .file-item-info {
       .item-num {
         display: inline-block;
@@ -1334,24 +1557,28 @@
         color: #101010;
         margin-bottom: 15px;
       }
+
       .item-name {
         font-size: 16px;
         color: #101010;
         font-weight: 500;
         margin-bottom: 13px;
       }
+
       .item-date {
         font-size: 13px;
         font-weight: 400;
         color: #344356;
       }
     }
+
     .file-down-box {
       display: flex;
       align-items: center;
       flex: none;
       margin-left: auto;
       height: 100%;
+
       .file-down-btn {
         width: 36px;
         height: 36px;
@@ -1359,6 +1586,7 @@
         background-size: cover;
       }
     }
+
     &:hover {
       background-color: #f4f4f7;
     }
@@ -1388,6 +1616,7 @@
   background-color: #fafafa;
   border: 1px solid #eee;
   padding: 0 10px;
+
   input {
     font-size: 13px;
     font-weight: 400;
@@ -1398,6 +1627,7 @@
     flex: 1;
     background-color: inherit;
   }
+
   .product-delete {
     flex: none;
     display: block;
@@ -1417,6 +1647,7 @@
             margin-right: 5px;
           }
         }
+
         .canvas-menu-item {
           button {
             padding: 15px 15px;
@@ -1425,6 +1656,7 @@
         }
       }
     }
+
     .canvas-depth2-wrap {
       .canvas-depth2-inner {
         .canvas-depth2-list {
@@ -1455,6 +1687,7 @@
     .canvas-frame {
       height: calc(100vh - 129.5px);
     }
+
     &.active {
       .canvas-frame {
         height: calc(100vh - 179.5px);
@@ -1474,18 +1707,22 @@
           }
         }
       }
+
       .canvas-side-btn-wrap {
         .btn-from {
           gap: 3px;
         }
+
         .vertical-horizontal {
           margin-right: 3px;
           min-width: 150px;
         }
+
         .select-box {
           width: 100px;
           margin: 0 3px;
         }
+
         .size-control {
           width: 90px;
           margin: 0 3px;
@@ -1498,6 +1735,7 @@
       .sub-header-title {
         font-size: 15px;
       }
+
       .sub-header-title-wrap {
         .title-item {
           a {