- 메뉴 추가 및 스타일 적용

public/static/images/canvas/arr_btn_ico_white.svg

@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.5L3.5 4L1 1.5" stroke="white" stroke-width="1.5"/>
+</svg>

public/static/images/canvas/ico-flx01.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 8.875L7 1.375M7 8.875C6.47483 8.875 5.49365 7.37927 5.125 7M7 8.875C7.52517 8.875 8.50635 7.37927 8.875 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 10.375C13 12.2365 12.6115 12.625 10.75 12.625H3.25C1.3885 12.625 1 12.2365 1 10.375" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/static/images/canvas/ico-flx02.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Icon" d="M3.625 12.25V8.875C3.625 8.46079 3.96079 8.125 4.375 8.125H9.625C10.0392 8.125 10.375 8.46079 10.375 8.875V12.625M8.875 4L4.375 4C3.96079 4 3.625 3.66421 3.625 3.25L3.625 1M12.6234 3.62342L10.3766 1.37658C10.1355 1.13546 9.80844 1 9.46745 1H2.28571C1.57563 1 1 1.57563 1 2.28571V11.7143C1 12.4244 1.57563 13 2.28571 13H11.7143C12.4244 13 13 12.4244 13 11.7143V4.53255C13 4.19156 12.8645 3.86454 12.6234 3.62342Z" stroke="white" stroke-linecap="round"/>
+</g>
+</svg>

public/static/images/canvas/ico-flx03.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M11.8055 1V2.87932C11.8055 3.05563 11.5851 3.13545 11.4722 3C10.3736 1.7725 8.777 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

public/static/images/canvas/ico-flx04.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Rectangle 1705" d="M9.99992 5.2C9.99853 3.42574 9.97165 2.50673 9.45523 1.87746C9.3555 1.75593 9.24407 1.64451 9.12254 1.54478C8.45873 1 7.47249 1 5.5 1C3.52751 1 2.54127 1 1.87746 1.54477C1.75593 1.6445 1.64451 1.75593 1.54478 1.87746C1 2.54127 1 3.52751 1 5.5C1 7.47249 1 8.45873 1.54477 9.12254C1.6445 9.24406 1.75593 9.35549 1.87746 9.45522C2.50672 9.97165 3.42574 9.99852 5.2 9.99992" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M8.20019 4.69995C7.92405 4.69995 7.70019 4.92381 7.70019 5.19995C7.70019 5.47609 7.92405 5.69995 8.20019 5.69995V4.69995ZM10.0002 5.69995C10.2763 5.69995 10.5002 5.47609 10.5002 5.19995C10.5002 4.92381 10.2763 4.69995 10.0002 4.69995V5.69995ZM5.7002 8.19995C5.7002 7.92381 5.47634 7.69995 5.2002 7.69995C4.92405 7.69995 4.7002 7.92381 4.7002 8.19995H5.7002ZM4.7002 9.99995C4.7002 10.2761 4.92405 10.5 5.2002 10.5C5.47634 10.5 5.7002 10.2761 5.7002 9.99995H4.7002ZM6.74147 5.69571C7.01527 5.6598 7.20812 5.40874 7.17222 5.13494C7.13631 4.86114 6.88525 4.66829 6.61145 4.7042L6.74147 5.69571ZM5.65369 5.57581L5.33604 5.18967L5.33604 5.18967L5.65369 5.57581ZM4.70999 6.30149C4.65561 6.57222 4.831 6.83578 5.10173 6.89016C5.37247 6.94454 5.63602 6.76915 5.6904 6.49841L4.70999 6.30149ZM12.51 6.49841C12.5644 6.76915 12.8279 6.94454 13.0987 6.89016C13.3694 6.83578 13.5448 6.57222 13.4904 6.30149L12.51 6.49841ZM12.5467 5.57581L12.2291 5.96194L12.2291 5.96194L12.5467 5.57581ZM11.5889 4.7042C11.3151 4.66829 11.0641 4.86114 11.0282 5.13494C10.9923 5.40874 11.1851 5.6598 11.4589 5.69571L11.5889 4.7042ZM11.4589 12.5042C11.1851 12.5401 10.9923 12.7912 11.0282 13.065C11.0641 13.3388 11.3151 13.5316 11.5889 13.4957L11.4589 12.5042ZM12.5467 12.6241L12.8644 13.0102L12.5467 12.6241ZM13.4904 11.8984C13.5448 11.6277 13.3694 11.3641 13.0987 11.3097C12.8279 11.2554 12.5644 11.4308 12.51 11.7015L13.4904 11.8984ZM5.6904 11.7015C5.63603 11.4308 5.37247 11.2554 5.10173 11.3097C4.831 11.3641 4.65561 11.6277 4.70999 11.8984L5.6904 11.7015ZM5.65369 12.6241L5.97133 12.238L5.97133 12.238L5.65369 12.6241ZM6.61145 13.4957C6.88525 13.5316 7.13631 13.3388 7.17222 13.065C7.20812 12.7912 7.01527 12.5401 6.74147 12.5042L6.61145 13.4957ZM8.2002 12.5C7.92405 12.5 7.7002 12.7238 7.7002 13C7.7002 13.2761 7.92405 13.5 8.2002 13.5V12.5ZM10.0002 13.5C10.2763 13.5 10.5002 13.2761 10.5002 13C10.5002 12.7238 10.2763 12.5 10.0002 12.5V13.5ZM13.5002 8.19995C13.5002 7.92381 13.2763 7.69995 13.0002 7.69995C12.7241 7.69995 12.5002 7.92381 12.5002 8.19995H13.5002ZM12.5002 9.99995C12.5002 10.2761 12.7241 10.5 13.0002 10.5C13.2763 10.5 13.5002 10.2761 13.5002 9.99995H12.5002ZM8.20019 5.69995H10.0002V4.69995H8.20019V5.69995ZM4.7002 8.19995V9.99995H5.7002V8.19995H4.7002ZM6.61145 4.7042C6.11761 4.76895 5.68947 4.89892 5.33604 5.18967L5.97133 5.96194C6.12045 5.83927 6.33772 5.74865 6.74147 5.69571L6.61145 4.7042ZM5.6904 6.49841C5.7466 6.21864 5.83549 6.07369 5.97133 5.96194L5.33604 5.18967C4.97719 5.48487 4.79851 5.86077 4.70999 6.30149L5.6904 6.49841ZM13.4904 6.30149C13.4019 5.86077 13.2232 5.48487 12.8644 5.18967L12.2291 5.96194C12.3649 6.07369 12.4538 6.21864 12.51 6.49841L13.4904 6.30149ZM11.4589 5.69571C11.8627 5.74865 12.0799 5.83927 12.2291 5.96194L12.8644 5.18967C12.5109 4.89892 12.0828 4.76895 11.5889 4.7042L11.4589 5.69571ZM11.5889 13.4957C12.0828 13.4309 12.5109 13.301 12.8644 13.0102L12.2291 12.238C12.0799 12.3606 11.8627 12.4513 11.4589 12.5042L11.5889 13.4957ZM12.51 11.7015C12.4538 11.9813 12.3649 12.1262 12.2291 12.238L12.8644 13.0102C13.2232 12.715 13.4019 12.3391 13.4904 11.8984L12.51 11.7015ZM4.70999 11.8984C4.79851 12.3391 4.97719 12.715 5.33604 13.0102L5.97133 12.238C5.83548 12.1262 5.7466 11.9813 5.6904 11.7015L4.70999 11.8984ZM6.74147 12.5042C6.33771 12.4512 6.12045 12.3606 5.97133 12.238L5.33604 13.0102C5.68947 13.301 6.11761 13.4309 6.61145 13.4957L6.74147 12.5042ZM8.2002 13.5H10.0002V12.5H8.2002V13.5ZM12.5002 8.19995V9.99995H13.5002V8.19995H12.5002Z" fill="white"/>
+</g>
+</svg>

src/components/floor-plan/FloorPlan.jsx

@@ -1,9 +1,10 @@
 'use client'
 
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
-import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 import SettingModal01 from '@/components/floor-plan/modal/settoing01/SettingModal01'
 import { useState } from 'react'
+import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import '@/styles/contents.scss'
 
 export default function FloorPlan() {
   const [modalOpen, setModalOpen] = useState('option')

src/styles/_contents.scss

@@ -131,7 +131,7 @@
           transition: all .17s ease-in-out;
 
           &.btn01 {
-            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
           }
 
           &.btn02 {
@@ -139,7 +139,7 @@
           }
 
           &.btn03 {
-            background-image: url(../../public/static/images/canvas/side_icon03.svg);
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
           }
 
           &.btn04 {
@@ -176,6 +176,39 @@
         }
       }
 
+      .ico-btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        button {
+          .ico {
+            display: block;
+            width: 14px;
+            height: 14px;
+            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);
+            }
+          }
+        }
+      }
+
       .vertical-horizontal {
         display: flex;
         min-width: 170px;
@@ -200,6 +233,13 @@
           font-weight: 400;
           color: #fff;
           padding: 0 7.5px;
+          transition: all .17s ease-in-out;
+        }
+
+        &.on {
+          button {
+            background-color: #1083E3;
+          }
         }
       }
 

src/styles/_reset.scss

@@ -149,7 +149,7 @@ button {
 // button
 .btn-frame {
   display: inline-block;
-  padding: 0 10px;
+  padding: 0 9px;
   height: 34px;
   line-height: 34px;
   border-radius: 2px;
@@ -201,6 +201,7 @@ button {
     }
   }
 
+  &:hover,
   &.act {
     background-color: #1083E3;
     border: 1px solid #1083E3;
@@ -212,6 +213,20 @@ button {
     display: block;
     width: 100%;
   }
+
+  &.ico-flx {
+    display: flex;
+    align-items: center;
+
+    .ico {
+      margin-right: 10px;
+    }
+
+    &:hover,
+    &.act {
+      font-weight: 400;
+    }
+  }
 }
 
 // select
@@ -293,6 +308,16 @@ button {
 }
 
 // input
+.form-input {
+  label {
+    display: block;
+    color: #aaa;
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+}
+
 input[type=text] {
   &.input-origin {
     display: inline-block;
@@ -305,9 +330,15 @@ input[type=text] {
     font-weight: 500;
     font-family: 'Pretendard', sans-serif;
     padding: 0 10px;
+    letter-spacing: 0px;
 
     &::placeholder {
       font-size: 12px;
+      letter-spacing: 0px;
+    }
+
+    &.block {
+      width: 100%;
     }
   }
 }
@@ -428,4 +459,24 @@ input[type=text] {
       }
     }
   }
+
+  &.dark {
+    text-align: center;
+    background-color: #272727;
+    border: 1px solid #484848;
+
+    span {
+      color: #Fff;
+
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
+      }
+    }
+
+    &:hover,
+    &.act {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+    }
+  }
 }

src/styles/common.scss

@@ -1,2 +1,3 @@
 @import 'fonts.scss';
-@import 'reset.scss';
+@import 'reset.scss';
+@import '_layout.scss';

src/styles/contents.scss

@@ -0,0 +1,2 @@
+@import '_contents.scss';
+@import '_modal.scss';