qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modal 함수 수정

Browse Source
This commit is contained in:
김창수 2024-09-10 16:03:11 +09:00
parent afac47ae78
commit ae7ce41541
7 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/canvas/page.jsx
View File

@ -5,11 +5,12 @@ import CanvasMenu from '@/components/canvas/CanvasMenu'
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
import Header from '@/components/header/Header'
import { modalState } from '@/store/modalAtom'
import '@/styles/style.scss'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
export default function CanvasPage() {
const [modalOpen, setModalOpen] = useState('option');
const modalOption = useRecoilValue(modalState);
return(
<div className="wrap">
<Header/>
@ -19,8 +20,8 @@ export default function CanvasPage() {
<div className="canvas-content">
<CanvasLayout/>
</div>
<SettingModal01/>
<OuterLineWall/>
{modalOption.option && <SettingModal01/>}
{modalOption.outerwall && <OuterLineWall/>}
</div>
</div>
</div>

11
src/components/canvas/CanvasMenu.jsx
View File

@ -2,10 +2,14 @@
import { useState } from "react";
import Qselect from "../common/select/Qselect";
import MenuDepth01 from "./MenuDepth01";
import { useRecoilState } from "recoil";
import { modalState } from "@/store/modalAtom";
export default function CanvasMenu() {
const [modalOption, setModalOption] = useRecoilState(modalState);
const [menuNumber, setMenuNumber] = useState(null);
const [vertical, setVertical] = useState(true);
const SelectOption = [
{name: '瓦53A',}, {name: '瓦53A'}
]
@ -45,9 +49,9 @@ export default function CanvasMenu() {
{(menuNumber !== 6 && menuNumber !== 5) &&
<>
<div className="btn-from">
<button className="btn01 "></button>
<button className="btn01"></button>
<button className="btn02 active"></button>
<button className="btn03"></button>
<button className="btn03 "></button>
</div>
<div className={`vertical-horizontal ${vertical ? 'on':''}`}>
<span>垂直水平モード</span>
@ -57,7 +61,7 @@ export default function CanvasMenu() {
<Qselect title={'瓦53A'} option={SelectOption}/>
</div>
<div className="btn-from">
<button className="btn04"></button>
<button className="btn04" onClick={() => setModalOption({...modalOption, option: true})}></button>
<button className="btn05"></button>
<button className="btn06"></button>
</div>
@ -74,6 +78,7 @@ export default function CanvasMenu() {
</>}
{(menuNumber === 5) && 'asdasd'}
{(menuNumber === 6) && '103516516'}
</div>
</div>
<div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>

5
src/components/canvas/MenuDepth01.jsx
View File

@ -1,12 +1,15 @@
'use client'
import { useRecoilState } from "recoil";
import { ToggleonMouse } from "../header/Header"
import { modalState } from "@/store/modalAtom";
export default function MenuDepth01(){
const [modalOption, setModalOption] = useRecoilState(modalState);
return(
<div className="canvas-depth2-inner">
<ul className="canvas-depth2-list">
<li className="canvas-depth2-item active"><button>外壁線を描</button></li>
<li className="canvas-depth2-item active"><button onClick={() => setModalOption({...modalOption, outerwall: true})}>外壁線を描</button></li>
<li className="canvas-depth2-item"><button>補助線を描</button></li>
<li className="canvas-depth2-item"><button>屋根形状設定</button></li>
<li className="canvas-depth2-item"><button>軒下変更</button></li>

6
src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
View File

@ -2,20 +2,24 @@
import { useState } from "react";
import WithDraggable from "@/components/common/draggable/withDraggable";
import { modalState } from "@/store/modalAtom";
import { useRecoilState } from "recoil";
export default function OuterLineWall (){
const [modalOption, setModalOption] = useRecoilState(modalState);
const [buttonAct, setButtonAct] = useState(1);
const [close, setClose] = useState(false)
const HandleClickClose = () => {
setClose(true)
setTimeout(() => {
setModalOption({...modalOption, outerwall: false})
setClose(false);
}, 180)
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm ${close ? 'unmount' : ''} `}>
<div className={`modal-pop-wrap ssm ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<div className="modal-head">
<h1 className="title">外壁線を描</h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>

6
src/components/canvas/modal/settoing01/SettingModal01.jsx
View File

@ -4,6 +4,8 @@ import { useState } from "react";
import FirstOption from "./FirstOption";
import SecondOption from "./SecondOption";
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useRecoilState } from "recoil";
import { modalState } from "@/store/modalAtom";
const HandleBtnClick = (e) => {
const button = e.target.closest('button');
@ -18,17 +20,19 @@ const propsClick = {
}
export default function SettingModal01 (){
const [modalOption, setModalOption] = useRecoilState(modalState);
const [buttonAct, setButtonAct] = useState(1);
const [close, setClose] = useState(false)
const HandleClickClose = () => {
setClose(true)
setTimeout(() => {
setModalOption({...modalOption, option: false})
setClose(false);
}, 180)
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap sm ${close ? 'unmount' : ''} `}>
<div className={`modal-pop-wrap sm ${modalOption.option ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<div className="modal-head">
<h1 className="title">Canvas設定</h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>

13
src/store/modalAtom.js
View File

@ -2,14 +2,9 @@ import { atom } from 'recoil'
export const modalState = atom({
key: 'modalState',
default: false,
default: {
option: true,
outerwall: true,
},
})
export const modalContent = atom({
key: 'modalContent',
default: (
<>
<div>test</div>
</>
),
})

4
src/styles/_contents.scss
View File

@ -93,9 +93,9 @@
background-repeat: no-repeat;
background-size: 15px 15px;
transition: all .17s ease-in-out;
&.btn01{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
&.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
&.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
&.btn03{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
&.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
&.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
&.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
&.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}