지붕형상 설정 팝업 수정

src/app/canvas/page.jsx

@@ -16,6 +16,7 @@ import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown'
 import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
 import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset'
 import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
+import PlaneShapeOption from '@/components/canvas/modal/planeshapeoption/PlaneShapeOption'
 import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
 import RoofAllocation from '@/components/canvas/modal/roofallocation/RoofAllocation'
 import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
@@ -57,7 +58,7 @@ export default function CanvasPage() {
                     {/* <PropertiesSetting/> */}
 
                     {/* 지붕형상 설정 */}
-                    {/* <RoofShapeOption/> */}
+                    <RoofShapeOption/>
 
                     {/* 지붕형상 수동 설정 */}
                     {/* <ManualRoofShape/> */}
@@ -86,7 +87,10 @@ export default function CanvasPage() {
                     {/* <SlopeOption/> */}
 
                     {/* 배치면 그리기 */}
-                    <ArrangementSetting/>
+                    {/* <ArrangementSetting/> */}
+
+                    {/* 면형상 배치 */}
+                    {/* <PlaneShapeOption/> */}
                 </div>
             </div>
         </div>

src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx

@@ -0,0 +1,42 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import Image from "next/image";
+import { useState } from "react";
+
+const shapeMenu = [
+    {id:1, name:'龍丸屋根'},
+    {id:2, name:'Aパターン'},
+    {id:3, name:'Bパターン'},
+    {id:4, name:'別に設定'},
+    {id:5, name:'立つ'},
+    {id:6, name:'ドン'},
+    {id:7, name:'M'},
+    {id:8, name:'北'},
+]
+
+export default function PlaneShapeOption(){
+    const [shapeNum, setShapeNum] = useState(1);
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap l-2`}>
+                <div className="modal-head">
+                    <h1 className="title">傾斜設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="roof-shape-menu plane">
+                        {shapeMenu.map((item) => (
+                            <button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act': ''}`} onClick={() => setShapeNum(item.id)}>
+                                <div className="shape-box">
+                                    <Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
+                                </div>
+                            </button>
+                        ))}
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx

@@ -1,19 +1,35 @@
 export default function DiscriminationTab03(){
     return(
         <>
-            <div className="d-check-radio pop mb10">
-                <input type="radio" name="radio01" id="ra01" />
-                <label htmlFor="ra01">袖なし</label>
-            </div>
-            <div className="padding-form">
-                <div className="outline-form">
-                    <span className="mr10" style={{width: 'auto'}}>袖あり</span>
-                    <div className="input-grid mr5" style={{width: '100px'}}>
-                        <input type="text" className="input-origin block" defaultValue={300}/>
+        <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>
-                    <span className="thin">mm</span>
+                </div>
+                <div className="eaves-keraba-td">
+                    
                 </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={300} readOnly/>
+                        </div>
+                        <span className="thin">mm</span>
+                    </div>
+                </div>
+            </div>
+        </div>
         </>
     )
 }

src/styles/_modal.scss

@@ -49,6 +49,9 @@ $alert-color: #101010;
     &.ml{
         width: 530px;
     }
+    &.l-2{
+        width: 640px;
+    }
     &.l{
         width: 800px;
     }
@@ -785,4 +788,12 @@ $alert-color: #101010;
 .slope-wrap{
     padding-bottom: 24px;
     border-bottom: 1px solid #424242;
+}
+
+// 면형상 배치
+.roof-shape-menu{
+    &.plane{
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+    }
 }

src/styles/_reset.scss

@@ -407,6 +407,9 @@ input[type=text]{
         &.block{
             width: 100%;
         }
+        &:read-only{
+            color: #AAA;
+        }
     }
     &.input-light{
         display: block;