외벽선 속성 설정 팝업 추가

src/app/canvas/page.jsx

@@ -31,7 +31,7 @@ export default function CanvasPage() {
                     {/* <PlacementSettingPop/> */}
 
                     {/* 캔버스 기본 셋팅 */}
-                    {modalOption.option && <SettingModal01/>}
+                    {/* {modalOption.option && <SettingModal01/>} */}
 
                     {/* 점·선 그리드 설정 */}
                     {/* {modalOption.gridoption && <GridOption/>} */}
@@ -42,7 +42,7 @@ export default function CanvasPage() {
                     {/* {modalOption.outerwall && <OuterLineWall/>} */}
 
                     {/* 외벽선 속성 설정 */}
-                    {/* <PropertiesSetting/> */}
+                    <PropertiesSetting/>
                 </div>
             </div>
         </div>

src/components/canvas/modal/propertiessetting/PropertiesSetting.jsx

@@ -1,17 +1,30 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
 export default function PropertiesSetting() {
     return(
-        <div className={`modal-pop-wrap ssm`}>
+        <WithDraggable isShow={true}>
-            <div className="modal-head">
+            <div className={`modal-pop-wrap ssm`}>
-            <h1 className="title">外壁のプロパティの設定</h1>
+                <div className="modal-head">
-                <button className="modal-close">닫기</button>
+                <h1 className="title">外壁のプロパティの設定</h1>
-            </div>
+                    <button className="modal-close">닫기</button>
-            <div className="modal-body">
+                </div>
-                s
+                <div className="modal-body">
-                <div className="grid-btn-wrap">
+                    <div className="properties-guide">
-                    <button className="btn-frame modal mr5">一変戦に戻る</button>
+                        ※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。
-                    <button className="btn-frame modal act">設定完了</button>
+                    </div>
+                    <div className="properties-setting-wrap">
+                        <div className="setting-tit">設定</div>
+                        <div className="setting-btn-wrap">
+                            <button className="setting-btn green mr5">軒で設定</button>
+                            <button className="setting-btn blue">ケラバに設定</button>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal mr5">一変戦に戻る</button>
+                        <button className="btn-frame modal act">設定完了</button>
+                    </div>
                 </div>
             </div>
-        </div>
+        </WithDraggable>
     )
 }

src/styles/_modal.scss

@@ -467,3 +467,50 @@ $alert-color: #101010;
         border-radius: 2px ;
     }
 }
+
+.properties-guide{
+    font-size: $pop-normal-size;
+    color: #AAA;
+    font-weight: $pop-normal-weight;
+    margin-bottom: 14px;
+}
+
+.properties-setting-wrap{
+    .setting-tit{
+        font-size: 13px;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+        margin-bottom: 10px;
+    }
+    .setting-btn-wrap{
+        display: flex;
+        align-items: center;
+        padding: 14px 0;
+        border-top: 1px solid #424242;
+        border-bottom: 1px solid #424242;
+        .setting-btn{
+            display: block;
+            width: 100%;
+            height: 40px;
+            font-size: 13px;
+            color: #fff;
+            font-weight: 700;
+            border-radius: 2px;
+            transition: all .15s ease-in-out;
+            &.green{
+                background-color: #305941;
+                border: 1px solid #45CD7D;
+                &:hover{
+                    background-color: #3a6b4e;
+                }
+            }
+            &.blue{
+                background-color: #2E5360;
+                border: 1px solid #3FBAE6;
+                &:hover{
+                    background-color: #365f6e;
+                }
+            }
+        }
+    }
+}