지붕형상 수동 설정 팝업 추가

src/app/canvas/page.jsx

@@ -5,6 +5,7 @@ import CanvasMenu from '@/components/canvas/CanvasMenu'
 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 OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
 import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
 import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
@@ -47,6 +48,9 @@ export default function CanvasPage() {
 
                     {/* 지붕형상 설정 */}
                     {/* <RoofShapeOption/> */}
+
+                    {/* 지붕형상 수동 설정 */}
+                    {/* <ManualRoofShape/> */}
                 </div>
             </div>
         </div>

src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx

@@ -0,0 +1,50 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import { useState } from "react";
+import ManualTab01 from "./ManualTab01";
+
+const buttonMenu = [
+    {id: 1, name: '軒'},
+    {id: 2, name: 'ケラバ'},
+    {id: 3, name: '漂流'},
+]
+
+export default function ManualRoofShape(){
+    const [buttonAct, setButtonAct] = useState(1);
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xxm`}>
+                <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 
+                            className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} 
+                            onClick={() => setButtonAct(item.id)}
+                            >
+                                {item.name}
+                            </button>
+                        ))}
+                    </div>
+                    <div className="modal-bottom-border-bx">
+                        <div className="setting-tit">設定</div>
+                        <div className="discrimination-box">
+                            {buttonAct === 1 && <ManualTab01/>}
+                            {buttonAct === 2 && <ManualTab01/>}
+                            {buttonAct === 3 && <ManualTab01/>}
+                        </div>
+                        <div className="grid-btn-wrap">
+                            <button className="btn-frame sub-tab mr5">一変戦に戻る</button>
+                            <button className="btn-frame sub-tab act">適用</button>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">設定完了</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/manualroofshape/ManualTab01.jsx

@@ -0,0 +1,34 @@
+export default function ManualTab01() {
+    return(
+        <>
+            <div className="outline-form mb10">
+                <span className="mr10" style={{width: '63px'}}>傾斜</span>
+                <div className="input-grid mr5">
+                    <input type="text" className="input-origin block" defaultValue={100}/>
+                </div>
+                <span className="thin">寸法</span>
+            </div>
+            <div className="outline-form mb10">
+                <span className="mr10" style={{width: '63px'}}>軒の</span>
+                <div className="input-grid mr5">
+                    <input type="text" className="input-origin block" defaultValue={100}/>
+                </div>
+                <span className="thin">mm</span>
+            </div>
+            <div className="outline-form mb10">
+                <span className="mr10" style={{width: '63px'}}>ケラバ 出幅</span>
+                <div className="input-grid mr5">
+                    <input type="text" className="input-origin block" defaultValue={100}/>
+                </div>
+                <span className="thin">mm</span>
+            </div>
+            <div className="outline-form mb10">
+                <span className="mr10" style={{width: '63px'}}>片流幅</span>
+                <div className="input-grid mr5">
+                    <input type="text" className="input-origin block" defaultValue={100}/>
+                </div>
+                <span className="thin">mm</span>
+            </div>
+        </>
+    )
+}

src/styles/_modal.scss

@@ -42,6 +42,9 @@ $alert-color: #101010;
     &.xm{
         width: 300px;
     }
+    &.xxm{
+        width: 270px;
+    }
     &.l{
         width: 800px;
     }
@@ -115,6 +118,7 @@ $alert-color: #101010;
                 flex: 1 1 auto;
                 padding: 0;
             }
+            margin-bottom: 14px;
         }
     }
     .modal-check-btn-wrap{
@@ -253,6 +257,9 @@ $alert-color: #101010;
     button{
         padding: 0 20px;
     }
+    &.bord{
+        border-top: 1px solid #fff;
+    }
 }
 
 // grid copy
@@ -422,14 +429,15 @@ $alert-color: #101010;
             margin-bottom: 0;
         }
         .outline-form{
-            width: 50%;
+            // width: 50%;
+            margin-right: 15px;
         }
     }
 }
 .outline-form{
     display: flex;
     align-items: center;
-    margin-right: 15px;
+    
     span{
         width: 60px;
         flex: none;
@@ -438,7 +446,8 @@ $alert-color: #101010;
         color: $pop-color;
         margin-right: 10px;
         &.thin{
-            font-weight: &$pop-normal-weight;
+            width: auto;
+            font-weight: $pop-normal-weight;
         }
     }
     .reset-btn{
@@ -491,16 +500,16 @@ $alert-color: #101010;
     margin-bottom: 14px;
 }
 
+.setting-tit{
+    font-size: 13px;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+    margin-bottom: 10px;
+}
 .properties-setting-wrap{
     &.outer{
         margin-top: 24px;
     }
-    .setting-tit{
-        font-size: 13px;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-        margin-bottom: 10px;
-    }
     .setting-btn-wrap{
         display: flex;
         align-items: center;
@@ -580,5 +589,10 @@ $alert-color: #101010;
     padding: 16px 12px;
     border: 1px solid #3D3D3D;
     border-radius: 2px;
-    margin-top: 14px;
+}
+
+.modal-bottom-border-bx{
+    margin-top: 24px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #424242;
 }