From f8ac3bcd80269647b2b06856f0a66a4a114e274e 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: Fri, 4 Oct 2024 14:25:53 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=81=20=EB=B3=80=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=ED=8C=9D=EC=97=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/canvas/page.jsx                       |  2 +
 .../eachpropertychange/EachPropertyChange.jsx | 94 +++++++++++++++++++
 src/styles/_modal.scss                        | 10 ++
 3 files changed, 106 insertions(+)
 create mode 100644 src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx

diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 2e4cba7..535051c 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -11,6 +11,7 @@ import DisplayChange from '@/components/canvas/modal/displaychange/DisplayChange
 import DistanceMeasurement01 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement01'
 import DistanceMeasurement02 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement02'
 import DistanceMeasurement03 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement03'
+import EachPropertyChange from '@/components/canvas/modal/eachpropertychange/EachPropertyChange'
 import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption'
 import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
 import GridMove from '@/components/canvas/modal/gridoption/GridMove'
@@ -109,6 +110,7 @@ export default function CanvasPage() {
                     {/* <DistanceMeasurement03/> */}
 
                     {/* 각 변 속성 변경 */}
+                    <EachPropertyChange/>
                 </div>
             </div>
         </div>
diff --git a/src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx b/src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx
new file mode 100644
index 0000000..11f0a22
--- /dev/null
+++ b/src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx
@@ -0,0 +1,94 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function EachPropertyChange() {
+    return(
+        <WithDraggable isShow={true}>
+            <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="guide">
+                        <span className="mb10">属性を変更する辺を選択してください。</span>
+                        <span>選択した値 [龍丸]</span>
+                    </div>
+                    <div className="properties-setting-wrap outer">
+                        <div className="setting-tit">設定</div>
+                        <div className="outline-wrap">
+                            <div className="radio-grid-wrap">
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra01" />
+                                    <label htmlFor="ra01">軒先</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra02" />
+                                    <label htmlFor="ra02">ケラバ</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra03" />
+                                    <label htmlFor="ra03">龍丸</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra04" />
+                                    <label htmlFor="ra04">ケラバ左</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra05" />
+                                    <label htmlFor="ra05">ヨセムネ</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra06" />
+                                    <label htmlFor="ra06">ケラバ右</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra07" />
+                                    <label htmlFor="ra07">片側の流れ</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra08" />
+                                    <label htmlFor="ra08">谷</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra09" />
+                                    <label htmlFor="ra09">壁取り</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra10" />
+                                    <label htmlFor="ra10">Lの捨て渓谷</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra11" />
+                                    <label htmlFor="ra11">壁取り(型)</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra12" />
+                                    <label htmlFor="ra12">マンサード</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra13" />
+                                    <label htmlFor="ra13">壁取合(流れ)</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra14" />
+                                    <label htmlFor="ra14">設定なし</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra15" />
+                                    <label htmlFor="ra15">壁取合(流れ左)</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra16" />
+                                    <label htmlFor="ra16">壁取り(流れ右)</label>
+                                </div>
+                            </div>
+                        </div>
+                    </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/styles/_modal.scss b/src/styles/_modal.scss
index aff58be..9f438cc 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -675,6 +675,9 @@ $alert-color: #101010;
     &.sm{
         margin-bottom: 15px;
     }
+    span{
+        display: block;
+    }
 }
 
 // 지붕면 할당
@@ -1011,4 +1014,11 @@ $alert-color: #101010;
     font-size: $pop-normal-size;
     font-weight: $pop-normal-weight;
     color: #FFAFAF;
+}
+
+// 각 변 속성 변경
+.radio-grid-wrap{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px 15px;
 }
\ No newline at end of file