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

@@ -4,16 +4,29 @@ $pop-bold-weight: 500;
 $pop-normal-size: 12px;
 $alert-color: #101010;
 
-@keyframes mountpop{
+@keyframes mountpop {
-    from{opacity: 0; scale: 0.95;}
+  from {
-    to{opacity: 1; scale: 1;}
+    opacity: 0;
-}
+    scale: 0.95;
-@keyframes unmountpop{
+  }
-    from{opacity: 1; scale: 1;}
+  to {
-    to{opacity: 0; scale: 0.95;}
+    opacity: 1;
+    scale: 1;
+  }
 }
 
-.modal-pop-wrap{
+@keyframes unmountpop {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
+}
+
+.modal-pop-wrap {
   position: fixed;
   top: 200px;
   right: 100px;
@@ -27,50 +40,62 @@ $alert-color: #101010;
   background-color: #272727;
   z-index: 9999999;
   overflow: hidden;
-    &.r{
+
+  &.r {
     width: 400px;
   }
-    &.sm{
+
+  &.sm {
     width: 580px;
   }
-    &.ssm{
+
+  &.ssm {
     width: 380px;
   }
-    &.xm{
+
+  &.xm {
     width: 300px;
   }
-    &.l{
+
+  &.l {
     width: 800px;
   }
-    &.mount{
+
+  &.mount {
     animation: mountpop .17s ease-in-out forwards;
   }
-    &.unmount{
+
+  &.unmount {
     animation: unmountpop .17s ease-in-out forwards;
   }
-    &.alert{
+
+  &.alert {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: transparent;
     border: none;
-        .modal-head{
+
+    .modal-head {
       background-color: transparent;
       padding: 0 0 8px;
-            .modal-close{
+
+      .modal-close {
         width: 20px;
         height: 20px;
-                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
+        background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
       }
     }
-        .modal-body{
+
+    .modal-body {
       background-color: #fff;
       padding: 22px;
       border-radius: 4px;
       border: 1px solid #101010;
       color: $alert-color;
-            .alert-title{
+
+      .alert-title {
         font-size: 13px;
         font-weight: 700;
         color: $alert-color;
@@ -79,82 +104,101 @@ $alert-color: #101010;
     }
   }
 }
-.modal-head{
+
+.modal-head {
   display: flex;
   align-items: center;
   padding: 10px 24px;
   background-color: #000;
-    h1.title{
+
+  h1.title {
     font-size: 13px;
     color: $pop-color;
     font-weight: 700;
   }
-    .modal-close{
+
+  .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;
+    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
   }
 }
-.modal-body{
+
+.modal-body {
   padding: 24px;
-    .modal-btn-wrap{
+
+  .modal-btn-wrap {
     display: flex;
     align-items: center;
     gap: 5px;
-        button{
+
+    button {
       flex: 1;
     }
   }
-    .modal-check-btn-wrap{
+
+  .modal-check-btn-wrap {
     margin-top: 15px;
-        .check-wrap-title{
+
+    .check-wrap-title {
       font-size: $pop-normal-size;
       color: $pop-color;
       font-weight: 600;
-            &.light{
+
+      &.light {
         font-weight: $pop-normal-weight;
       }
     }
-        .flex-check-box{
+
+    .flex-check-box {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin-top: 15px;
-            &.for2{
+
+      &.for2 {
         justify-content: flex-end;
-                button{
+
+        button {
           width: calc(50% - 5px);
         }
-                &.btn{
+
+        &.btn {
           gap: 5px;
-                    button{
+
+          button {
             width: calc(50% - 2.5px);
           }
         }
       }
-            &.for-line{
+
-                button{
+      &.for-line {
+        button {
           flex: 1;
         }
       }
     }
   }
-    .outer-line-wrap{
+
+  .outer-line-wrap {
     border-top: 1px solid #3C3C3C;
     margin-top: 10px;
     padding-top: 15px;
     margin-bottom: 15px;
-        > div{
+
+    > div {
       margin-bottom: 15px;
-            &:last-child{
+
+      &:last-child {
         margin-bottom: 0;
       }
     }
   }
-    .modal-guide{
+
+  .modal-guide {
     display: block;
     font-size: $pop-normal-size;
     color: $alert-color;
@@ -162,7 +206,7 @@ $alert-color: #101010;
   }
 }
 
-.adsorption-point{
+.adsorption-point {
   display: flex;
   align-items: center;
   background-color: #3A3A3A;
@@ -170,11 +214,13 @@ $alert-color: #101010;
   padding-left: 11px;
   overflow: hidden;
   transition: all 0.17s ease-in-out;
-    span{
+
+  span {
     font-size: $pop-normal-size;
     color: #898989;
   }
-    i{
+
+  i {
     display: flex;
     align-items: center;
     padding: 0 7px;
@@ -183,8 +229,9 @@ $alert-color: #101010;
     font-size: 13px;
     color: #898989;
   }
-    &.act{
+
-        i{
+  &.act {
+    i {
       color: $pop-color;
       background-color: #1083E3;
     }
@@ -192,17 +239,19 @@ $alert-color: #101010;
 }
 
 // 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{
+
+.grid-option-wrap {
   padding: 15px 0;
   border-bottom: 1px solid #3C3C3C;
-    .grid-option-box{
+
+  .grid-option-box {
     display: flex;
     align-items: center;
     background-color: #3D3D3D;
@@ -210,57 +259,68 @@ $alert-color: #101010;
     padding: 10px;
     gap: 20px;
     margin-bottom: 5px;
-        .grid-input-form{
+
+    .grid-input-form {
       display: flex;
       align-items: center;
-            span{
+
+      span {
         flex: none;
         font-size: $pop-normal-size;
         color: $pop-color;
         font-weight: $pop-bold-weight;
       }
-            .input-grid{
+
+      .input-grid {
         width: 54px;
-                input{
+
+        input {
           width: 100%;
         }
       }
     }
-        &:last-child{
+
+    &:last-child {
       margin-bottom: 0;
     }
   }
 }
-.grid-select{
+
+.grid-select {
   flex: 1;
-    .sort-select{
+
+  .sort-select {
     width: 100%;
     background-color: #313131;
   }
 }
-.grid-btn-wrap{
+
+.grid-btn-wrap {
   padding-top: 15px;
   text-align: right;
-    button{
+
+  button {
     padding: 0 20px;
   }
 }
 
 // grid copy
-.grid-option-tit{
+.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{
+
+.grid-direction {
   display: flex;
   align-items: center;
   gap: 5px;
   flex: 1;
 }
-.direction{
+
+.direction {
   width: 22px;
   height: 22px;
   background-color: #757575;
@@ -271,39 +331,54 @@ $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{
+  &.act {
     opacity: 1;
   }
 }
 
 // grid-move
-.move-form{
+.move-form {
-    p{
+  p {
     font-size: $pop-normal-size;
     color: $pop-color;
     font-weight: $pop-bold-weight;
   }
 }
-.input-move-wrap{
+
+.input-move-wrap {
   display: flex;
   align-items: center;
   gap: 5px;
-    span{
+
+  span {
     color: $pop-color;
     font-size: $pop-normal-size;
   }
-    .input-move{
+
+  .input-move {
     width: 130px;
-        input{
+
+    input {
       width: 100%;
     }
   }
 }
-.direction-move-wrap{
+
+.direction-move-wrap {
   flex: none;
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -311,11 +386,12 @@ $alert-color: #101010;
 }
 
 // 배치면 초기 설정
-.placement-table{
+.placement-table {
-    table{
+  table {
     table-layout: fixed;
-        tr{
+
-            th{
+    tr {
+      th {
         display: flex;
         align-items: center;
         font-size: $pop-normal-size;
@@ -324,49 +400,57 @@ $alert-color: #101010;
         padding: 18px 0;
         border-bottom: 1px solid #424242;
       }
-            td{
+
+      td {
         font-size: $pop-normal-size;
         color: $pop-color;
         border-bottom: 1px solid #424242;
         padding-left: 20px;
       }
-            &:first-child{
+
+      &:first-child {
         td,
-                th{
+        th {
           padding-top: 0;
         }
       }
     }
   }
-    .tooltip{
+
+  .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: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
     background-size: cover;
   }
-    &.light{
+
+  &.light {
     padding: 0;
-        th,td{
+
+    th, td {
       color: $alert-color;
       border-bottom: none;
       border-top: 1px solid #EFEFEF;
     }
-        th{
+
+    th {
       padding: 14px 0;
     }
-        tr{
+
-            &:first-child{
+    tr {
+      &:first-child {
         td,
-                th{
+        th {
           padding-top: 14px;
         }
       }
-            &:last-child{
+
+      &:last-child {
         td,
-                th{
+        th {
           padding-bottom: 0px;
         }
       }
@@ -374,26 +458,30 @@ $alert-color: #101010;
   }
 }
 
-.pop-form-radio{
+.pop-form-radio {
   display: flex;
   align-items: center;
   gap: 10px;
 }
-.placement-option{
+
+.placement-option {
   display: flex;
   align-items: center;
   gap: 20px;
 }
-.select-wrap{
+
-    div{
+.select-wrap {
+  div {
     width: 100%;
   }
 }
-.flex-ment{
+
+.flex-ment {
   display: flex;
   align-items: center;
   gap: 5px;
-    span{
+
+  span {
     font-size: $pop-normal-size;
     color: $pop-color;
     font-weight: $pop-normal-weight;
@@ -401,24 +489,28 @@ $alert-color: #101010;
 }
 
 // 외벽선 그리기
-.outline-wrap{
+.outline-wrap {
   padding: 24px 0;
   border-bottom: 1px solid #424242;
-    .outline-inner{
+
+  .outline-inner {
     display: flex;
     align-items: center;
     margin-bottom: 14px;
-        &:last-child{
+
+    &:last-child {
       margin-bottom: 0;
     }
   }
 }
-.outline-form{
+
+.outline-form {
   width: 50%;
   display: flex;
   align-items: center;
   margin-right: 15px;
-    span{
+
+  span {
     width: 60px;
     flex: none;
     font-size: $pop-normal-size;
@@ -426,7 +518,8 @@ $alert-color: #101010;
     color: $pop-color;
     margin-right: 10px;
   }
-    .reset-btn{
+
+  .reset-btn {
     flex: none;
     width: 30px;
     height: 30px;
@@ -439,31 +532,89 @@ $alert-color: #101010;
     background-size: 12px 12px;
     background-position: center;
   }
-    &:last-child{
+
+  &:last-child {
     margin-right: 0;
   }
 }
 
-.cul-wrap{
+.cul-wrap {
   display: flex;
-    .outline-box{
+
+  .outline-box {
     width: 50%;
     margin-right: 15px;
-        .outline-form{
+
+    .outline-form {
       width: 100%;
       margin-bottom: 14px;
       margin-right: 0;
-            &:last-child{
+
+      &:last-child {
         margin-bottom: 0;
       }
     }
   }
-    .cul-box{
+
+  .cul-box {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50%;
     background-color: #3D3D3D;
-        border-radius: 2px ;
+    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;
+        }
+      }
+    }
   }
 }