From 202e91811fdf0b2a3008effdd18118b2592a6cac Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 30 Sep 2024 09:45:56 +0900
Subject: [PATCH] feat: PropertiesSetting

---
 .../outerlinesetting/PropertiesSetting.js     |  30 +
 src/locales/ja.json                           |   6 +
 src/locales/ko.json                           |   6 +
 src/styles/_modal.scss                        | 969 ++++++++++--------
 4 files changed, 602 insertions(+), 409 deletions(-)
 create mode 100644 src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.js

diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.js b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.js
new file mode 100644
index 00000000..1ff975a7
--- /dev/null
+++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.js
@@ -0,0 +1,30 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function PropertiesSetting() {
+  const { getMessage } = useMessage()
+  return (
+    <WithDraggable isShow={true}>
+      <div className={`modal-pop-wrap ssm`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
+          <button className="modal-close">닫기</button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('setting')}</div>
+            <div className="setting-btn-wrap">
+              <button className="setting-btn green mr5">{getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}</button>
+              <button className="setting-btn blue">{getMessage('modal.canvas.setting.wallline.properties.setting.edge')}</button>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5">{getMessage('modal.cover.outline.rollback')}</button>
+            <button className="btn-frame modal act">{getMessage('modal.cover.outline.finish')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 8e62d630..06429bc6 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -32,6 +32,7 @@
   "modal.cover.outline.arrow": "方向 (矢印)",
   "modal.cover.outline.fix": "外壁線確定",
   "modal.cover.outline.rollback": "一変戦に戻る",
+  "modal.cover.outline.finish": "設定完了",
   "modal.cover.outline.remove": "外壁の削除",
   "modal.cover.outline.select.move": "外壁の選択、移動",
   "plan.menu.roof.cover.roof.setting": "屋根形状設定",
@@ -115,6 +116,11 @@
   "modal.canvas.setting.first.option.border": "ボーダーのみ",
   "modal.canvas.setting.first.option.line": "ラインハッチ",
   "modal.canvas.setting.first.option.all": "All painted",
+  "modal.canvas.setting.wallline.properties.setting": "外壁のプロパティの設定",
+  "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。",
+  "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
+  "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
+  "setting": "設定",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
   "common.message.noData": "表示するデータがありません",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 9bf624d6..b3e2decd 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -36,6 +36,7 @@
   "modal.cover.outline.arrow": "방향(화살표)",
   "modal.cover.outline.fix": "외벽선 확정",
   "modal.cover.outline.rollback": "일변전으로 돌아가기",
+  "modal.cover.outline.finish": "설정완료",
   "modal.cover.outline.remove": "외벽 제거",
   "modal.cover.outline.select.move": "외벽 선택, 이동",
   "plan.menu.placement.surface": "배치면",
@@ -116,6 +117,11 @@
   "modal.canvas.setting.first.option.border": "테두리만",
   "modal.canvas.setting.first.option.line": "라인해치",
   "modal.canvas.setting.first.option.all": "All painted",
+  "modal.canvas.setting.wallline.properties.setting": "외벽선 속성 설정",
+  "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n",
+  "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
+  "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
+  "setting": "설정",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
   "common.message.noData": "No data to display",
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 6309f50e..0ad517a3 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,466 +4,617 @@ $pop-bold-weight: 500;
 $pop-normal-size: 12px;
 $alert-color: #101010;
 
-@keyframes mountpop{
-    from{opacity: 0; scale: 0.95;}
-    to{opacity: 1; scale: 1;}
-}
-@keyframes unmountpop{
-    from{opacity: 1; scale: 1;}
-    to{opacity: 0; scale: 0.95;}
+@keyframes mountpop {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
 
-.modal-pop-wrap{
-    position: fixed;
-    top: 200px;
-    right: 100px;
-    width: 100%;
-    min-width: 300px;
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
-    height: fit-content;
-    border: 1px solid #000;
-    border-radius: 4px;
-    background-color: #272727;
-    z-index: 9999999;
-    overflow: hidden;
-    &.r{
-        width: 400px;
-    }
-    &.sm{
-        width: 580px;
-    }
-    &.ssm{
-        width: 380px;
-    }
-    &.xm{
-        width: 300px;
-    }
-    &.l{
-        width: 800px;
-    }
-    &.mount{
-        animation: mountpop .17s ease-in-out forwards;
-    }
-    &.unmount{
-        animation: unmountpop .17s ease-in-out forwards;
-    }
-    &.alert{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: transparent;
-        border: none;
-        .modal-head{
-            background-color: transparent;
-            padding: 0 0 8px;
-            .modal-close{
-                width: 20px;
-                height: 20px;
-                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
-            }
-        }
-        .modal-body{
-            background-color: #fff;
-            padding: 22px;
-            border-radius: 4px;
-            border: 1px solid #101010;
-            color: $alert-color;
-            .alert-title{
-                font-size: 13px;
-                font-weight: 700;
-                color: $alert-color;
-                margin-bottom: 15px;
-            }
-        }
-    }
+@keyframes unmountpop {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
-.modal-head{
-    display: flex;
-    align-items: center;
-    padding: 10px 24px;
-    background-color: #000;
-    h1.title{
+
+.modal-pop-wrap {
+  position: fixed;
+  top: 200px;
+  right: 100px;
+  width: 100%;
+  min-width: 300px;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border: 1px solid #000;
+  border-radius: 4px;
+  background-color: #272727;
+  z-index: 9999999;
+  overflow: hidden;
+
+  &.r {
+    width: 400px;
+  }
+
+  &.sm {
+    width: 580px;
+  }
+
+  &.ssm {
+    width: 380px;
+  }
+
+  &.xm {
+    width: 300px;
+  }
+
+  &.l {
+    width: 800px;
+  }
+
+  &.mount {
+    animation: mountpop .17s ease-in-out forwards;
+  }
+
+  &.unmount {
+    animation: unmountpop .17s ease-in-out forwards;
+  }
+
+  &.alert {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: transparent;
+    border: none;
+
+    .modal-head {
+      background-color: transparent;
+      padding: 0 0 8px;
+
+      .modal-close {
+        width: 20px;
+        height: 20px;
+        background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
+      }
+    }
+
+    .modal-body {
+      background-color: #fff;
+      padding: 22px;
+      border-radius: 4px;
+      border: 1px solid #101010;
+      color: $alert-color;
+
+      .alert-title {
         font-size: 13px;
-        color: $pop-color;
         font-weight: 700;
-    }
-    .modal-close{
-        margin-left: auto;
-        color: $pop-color;
-        text-indent: -999999999px;
-        width: 10px;
-        height: 10px;
-        background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
-    }
-}
-.modal-body{
-    padding: 24px;
-    .modal-btn-wrap{
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button{
-            flex: 1;
-        }
-    }
-    .modal-check-btn-wrap{
-        margin-top: 15px;
-        .check-wrap-title{
-            font-size: $pop-normal-size;
-            color: $pop-color;
-            font-weight: 600;
-            &.light{
-                font-weight: $pop-normal-weight;
-            }
-        }
-        .flex-check-box{
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 15px;
-            &.for2{
-                justify-content: flex-end;
-                button{
-                    width: calc(50% - 5px);
-                }
-                &.btn{
-                    gap: 5px;
-                    button{
-                        width: calc(50% - 2.5px);
-                    }
-                }
-            }
-            &.for-line{
-                button{
-                    flex: 1;
-                }
-            }
-        }
-    }
-    .outer-line-wrap{
-        border-top: 1px solid #3C3C3C;
-        margin-top: 10px;
-        padding-top: 15px;
-        margin-bottom: 15px;
-        > div{
-            margin-bottom: 15px;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .modal-guide{
-        display: block;
-        font-size: $pop-normal-size;
         color: $alert-color;
-        font-weight: $pop-normal-weight;
+        margin-bottom: 15px;
+      }
     }
+  }
 }
 
-.adsorption-point{
+.modal-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 24px;
+  background-color: #000;
+
+  h1.title {
+    font-size: 13px;
+    color: $pop-color;
+    font-weight: 700;
+  }
+
+  .modal-close {
+    margin-left: auto;
+    color: $pop-color;
+    text-indent: -999999999px;
+    width: 10px;
+    height: 10px;
+    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+  }
+}
+
+.modal-body {
+  padding: 24px;
+
+  .modal-btn-wrap {
     display: flex;
     align-items: center;
-    background-color: #3A3A3A;
-    border-radius: 3px;
-    padding-left: 11px;
-    overflow: hidden;
-    transition: all 0.17s ease-in-out;
-    span{
-        font-size: $pop-normal-size;
-        color: #898989;
+    gap: 5px;
+
+    button {
+      flex: 1;
     }
-    i{
-        display: flex;
-        align-items: center;
-        padding: 0 7px;
-        margin-left: auto;
-        height: 100%;
-        font-size: 13px;
-        color: #898989;
+  }
+
+  .modal-check-btn-wrap {
+    margin-top: 15px;
+
+    .check-wrap-title {
+      font-size: $pop-normal-size;
+      color: $pop-color;
+      font-weight: 600;
+
+      &.light {
+        font-weight: $pop-normal-weight;
+      }
     }
-    &.act{
-        i{
-            color: $pop-color;
-            background-color: #1083E3;
+
+    .flex-check-box {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 15px;
+
+      &.for2 {
+        justify-content: flex-end;
+
+        button {
+          width: calc(50% - 5px);
         }
+
+        &.btn {
+          gap: 5px;
+
+          button {
+            width: calc(50% - 2.5px);
+          }
+        }
+      }
+
+      &.for-line {
+        button {
+          flex: 1;
+        }
+      }
     }
+  }
+
+  .outer-line-wrap {
+    border-top: 1px solid #3C3C3C;
+    margin-top: 10px;
+    padding-top: 15px;
+    margin-bottom: 15px;
+
+    > div {
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .modal-guide {
+    display: block;
+    font-size: $pop-normal-size;
+    color: $alert-color;
+    font-weight: $pop-normal-weight;
+  }
+}
+
+.adsorption-point {
+  display: flex;
+  align-items: center;
+  background-color: #3A3A3A;
+  border-radius: 3px;
+  padding-left: 11px;
+  overflow: hidden;
+  transition: all 0.17s ease-in-out;
+
+  span {
+    font-size: $pop-normal-size;
+    color: #898989;
+  }
+
+  i {
+    display: flex;
+    align-items: center;
+    padding: 0 7px;
+    margin-left: auto;
+    height: 100%;
+    font-size: 13px;
+    color: #898989;
+  }
+
+  &.act {
+    i {
+      color: $pop-color;
+      background-color: #1083E3;
+    }
+  }
 }
 
 // grid-option
-.grid-check-form{
+.grid-check-form {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #3C3C3C;
+}
+
+.grid-option-wrap {
+  padding: 15px 0;
+  border-bottom: 1px solid #3C3C3C;
+
+  .grid-option-box {
     display: flex;
     align-items: center;
-    gap: 15px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #3C3C3C;
-}
-.grid-option-wrap{
-    padding: 15px 0;
-    border-bottom: 1px solid #3C3C3C;
-    .grid-option-box{
-        display: flex;
-        align-items: center;
-        background-color: #3D3D3D;
-        border-radius: 2px;
-        padding: 10px;
-        gap: 20px;
-        margin-bottom: 5px;
-        .grid-input-form{
-            display: flex;
-            align-items: center;
-            span{
-                flex: none;
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-            }
-            .input-grid{
-                width: 54px;
-                input{
-                    width: 100%;
-                }
-            }
-        }
-        &:last-child{
-            margin-bottom: 0;
+    background-color: #3D3D3D;
+    border-radius: 2px;
+    padding: 10px;
+    gap: 20px;
+    margin-bottom: 5px;
+
+    .grid-input-form {
+      display: flex;
+      align-items: center;
+
+      span {
+        flex: none;
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+      }
+
+      .input-grid {
+        width: 54px;
+
+        input {
+          width: 100%;
         }
+      }
     }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
-.grid-select{
-    flex: 1;
-    .sort-select{
-        width: 100%;
-        background-color: #313131;
-    }
+
+.grid-select {
+  flex: 1;
+
+  .sort-select {
+    width: 100%;
+    background-color: #313131;
+  }
 }
-.grid-btn-wrap{
-    padding-top: 15px;
-    text-align: right;
-    button{
-        padding: 0 20px;
-    }
+
+.grid-btn-wrap {
+  padding-top: 15px;
+  text-align: right;
+
+  button {
+    padding: 0 20px;
+  }
 }
 
 // grid copy
-.grid-option-tit{
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #3C3C3C;
+.grid-option-tit {
+  font-size: $pop-normal-size;
+  color: $pop-color;
+  font-weight: $pop-normal-weight;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #3C3C3C;
 }
-.grid-direction{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    flex: 1;
+
+.grid-direction {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
 }
-.direction{
-    width: 22px;
-    height: 22px;
-    background-color: #757575;
-    background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 16px 15px;
-    border-radius: 50%;
-    transition: all .15s ease-in-out;
-    opacity: 0.6;
-    &.down{transform: rotate(180deg);}
-    &.left{transform: rotate(-90deg);}
-    &.right{transform: rotate(90deg);}
-    &:hover,
-    &.act{
-        opacity: 1;
-    }
+
+.direction {
+  width: 22px;
+  height: 22px;
+  background-color: #757575;
+  background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 15px;
+  border-radius: 50%;
+  transition: all .15s ease-in-out;
+  opacity: 0.6;
+
+  &.down {
+    transform: rotate(180deg);
+  }
+
+  &.left {
+    transform: rotate(-90deg);
+  }
+
+  &.right {
+    transform: rotate(90deg);
+  }
+
+  &:hover,
+  &.act {
+    opacity: 1;
+  }
 }
 
 // grid-move
-.move-form{
-    p{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-    }
+.move-form {
+  p {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+  }
 }
-.input-move-wrap{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    span{
-        color: $pop-color;
-        font-size: $pop-normal-size;
-    }
-    .input-move{
-        width: 130px;
-        input{
-            width: 100%;
-        }
+
+.input-move-wrap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  span {
+    color: $pop-color;
+    font-size: $pop-normal-size;
+  }
+
+  .input-move {
+    width: 130px;
+
+    input {
+      width: 100%;
     }
+  }
 }
-.direction-move-wrap{
-    flex: none;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
+
+.direction-move-wrap {
+  flex: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
 
 // 배치면 초기 설정
-.placement-table{
-    table{
-        table-layout: fixed;
-        tr{
-            th{
-                display: flex;
-                align-items: center;
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-                padding: 18px 0;
-                border-bottom: 1px solid #424242;
-            }
-            td{
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                border-bottom: 1px solid #424242;
-                padding-left: 20px;
-            }
-            &:first-child{
-                td,
-                th{
-                    padding-top: 0;
-                }
-            }
-        }
-    }
-    .tooltip{
-        position: relative;
-        display: block;
-        width: 15px;
-        height: 15px;
-        margin-left: 5px;
-        background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
-        background-size: cover;
-    }
-    &.light{
-        padding: 0;
-        th,td{
-            color: $alert-color;
-            border-bottom: none;
-            border-top: 1px solid #EFEFEF;
-        }
-        th{
-            padding: 14px 0;
-        }
-        tr{
-            &:first-child{
-                td,
-                th{
-                    padding-top: 14px;
-                }
-            }
-            &:last-child{
-                td,
-                th{
-                    padding-bottom: 0px;
-                }
-            }
-        }
-    }
-}
+.placement-table {
+  table {
+    table-layout: fixed;
 
-.pop-form-radio{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-.placement-option{
-    display: flex;
-    align-items: center;
-    gap: 20px;
-}
-.select-wrap{
-    div{
-        width: 100%;
-    }
-}
-.flex-ment{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    span{
+    tr {
+      th {
+        display: flex;
+        align-items: center;
         font-size: $pop-normal-size;
         color: $pop-color;
-        font-weight: $pop-normal-weight;
+        font-weight: $pop-bold-weight;
+        padding: 18px 0;
+        border-bottom: 1px solid #424242;
+      }
+
+      td {
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        border-bottom: 1px solid #424242;
+        padding-left: 20px;
+      }
+
+      &:first-child {
+        td,
+        th {
+          padding-top: 0;
+        }
+      }
     }
+  }
+
+  .tooltip {
+    position: relative;
+    display: block;
+    width: 15px;
+    height: 15px;
+    margin-left: 5px;
+    background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
+    background-size: cover;
+  }
+
+  &.light {
+    padding: 0;
+
+    th, td {
+      color: $alert-color;
+      border-bottom: none;
+      border-top: 1px solid #EFEFEF;
+    }
+
+    th {
+      padding: 14px 0;
+    }
+
+    tr {
+      &:first-child {
+        td,
+        th {
+          padding-top: 14px;
+        }
+      }
+
+      &:last-child {
+        td,
+        th {
+          padding-bottom: 0px;
+        }
+      }
+    }
+  }
+}
+
+.pop-form-radio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.placement-option {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.select-wrap {
+  div {
+    width: 100%;
+  }
+}
+
+.flex-ment {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  span {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+  }
 }
 
 // 외벽선 그리기
-.outline-wrap{
-    padding: 24px 0;
-    border-bottom: 1px solid #424242;
-    .outline-inner{
-        display: flex;
-        align-items: center;
-        margin-bottom: 14px;
-        &:last-child{
-            margin-bottom: 0;
-        }
-    }
-}
-.outline-form{
-    width: 50%;
+.outline-wrap {
+  padding: 24px 0;
+  border-bottom: 1px solid #424242;
+
+  .outline-inner {
     display: flex;
     align-items: center;
-    margin-right: 15px;
-    span{
-        width: 60px;
-        flex: none;
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-right: 10px;
-    }
-    .reset-btn{
-        flex: none;
-        width: 30px;
-        height: 30px;
-        background: transparent;
-        border: 1px solid #484848;
-        border-radius: 2px;
-        margin-left: 5px;
-        background-image: url(../../public/static/images/canvas/reset_ico.svg);
-        background-repeat: no-repeat;
-        background-size: 12px 12px;
-        background-position: center;
-    }
-    &:last-child{
-        margin-right: 0;
+    margin-bottom: 14px;
+
+    &:last-child {
+      margin-bottom: 0;
     }
+  }
 }
 
-.cul-wrap{
+.outline-form {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+
+  span {
+    width: 60px;
+    flex: none;
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-right: 10px;
+  }
+
+  .reset-btn {
+    flex: none;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    margin-left: 5px;
+    background-image: url(../../public/static/images/canvas/reset_ico.svg);
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+    background-position: center;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.cul-wrap {
+  display: flex;
+
+  .outline-box {
+    width: 50%;
+    margin-right: 15px;
+
+    .outline-form {
+      width: 100%;
+      margin-bottom: 14px;
+      margin-right: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .cul-box {
     display: flex;
-    .outline-box{
-        width: 50%;
-        margin-right: 15px;
-        .outline-form{
-            width: 100%;
-            margin-bottom: 14px;
-            margin-right: 0;
-            &:last-child{
-                margin-bottom: 0;
-            }
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    background-color: #3D3D3D;
+    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;
+        }
+      }
     }
-    .cul-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50%;
-        background-color: #3D3D3D;
-        border-radius: 2px ;
-    }
+  }
 }
\ No newline at end of file