diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index ae91702..7d0d444 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -41,6 +41,16 @@ import Penal04 from '@/components/canvas/penal/Penal04' import RoofModuleOption from '@/components/canvas/modal/roofmoduleoption/RoofModuleOption' import HexagonalRoofOption from '@/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption' import CircuitStandSetting from '@/components/canvas/modal/circuitstandsetting/CircuitStandSetting' +import AdditionalMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalMove' +import AdditionalCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy' +import AdditionalColumnCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy' +import AdditionalColumnMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove' +import AdditionalBundleMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove' +import AdditionalBundleCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy' +import AllModuleMove from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleMove' +import AllModuleCopy from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy' +import AllModuleNumChange from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange' +import AdditionalColumnDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete' export default function CanvasPage() { const modalOption = useRecoilValue(modalState); @@ -110,7 +120,7 @@ export default function CanvasPage() { {/* */} {/* 면형상 배치 */} - {/* */} + {/* 오브젝트 배치*/} {/* */} @@ -133,10 +143,27 @@ export default function CanvasPage() { {/* */} {/* 육지붕모듈 선택 */} - + {/* */} {/* 회로 및 가대설정 */} - + {/* */} + + + {/* 모듈 부가기능 */} + + {/* 이동, 복사, 열이동, 열복사, 단이동, 단복사, 모듈일괄회로번호변경, 모듈일관이동, 모듈일괄복사 */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + + {/* 열삭제, 열삽입, 단삭제, 단삽입 */} + {/* */} diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx new file mode 100644 index 0000000..db589b2 --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx @@ -0,0 +1,39 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AdditionalBundleCopy(){ + return( + + + + 単コピー設定 + 닫기 + + + + 間隔を設定し、コピー方向を選択します。 + + + + + 間隔 + + + + mm + + + + + + + + + + + 保存 + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx new file mode 100644 index 0000000..3319b2d --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx @@ -0,0 +1,39 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AdditionalBundleMove(){ + return( + + + + 単移動設定 + 닫기 + + + + 間隔を設定し、移動方向を選択します。 + + + + + 間隔 + + + + mm + + + + + + + + + + + 保存 + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx new file mode 100644 index 0000000..f46500d --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx @@ -0,0 +1,39 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AdditionalColumnCopy(){ + return( + + + + 列コピーの設定 + 닫기 + + + + 間隔を設定し、コピー方向を選択します。 + + + + + 間隔 + + + + mm + + + + + + + + + + + 保存 + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx new file mode 100644 index 0000000..9f3c6c0 --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx @@ -0,0 +1,39 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AdditionalColumnMove(){ + return( + + + + 列移動設定 + 닫기 + + + + 間隔を設定し、移動方向を選択します。 + + + + + 間隔 + + + + mm + + + + + + + + + + + 保存 + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx new file mode 100644 index 0000000..448511a --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx @@ -0,0 +1,40 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AdditionalCopy(){ + return( + + + + コピー設定 + 닫기 + + + + 間隔を設定し、コピー方向を選択します。 + + + + + 間隔 + + + + mm + + + + + + + + + + + 保存 + キャンセル + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx new file mode 100644 index 0000000..d925a17 --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx @@ -0,0 +1,40 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AdditionalMove(){ + return( + + + + 移動設定 + 닫기 + + + + 間隔を設定し、移動方向を選択します。 + + + + + 間隔 + + + + mm + + + + + + + + + + + 保存 + キャンセル + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx new file mode 100644 index 0000000..d841bac --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx @@ -0,0 +1,39 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AllModuleCopy(){ + return( + + + + モジュール一括コピー設定 + 닫기 + + + + 間隔を設定し、コピー方向を選択します。 + + + + + 間隔 + + + + mm + + + + + + + + + + + 保存 + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx new file mode 100644 index 0000000..dc4fc36 --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx @@ -0,0 +1,39 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AllModuleMove(){ + return( + + + + モジュール一括移動設定 + 닫기 + + + + 間隔を設定し、移動方向を選択します。 + + + + + 間隔 + + + + mm + + + + + + + + + + + 保存 + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx new file mode 100644 index 0000000..8a282aa --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx @@ -0,0 +1,32 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AllModuleNumChange(){ + return( + + + + モジュール一括回路番号の変更 + 닫기 + + + + 回路番号を入力してください。 + + + + + 回路番号 + + + + + + + + 保存 + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx new file mode 100644 index 0000000..032ca35 --- /dev/null +++ b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx @@ -0,0 +1,51 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function AdditionalColumnDelete(){ + return( + + + + コピー設定 + 닫기 + + + + 削除列をどのようにしますか? + + + + + 左に減らす + + + + 右に減らす + + + + 両側に減る + + + + 減らさない + + + + + + + + + 凡例 + + + + + + 保存 + + + + + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx index 19fa108..31f5046 100644 --- a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx +++ b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx @@ -1,3 +1,5 @@ +'use client' + import WithDraggable from "@/components/common/draggable/withDraggable"; import Image from "next/image"; import { useState } from "react"; @@ -22,6 +24,29 @@ import PlaneShapeTab18 from "./planeshapetab/PlaneShapeTab18"; export default function PlaneShapeOption(){ const [shapeNum, setShapeNum] = useState(1); + const [rotate, setRotate] = useState(0); + const [xfilp, setXfilp] = useState(false); + const [yfilp, setYfilp] = useState(false); + + const RotateMenual = () => { + setRotate(rotate >= 271 ? 0 :rotate + 90) + } + const TransformRotate = () => { + return `${TransFormScale()} rotate(${(xfilp === false && yfilp === true) || (xfilp === true && yfilp === false) ? `-`: ``}${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( @@ -34,15 +59,25 @@ export default function PlaneShapeOption(){ {Array.from({length : 18}).map((_,idx) => ( setShapeNum(idx + 1)}> - + ))} - - - + RotateMenual()}> + setXfilp(!xfilp)}> + setYfilp(!yfilp)}> + x {xfilp ? '1':'0'} + y {yfilp ? '1':'0'} {shapeNum === 1 && } {shapeNum === 2 && } diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 583d27f..0fa1a75 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -1467,4 +1467,16 @@ $alert-color: #101010; display: flex; align-items: center; gap: 10px; +} + +// 모듈부가기능 +.additional-radio-wrap{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px 0; + margin-bottom: 24px; +} +.additional-wrap{ + padding: 24px 0; + border-top: 1px solid #424242; } \ No newline at end of file