From 8f1b08e1f7ec109b3638b5b08cf59479bc45478d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Wed, 2 Oct 2024 16:12:42 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EB=B6=95=ED=98=95=EC=83=81=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=8C=9D=EC=97=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/canvas/page.jsx                       |  8 +++-
 .../planeshapeoption/PlaneShapeOption.jsx     | 42 +++++++++++++++++++
 .../discriminationtab/DiscriminationTab03.jsx | 36 +++++++++++-----
 src/styles/_modal.scss                        | 11 +++++
 src/styles/_reset.scss                        |  3 ++
 5 files changed, 88 insertions(+), 12 deletions(-)
 create mode 100644 src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx

diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 2b28ae4..1e40d0f 100644
--- a/src/app/canvas/page.jsx
+++ b/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>
diff --git a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
new file mode 100644
index 0000000..b74f509
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx
index efce901..f20d000 100644
--- a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx
+++ b/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>
         </>
     )
 }
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index c6712bc..9b11f34 100644
--- a/src/styles/_modal.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 8612055..6d89945 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -407,6 +407,9 @@ input[type=text]{
         &.block{
             width: 100%;
         }
+        &:read-only{
+            color: #AAA;
+        }
     }
     &.input-light{
         display: block;