From a63c44b41d1f2a91427f16eb85579561e535b0d0 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 10:17:29 +0900 Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/canvas/compas.svg | 9 + public/static/images/canvas/compas_num.svg | 26 + public/static/images/canvas/object_img01.svg | 22 + public/static/images/canvas/object_img02.svg | 22 + public/static/images/canvas/plane_arr.svg | 3 + public/static/images/canvas/plane_arr_act.svg | 3 + public/static/images/canvas/plane_shape01.svg | 3 + .../static/images/canvas/plane_shape010.svg | 3 + .../static/images/canvas/plane_shape011.svg | 3 + .../static/images/canvas/plane_shape012.svg | 3 + .../static/images/canvas/plane_shape013.svg | 3 + .../static/images/canvas/plane_shape014.svg | 3 + .../static/images/canvas/plane_shape015.svg | 3 + .../static/images/canvas/plane_shape016.svg | 5 + .../static/images/canvas/plane_shape017.svg | 3 + .../static/images/canvas/plane_shape018.svg | 3 + public/static/images/canvas/plane_shape02.svg | 3 + public/static/images/canvas/plane_shape03.svg | 3 + public/static/images/canvas/plane_shape04.svg | 3 + public/static/images/canvas/plane_shape05.svg | 3 + public/static/images/canvas/plane_shape06.svg | 3 + public/static/images/canvas/plane_shape07.svg | 3 + public/static/images/canvas/plane_shape08.svg | 3 + public/static/images/canvas/plane_shape09.svg | 3 + public/static/images/canvas/plane_tab01.svg | 13 + public/static/images/canvas/plane_tab02.svg | 14 + public/static/images/canvas/plane_tab03.svg | 18 + public/static/images/canvas/plane_tab04.svg | 13 + public/static/images/canvas/plane_tab05.svg | 18 + public/static/images/canvas/plane_tab06.svg | 18 + public/static/images/canvas/plane_tab07.svg | 30 + public/static/images/canvas/plane_tab08.svg | 24 + public/static/images/canvas/plane_tab09.svg | 28 + public/static/images/canvas/plane_tab10.svg | 28 + public/static/images/canvas/plane_tab11.svg | 28 + public/static/images/canvas/plane_tab12.svg | 23 + public/static/images/canvas/plane_tab13.svg | 23 + public/static/images/canvas/plane_tab14.svg | 29 + public/static/images/canvas/plane_tab15.svg | 18 + public/static/images/canvas/plane_tab16.svg | 24 + public/static/images/canvas/plane_tab17.svg | 22 + public/static/images/canvas/plane_tab18.svg | 16 + .../static/images/canvas/shape_labrary01.svg | 3 + .../static/images/canvas/shape_labrary02.svg | 4 + .../static/images/canvas/shape_labrary03.svg | 4 + src/styles/_modal.scss | 615 +++++++++++++++++- 46 files changed, 1147 insertions(+), 7 deletions(-) create mode 100644 public/static/images/canvas/compas.svg create mode 100644 public/static/images/canvas/compas_num.svg create mode 100644 public/static/images/canvas/object_img01.svg create mode 100644 public/static/images/canvas/object_img02.svg create mode 100644 public/static/images/canvas/plane_arr.svg create mode 100644 public/static/images/canvas/plane_arr_act.svg create mode 100644 public/static/images/canvas/plane_shape01.svg create mode 100644 public/static/images/canvas/plane_shape010.svg create mode 100644 public/static/images/canvas/plane_shape011.svg create mode 100644 public/static/images/canvas/plane_shape012.svg create mode 100644 public/static/images/canvas/plane_shape013.svg create mode 100644 public/static/images/canvas/plane_shape014.svg create mode 100644 public/static/images/canvas/plane_shape015.svg create mode 100644 public/static/images/canvas/plane_shape016.svg create mode 100644 public/static/images/canvas/plane_shape017.svg create mode 100644 public/static/images/canvas/plane_shape018.svg create mode 100644 public/static/images/canvas/plane_shape02.svg create mode 100644 public/static/images/canvas/plane_shape03.svg create mode 100644 public/static/images/canvas/plane_shape04.svg create mode 100644 public/static/images/canvas/plane_shape05.svg create mode 100644 public/static/images/canvas/plane_shape06.svg create mode 100644 public/static/images/canvas/plane_shape07.svg create mode 100644 public/static/images/canvas/plane_shape08.svg create mode 100644 public/static/images/canvas/plane_shape09.svg create mode 100644 public/static/images/canvas/plane_tab01.svg create mode 100644 public/static/images/canvas/plane_tab02.svg create mode 100644 public/static/images/canvas/plane_tab03.svg create mode 100644 public/static/images/canvas/plane_tab04.svg create mode 100644 public/static/images/canvas/plane_tab05.svg create mode 100644 public/static/images/canvas/plane_tab06.svg create mode 100644 public/static/images/canvas/plane_tab07.svg create mode 100644 public/static/images/canvas/plane_tab08.svg create mode 100644 public/static/images/canvas/plane_tab09.svg create mode 100644 public/static/images/canvas/plane_tab10.svg create mode 100644 public/static/images/canvas/plane_tab11.svg create mode 100644 public/static/images/canvas/plane_tab12.svg create mode 100644 public/static/images/canvas/plane_tab13.svg create mode 100644 public/static/images/canvas/plane_tab14.svg create mode 100644 public/static/images/canvas/plane_tab15.svg create mode 100644 public/static/images/canvas/plane_tab16.svg create mode 100644 public/static/images/canvas/plane_tab17.svg create mode 100644 public/static/images/canvas/plane_tab18.svg create mode 100644 public/static/images/canvas/shape_labrary01.svg create mode 100644 public/static/images/canvas/shape_labrary02.svg create mode 100644 public/static/images/canvas/shape_labrary03.svg diff --git a/public/static/images/canvas/compas.svg b/public/static/images/canvas/compas.svg new file mode 100644 index 00000000..fc9bccb1 --- /dev/null +++ b/public/static/images/canvas/compas.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/static/images/canvas/compas_num.svg b/public/static/images/canvas/compas_num.svg new file mode 100644 index 00000000..5deeea27 --- /dev/null +++ b/public/static/images/canvas/compas_num.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/object_img01.svg b/public/static/images/canvas/object_img01.svg new file mode 100644 index 00000000..a4ebac98 --- /dev/null +++ b/public/static/images/canvas/object_img01.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/object_img02.svg b/public/static/images/canvas/object_img02.svg new file mode 100644 index 00000000..ab1e8f43 --- /dev/null +++ b/public/static/images/canvas/object_img02.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_arr.svg b/public/static/images/canvas/plane_arr.svg new file mode 100644 index 00000000..c3131c01 --- /dev/null +++ b/public/static/images/canvas/plane_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_arr_act.svg b/public/static/images/canvas/plane_arr_act.svg new file mode 100644 index 00000000..2c91a0bc --- /dev/null +++ b/public/static/images/canvas/plane_arr_act.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape01.svg b/public/static/images/canvas/plane_shape01.svg new file mode 100644 index 00000000..a32d0c39 --- /dev/null +++ b/public/static/images/canvas/plane_shape01.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape010.svg b/public/static/images/canvas/plane_shape010.svg new file mode 100644 index 00000000..a17616fb --- /dev/null +++ b/public/static/images/canvas/plane_shape010.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape011.svg b/public/static/images/canvas/plane_shape011.svg new file mode 100644 index 00000000..4068d35a --- /dev/null +++ b/public/static/images/canvas/plane_shape011.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape012.svg b/public/static/images/canvas/plane_shape012.svg new file mode 100644 index 00000000..b7136002 --- /dev/null +++ b/public/static/images/canvas/plane_shape012.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape013.svg b/public/static/images/canvas/plane_shape013.svg new file mode 100644 index 00000000..6ef6e1a4 --- /dev/null +++ b/public/static/images/canvas/plane_shape013.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape014.svg b/public/static/images/canvas/plane_shape014.svg new file mode 100644 index 00000000..68789f56 --- /dev/null +++ b/public/static/images/canvas/plane_shape014.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape015.svg b/public/static/images/canvas/plane_shape015.svg new file mode 100644 index 00000000..76e89b3d --- /dev/null +++ b/public/static/images/canvas/plane_shape015.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape016.svg b/public/static/images/canvas/plane_shape016.svg new file mode 100644 index 00000000..54b8259c --- /dev/null +++ b/public/static/images/canvas/plane_shape016.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/plane_shape017.svg b/public/static/images/canvas/plane_shape017.svg new file mode 100644 index 00000000..d0378c1f --- /dev/null +++ b/public/static/images/canvas/plane_shape017.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape018.svg b/public/static/images/canvas/plane_shape018.svg new file mode 100644 index 00000000..4e48f83d --- /dev/null +++ b/public/static/images/canvas/plane_shape018.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape02.svg b/public/static/images/canvas/plane_shape02.svg new file mode 100644 index 00000000..aa0a756f --- /dev/null +++ b/public/static/images/canvas/plane_shape02.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape03.svg b/public/static/images/canvas/plane_shape03.svg new file mode 100644 index 00000000..fb6c7d0a --- /dev/null +++ b/public/static/images/canvas/plane_shape03.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape04.svg b/public/static/images/canvas/plane_shape04.svg new file mode 100644 index 00000000..3cbf25c8 --- /dev/null +++ b/public/static/images/canvas/plane_shape04.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape05.svg b/public/static/images/canvas/plane_shape05.svg new file mode 100644 index 00000000..36f1448c --- /dev/null +++ b/public/static/images/canvas/plane_shape05.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape06.svg b/public/static/images/canvas/plane_shape06.svg new file mode 100644 index 00000000..a87e30b8 --- /dev/null +++ b/public/static/images/canvas/plane_shape06.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape07.svg b/public/static/images/canvas/plane_shape07.svg new file mode 100644 index 00000000..526c95bc --- /dev/null +++ b/public/static/images/canvas/plane_shape07.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape08.svg b/public/static/images/canvas/plane_shape08.svg new file mode 100644 index 00000000..8ad3bf5a --- /dev/null +++ b/public/static/images/canvas/plane_shape08.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape09.svg b/public/static/images/canvas/plane_shape09.svg new file mode 100644 index 00000000..519294ef --- /dev/null +++ b/public/static/images/canvas/plane_shape09.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_tab01.svg b/public/static/images/canvas/plane_tab01.svg new file mode 100644 index 00000000..f768a207 --- /dev/null +++ b/public/static/images/canvas/plane_tab01.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab02.svg b/public/static/images/canvas/plane_tab02.svg new file mode 100644 index 00000000..61891248 --- /dev/null +++ b/public/static/images/canvas/plane_tab02.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab03.svg b/public/static/images/canvas/plane_tab03.svg new file mode 100644 index 00000000..295e0d89 --- /dev/null +++ b/public/static/images/canvas/plane_tab03.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab04.svg b/public/static/images/canvas/plane_tab04.svg new file mode 100644 index 00000000..894bb55c --- /dev/null +++ b/public/static/images/canvas/plane_tab04.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab05.svg b/public/static/images/canvas/plane_tab05.svg new file mode 100644 index 00000000..63b3c201 --- /dev/null +++ b/public/static/images/canvas/plane_tab05.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab06.svg b/public/static/images/canvas/plane_tab06.svg new file mode 100644 index 00000000..1bad98a0 --- /dev/null +++ b/public/static/images/canvas/plane_tab06.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab07.svg b/public/static/images/canvas/plane_tab07.svg new file mode 100644 index 00000000..a358f766 --- /dev/null +++ b/public/static/images/canvas/plane_tab07.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab08.svg b/public/static/images/canvas/plane_tab08.svg new file mode 100644 index 00000000..22a72ab6 --- /dev/null +++ b/public/static/images/canvas/plane_tab08.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab09.svg b/public/static/images/canvas/plane_tab09.svg new file mode 100644 index 00000000..756c3bfa --- /dev/null +++ b/public/static/images/canvas/plane_tab09.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab10.svg b/public/static/images/canvas/plane_tab10.svg new file mode 100644 index 00000000..fe4073ea --- /dev/null +++ b/public/static/images/canvas/plane_tab10.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab11.svg b/public/static/images/canvas/plane_tab11.svg new file mode 100644 index 00000000..0ac2cf59 --- /dev/null +++ b/public/static/images/canvas/plane_tab11.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab12.svg b/public/static/images/canvas/plane_tab12.svg new file mode 100644 index 00000000..a68e7a39 --- /dev/null +++ b/public/static/images/canvas/plane_tab12.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab13.svg b/public/static/images/canvas/plane_tab13.svg new file mode 100644 index 00000000..027e91e8 --- /dev/null +++ b/public/static/images/canvas/plane_tab13.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab14.svg b/public/static/images/canvas/plane_tab14.svg new file mode 100644 index 00000000..7a3cef86 --- /dev/null +++ b/public/static/images/canvas/plane_tab14.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab15.svg b/public/static/images/canvas/plane_tab15.svg new file mode 100644 index 00000000..c0c1b0bb --- /dev/null +++ b/public/static/images/canvas/plane_tab15.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab16.svg b/public/static/images/canvas/plane_tab16.svg new file mode 100644 index 00000000..c66484e3 --- /dev/null +++ b/public/static/images/canvas/plane_tab16.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab17.svg b/public/static/images/canvas/plane_tab17.svg new file mode 100644 index 00000000..ae8ddd0f --- /dev/null +++ b/public/static/images/canvas/plane_tab17.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab18.svg b/public/static/images/canvas/plane_tab18.svg new file mode 100644 index 00000000..12bd0ad3 --- /dev/null +++ b/public/static/images/canvas/plane_tab18.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_labrary01.svg b/public/static/images/canvas/shape_labrary01.svg new file mode 100644 index 00000000..c55fecfc --- /dev/null +++ b/public/static/images/canvas/shape_labrary01.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/shape_labrary02.svg b/public/static/images/canvas/shape_labrary02.svg new file mode 100644 index 00000000..88e1eadc --- /dev/null +++ b/public/static/images/canvas/shape_labrary02.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/shape_labrary03.svg b/public/static/images/canvas/shape_labrary03.svg new file mode 100644 index 00000000..194fd06b --- /dev/null +++ b/public/static/images/canvas/shape_labrary03.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 30e19173..be8b4185 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -38,7 +38,7 @@ $alert-color: #101010; z-index: 9999999; &.xxxm { - width: 230px; + width: 240px; } &.xxm { @@ -65,6 +65,10 @@ $alert-color: #101010; width: 440px; } + &.lrr { + width: 480px; + } + &.ml { width: 530px; } @@ -73,6 +77,10 @@ $alert-color: #101010; width: 640px; } + &.lx { + width: 770px; + } + &.l { width: 800px; } @@ -308,9 +316,19 @@ $alert-color: #101010; } } +.select-form { + .sort-select { + width: 100%; + } +} + .grid-select { flex: 1; + &.no-flx { + flex: unset; + } + .sort-select { width: 100%; background-color: #313131; @@ -768,7 +786,7 @@ $alert-color: #101010; } .eaves-keraba-td { - padding-left: 15px; + padding-left: 10px; } .eaves-keraba-ico { @@ -779,6 +797,7 @@ $alert-color: #101010; background-color: #3D3D3D; border: 1px solid #3D3D3D; border-radius: 2px; + cursor: pointer; &.act { border: 1px solid #ED0004; @@ -803,6 +822,10 @@ $alert-color: #101010; &.sm { margin-bottom: 15px; } + + span { + display: block; + } } // 지붕면 할당 @@ -936,9 +959,587 @@ $alert-color: #101010; } // 면형상 배치 -.roof-shape-menu { - &.plane { - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; +.plane-shape-menu { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(3, 90px); + gap: 10px; + margin-bottom: 10px; + + .shape-menu-box { + border-radius: 2px; + background-color: #3D3D3D; + padding: 8px; + transition: all .15s ease-in-out; + + .shape-box { + position: relative; + width: 100%; + height: 100%; + background-color: #313131; + border-radius: 2px; + + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + &.act, + &:hover { + background-color: #008BFF; + } } -} \ No newline at end of file +} + +.shape-library { + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + padding: 5px; + background-color: #3D3D3D; + margin-bottom: 24px; + + .library-btn { + width: 30px; + height: 30px; + border: 1px solid #6C6C6C; + border-radius: 2px; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + transition: all .15s ease-in-out; + + &.ico01 { + background-image: url(../../public/static/images/canvas/shape_labrary01.svg); + background-size: 14px 14px; + } + + &.ico02 { + background-image: url(../../public/static/images/canvas/shape_labrary02.svg); + background-size: 13px 17px; + } + + &.ico03 { + background-image: url(../../public/static/images/canvas/shape_labrary03.svg); + background-size: 17px 13px; + } + + &:hover { + border-color: #1083E3; + background-color: #1083E3; + } + } +} + +.plane-shape-wrapper { + display: flex; + gap: 10px; + + .plane-box { + padding: 10px; + border-radius: 2px; + background-color: #3D3D3D; + + .plane-box-tit { + font-size: $pop-normal-size; + font-weight: 600; + color: $pop-color; + margin-bottom: 10px; + } + + &.shape-box { + flex: 1; + + .shape-box-inner { + display: flex; + gap: 10px; + min-height: 140px; + + .shape-img { + position: relative; + flex: 1; + background-color: #fff; + border-radius: 2px; + + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + .shape-data { + flex: none; + width: 190px; + background-color: #313131; + border-radius: 2px; + padding: 15px; + + .eaves-keraba-table { + .eaves-keraba-item { + .eaves-keraba-th, + .eaves-keraba-td { + padding-bottom: 10px; + } + + &:last-child { + .eaves-keraba-th, + .eaves-keraba-td { + padding-bottom: 0px; + } + } + } + } + } + } + } + + &.direction-box { + display: flex; + flex-direction: column; + flex: none; + width: 180px; + + .plane-direction-box { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 10px 5px; + } + } + } +} + +.plane-direction { + width: 150px; + position: relative; + height: 120px; + + span { + position: absolute; + font-size: 12px; + font-weight: 500; + color: #B1B1B1; + + &.top { + top: 0; + left: 50%; + transform: translateX(-50%); + } + + &.right { + top: 50%; + right: 0; + transform: translateY(-50%); + } + + &.bottom { + bottom: 0; + left: 50%; + transform: translateX(-50%); + } + + &.left { + top: 50%; + left: 0; + transform: translateY(-50%); + } + } + + .plane-btn { + position: absolute; + width: 28px; + height: 28px; + background-color: #777777; + background-image: url(../../public/static/images/canvas/plane_arr.svg); + background-size: 12px 13px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + transition: all .15s ease-in-out; + + &.up { + top: 22px; + left: 50%; + transform: translateX(-50%); + } + + &.right { + top: 50%; + right: 32px; + transform: translateY(-50%) rotate(90deg); + } + + &.down { + bottom: 22px; + left: 50%; + transform: translateX(-50%) rotate(180deg); + } + + &.left { + top: 50%; + left: 32px; + transform: translateY(-50%) rotate(270deg); + } + + &:hover, + &.act { + background-color: #fff; + background-image: url(../../public/static/images/canvas/plane_arr_act.svg); + } + } +} + +.plane-tab-guide { + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-top: 24px; + padding-bottom: 14px; + border-bottom: 1px solid #424242; +} + +// 오브젝트 배치 +.mb-box { + margin-bottom: 24px; +} + +.object-direction-wrap { + display: flex; + align-items: center; + justify-content: center; +} + +.discrimination-tit { + font-size: 13px; + color: #fff; + font-weight: 500; +} + +.object-size-wrap { + display: flex; + min-height: 206px; + gap: 24px; + margin-top: 14px; + + .object-size-img { + position: relative; + flex: none; + width: 200px; + background-color: #fff; + + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } +} + +// 표시변경 +.display-change-wrap { + margin: 24px 0; +} + +.warning { + 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; +} + +// 면 흐름 설정 +.drawing-flow-wrap { + display: flex; + gap: 10px; + + .discrimination-box { + flex: 1; + display: flex; + flex-direction: column; + + .object-direction-wrap { + flex: 1; + } + } +} + +.compas-box { + display: flex; + align-items: center; + justify-content: center; +} + +.compas-box-inner { + position: relative; + width: 200px; + height: 200px; + border-radius: 50%; + + .circle { + position: absolute; + width: 12px; + height: 12px; + border: 1px solid #fff; + border-radius: 50%; + top: 95%; + left: 50%; + transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */ + cursor: pointer; + z-index: 3; + /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */ + i { + position: absolute; + top: 12.5px; + left: 50%; + font-size: 11px; + color: #8B8B8B; + font-weight: 500; + -webkit-user-select: none; + -moz-user-select: none; + -ms-use-select: none; + user-select: none; + } + + &:nth-child(1) { + transform: rotate(180deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(180deg); + } + } + + &:nth-child(2) { + transform: rotate(195deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(165deg); + } + } + + &:nth-child(3) { + transform: rotate(210deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(150deg); + } + } + + &:nth-child(4) { + transform: rotate(225deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(135deg); + } + } + + &:nth-child(5) { + transform: rotate(240deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(120deg); + } + } + + &:nth-child(6) { + transform: rotate(255deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(105deg); + } + } + + &:nth-child(7) { + transform: rotate(270deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(90deg); + } + } + + &:nth-child(8) { + transform: rotate(285deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(75deg); + } + } + + &:nth-child(9) { + transform: rotate(300deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(60deg); + } + } + + &:nth-child(10) { + transform: rotate(315deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(45deg); + } + } + + &:nth-child(11) { + transform: rotate(330deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(30deg); + } + } + + &:nth-child(12) { + transform: rotate(345deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(15deg); + } + } + + &:nth-child(13) { + transform: rotate(0deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(0deg); + } + } + + &:nth-child(14) { + transform: rotate(15deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-15deg); + } + } + + &:nth-child(15) { + transform: rotate(30deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-30deg); + } + } + + &:nth-child(16) { + transform: rotate(45deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-45deg); + } + } + + &:nth-child(17) { + transform: rotate(60deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-60deg); + } + } + + &:nth-child(18) { + transform: rotate(75deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-75deg); + } + } + + &:nth-child(19) { + transform: rotate(90deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-90deg); + } + } + + &:nth-child(20) { + transform: rotate(105deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-105deg); + } + } + + &:nth-child(21) { + transform: rotate(120deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-120deg); + } + } + + &:nth-child(22) { + transform: rotate(135deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-135deg); + } + } + + &:nth-child(23) { + transform: rotate(150deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-150deg); + } + } + + &:nth-child(24) { + transform: rotate(165deg) translate(-50%, -50%); + + i { + transform: translateX(-50%) rotate(-165deg); + } + } + + &.act { + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 5px; + height: 5px; + background-color: #fff; + } + + i { + color: #fff; + } + } + } + + .compas { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 148px; + height: 148px; + border: 4px solid #fff; + border-radius: 50%; + + .compas-arr { + width: 100%; + height: 100%; + background: url(../../public/static/images/canvas/compas.svg) no-repeat center; + background-size: 122px 122px; + } + } +} From 5afb2349988441a6f25f4649cc1998afd1cab33b Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 10:19:02 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=20=EC=84=A4=EC=A0=95=20=EC=A7=80=EB=B6=95=EC=A0=9C?= =?UTF-8?q?=EB=B3=84=20=EC=9E=85=EB=A0=A5=20=ED=95=AD=EB=AA=A9=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../placementShape/PlacementShapeSetting.jsx | 113 +++++++++++++----- src/locales/ja.json | 8 ++ src/locales/ko.json | 13 ++ 3 files changed, 107 insertions(+), 27 deletions(-) diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 606f932d..7c933c57 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -1,12 +1,13 @@ import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide' import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useState } from 'react' +import { Fragment, useState } from 'react' import { useMessage } from '@/hooks/useMessage' export default function PlacementShapeSetting({ setShowPlaceShapeModal }) { const [showSizeGuideModal, setShowSizeGuidModal] = useState(false) const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false) + const [selectedRoofMaterial, setSelectedRoofMaterial] = useState('A') const { getMessage } = useMessage() return ( @@ -74,34 +75,92 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
- setSelectedRoofMaterial(e.target.value)}> + + + +
-
- W -
- -
-
-
- L -
- -
-
-
- {getMessage('modal.placement.initial.setting.rafter')} -
- -
-
+ {selectedRoofMaterial === 'A' ? ( + <> +
+ W +
+ +
+
+
+ L +
+ +
+
+
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ +
+
+ + ) : selectedRoofMaterial === 'B' ? ( + <> +
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ +
+
+
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ +
+
+ + ) : selectedRoofMaterial === 'C' ? ( + <> +
+ {getMessage('hajebichi')} +
+ +
+
+ + ) : selectedRoofMaterial === 'D' ? ( + <> +
+ L +
+ +
+
+
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ +
+
+ + ) : ( + '' + )}
diff --git a/src/locales/ja.json b/src/locales/ja.json index 71c6fb8d..47a366ad 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -295,13 +295,21 @@ "stuff.gridHeader.receiveUser": "담당자", "stuff.gridHeader.specDate": "사양확인", "stuff.gridHeader.createDatetime": "등록일", + "length": "長さ", "slope": "傾斜", "eaves.offset": "軒の", "gable.offset": "ケラバ出幅", "size": "寸", + "size.angle": "寸(度)", "eaves": "軒", "gable": "ケラバ", "wall": "壁", + "hajebichi": "ハゼビーチ", + "straight.line": "直線", + "right.angle": "直角", + "double.pitch": "イ・グベ", + "angle": "角度", + "diagonal": "対角線", "hipandgable": "八作屋根", "jerkinhead": "半折", "shed": "片側の流れ", diff --git a/src/locales/ko.json b/src/locales/ko.json index 6497020e..a1506270 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -65,6 +65,11 @@ "plan.menu.placement.surface": "배치면", "plan.menu.placement.surface.slope.setting": "경사설정", "plan.menu.placement.surface.drawing": "배치면 그리기", + "modal.placement.surface.drawing.straight.line": "직선", + "modal.placement.surface.drawing.right.angle": "직각", + "modal.placement.surface.drawing.double.pitch": "이구배", + "modal.placement.surface.drawing.angle": "각도", + "modal.placement.surface.drawing.diagonal": "대각선", "plan.menu.placement.surface.arrangement": "면형상 배치", "plan.menu.placement.surface.object": "오브젝트 배치", "plan.menu.placement.surface.all.remove": "배치면 전체 삭제", @@ -297,13 +302,21 @@ "stuff.gridHeader.receiveUser": "담당자", "stuff.gridHeader.specDate": "사양확인", "stuff.gridHeader.createDatetime": "등록일", + "length": "길이", "slope": "경사", "eaves.offset": "처마 출폭", "gable.offset": "케라바 출폭", "size": "치수", + "size.angle": "寸(度)", "eaves": "처마", "gable": "케라바", "wall": "벽", + "hajebichi": "하제비치", + "straight.line": "직선", + "right.angle": "직각", + "double.pitch": "이구배", + "angle": "각도", + "diagonal": "대각선", "hipandgable": "팔작지붕", "jerkinhead": "반절처", "shed": "한쪽흐름", From 74239d1c5c6f764ae58de6290fea34ce6dc09355 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 10:20:19 +0900 Subject: [PATCH 3/9] =?UTF-8?q?=EC=A7=80=EB=B6=95=ED=98=95=EC=83=81=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20class=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx index 517a7ba3..17999df2 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx @@ -23,7 +23,7 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) { return ( -
+

{getMessage('modal.roof.shape.setting')}

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx new file mode 100644 index 00000000..cb93375b --- /dev/null +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx @@ -0,0 +1,152 @@ +import { useState } from 'react' +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/withDraggable' +import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle' +import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch' +import Angle from '@/components/floor-plan/modal/lineTypes/Angle' +import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal' +import { OUTER_LINE_TYPE } from '@/store/outerLineAtom' +import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall' +import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall' + +export default function AuxiliaryDrawing() { + const { getMessage } = useMessage() + const [buttonAct, setButtonAct] = useState(1) + const types = [ + { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE }, + { id: 2, name: getMessage('right.angle'), type: OUTER_LINE_TYPE.RIGHT_ANGLE }, + { id: 3, name: getMessage('double.pitch'), type: OUTER_LINE_TYPE.DOUBLE_PITCH }, + { id: 4, name: getMessage('angle'), type: OUTER_LINE_TYPE.ANGLE }, + { id: 5, name: getMessage('diagonal'), type: OUTER_LINE_TYPE.DIAGONAL_LINE }, + ] + const { + length1, + setLength1, + length2, + setLength2, + length1Ref, + length2Ref, + arrow1, + setArrow1, + arrow2, + setArrow2, + angle1, + setAngle1, + angle1Ref, + angle2, + setAngle2, + angle2Ref, + type, + setType, + arrow1Ref, + arrow2Ref, + outerLineDiagonalLength, + setOuterLineDiagonalLength, + outerLineDiagonalLengthRef, + handleRollback, + handleFix, + } = useOuterLineWall() + + const outerLineProps = { + length1, + setLength1, + length1Ref, + arrow1, + setArrow1, + } + + const rightAngleProps = { + length1, + setLength1, + length1Ref, + length2, + setLength2, + length2Ref, + arrow1, + setArrow1, + arrow2, + setArrow2, + } + + const doublePitchProps = { + angle1, + setAngle1, + angle1Ref, + angle2, + setAngle2, + angle2Ref, + length1, + setLength1, + length1Ref, + length2, + setLength2, + length2Ref, + arrow1, + setArrow1, + arrow2, + setArrow2, + arrow1Ref, + arrow2Ref, + } + + const angleProps = { + angle1, + setAngle1, + angle1Ref, + length1, + setLength1, + length1Ref, + } + + const diagonalLineProps = { + length1, + setLength1, + length1Ref, + length2, + setLength2, + length2Ref, + outerLineDiagonalLength, + setOuterLineDiagonalLength, + outerLineDiagonalLengthRef, + arrow1, + setArrow1, + arrow2, + setArrow2, + } + + const onClickButton = (button) => { + setButtonAct(button.id) + setType(button.type) + } + return ( + +
+
+

{getMessage('modal.auxiliary.drawing')}

+ +
+
+
+ {types.map((type) => ( + + ))} +
+
+
{getMessage('setting')}
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } + {buttonAct === 5 && } +
+
+ + +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/outerlinesetting/Angle.jsx b/src/components/floor-plan/modal/lineTypes/Angle.jsx similarity index 100% rename from src/components/floor-plan/modal/outerlinesetting/Angle.jsx rename to src/components/floor-plan/modal/lineTypes/Angle.jsx diff --git a/src/components/floor-plan/modal/outerlinesetting/Diagonal.jsx b/src/components/floor-plan/modal/lineTypes/Diagonal.jsx similarity index 100% rename from src/components/floor-plan/modal/outerlinesetting/Diagonal.jsx rename to src/components/floor-plan/modal/lineTypes/Diagonal.jsx diff --git a/src/components/floor-plan/modal/outerlinesetting/DoublePitch.jsx b/src/components/floor-plan/modal/lineTypes/DoublePitch.jsx similarity index 100% rename from src/components/floor-plan/modal/outerlinesetting/DoublePitch.jsx rename to src/components/floor-plan/modal/lineTypes/DoublePitch.jsx diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx similarity index 93% rename from src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx rename to src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx index ffa5e0e7..f469fba8 100644 --- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx +++ b/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx @@ -2,7 +2,6 @@ import { useMessage } from '@/hooks/useMessage' import { onlyNumberInputChange } from '@/util/input-utils' -import GridMove from '@/components/floor-plan/modal/grid/GridMove' export default function OuterLineWall({ props }) { const { getMessage } = useMessage() @@ -12,7 +11,7 @@ export default function OuterLineWall({ props }) {
- {getMessage('modal.cover.outline.length')} + {getMessage('straight.line')}
Date: Mon, 7 Oct 2024 10:33:22 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=EB=8B=AB=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/MenuDepth01.jsx | 20 ++++++++++++++++++- .../modal/auxiliary/AuxiliaryDrawing.jsx | 6 ++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 43a059f0..4148ac5a 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -7,7 +7,16 @@ import { currentMenuState } from '@/store/canvasAtom' import { useSetRecoilState } from 'recoil' export default function MenuDepth01(props) { - const { setShowOutlineModal, type, setShowPlaceShapeModal, setShowRoofShapeSettingModal } = props + const { + setShowOutlineModal, + type, + setShowPlaceShapeModal, + setShowRoofShapeSettingModal, + setShowRoofShapePassivitySettingModal, + setShowAuxiliaryModal, + setShowSlopeSettingModal, + setShowPlaceShapeDrawingModal, + } = props const { getMessage } = useMessage() const [activeMenu, setActiveMenu] = useState() const setCurrentMenu = useSetRecoilState(currentMenuState) @@ -15,10 +24,19 @@ export default function MenuDepth01(props) { setActiveMenu(menu) setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) setCurrentMenu(menu) + if (type === 'outline') { setShowPlaceShapeModal(false) setShowOutlineModal(id === 0) setShowRoofShapeSettingModal(id === 1) + setShowRoofShapePassivitySettingModal(id === 2) + setShowAuxiliaryModal(id === 3) + setShowPlaceShapeDrawingModal(false) + } + + if (type === 'surface') { + setShowSlopeSettingModal(id === 0) + setShowPlaceShapeDrawingModal(id === 1) } } diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx index cb93375b..4e64191e 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx @@ -9,7 +9,7 @@ import { OUTER_LINE_TYPE } from '@/store/outerLineAtom' import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall' import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall' -export default function AuxiliaryDrawing() { +export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) { const { getMessage } = useMessage() const [buttonAct, setButtonAct] = useState(1) const types = [ @@ -123,7 +123,9 @@ export default function AuxiliaryDrawing() {

{getMessage('modal.auxiliary.drawing')}

- +
From edb8695182cb56a184b7056740751da0918c0ce5 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 10:33:34 +0900 Subject: [PATCH 6/9] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EA=B7=B8?= =?UTF-8?q?=EB=A6=AC=EA=B8=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../placementShape/PlacementShapeDrawing.jsx | 155 ++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx new file mode 100644 index 00000000..c705b0eb --- /dev/null +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx @@ -0,0 +1,155 @@ +import { useMessage } from '@/hooks/useMessage' +import { useState } from 'react' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle' +import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch' +import Angle from '@/components/floor-plan/modal/lineTypes/Angle' +import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal' +import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall' +import { OUTER_LINE_TYPE } from '@/store/outerLineAtom' +import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall' + +export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal }) { + const { getMessage } = useMessage() + const [buttonAct, setButtonAct] = useState(1) + const types = [ + { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE }, + { id: 2, name: getMessage('right.angle'), type: OUTER_LINE_TYPE.RIGHT_ANGLE }, + { id: 3, name: getMessage('double.pitch'), type: OUTER_LINE_TYPE.DOUBLE_PITCH }, + { id: 4, name: getMessage('angle'), type: OUTER_LINE_TYPE.ANGLE }, + { id: 5, name: getMessage('diagonal'), type: OUTER_LINE_TYPE.DIAGONAL_LINE }, + ] + const { + length1, + setLength1, + length2, + setLength2, + length1Ref, + length2Ref, + arrow1, + setArrow1, + arrow2, + setArrow2, + angle1, + setAngle1, + angle1Ref, + angle2, + setAngle2, + angle2Ref, + type, + setType, + arrow1Ref, + arrow2Ref, + outerLineDiagonalLength, + setOuterLineDiagonalLength, + outerLineDiagonalLengthRef, + handleRollback, + handleFix, + } = useOuterLineWall() + + const outerLineProps = { + length1, + setLength1, + length1Ref, + arrow1, + setArrow1, + } + + const rightAngleProps = { + length1, + setLength1, + length1Ref, + length2, + setLength2, + length2Ref, + arrow1, + setArrow1, + arrow2, + setArrow2, + } + + const doublePitchProps = { + angle1, + setAngle1, + angle1Ref, + angle2, + setAngle2, + angle2Ref, + length1, + setLength1, + length1Ref, + length2, + setLength2, + length2Ref, + arrow1, + setArrow1, + arrow2, + setArrow2, + arrow1Ref, + arrow2Ref, + } + + const angleProps = { + angle1, + setAngle1, + angle1Ref, + length1, + setLength1, + length1Ref, + } + + const diagonalLineProps = { + length1, + setLength1, + length1Ref, + length2, + setLength2, + length2Ref, + outerLineDiagonalLength, + setOuterLineDiagonalLength, + outerLineDiagonalLengthRef, + arrow1, + setArrow1, + arrow2, + setArrow2, + } + + const onClickButton = (button) => { + setButtonAct(button.id) + setType(button.type) + } + return ( + +
+
+

{getMessage('plan.menu.placement.surface.drawing')}

+ +
+
+
+ {types.map((type) => ( + + ))} +
+
+
{getMessage('setting')}
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } + {buttonAct === 5 && } +
+ +
+ + +
+
+
+ + ) +} From f2dbc7f91e43414afe01b0c26df7786c1af0a6ad Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 10:33:41 +0900 Subject: [PATCH 7/9] =?UTF-8?q?=EA=B2=BD=EC=82=AC=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/modal/Slope.jsx | 34 +++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/components/floor-plan/modal/Slope.jsx diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx new file mode 100644 index 00000000..0ae32ab6 --- /dev/null +++ b/src/components/floor-plan/modal/Slope.jsx @@ -0,0 +1,34 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/WithDraggable' + +export default function Slope({ setShowSlopeSettingModal }) { + const { getMessage } = useMessage() + return ( + +
+
+

{getMessage('plan.menu.placement.surface.slope.setting')}

+ +
+
+
+
+ + {getMessage('slope')} + +
+ +
+ {getMessage('size.angle')} +
+
+
+ +
+
+
+ + ) +} From 36077b601fd45030ba5144300299bc5401979864 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 10:39:13 +0900 Subject: [PATCH 8/9] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=20=ED=95=AD?= =?UTF-8?q?=EB=AA=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/placementShape/PlacementShapeSetting.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 7c933c57..637ebb0a 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -112,7 +112,7 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) { ) : selectedRoofMaterial === 'B' ? ( <>
- {getMessage('modal.placement.initial.setting.rafter')} + {getMessage('hajebichi')}