From 02c3815d229a8fdbb27e6ed0819c1bacbf5d17bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Wed, 30 Oct 2024 17:54:40 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A9=B4=ED=98=95=EC=83=81=20=EB=B0=B0?= =?UTF-8?q?=EC=B9=98=20pop=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/canvas/plane_shape01.svg | 4 +- .../static/images/canvas/plane_shape010.svg | 4 +- .../static/images/canvas/plane_shape011.svg | 4 +- .../static/images/canvas/plane_shape012.svg | 4 +- .../static/images/canvas/plane_shape013.svg | 4 +- .../static/images/canvas/plane_shape014.svg | 4 +- .../static/images/canvas/plane_shape015.svg | 4 +- .../static/images/canvas/plane_shape016.svg | 6 +- .../static/images/canvas/plane_shape017.svg | 4 +- .../static/images/canvas/plane_shape018.svg | 4 +- public/static/images/canvas/plane_shape02.svg | 4 +- public/static/images/canvas/plane_shape03.svg | 4 +- public/static/images/canvas/plane_shape04.svg | 4 +- public/static/images/canvas/plane_shape05.svg | 4 +- public/static/images/canvas/plane_shape06.svg | 4 +- public/static/images/canvas/plane_shape07.svg | 4 +- public/static/images/canvas/plane_shape08.svg | 4 +- public/static/images/canvas/plane_shape09.svg | 4 +- src/app/canvas/page.jsx | 8 +- .../planeshapeoption/PlaneShapeOption.jsx | 121 +++++++----------- .../planeshapetab/PlaneShapeTab01.jsx | 2 +- src/components/publishpage/PublishPage.jsx | 1 + src/styles/_modal.scss | 88 ++++++++----- 23 files changed, 143 insertions(+), 151 deletions(-) diff --git a/public/static/images/canvas/plane_shape01.svg b/public/static/images/canvas/plane_shape01.svg index a32d0c3..3340881 100644 --- a/public/static/images/canvas/plane_shape01.svg +++ b/public/static/images/canvas/plane_shape01.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape010.svg b/public/static/images/canvas/plane_shape010.svg index a17616f..8d46bdf 100644 --- a/public/static/images/canvas/plane_shape010.svg +++ b/public/static/images/canvas/plane_shape010.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape011.svg b/public/static/images/canvas/plane_shape011.svg index 4068d35..6888ecb 100644 --- a/public/static/images/canvas/plane_shape011.svg +++ b/public/static/images/canvas/plane_shape011.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape012.svg b/public/static/images/canvas/plane_shape012.svg index b713600..e139be5 100644 --- a/public/static/images/canvas/plane_shape012.svg +++ b/public/static/images/canvas/plane_shape012.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape013.svg b/public/static/images/canvas/plane_shape013.svg index 6ef6e1a..b12be00 100644 --- a/public/static/images/canvas/plane_shape013.svg +++ b/public/static/images/canvas/plane_shape013.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape014.svg b/public/static/images/canvas/plane_shape014.svg index 68789f5..c1c5964 100644 --- a/public/static/images/canvas/plane_shape014.svg +++ b/public/static/images/canvas/plane_shape014.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape015.svg b/public/static/images/canvas/plane_shape015.svg index 76e89b3..2b5c626 100644 --- a/public/static/images/canvas/plane_shape015.svg +++ b/public/static/images/canvas/plane_shape015.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape016.svg b/public/static/images/canvas/plane_shape016.svg index 54b8259..50dd235 100644 --- a/public/static/images/canvas/plane_shape016.svg +++ b/public/static/images/canvas/plane_shape016.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/public/static/images/canvas/plane_shape017.svg b/public/static/images/canvas/plane_shape017.svg index d0378c1..6aebee5 100644 --- a/public/static/images/canvas/plane_shape017.svg +++ b/public/static/images/canvas/plane_shape017.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape018.svg b/public/static/images/canvas/plane_shape018.svg index 4e48f83..384a6c5 100644 --- a/public/static/images/canvas/plane_shape018.svg +++ b/public/static/images/canvas/plane_shape018.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape02.svg b/public/static/images/canvas/plane_shape02.svg index aa0a756..e8dc329 100644 --- a/public/static/images/canvas/plane_shape02.svg +++ b/public/static/images/canvas/plane_shape02.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape03.svg b/public/static/images/canvas/plane_shape03.svg index fb6c7d0..d817097 100644 --- a/public/static/images/canvas/plane_shape03.svg +++ b/public/static/images/canvas/plane_shape03.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape04.svg b/public/static/images/canvas/plane_shape04.svg index 3cbf25c..f2aa992 100644 --- a/public/static/images/canvas/plane_shape04.svg +++ b/public/static/images/canvas/plane_shape04.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape05.svg b/public/static/images/canvas/plane_shape05.svg index 36f1448..31731b3 100644 --- a/public/static/images/canvas/plane_shape05.svg +++ b/public/static/images/canvas/plane_shape05.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape06.svg b/public/static/images/canvas/plane_shape06.svg index a87e30b..8048344 100644 --- a/public/static/images/canvas/plane_shape06.svg +++ b/public/static/images/canvas/plane_shape06.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape07.svg b/public/static/images/canvas/plane_shape07.svg index 526c95b..a2a33ae 100644 --- a/public/static/images/canvas/plane_shape07.svg +++ b/public/static/images/canvas/plane_shape07.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape08.svg b/public/static/images/canvas/plane_shape08.svg index 8ad3bf5..7a9b07e 100644 --- a/public/static/images/canvas/plane_shape08.svg +++ b/public/static/images/canvas/plane_shape08.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape09.svg b/public/static/images/canvas/plane_shape09.svg index 519294e..bc0ad77 100644 --- a/public/static/images/canvas/plane_shape09.svg +++ b/public/static/images/canvas/plane_shape09.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index e7de386..5476f8d 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -104,7 +104,7 @@ export default function CanvasPage() { {/* */} {/* 지붕형상 설정 */} - + {/* */} {/* 지붕형상 수동 설정 */} {/* */} @@ -123,8 +123,8 @@ export default function CanvasPage() { {/* 보조선 사이즈, 이동, 복사 */} {/* */} - {/* */} - {/* */} + + {/* 지붕면 할당 */} {/* */} @@ -136,7 +136,7 @@ export default function CanvasPage() { {/* */} {/* 면형상 배치 */} - {/* */} + {/* 오브젝트 배치*/} {/* */} diff --git a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx index 7d7c64f..9eae130 100644 --- a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx +++ b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx @@ -24,88 +24,61 @@ import PlaneShapeTab18 from "./planeshapetab/PlaneShapeTab18"; export default function PlaneShapeOption(){ const [shapeNum, setShapeNum] = useState(1); - const [xfilp, setXfilp] = useState(false); - const [yfilp, setYfilp] = useState(false); - const [rotate, setRotate] = useState(0); - - const RotateMenual = () => { - if((xfilp === false && yfilp === true) || (xfilp === true && yfilp === false)){ - setRotate(360); - setRotate(rotate - 90) - }else{ - setRotate(0) - setRotate(rotate + 90) - } - - } - const TransformRotate = () => { - return `${TransFormScale()} rotate(${rotate}deg)` - } - - const TransFormScale = () => { - if(xfilp === false && yfilp === false){ - return `scale(1, 1)` - }else if(xfilp === false && yfilp === true){ - return `scale(1, -1)` - }else if(xfilp === true && yfilp === true){ - return `scale(-1, -1)` - }else if(xfilp === true && yfilp === false){ - return `scale(-1, 1)` - } - } return( -
+

屋根形状の設定

-
- {Array.from({length : 18}).map((_,idx) => ( - - ))} -
-
- - - - x {xfilp ? '1':'0'} - y {yfilp ? '1':'0'} -
- {shapeNum === 1 && } - {shapeNum === 2 && } - {shapeNum === 3 && } - {shapeNum === 4 && } - {shapeNum === 5 && } - {shapeNum === 6 && } - {shapeNum === 7 && } - {shapeNum === 8 && } - {shapeNum === 9 && } - {shapeNum === 10 && } - {shapeNum === 11 && } - {shapeNum === 12 && } - {shapeNum === 13 && } - {shapeNum === 14 && } - {shapeNum === 15 && } - {shapeNum === 16 && } - {shapeNum === 17 && } - {shapeNum === 18 && } -
- +
+
+
+ {Array.from({length : 18}).map((_,idx) => ( + + ))} +
+
+ + + +
+
+
+ {shapeNum === 1 && } + {shapeNum === 2 && } + {shapeNum === 3 && } + {shapeNum === 4 && } + {shapeNum === 5 && } + {shapeNum === 6 && } + {shapeNum === 7 && } + {shapeNum === 8 && } + {shapeNum === 9 && } + {shapeNum === 10 && } + {shapeNum === 11 && } + {shapeNum === 12 && } + {shapeNum === 13 && } + {shapeNum === 14 && } + {shapeNum === 15 && } + {shapeNum === 16 && } + {shapeNum === 17 && } + {shapeNum === 18 && } +
+ +
+
diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx index afca1a2..58853c5 100644 --- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx @@ -40,7 +40,7 @@ export default function PlaneShapeTab01(){
- 斜めの長さ + ③
diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx index a354ac4..b068a4e 100644 --- a/src/components/publishpage/PublishPage.jsx +++ b/src/components/publishpage/PublishPage.jsx @@ -157,6 +157,7 @@ export default function PublishPage() {
  • 2024-10-30
  • *지붕형상설정 pop 변별로 설정 탭 하단 한쪽 흐름 input 추가
  • *견적서 img 업로드 버튼 수정
    • +
  • *면형상 배치 pop 수정
    • 2024-10-28 diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 51f55fb..7fc9c09 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -60,6 +60,9 @@ $alert-color: #101010; &.lr{ width: 440px; } + &.lr-2{ + width: 450px; + } &.lrr{ width: 480px; } @@ -880,17 +883,26 @@ $alert-color: #101010; } // 면형상 배치 +.plane-frame-wrap{ + display: flex; + gap: 10px; + .plane-shape-wrap{ + flex: none; + width: 73px; + } +} + .plane-shape-menu{ display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: repeat(3, 90px); - gap: 10px; - margin-bottom: 10px; + grid-template-columns: repeat(2, 1fr); + gap: 5px; .shape-menu-box{ border-radius: 2px; - background-color: #3D3D3D; - padding: 8px; - transition: all .15s ease-in-out; + width: 34px; + height: 34px; + background-color: #373737; + border: 1px solid #676767; + transition: background .15s ease-in-out, border .15s ease-in-out; .shape-box{ display: flex; justify-content: center; @@ -898,11 +910,11 @@ $alert-color: #101010; position: relative; width: 100%; height: 100%; - background-color: #313131; border-radius: 2px; } &.act, &:hover{ + border-color: #008BFF; background-color: #008BFF; } } @@ -910,24 +922,23 @@ $alert-color: #101010; .shape-library{ display: flex; + flex-direction: column; align-items: center; justify-content: center; gap: 5px; - padding: 5px; - background-color: #3D3D3D; - margin-bottom: 24px; + padding-top: 5px; .library-btn{ - width: 30px; - height: 30px; + width: 100%; + height: 34px; border: 1px solid #6C6C6C; border-radius: 2px; - background-color: transparent; + background-color: #373737; 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;} + &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;} + &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;} + &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;} &:hover{ border-color: #1083E3; background-color: #1083E3; @@ -935,13 +946,22 @@ $alert-color: #101010; } } -.plane-shape-wrapper{ +.plane-detail-wrap{ display: flex; + flex-direction: column; + flex: 1; +} +.plane-shape-wrapper{ + flex: 1; + display: flex; + flex-direction: column; gap: 10px; .plane-box{ - padding: 10px; + width: 100%; + padding: 10px 18px; border-radius: 2px; - background-color: #3D3D3D; + background-color: #313131; + border: 1px solid #484848; .plane-box-tit{ font-size: $pop-normal-size; font-weight: 600; @@ -949,14 +969,14 @@ $alert-color: #101010; margin-bottom: 10px; } &.shape-box{ - flex: 1; .shape-box-inner{ display: flex; - gap:10px; + gap:15px; min-height: 140px; .shape-img{ position: relative; - flex: 1; + flex: none; + width: 150px; background-color: #fff; border-radius: 2px; img{ @@ -967,11 +987,7 @@ $alert-color: #101010; } } .shape-data{ - flex: none; - width: 190px; - background-color: #313131; - border-radius: 2px; - padding: 15px; + flex: 1; .eaves-keraba-table{ .eaves-keraba-item{ .eaves-keraba-th, @@ -990,17 +1006,15 @@ $alert-color: #101010; } } &.direction-box{ + flex: 1; 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; } } } @@ -1046,9 +1060,15 @@ $alert-color: #101010; font-size: $pop-normal-size; font-weight: $pop-normal-weight; color: $pop-color; - margin-top: 24px; - padding-bottom: 14px; - border-bottom: 1px solid #424242; + margin-top: 10px; +} +.plane-shape-btn{ + padding-top: 10px; + margin-top: auto; + button{ + display: block; + width: 100%; + } } // 오브젝트 배치