배치면 초기설정 select 수정

src/app/canvas/page.jsx

@@ -8,6 +8,7 @@ import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
 import GridMove from '@/components/canvas/modal/gridoption/GridMove'
 import GridOption from '@/components/canvas/modal/gridoption/GridOption'
 import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape'
+import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown'
 import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
 import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
 import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
@@ -32,15 +33,15 @@ export default function CanvasPage() {
                         <CanvasLayout menuValue={menuValue}/>
                     </div>
                     {/* 배치면 초기 설정 */}
-                    {/* <PlacementSettingPop/> */}
+                    <PlacementSettingPop/>
 
                     {/* 캔버스 기본 셋팅 */}
                     {/* {modalOption.option && <SettingModal01/>} */}
 
                     {/* 점·선 그리드 설정 */}
                     {modalOption.gridoption && <GridOption/>}
-                    {modalOption.gridcopy && <GridCopy/>}
+                    {/* {modalOption.gridcopy && <GridCopy/>} */}
-                    {modalOption.gridmove && <GridMove/>}
+                    {/* {modalOption.gridmove && <GridMove/>} */}
 
                     {/* 외벽선 그리기 */}
                     {/* {modalOption.outerwall && <OuterLineWall/>} */}
@@ -59,6 +60,9 @@ export default function CanvasPage() {
 
                     {/* 처마∙케라바 변경 */}
                     {/* <EvaseKerabaOption/> */}
+
+                    {/* 동선이동∙형 올림 내림 */}
+                    {/* <MovingUpDonw/> */}
                 </div>
             </div>
         </div>

src/components/canvas/modal/gridoption/GridOption.jsx

@@ -9,7 +9,7 @@ export default function GridOption() {
     const [close, setClose] = useState(false)
 
     const SelectOption = [
-        {name: 'オンライン保証シ',}, {name: 'ステム'}
+        {name: '原寸',}, {name: '原寸'}, {name: '原寸'}, {name: '原寸'}
     ]
 
     const HandleClickClose = () => {

src/components/canvas/modal/movingupdown/MovingTab01.jsx

@@ -0,0 +1,46 @@
+import Image from "next/image";
+
+export default function MovingTab01(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="guide">
+                    家屋などの壁に面する屋根を作成します。
+                </div>
+                <div className="eaves-keraba-table">
+                    <div className="eaves-keraba-item">
+                        <div className="eaves-keraba-th">
+                            <div className="d-check-radio pop">
+                                <input type="radio" name="radio01" id="ra01" />
+                                <label htmlFor="ra01">高さ変更：下、左</label>
+                            </div>
+                        </div>
+                        <div className="eaves-keraba-td">
+                            <div className="outline-form">
+                                <div className="input-grid mr5" style={{width: '100px'}}>
+                                    <input type="text" className="input-origin block" defaultValue={100}/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="eaves-keraba-item">
+                        <div className="eaves-keraba-th">
+                            <div className="d-check-radio pop">
+                                <input type="radio" name="radio01" id="ra02" />
+                                <label htmlFor="ra02">高さ変更：上、右</label>
+                            </div>
+                        </div>
+                        <div className="eaves-keraba-td">
+                            <div className="outline-form">
+                                <div className="input-grid mr5" style={{width: '100px'}}>
+                                    <input type="text" className="input-origin block" defaultValue={100}/>
+                                </div>
+                                <span className="thin">mm</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/canvas/modal/movingupdown/MovingTab02.jsx

@@ -0,0 +1,46 @@
+import Image from "next/image";
+
+export default function MovingTab02(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="guide">
+                    を選択して幅を指定してください桁の異なる辺
+                </div>
+                <div className="eaves-keraba-table">
+                    <div className="eaves-keraba-item">
+                        <div className="eaves-keraba-th">
+                            <div className="d-check-radio pop">
+                                <input type="radio" name="radio01" id="ra01" />
+                                <label htmlFor="ra01">高さ変更：下、左</label>
+                            </div>
+                        </div>
+                        <div className="eaves-keraba-td">
+                            <div className="outline-form">
+                                <div className="input-grid mr5" style={{width: '100px'}}>
+                                    <input type="text" className="input-origin block" defaultValue={100}/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="eaves-keraba-item">
+                        <div className="eaves-keraba-th">
+                            <div className="d-check-radio pop">
+                                <input type="radio" name="radio01" id="ra02" />
+                                <label htmlFor="ra02">高さ変更：上、右</label>
+                            </div>
+                        </div>
+                        <div className="eaves-keraba-td">
+                            <div className="outline-form">
+                                <div className="input-grid mr5" style={{width: '100px'}}>
+                                    <input type="text" className="input-origin block" defaultValue={100}/>
+                                </div>
+                                <span className="thin">mm</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/canvas/modal/movingupdown/MovingUpDown.jsx

@@ -0,0 +1,43 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import { useState } from "react";
+import MovingTab01 from "./MovingTab01";
+
+const buttonMenu = [
+    {id: 1, name: '銅線の移動軒'},
+    {id: 2, name: '型上げ・降り'},
+]
+
+export default function MovingUpDonw(){
+    const [buttonAct, setButtonAct] = useState(1);
+
+    return(
+            <div className={`modal-pop-wrap r`}>
+                <div className="modal-head">
+                <h1 className="title">軒・ケラバ変更</h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="modal-btn-wrap">
+                        {buttonMenu.map((item) => (
+                            <button 
+                            key={item.id}
+                            className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} 
+                            onClick={() => setButtonAct(item.id)}
+                            >
+                                {item.name}
+                            </button>
+                        ))}
+                    </div>
+                    <div className="properties-setting-wrap outer">
+                        <div className="setting-tit">設定</div>
+                        {buttonAct === 1 && <MovingTab01/>}
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        // <WithDraggable isShow={true}>
+        // </WithDraggable>
+    )
+}

src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx

@@ -1,9 +1,21 @@
 import WithDraggable from "@/components/common/draggable/withDraggable";
 import PlacementGuidePop from "./PlacementGuidePop";
 import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
+import Qselect from "@/components/common/select/Qselect";
+const SelectOption01 = [
+    {name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
+]
+const SelectOption02 = [
+    {name: '265',}, {name: '265'}, {name: '265'}, {name: '265'}
+]
+const SelectOption03 = [
+    {name: '235',}, {name: '235'}, {name: '235'}, {name: '235'}
+]
+const SelectOption04 = [
+    {name: '455'}, {name: '455'}, {name: '455'}, {name: '455'}
+]
 
 export default function PlacementSettingPop(){
-
     return(
         <WithDraggable isShow={true}>
             <div className={`modal-pop-wrap l`}>
@@ -64,33 +76,25 @@ export default function PlacementSettingPop(){
                                     </th>
                                     <td>
                                         <div className="placement-option">
-                                            <div className="select-wrap" style={{width: '171px'}}>
+                                            <div className="grid-select" style={{width: '171px'}}>
-                                                <select className="select-light dark" name="" id="" >
+                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
-                                                    <option>瓦53A</option>
-                                                </select>
                                             </div>
                                             <div className="flex-ment">
                                                 <span>W</span>
-                                                <div className="select-wrap" style={{width: '84px'}}>
+                                                <div className="grid-select" style={{width: '84px'}}>
-                                                    <select className="select-light dark" name="" id="" >
+                                                    <Qselect title={'265'} option={SelectOption02}/>
-                                                        <option>265</option>
-                                                    </select>
                                                 </div>
                                             </div>
                                             <div className="flex-ment">
                                                 <span>L</span>
-                                                <div className="select-wrap" style={{width: '84px'}}>
+                                                <div className="grid-select" style={{width: '84px'}}>
-                                                    <select className="select-light dark" name="" id="" >
+                                                    <Qselect title={'235'} option={SelectOption03}/>
-                                                        <option>235</option>
-                                                    </select>
                                                 </div>
                                             </div>
                                             <div className="flex-ment">
                                                 <span>垂木の間隔</span>
-                                                <div className="select-wrap" style={{width: '84px'}}>
+                                                <div className="grid-select right" style={{width: '84px'}}>
-                                                    <select className="select-light dark" name="" id="" >
+                                                    <Qselect title={'455'} option={SelectOption04}/>
-                                                        <option>455</option>
-                                                    </select>
                                                 </div>
                                             </div>
                                             
@@ -104,8 +108,8 @@ export default function PlacementSettingPop(){
                         <button className="btn-frame modal act">保存</button>
                     </div>
                 </div>
-                <PlacementGuidePop/>
+                {/* <PlacementGuidePop/>
-                <RoofingMaterialGudiePop/>
+                <RoofingMaterialGudiePop/> */}
             </div>
         </WithDraggable>
     )

src/styles/_modal.scss

@@ -26,7 +26,6 @@ $alert-color: #101010;
     border-radius: 4px;
     background-color: #272727;
     z-index: 9999999;
-    overflow: hidden;
     &.xxm{
         width: 270px;
     }
@@ -90,6 +89,7 @@ $alert-color: #101010;
     align-items: center;
     padding: 10px 24px;
     background-color: #000;
+    // overflow: hidden;
     h1.title{
         font-size: 13px;
         color: $pop-color;
@@ -97,8 +97,8 @@ $alert-color: #101010;
     }
     .modal-close{
         margin-left: auto;
-        color: $pop-color;
+        color: transparent;
-        text-indent: -999999999px;
+        font-size: 0;
         width: 10px;
         height: 10px;
         background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
@@ -247,6 +247,25 @@ $alert-color: #101010;
     .sort-select{
         width: 100%;
         background-color: #313131;
+        min-width: auto;
+        font-size: 12px;
+        border: none;
+        p{
+            font-size: 12px;
+        }
+        > ul{
+            border: none;
+        }
+    }
+    &.right{
+        p{
+            text-align: right;
+        }
+        ul{
+            li{
+                justify-content: flex-end;
+            }
+        }
     }
 }
 .grid-btn-wrap{

src/styles/_reset.scss

@@ -264,7 +264,7 @@ button{
     min-width: 100px;
     height: 30px;
     line-height: 30px;
-    padding: 0 10px;
+    padding: 0 25px 0 10px;
     background-color: #373737;
     border: 1px solid #3F3F3F;
     border-radius: 2px;