🚨chore: Sync Sass

public/static/images/canvas/hide-check-arr.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0L15.7942 13.5H0.205771L8 0Z" fill="white"/>
+</svg>

src/styles/_contents.scss

@@ -340,6 +340,14 @@
         &.active{
             top: calc(92.8px + 50px);
         }
+        .canvas-id{
+            display: flex;
+            align-items: center;
+            padding: 9.6px 20px;
+            font-size: 12px;
+            color: #fff;
+            background-color: #1083E3;
+        }
         .canvas-plane-wrap{
             display: flex;
             align-items: center;

src/styles/_modal.scss

@@ -279,10 +279,11 @@ $alert-color: #101010;
         border-bottom: 1px solid #424242;
     }
 }
-.grid-check-form-block{
+.grid-check-form-flex{
-    display: block;
+    display: flex;
-    > div{
+    gap: 10px;
-        margin-bottom: 10px;
+    .d-check-box{
+        flex: 1;
     }
 }
 .grid-option-overflow{
@@ -1313,13 +1314,13 @@ $alert-color: #101010;
     
     .circle {
         position: absolute;
-        width: 12px;
+        width: 10px;
-        height: 12px;
+        height: 10px;
         border: 1px solid #fff;
         border-radius: 50%;
-        top: 95%;
+        top: 88%;
         left: 50%;
-        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+        transform-origin: 0 -76px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
         cursor:pointer;
         z-index: 3;
         /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
@@ -1366,8 +1367,8 @@ $alert-color: #101010;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
-                width: 5px;
+                width: 4px;
-                height: 5px;
+                height: 4px;
                 background-color: #fff;
                 border-radius: 50%;
             }
@@ -1381,15 +1382,15 @@ $alert-color: #101010;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 148px;
+        width: 121px;
-        height: 148px;
+        height: 121px;
         border: 4px solid #fff;
         border-radius: 50%;
         .compas-arr{
             width: 100%;
             height: 100%;
             background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
-            background-size: 122px 122px;
+            background-size: 100px 100px;
         }
     }
 }
@@ -1441,10 +1442,10 @@ $alert-color: #101010;
 .roof-module-compas{
     margin-bottom: 24px;
     .compas-box-inner{
-        width: 280px;
+        width: 235px;
-        height: 253px;
+        height: 215px;
         .circle{
-            top: 86%;
+            top: 85%;
             // &:nth-child(1),
             // &:nth-child(7),
             // &:nth-child(13),
@@ -1461,7 +1462,7 @@ $alert-color: #101010;
             //     }
             // }
             i{
-                top: 22px;
+                top: 19px;
             }
             &.act{
                 i{color: #8B8B8B;}
@@ -1482,6 +1483,10 @@ $alert-color: #101010;
     .outline-form{
         flex: 1;
     }
+    .non-flex{
+        min-width: 300px;
+        flex: none;
+    }
 }
 
 .module-box-tab{
@@ -2183,14 +2188,20 @@ $alert-color: #101010;
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 8px;
-            margin-bottom: 24px;
+            margin-bottom: 10px;
         }
         &.non-flex{
             display: flex;
             flex-direction: column;
             justify-content: flex-start;
             flex: none;
-            width: 260px;
+            width: 340px;
+        }
+        .flex-item-button{
+            margin-top: 10px;
+            button{
+                width: 100%;
+            }
         }
     }
 }
@@ -2326,7 +2337,7 @@ $alert-color: #101010;
             grid-template-columns: repeat(2, 1fr);
             .outline-form{
                 span{
-                    width: 60px;
+                    width: 65px;
                     &.thin{
                         width: 20px;
                     }
@@ -2336,6 +2347,7 @@ $alert-color: #101010;
     }
 }
 
+
 .module-table-block-wrap{
     .roof-module-table{
         &.self{
@@ -2372,3 +2384,42 @@ $alert-color: #101010;
     color: #53a7eb;
     font-weight: 500;
 }
+
+.hexagonal-flex-wrap{
+    display: flex;
+    gap: 10px;
+    .non-flex{
+        flex: none;
+    }
+}
+
+.hexagonal-radio-wrap{
+    padding: 17px 10px;
+}
+
+.hide-check-guide{
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #fff;
+    margin-top: 10px;
+    font-weight: 500;
+    .arr{
+        width: 13px;
+        height: 13px;
+        margin-left: 10px;
+        background: url(../../public/static/images/canvas/hide-check-arr.svg) no-repeat center;
+        background-size: contain;
+        transform: rotate(180deg);
+        &.act{
+            transform: rotate(0deg);
+        }
+    }
+}
+
+.module-table-box{
+    &.hide{
+        overflow: hidden;
+        height: 0;
+    }
+}

src/styles/_reset.scss

@@ -222,15 +222,16 @@ button{
         padding: 0 10px;
         line-height: 28px;
         font-family: 'Noto Sans JP', sans-serif;
-        background-color: transparent;
+        background-color: #353535;
         border: 1px solid #484848;
         color: #fff;
         &.blue{
             background-color: #4C6FBF;
             border: 1px solid #4C6FBF;
             &:hover{
-                background-color: #414E6C;
+                background-color: #4C6FBF;
-                border: 1px solid #414E6C;
+                border: 1px solid #4C6FBF;
+                font-weight: normal;
             }
         }
         &.white{
@@ -241,13 +242,14 @@ button{
                 background-color: #fff;
                 border: 1px solid #fff;
                 color: #101010;
+                font-weight: normal;
             }
         }
         &:hover{
-            font-weight: 400;
+            background-color: #353535;
-            background-color: transparent;
             border: 1px solid #484848;
             color: #fff;
+            font-weight: normal;
         }
     }
     &.self{

src/styles/_table.scss

@@ -236,6 +236,16 @@ table{
                 .d-check-box{
                     opacity: 0.5;
                 }
+                .color-wrap{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    .color-box{
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 8px;
+                    }
+                }
             }
         }
         tbody{