- Qselect -> QSelectBox 이름 수정

src/components/common/select/QSelectBox.jsx

@@ -1,7 +1,7 @@
 'use client'
 import { useState } from 'react'
 
-export default function QSelect({ title, option }) {
+export default function QSelectBox({ title, option }) {
   const [selectAct, setSelectAct] = useState(false)
 
   return (
@@ -13,7 +13,6 @@ export default function QSelect({ title, option }) {
             <button>{el.name}</button>
           </li>
         ))}
-        s
       </ul>
     </div>
   )

src/components/floor-plan/CanvasMenu.jsx

@@ -1,7 +1,7 @@
 'use client'
 import { useState } from 'react'
-import Qselect from '../common/select/Qselect'
 import MenuDepth01 from './MenuDepth01'
+import QSelectBox from '@/components/common/select/QSelectBox'
 
 export default function CanvasMenu({ setModalOpen }) {
   const [menuNumber, setMenuNumber] = useState(null)
@@ -64,7 +64,7 @@ export default function CanvasMenu({ setModalOpen }) {
             <button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
           </div>
           <div className="select-box">
-            <Qselect title={'瓦53A'} option={SelectOption} />
+            <QSelectBox title={'瓦53A'} option={SelectOption} />
           </div>
           <div className="btn-from">
             <button className="btn04" onClick={() => setModalOpen('option')}></button>

src/components/header/Header.jsx

@@ -1,6 +1,6 @@
 'use client'
 import Link from 'next/link'
-import QSelect from '@/components/common/select/QSelect'
+import QSelectBox from '@/components/common/select/QSelectBox'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -99,7 +99,7 @@ export default function Header() {
             <button className="sign-out">ログアウト</button>
           </div>
           <div className="select-box">
-            <QSelect title={'Q.ORDER'} option={SelectOption} />
+            <QSelectBox title={'Q.ORDER'} option={SelectOption} />
           </div>
           <div className="btn-wrap">
             <button className="btn-frame small dark">移動</button>

src/styles/_contents.scss

@@ -176,6 +176,33 @@
         }
       }
 
+      .vertical-horizontal {
+        display: flex;
+        min-width: 170px;
+        height: 28px;
+        margin: 0 5px;
+        border-radius: 2px;
+        background: #373737;
+        line-height: 28px;
+        overflow: hidden;
+
+        span {
+          padding: 0 10px;
+          font-size: 13px;
+          color: #fff;
+        }
+
+        button {
+          margin-left: auto;
+          height: 100%;
+          background-color: #4B4B4B;
+          font-size: 13px;
+          font-weight: 400;
+          color: #fff;
+          padding: 0 7.5px;
+        }
+      }
+
       .size-control {
         display: flex;
         align-items: center;
@@ -416,7 +443,7 @@
 
 .canvas-frame {
   position: relative;
-  height: calc(100% - 35.5px);
+  height: calc(100% - 36.5px);
 
   canvas {
     position: absolute;