69 lines
3.3 KiB
JavaScript
69 lines
3.3 KiB
JavaScript
import WithDraggable from "@/components/common/draggable/withDraggable";
|
|
import { modalState } from "@/store/modalAtom";
|
|
import { useState } from "react";
|
|
import { useRecoilState } from "recoil";
|
|
|
|
export default function GridMove() {
|
|
const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
|
|
const [close, setClose] = useState(false)
|
|
|
|
const HandleClickClose = () => {
|
|
setClose(true)
|
|
setTimeout(() => {
|
|
setModalOption({...modalOption, gridmove: false})
|
|
setClose(false);
|
|
}, 180)
|
|
}
|
|
|
|
|
|
return(
|
|
<WithDraggable isShow={true}>
|
|
<div className={`modal-pop-wrap xm ${modalOption.gridmove ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
|
|
<div className="modal-head handle">
|
|
<h1 className="title">グリッド移動 </h1>
|
|
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="grid-option-tit">
|
|
移動する方向を入力してください
|
|
</div>
|
|
<div className="grid-option-wrap">
|
|
<div className="d-check-box pop mb10">
|
|
<input type="checkbox" id="ch99" />
|
|
<label htmlFor="ch99">グリッド全体移動</label>
|
|
</div>
|
|
<div className="grid-option-box">
|
|
<div className="move-form">
|
|
<p className="mb5">長さ</p>
|
|
<div className="input-move-wrap mb5">
|
|
<div className="input-move">
|
|
<input type="text" className="input-origin" defaultValue={910}/>
|
|
</div>
|
|
<span>mm</span>
|
|
<div className="direction-move-wrap">
|
|
<button className="direction up"></button>
|
|
<button className="direction down act"></button>
|
|
</div>
|
|
</div>
|
|
<div className="input-move-wrap">
|
|
<div className="input-move">
|
|
<input type="text" className="input-origin" defaultValue={910}/>
|
|
</div>
|
|
<span>mm</span>
|
|
<div className="direction-move-wrap">
|
|
<button className="direction left act"></button>
|
|
<button className="direction right"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act">保存</button>
|
|
</div>
|
|
</div>
|
|
<div className="modal-foot handle"></div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
} |