From a721eb8bf7b59c629a2dabf1aa5c02494f2081e8 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Tue, 10 Sep 2024 13:44:11 +0900
Subject: [PATCH] =?UTF-8?q?-=20Qselect=20->=20QSelectBox=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../select/{QSelect.jsx => QSelectBox.jsx}    |  3 +-
 src/components/floor-plan/CanvasMenu.jsx      |  4 +--
 src/components/header/Header.jsx              |  4 +--
 src/styles/_contents.scss                     | 29 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 7 deletions(-)
 rename src/components/common/select/{QSelect.jsx => QSelectBox.jsx} (87%)

diff --git a/src/components/common/select/QSelect.jsx b/src/components/common/select/QSelectBox.jsx
similarity index 87%
rename from src/components/common/select/QSelect.jsx
rename to src/components/common/select/QSelectBox.jsx
index 82315d2c..6e77a539 100644
--- a/src/components/common/select/QSelect.jsx
+++ b/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>
   )
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index ae3fa0eb..4533747a 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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>
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index c1cf49cb..f7469fca 100644
--- a/src/components/header/Header.jsx
+++ b/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>
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 7c03e853..b9dbe68e 100644
--- a/src/styles/_contents.scss
+++ b/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;