popup frame 수정

This commit is contained in:
김창수 2025-03-13 14:16:15 +09:00
parent c35a60ddc8
commit b2ee774cf3
54 changed files with 63 additions and 166 deletions

View File

@ -80,16 +80,16 @@ export default function CanvasPage() {
<CanvasLayout menuValue={menuValue}/>
</div>
{/* 우클릭 context menu */}
<CanvasContextMenu/>
{/* <CanvasContextMenu/> */}
{/* 패널 배치 집계 */}
<Penal01/>
{/* <Penal01/> */}
{/* <Penal02/> */}
{/* <Penal03/> */}
{/* <Penal04/> */}
{/* 배치면 초기 설정 */}
<PlacementSettingPop/>
{/* <PlacementSettingPop/> */}
{/* 캔버스 기본 셋팅 */}
{/* {modalOption.option && <SettingModal01/>} */}
@ -129,7 +129,7 @@ export default function CanvasPage() {
{/* <AuxiliaryCopy/> */}
{/* 지붕면 할당 */}
<RoofAllocation/>
{/* <RoofAllocation/> */}
{/* 경사 설정 */}
{/* <SlopeOption/> */}
@ -206,7 +206,7 @@ export default function CanvasPage() {
{/* <MeasuredValueOption/> */}
{/* 이미지 불러오기 */}
{/* <ImgLoad/> */}
<ImgLoad/>
</div>
</div>
{menuValue === 5 && <Footer/>}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalBundleCopy(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">単コピー設定 </h1>
<button className="modal-close">닫기</button>
@ -36,7 +35,6 @@ export default function AdditionalBundleCopy(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalBundleMove(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">単移動設定 </h1>
<button className="modal-close">닫기</button>
@ -36,7 +35,6 @@ export default function AdditionalBundleMove(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalColumnCopy(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">列コピーの設定 </h1>
<button className="modal-close">닫기</button>
@ -36,7 +35,6 @@ export default function AdditionalColumnCopy(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalColumnMove(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">列移動設定 </h1>
<button className="modal-close">닫기</button>
@ -36,7 +35,6 @@ export default function AdditionalColumnMove(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalCopy(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">コピー設定 </h1>
<button className="modal-close">닫기</button>
@ -37,7 +36,6 @@ export default function AdditionalCopy(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalMove(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">移動設定 </h1>
<button className="modal-close">닫기</button>
@ -37,7 +36,6 @@ export default function AdditionalMove(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleCopy(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">モジュール一括コピー設定 </h1>
<button className="modal-close">닫기</button>
@ -36,7 +35,6 @@ export default function AllModuleCopy(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleMove(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">モジュール一括移動設定 </h1>
<button className="modal-close">닫기</button>
@ -36,7 +35,6 @@ export default function AllModuleMove(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleNumChange(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">モジュール一括回路番号の変更</h1>
<button className="modal-close">닫기</button>
@ -29,7 +28,6 @@ export default function AllModuleNumChange(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -10,8 +10,7 @@ export default function AdditionalBundleDelete(){
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">ただし削除 </h1>
<button className="modal-close">닫기</button>
@ -74,7 +73,6 @@ export default function AdditionalBundleDelete(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -10,8 +10,7 @@ export default function AdditionalBundleEdit(){
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">段挿入 </h1>
<button className="modal-close">닫기</button>
@ -64,7 +63,6 @@ export default function AdditionalBundleEdit(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -10,8 +10,7 @@ export default function AdditionalColumnDelete(){
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">コピー設定 </h1>
<button className="modal-close">닫기</button>
@ -74,7 +73,6 @@ export default function AdditionalColumnDelete(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -10,8 +10,7 @@ export default function AdditionalColumnEdit(){
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">列の挿入 </h1>
<button className="modal-close">닫기</button>
@ -64,7 +63,6 @@ export default function AdditionalColumnEdit(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -9,8 +9,7 @@ import ArrangementTab05 from "./ArrangementTab05";
export default function ArrangementSetting(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">配置面の描画</h1>
<button className="modal-close">닫기</button>
@ -64,7 +63,6 @@ export default function ArrangementSetting(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -18,8 +18,7 @@ export default function AuxiliarylineOption(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">補助線の作成</h1>
<button className="modal-close">닫기</button>
@ -52,7 +51,6 @@ export default function AuxiliarylineOption(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliaryCopy(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">補助線のコピー </h1>
<button className="modal-close">닫기</button>
@ -46,7 +45,6 @@ export default function AuxiliaryCopy(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliaryMove(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">補助線の移動 </h1>
<button className="modal-close">닫기</button>
@ -46,7 +45,6 @@ export default function AuxiliaryMove(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliarySize(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">補助線サイズ変更 </h1>
<button className="modal-close">닫기</button>
@ -54,7 +53,6 @@ export default function AuxiliarySize(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -7,8 +7,7 @@ import CircuitStandTab03 from "./CircuitStandTab03";
export default function CircuitStandSetting(){
const [tabNum, setTabNum] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap l-2`}>
<WithDraggable isShow={true} size={'l-2'}>
<div className="modal-head handle">
<h1 className="title">回路設定 </h1>
<button className="modal-close">닫기</button>
@ -26,7 +25,6 @@ export default function CircuitStandSetting(){
{tabNum === 3 && <CircuitStandTab03 setTabNum={setTabNum}/>}
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -3,8 +3,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function ColorSelect (){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lr`}>
<WithDraggable isShow={true} size={'lr'}>
<div className="modal-head handle">
<h1 className="title">カラー設定</h1>
<button className="modal-close">닫기</button>
@ -23,7 +22,6 @@ export default function ColorSelect (){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -7,8 +7,7 @@ const SelectOption01 = [
export default function DisplayChange(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">表示の変更 </h1>
<button className="modal-close">닫기</button>
@ -66,7 +65,6 @@ export default function DisplayChange(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function DistanceMeasurement01(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<WithDraggable isShow={true} size={'xxxm'}>
<div className="modal-head handle">
<h1 className="title">距離測定 </h1>
<button className="modal-close">닫기</button>
@ -25,7 +24,6 @@ export default function DistanceMeasurement01(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function DistanceMeasurement02(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<WithDraggable isShow={true} size={'xxxm'}>
<div className="modal-head handle">
<h1 className="title">距離測定 </h1>
<button className="modal-close">닫기</button>
@ -60,7 +59,6 @@ export default function DistanceMeasurement02(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function DistanceMeasurement03(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<WithDraggable isShow={true} size={'xxxm'}>
<div className="modal-head handle">
<h1 className="title">距離測定 </h1>
<button className="modal-close">닫기</button>
@ -25,7 +24,6 @@ export default function DistanceMeasurement03(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -9,8 +9,7 @@ const SelectOption01 = [
export default function DrawingFlow(){
const [compasDeg, setCompasDeg] = useState(0);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ml`}>
<WithDraggable isShow={true} size={'ml'}>
<div className="modal-head handle">
<h1 className="title">面フローの設定 </h1>
<button className="modal-close">닫기</button>
@ -93,7 +92,6 @@ export default function DrawingFlow(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function EachPropertyChange() {
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">各辺属性の変更 </h1>
<button className="modal-close">닫기</button>
@ -90,7 +89,6 @@ export default function EachPropertyChange() {
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -16,8 +16,7 @@ export default function EvaseKerabaOption(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">ケラバ変更</h1>
<button className="modal-close">닫기</button>
@ -44,7 +43,6 @@ export default function EvaseKerabaOption(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -5,8 +5,7 @@ const SelectOption = [
]
export default function FontOption(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lrr`}>
<WithDraggable isShow={true} size={'lrr'}>
<div className="modal-head handle">
<h1 className="title">フォント </h1>
<button className="modal-close">닫기</button>
@ -54,7 +53,6 @@ export default function FontOption(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -6,8 +6,7 @@ const SelectOption = [
export default function LineOption(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxm`}>
<WithDraggable isShow={true} size={'xxm'}>
<div className="modal-head handle">
<h1 className="title">寸法線 設定 </h1>
<button className="modal-close">닫기</button>
@ -47,7 +46,6 @@ export default function LineOption(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function ShapeSizeOption(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xsm`}>
<WithDraggable isShow={true} size={'xsm'}>
<div className="modal-head handle">
<h1 className="title">図面サイズの設定</h1>
<button className="modal-close">닫기</button>
@ -32,7 +31,6 @@ export default function ShapeSizeOption(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -17,8 +17,7 @@ export default function GridCopy() {
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm ${modalOption.gridcopy ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">グリッドのコピー </h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
@ -51,7 +50,6 @@ export default function GridCopy() {
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -17,8 +17,7 @@ export default function GridMove() {
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm ${modalOption.gridmove ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<WithDraggable isShow={true} size={'xm'}>
<div className="modal-head handle">
<h1 className="title">グリッド移動 </h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
@ -65,7 +64,6 @@ export default function GridMove() {
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -22,8 +22,7 @@ export default function GridOption() {
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm ${modalOption.gridoption ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<WithDraggable isShow={true} size={'ssm'}>
<div className="modal-head handle">
<h1 className="title">ドットライングリッドの設定</h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
@ -85,7 +84,6 @@ export default function GridOption() {
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -7,8 +7,7 @@ import HexagonalRoofTab03 from "./HexagonalRoofTab03";
export default function HexagonalRoofOption(){
const [tabNum, setTabNum] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lx-2`}>
<WithDraggable isShow={true} size={'lx-2'}>
<div className="modal-head handle">
<h1 className="title">モジュール/架台設定 </h1>
<button className="modal-close">닫기</button>
@ -28,7 +27,6 @@ export default function HexagonalRoofOption(){
{tabNum === 3 && <HexagonalRoofTab03 setTabNum={setTabNum}/>}
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -4,8 +4,7 @@ import { useState } from "react";
export default function ImageSize(){
const [sizeValue, setSizeValue] = useState(100)
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<WithDraggable isShow={true} size={'xxxm'}>
<div className="modal-head handle">
<h1 className="title">画像のサイズ変更 </h1>
<button className="modal-close">닫기</button>
@ -19,7 +18,6 @@ export default function ImageSize(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function ImgLoad(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">画像を読み込む </h1>
<button className="modal-close">닫기</button>
@ -58,7 +57,6 @@ export default function ImgLoad(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -13,8 +13,7 @@ const buttonMenu = [
export default function ManualRoofShape(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxm`}>
<WithDraggable isShow={true} size={'xxm'}>
<div className="modal-head handle">
<h1 className="title">屋根形状の設定</h1>
<button className="modal-close">닫기</button>
@ -49,7 +48,6 @@ export default function ManualRoofShape(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function MeasuredValueOption(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm`}>
<WithDraggable isShow={true} size={'ssm'}>
<div className="modal-head handle">
<h1 className="title">実測値設定</h1>
<button className="modal-close">닫기</button>
@ -52,7 +51,6 @@ export default function MeasuredValueOption(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -12,8 +12,7 @@ export default function MovingUpDonw(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">ケラバ変更</h1>
<button className="modal-close">닫기</button>
@ -41,7 +40,6 @@ export default function MovingUpDonw(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -15,8 +15,7 @@ const buttonMenu = [
export default function ObjectOption(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lrr`}>
<WithDraggable isShow={true} size={'lrr'}>
<div className="modal-head handle">
<h1 className="title">オブジェクトの配置 </h1>
<button className="modal-close">닫기</button>
@ -46,7 +45,6 @@ export default function ObjectOption(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -23,8 +23,7 @@ export default function OuterLineWall (){
}, 180)
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">外壁線を描</h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
@ -79,7 +78,6 @@ export default function OuterLineWall (){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -13,8 +13,7 @@ export default function OuterWallOffset(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<WithDraggable isShow={true} size={'r'}>
<div className="modal-head handle">
<h1 className="title">外壁の編集とオフセット</h1>
<button className="modal-close">닫기</button>
@ -42,7 +41,6 @@ export default function OuterWallOffset(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,7 +2,6 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
import PlacementGuidePop from "./PlacementGuidePop";
import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
import Qselect from "@/components/common/select/Qselect";
import PopSpinner from "@/components/common/spinner/PopSpiner";
const SelectOption01 = [
{name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
@ -13,8 +12,7 @@ const SelectOption04 = [
export default function PlacementSettingPop(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ll`}>
<WithDraggable isShow={true} size={'ll'}>
<div className="modal-head handle">
<h1 className="title">配置面初期設定</h1>
<button className="modal-close">닫기</button>
@ -191,8 +189,6 @@ export default function PlacementSettingPop(){
<div className="modal-foot handle"></div>
{/* <PlacementGuidePop/>
<RoofingMaterialGudiePop/> */}
<PopSpinner/>
</div>
</WithDraggable>
)
}

View File

@ -26,8 +26,7 @@ export default function PlaneShapeOption(){
const [shapeNum, setShapeNum] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lr-2`}>
<WithDraggable isShow={true} size={'lr-2'}>
<div className="modal-head handle">
<h1 className="title">屋根形状の設定 </h1>
<button className="modal-close">닫기</button>
@ -84,7 +83,6 @@ export default function PlaneShapeOption(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function PropertiesSetting() {
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lr`}>
<WithDraggable isShow={true} size={'lr'}>
<div className="modal-head handle">
<h1 className="title">外壁のプロパティの設定</h1>
<button className="modal-close">닫기</button>
@ -28,7 +27,6 @@ export default function PropertiesSetting() {
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -11,8 +11,7 @@ const SelectOption04 = [
export default function RoofAllocation() {
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lr`}>
<WithDraggable isShow={true} size={'lr'}>
<div className="modal-head handle">
<h1 className="title">屋根面の割り当て</h1>
<button className="modal-close">닫기</button>
@ -171,8 +170,6 @@ export default function RoofAllocation() {
</div>
</div>
<div className="modal-foot handle"></div>
<PopSpinner/>
</div>
</WithDraggable>
)
}

View File

@ -7,8 +7,7 @@ import RoofModuleOptionTab03 from "./RoofModuleOptionTab03";
export default function RoofModuleOption(){
const [tabNum, setTabNum] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lx-2`}>
<WithDraggable isShow={true} size={'lx-2'}>
<div className="modal-head handle">
<h1 className="title">モジュール/架台設定 </h1>
<button className="modal-close">닫기</button>
@ -28,7 +27,6 @@ export default function RoofModuleOption(){
{tabNum === 3 && <RoofModuleOptionTab03 setTabNum={setTabNum}/>}
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -7,8 +7,7 @@ const SelectOption = [
export default function RoofSelect(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<WithDraggable isShow={true} size={'xxxm'}>
<div className="modal-head handle">
<h1 className="title">変更 </h1>
<button className="modal-close">닫기</button>
@ -26,7 +25,6 @@ export default function RoofSelect(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -21,8 +21,7 @@ const shapeMenu = [
export default function RoofShapeOption() {
const [shapeNum, setShapeNum] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lr`}>
<WithDraggable isShow={true} size={'lr'}>
<div className="modal-head handle">
<h1 className="title">屋根形状の設定</h1>
<button className="modal-close">닫기</button>
@ -52,7 +51,6 @@ export default function RoofShapeOption() {
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -32,8 +32,7 @@ export default function SettingModal01 (){
}, 180)
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap sm ${modalOption.option ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<WithDraggable isShow={true} size={'sm'}>
<div className="modal-head handle">
<h1 className="title">Canvas設定</h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
@ -67,7 +66,6 @@ export default function SettingModal01 (){
{buttonAct === 3 && <ThirdOption {...propsClick}/>}
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -4,8 +4,7 @@ import { useState } from "react";
export default function SizeChange(){
const [sizeCheck, setSizeCheck] = useState(1)
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm`}>
<WithDraggable isShow={true} size={'ssm'}>
<div className="modal-head handle">
<h1 className="title">サイズ変更 </h1>
<button className="modal-close">닫기</button>
@ -53,7 +52,6 @@ export default function SizeChange(){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function SlopeOption (){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<WithDraggable isShow={true} size={'xxxm'}>
<div className="modal-head handle">
<h1 className="title">傾斜設定 </h1>
<button className="modal-close">닫기</button>
@ -25,7 +24,6 @@ export default function SlopeOption (){
</div>
</div>
<div className="modal-foot handle"></div>
</div>
</WithDraggable>
)
}

View File

@ -2,8 +2,9 @@
import { useState } from 'react'
import Draggable from 'react-draggable'
import PopSpinner from '../spinner/PopSpiner'
export default function WithDraggable({ isShow, handle = '', children }) {
export default function WithDraggable({ isShow, handle = '', children, size }) {
const [position, setPosition] = useState({ x: 0, y: 0 })
const handleOnDrag = (data) => {
@ -18,7 +19,10 @@ export default function WithDraggable({ isShow, handle = '', children }) {
onDrag={(_, data) => handleOnDrag(data)}
handle={handle === '' ? '.handle' : handle}
>
{children}
<div className={`modal-pop-wrap ${size}`}>
{children}
<PopSpinner/>
</div>
</Draggable>
)}
</>