From 4213fbcd7cbd9c13ec9e20f016df61f9c34c3521 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Wed, 2 Oct 2024 13:27:54 +0900 Subject: [PATCH] =?UTF-8?q?=EC=99=B8=EB=B2=BD=EC=84=A0=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=91=20=EB=B0=8F=20=EC=98=A4=ED=94=84=EC=85=8B=20=EB=B0=8F?= =?UTF-8?q?=20=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=82=AC=EC=9D=B4=EC=A6=88,?= =?UTF-8?q?=20=EC=9D=B4=EB=8F=99,=20=EB=B3=B5=EC=82=AC=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/canvas/page.jsx | 16 +++- src/app/draggable/page.jsx | 4 +- .../modal/auxiliarysupport/AuxiliaryCopy.jsx | 47 ++++++++++ .../modal/auxiliarysupport/AuxiliaryMove.jsx | 47 ++++++++++ .../modal/auxiliarysupport/AuxiliarySize.jsx | 57 ++++++++++++ .../canvas/modal/movingupdown/MovingTab02.jsx | 4 +- .../modal/movingupdown/MovingUpDown.jsx | 6 +- .../modal/outerwalloffset/OffsetTab01.jsx | 87 +++++++++++++++++++ .../modal/outerwalloffset/OffsetTab02.jsx | 49 +++++++++++ .../modal/outerwalloffset/OuterWallOffset.jsx | 46 ++++++++++ src/styles/_modal.scss | 7 ++ src/styles/_reset.scss | 1 + 12 files changed, 363 insertions(+), 8 deletions(-) create mode 100644 src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx create mode 100644 src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx create mode 100644 src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx create mode 100644 src/components/canvas/modal/outerwalloffset/OffsetTab01.jsx create mode 100644 src/components/canvas/modal/outerwalloffset/OffsetTab02.jsx create mode 100644 src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 6f300c8..390df7d 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -3,6 +3,9 @@ import CanvasLayout from '@/components/canvas/CanvasLayout' import CanvasMenu from '@/components/canvas/CanvasMenu' import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption' +import AuxiliaryCopy from '@/components/canvas/modal/auxiliarysupport/AuxiliaryCopy' +import AuxiliaryMove from '@/components/canvas/modal/auxiliarysupport/AuxiliaryMove' +import AuxiliarySize from '@/components/canvas/modal/auxiliarysupport/AuxiliarySize' import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption' import GridCopy from '@/components/canvas/modal/gridoption/GridCopy' import GridMove from '@/components/canvas/modal/gridoption/GridMove' @@ -10,6 +13,7 @@ import GridOption from '@/components/canvas/modal/gridoption/GridOption' import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape' import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown' import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall' +import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset' import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop' import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting' import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption' @@ -33,13 +37,13 @@ export default function CanvasPage() { {/* 배치면 초기 설정 */} - + {/* */} {/* 캔버스 기본 셋팅 */} {/* {modalOption.option && } */} {/* 점·선 그리드 설정 */} - {modalOption.gridoption && } + {/* {modalOption.gridoption && } */} {/* {modalOption.gridcopy && } */} {/* {modalOption.gridmove && } */} @@ -63,6 +67,14 @@ export default function CanvasPage() { {/* 동선이동∙형 올림 내림 */} {/* */} + + {/* 외벽선 편집 및 오프셋 */} + {/* */} + + {/* 보조선 사이즈, 이동, 복사 */} + + + diff --git a/src/app/draggable/page.jsx b/src/app/draggable/page.jsx index 7b4996b..5fa7715 100644 --- a/src/app/draggable/page.jsx +++ b/src/app/draggable/page.jsx @@ -10,9 +10,9 @@ export default function DraggablePage() { <> {!divIsShow ? : ''} {/* WithDraggable 태그로 이동하고 싶은 컴포넌트나 엘리먼트등을 감싸주면 WithDraggable 컴포넌트가 드래그 가능하게 만들어줍니다. */} - +
-

test draggable div

+

test draggable div

diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx new file mode 100644 index 0000000..d66839b --- /dev/null +++ b/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx @@ -0,0 +1,47 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AuxiliaryCopy(){ + return( + +
+
+

補助線のコピー

+ +
+
+
+ コピーする方向を入力してください +
+
+
+
+

長さ

+
+
+ +
+ mm +
+
+
+ +
+ mm +
+
+
+ + + + +
+
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx new file mode 100644 index 0000000..2a87627 --- /dev/null +++ b/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx @@ -0,0 +1,47 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AuxiliaryMove(){ + return( + +
+
+

補助線の移動

+ +
+
+
+ 移動する方向を入力してください +
+
+
+
+

長さ

+
+
+ +
+ mm +
+
+
+ +
+ mm +
+
+
+ + + + +
+
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx new file mode 100644 index 0000000..ac42056 --- /dev/null +++ b/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx @@ -0,0 +1,57 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AuxiliarySize(){ + return( + +
+
+

補助線サイズ変更

+ +
+
+
+
+ + +
+
+
+ +
+ mm +
+
+ 長さ +
+ +
+ mm +
+
+
+
+ + +
+
+
+ +
+ mm +
+
+ 長さ +
+ +
+ mm +
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/movingupdown/MovingTab02.jsx b/src/components/canvas/modal/movingupdown/MovingTab02.jsx index d2836eb..aee6fa7 100644 --- a/src/components/canvas/modal/movingupdown/MovingTab02.jsx +++ b/src/components/canvas/modal/movingupdown/MovingTab02.jsx @@ -12,7 +12,7 @@ export default function MovingTab02(){
- +
@@ -27,7 +27,7 @@ export default function MovingTab02(){
- +
diff --git a/src/components/canvas/modal/movingupdown/MovingUpDown.jsx b/src/components/canvas/modal/movingupdown/MovingUpDown.jsx index 198558e..91a5b0e 100644 --- a/src/components/canvas/modal/movingupdown/MovingUpDown.jsx +++ b/src/components/canvas/modal/movingupdown/MovingUpDown.jsx @@ -1,6 +1,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable"; import { useState } from "react"; import MovingTab01 from "./MovingTab01"; +import MovingTab02 from "./MovingTab02"; const buttonMenu = [ {id: 1, name: '銅線の移動軒'}, @@ -11,6 +12,7 @@ export default function MovingUpDonw(){ const [buttonAct, setButtonAct] = useState(1); return( +

軒・ケラバ変更

@@ -31,13 +33,13 @@ export default function MovingUpDonw(){
設定
{buttonAct === 1 && } + {buttonAct === 2 && }
- // - // + ) } \ No newline at end of file diff --git a/src/components/canvas/modal/outerwalloffset/OffsetTab01.jsx b/src/components/canvas/modal/outerwalloffset/OffsetTab01.jsx new file mode 100644 index 0000000..5e85085 --- /dev/null +++ b/src/components/canvas/modal/outerwalloffset/OffsetTab01.jsx @@ -0,0 +1,87 @@ +export default function OffsetTab01(){ + return( + <> +
+
+ 辺と始点を選択して長さと方向を指定してください。 +
+
+
+ + +
+
+
+
+
+ 長さ +
+
+
+
+ +
+ mm +
+
+
+
+
+ 方向 (矢印) +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ 長さ +
+
+
+
+ +
+ mm +
+
+
+
+
+ 方向 (矢印) +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/outerwalloffset/OffsetTab02.jsx b/src/components/canvas/modal/outerwalloffset/OffsetTab02.jsx new file mode 100644 index 0000000..05f6321 --- /dev/null +++ b/src/components/canvas/modal/outerwalloffset/OffsetTab02.jsx @@ -0,0 +1,49 @@ +export default function OffsetTab02(){ + return( + <> +
+
+ オフセットしたい外壁を選択してください。 +
+
+
+ + +
+
+
+
+
+ 長さ +
+
+
+
+ +
+ mm +
+
+
+
+
+ 方向 (矢印) +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx b/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx new file mode 100644 index 0000000..a131471 --- /dev/null +++ b/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx @@ -0,0 +1,46 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import OffsetTab01 from "./OffsetTab01"; +import OffsetTab02 from "./OffsetTab02"; + +const buttonMenu = [ + {id: 1, name: '外壁の編集'}, + {id: 2, name: 'オフセット'}, +] + + +export default function OuterWallOffset(){ + const [buttonAct, setButtonAct] = useState(1); + + return( + +
+
+

外壁の編集とオフセット

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
設定
+ {buttonAct === 1 && } + {buttonAct === 2 && } +
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 2e0183a..4adb6b5 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -468,6 +468,7 @@ $alert-color: #101010; margin-right: 0; } } + .reset-btn{ flex: none; width: 30px; @@ -625,6 +626,9 @@ $alert-color: #101010; display: table-row; .eaves-keraba-th, .eaves-keraba-td{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; display: table-cell; vertical-align: middle; padding-bottom: 14px; @@ -657,4 +661,7 @@ $alert-color: #101010; font-weight: $pop-normal-weight; color: $pop-color; margin-bottom: 24px; + &.sm{ + margin-bottom: 15px; + } } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index a62ff48..7441ab0 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -606,6 +606,7 @@ input[type=text]{ } &.pop{ label{ + font-size: 12px; &:before{ width: 16px; height: 16px;