feat: PropertiesSetting

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>
+  )
+}

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": "表示するデータがありません",

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",

src/styles/_modal.scss

@@ -5,12 +5,25 @@ $pop-normal-size: 12px;
 $alert-color: #101010;
 
 @keyframes mountpop {
-    from{opacity: 0; scale: 0.95;}
+  from {
-    to{opacity: 1; scale: 1;}
+    opacity: 0;
+    scale: 0.95;
   }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
 @keyframes unmountpop {
-    from{opacity: 1; scale: 1;}
+  from {
-    to{opacity: 0; scale: 0.95;}
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
 .modal-pop-wrap {
@@ -27,27 +40,35 @@ $alert-color: #101010;
   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%;
@@ -55,21 +76,25 @@ $alert-color: #101010;
     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;
@@ -79,16 +104,19 @@ $alert-color: #101010;
     }
   }
 }
+
 .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;
@@ -98,43 +126,55 @@ $alert-color: #101010;
     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;
@@ -142,18 +182,22 @@ $alert-color: #101010;
       }
     }
   }
+
   .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;
@@ -170,10 +214,12 @@ $alert-color: #101010;
   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;
@@ -183,6 +229,7 @@ $alert-color: #101010;
     font-size: 13px;
     color: #898989;
   }
+
   &.act {
     i {
       color: $pop-color;
@@ -199,9 +246,11 @@ $alert-color: #101010;
   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;
@@ -210,37 +259,46 @@ $alert-color: #101010;
     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-btn-wrap {
   padding-top: 15px;
   text-align: right;
+
   button {
     padding: 0 20px;
   }
@@ -254,12 +312,14 @@ $alert-color: #101010;
   padding-bottom: 15px;
   border-bottom: 1px solid #3C3C3C;
 }
+
 .grid-direction {
   display: flex;
   align-items: center;
   gap: 5px;
   flex: 1;
 }
+
 .direction {
   width: 22px;
   height: 22px;
@@ -271,9 +331,19 @@ $alert-color: #101010;
   border-radius: 50%;
   transition: all .15s ease-in-out;
   opacity: 0.6;
-    &.down{transform: rotate(180deg);}
+
-    &.left{transform: rotate(-90deg);}
+  &.down {
-    &.right{transform: rotate(90deg);}
+    transform: rotate(180deg);
+  }
+
+  &.left {
+    transform: rotate(-90deg);
+  }
+
+  &.right {
+    transform: rotate(90deg);
+  }
+
   &:hover,
   &.act {
     opacity: 1;
@@ -288,21 +358,26 @@ $alert-color: #101010;
     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%;
     }
   }
 }
+
 .direction-move-wrap {
   flex: none;
   display: grid;
@@ -314,6 +389,7 @@ $alert-color: #101010;
 .placement-table {
   table {
     table-layout: fixed;
+
     tr {
       th {
         display: flex;
@@ -324,12 +400,14 @@ $alert-color: #101010;
         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 {
@@ -338,6 +416,7 @@ $alert-color: #101010;
       }
     }
   }
+
   .tooltip {
     position: relative;
     display: block;
@@ -347,16 +426,20 @@ $alert-color: #101010;
     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,
@@ -364,6 +447,7 @@ $alert-color: #101010;
           padding-top: 14px;
         }
       }
+
       &:last-child {
         td,
         th {
@@ -379,20 +463,24 @@ $alert-color: #101010;
   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;
@@ -404,20 +492,24 @@ $alert-color: #101010;
 .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%;
   display: flex;
   align-items: center;
   margin-right: 15px;
+
   span {
     width: 60px;
     flex: none;
@@ -426,6 +518,7 @@ $alert-color: #101010;
     color: $pop-color;
     margin-right: 10px;
   }
+
   .reset-btn {
     flex: none;
     width: 30px;
@@ -439,6 +532,7 @@ $alert-color: #101010;
     background-size: 12px 12px;
     background-position: center;
   }
+
   &:last-child {
     margin-right: 0;
   }
@@ -446,18 +540,22 @@ $alert-color: #101010;
 
 .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;
     align-items: center;
@@ -467,3 +565,56 @@ $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;
+        }
+      }
+    }
+  }
+}