면 형상 처리 팝업 rotate 정리

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() {
                     {/* <ArrangementSetting/> */}
 
                     {/* 면형상 배치 */}
-                    {/* <PlaneShapeOption/> */}
+                    <PlaneShapeOption/>
                     
                     {/* 오브젝트 배치*/}
                     {/* <ObjectOption/> */}
@@ -133,10 +143,27 @@ export default function CanvasPage() {
                     {/* <RoofModuleOption/> */}
 
                     {/* 육지붕모듈 선택 */}
-                    <HexagonalRoofOption/>
+                    {/* <HexagonalRoofOption/> */}
 
                     {/* 회로 및 가대설정 */}
-                    <CircuitStandSetting/>
+                    {/* <CircuitStandSetting/> */}
+
+
+                    {/* 모듈 부가기능 */}
+
+                    {/* 이동, 복사, 열이동, 열복사, 단이동, 단복사, 모듈일괄회로번호변경, 모듈일관이동, 모듈일괄복사 */}
+                    {/* <AdditionalMove/> */}
+                    {/* <AdditionalCopy/> */}
+                    {/* <AdditionalColumnMove/> */}
+                    {/* <AdditionalColumnCopy/> */}
+                    {/* <AdditionalBundleMove/> */}
+                    {/* <AdditionalBundleCopy/> */}
+                    {/* <AllModuleNumChange/> */}
+                    {/* <AllModuleMove/> */}
+                    {/* <AllModuleCopy/> */}
+
+                    {/* 열삭제, 열삽입, 단삭제, 단삽입 */}
+                    {/* <AdditionalColumnDelete/> */}
                 </div>
             </div>
         </div>

src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx

@@ -0,0 +1,39 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AdditionalBundleCopy(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">単コピー設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    間隔を設定し、コピー方向を選択します。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="grid-input-form">
+                                <span className="mr10">間隔</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin" defaultValue={0}/>
+                                </div>
+                                <span>mm</span>
+                            </div>
+                            <div className="grid-direction">
+                                <button className="direction up"></button>
+                                <button className="direction down act"></button>
+                                <button className="direction left"></button>
+                                <button className="direction right"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx

@@ -0,0 +1,39 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AdditionalBundleMove(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">単移動設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    間隔を設定し、移動方向を選択します。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="grid-input-form">
+                                <span className="mr10">間隔</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin" defaultValue={0}/>
+                                </div>
+                                <span>mm</span>
+                            </div>
+                            <div className="grid-direction">
+                                <button className="direction up"></button>
+                                <button className="direction down act"></button>
+                                <button className="direction left"></button>
+                                <button className="direction right"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx

@@ -0,0 +1,39 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AdditionalColumnCopy(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">列コピーの設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    間隔を設定し、コピー方向を選択します。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="grid-input-form">
+                                <span className="mr10">間隔</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin" defaultValue={0}/>
+                                </div>
+                                <span>mm</span>
+                            </div>
+                            <div className="grid-direction">
+                                <button className="direction up"></button>
+                                <button className="direction down act"></button>
+                                <button className="direction left"></button>
+                                <button className="direction right"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx

@@ -0,0 +1,39 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AdditionalColumnMove(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">列移動設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    間隔を設定し、移動方向を選択します。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="grid-input-form">
+                                <span className="mr10">間隔</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin" defaultValue={0}/>
+                                </div>
+                                <span>mm</span>
+                            </div>
+                            <div className="grid-direction">
+                                <button className="direction up"></button>
+                                <button className="direction down act"></button>
+                                <button className="direction left"></button>
+                                <button className="direction right"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx

@@ -0,0 +1,40 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AdditionalCopy(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">コピー設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    間隔を設定し、コピー方向を選択します。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="grid-input-form">
+                                <span className="mr10">間隔</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin" defaultValue={0}/>
+                                </div>
+                                <span>mm</span>
+                            </div>
+                            <div className="grid-direction">
+                                <button className="direction up"></button>
+                                <button className="direction down act"></button>
+                                <button className="direction left"></button>
+                                <button className="direction right"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal mr5">保存</button>
+                        <button className="btn-frame modal act">キャンセル</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx

@@ -0,0 +1,40 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AdditionalMove(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">移動設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    間隔を設定し、移動方向を選択します。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="grid-input-form">
+                                <span className="mr10">間隔</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin" defaultValue={0}/>
+                                </div>
+                                <span>mm</span>
+                            </div>
+                            <div className="grid-direction">
+                                <button className="direction up"></button>
+                                <button className="direction down act"></button>
+                                <button className="direction left"></button>
+                                <button className="direction right"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal mr5">保存</button>
+                        <button className="btn-frame modal act">キャンセル</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx

@@ -0,0 +1,39 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AllModuleCopy(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">モジュール一括コピー設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    間隔を設定し、コピー方向を選択します。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="grid-input-form">
+                                <span className="mr10">間隔</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin" defaultValue={0}/>
+                                </div>
+                                <span>mm</span>
+                            </div>
+                            <div className="grid-direction">
+                                <button className="direction up"></button>
+                                <button className="direction down act"></button>
+                                <button className="direction left"></button>
+                                <button className="direction right"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx

@@ -0,0 +1,39 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AllModuleMove(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">モジュール一括移動設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    間隔を設定し、移動方向を選択します。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="grid-input-form">
+                                <span className="mr10">間隔</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin" defaultValue={0}/>
+                                </div>
+                                <span>mm</span>
+                            </div>
+                            <div className="grid-direction">
+                                <button className="direction up"></button>
+                                <button className="direction down act"></button>
+                                <button className="direction left"></button>
+                                <button className="direction right"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx

@@ -0,0 +1,32 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AllModuleNumChange(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">モジュール一括回路番号の変更</h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="grid-option-tit">
+                    回路番号を入力してください。
+                    </div>
+                    <div className="grid-option-wrap">
+                        <div className="grid-option-box">
+                            <div className="outline-form">
+                                <span className="mr10" style={{width: 'auto'}}>回路番号</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin block"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx

@@ -0,0 +1,51 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AdditionalColumnDelete(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap r`}>
+                <div className="modal-head">
+                    <h1 className="title">コピー設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="properties-setting-wrap">
+                        <div className="setting-tit">削除列をどのようにしますか？</div>
+                        <div className="additional-wrap">
+                            <div className="additional-radio-wrap">
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra01"/>
+                                    <label htmlFor="ra01">左に減らす</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra02" />
+                                    <label htmlFor="ra02">右に減らす</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra03" />
+                                    <label htmlFor="ra03">両側に減る</label>
+                                </div>
+                                <div className="d-check-radio pop">
+                                    <input type="radio" name="radio01" id="ra04" />
+                                    <label htmlFor="ra04">減らさない</label>
+                                </div>
+                            </div>
+                            <div className="additional-img-wrap">
+
+                            </div>
+                        </div>
+                    </div>
+                    <div className="properties-setting-wrap">
+                        <div className="setting-tit">凡例</div>
+                        <div className="module-table-box">
+                            <div className="module-table-inner"></div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

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(
         <WithDraggable isShow={true}>
             <div className={`modal-pop-wrap l-2`}>
@@ -34,15 +59,25 @@ export default function PlaneShapeOption(){
                         {Array.from({length : 18}).map((_,idx) => (
                             <button key={idx + 1} className={`shape-menu-box ${shapeNum === idx + 1 ? 'act': ''}`} onClick={() => setShapeNum(idx + 1)}>
                                 <div className="shape-box">
-                                    <Image src={`/static/images/canvas/plane_shape0${idx + 1}.svg`} alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
+                                    <Image 
+                                    src={`/static/images/canvas/plane_shape0${idx + 1}.svg`} 
+                                    alt="react" width={0} height={0} 
+                                    style={{
+                                        width: 'auto',
+                                        height:'auto',
+                                        transition: 'all .15s ease-in-out',
+                                        transform: `${TransformRotate()}`
+                                    }}/>
                                 </div>
                             </button>
                         ))}
                     </div>
                     <div className="shape-library">
-                        <button className="library-btn ico01"></button>
+                        <button className="library-btn ico01" onClick={() => RotateMenual()}></button>
-                        <button className="library-btn ico02"></button>
+                        <button className="library-btn ico02" onClick={() => setXfilp(!xfilp)}></button>
-                        <button className="library-btn ico03"></button>
+                        <button className="library-btn ico03" onClick={() => setYfilp(!yfilp)}></button>
+                        <span>x {xfilp ? '1':'0'}</span>
+                        <span>y {yfilp ? '1':'0'}</span>
                     </div>
                     {shapeNum === 1 && <PlaneShapeTab01/>}
                     {shapeNum === 2 && <PlaneShapeTab02/>}

src/styles/_modal.scss

@@ -1468,3 +1468,15 @@ $alert-color: #101010;
     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;
+}