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

오브젝트 배치 팝업 추가

Browse Source
This commit is contained in:
김창수 2024-10-04 13:29:28 +09:00
parent 5d15336d84
commit f245fdbc2c
9 changed files with 422 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/static/images/canvas/object_img01.svg Normal file
View File

@ -0,0 +1,22 @@
<svg width="154" height="155" viewBox="0 0 154 155" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4103_3996)">
<path d="M1.65636 139L70 9.14709L138.344 139H1.65636Z" stroke="black" stroke-width="2"/>
<rect x="69" y="11" width="2" height="127" fill="black"/>
<circle cx="70" cy="8" r="7.5" stroke="#FF0000"/>
</g>
<rect x="148" y="2" width="1" height="136" fill="black"/>
<path d="M144 6L148.5 2L153 6" stroke="black"/>
<path d="M144 134L148.5 138L153 134" stroke="black"/>
<rect x="144" width="9" height="1" fill="#FF0000"/>
<rect x="144" y="139" width="9" height="1" fill="#FF0000"/>
<rect x="2" y="150" width="1" height="136" transform="rotate(-90 2 150)" fill="black"/>
<path d="M6 154L2 149.5L6 145" stroke="black"/>
<path d="M134 154L138 149.5L134 145" stroke="black"/>
<rect y="154" width="9" height="1" transform="rotate(-90 0 154)" fill="#FF0000"/>
<rect x="139" y="154" width="9" height="1" transform="rotate(-90 139 154)" fill="#FF0000"/>
<defs>
<clipPath id="clip0_4103_3996">
<rect width="140" height="140" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

22
public/static/images/canvas/object_img02.svg Normal file
View File

@ -0,0 +1,22 @@
<svg width="154" height="155" viewBox="0 0 154 155" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4103_3998)">
<rect x="69" y="9" width="2" height="129" fill="black"/>
<circle cx="70" cy="8" r="7.5" stroke="#FF0000"/>
<path d="M1 139V61.4915L70 8.26297L139 61.4916V139H1Z" stroke="black" stroke-width="2"/>
</g>
<rect x="148" y="2" width="1" height="136" fill="black"/>
<path d="M144 6L148.5 2L153 6" stroke="black"/>
<path d="M144 134L148.5 138L153 134" stroke="black"/>
<rect x="144" width="9" height="1" fill="#FF0000"/>
<rect x="144" y="139" width="9" height="1" fill="#FF0000"/>
<rect x="2" y="150" width="1" height="136" transform="rotate(-90 2 150)" fill="black"/>
<path d="M6 154L2 149.5L6 145" stroke="black"/>
<path d="M134 154L138 149.5L134 145" stroke="black"/>
<rect y="154" width="9" height="1" transform="rotate(-90 0 154)" fill="#FF0000"/>
<rect x="139" y="154" width="9" height="1" transform="rotate(-90 139 154)" fill="#FF0000"/>
<defs>
<clipPath id="clip0_4103_3998">
<rect width="140" height="140" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -91,10 +91,13 @@ export default function CanvasPage() {
{/* <ArrangementSetting/> */}
{/* 면형상 배치 */}
<PlaneShapeOption/>
{/* <PlaneShapeOption/> */}
{/* 오브젝트 배치*/}
{/* <ObjectOption/> */}
{/* 표시변겅 */}
</div>
</div>
</div>

50
src/components/canvas/modal/objectoption/ObjectOption.jsx Normal file
View File

@ -0,0 +1,50 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import ObjectOptionTab01 from "./ObjectOptionTab01";
import ObjectOptionTab02 from "./ObjectOptionTab02";
import ObjectOptionTab03 from "./ObjectOptionTab03";
import ObjectOptionTab04 from "./ObjectOptionTab04";
const buttonMenu = [
{id: 1, name: '開口部の配置'},
{id: 2, name: '影の配置'},
{id: 3, name: '三角形ドーマー'},
{id: 4, name: '五角形ドーマー'},
]
export default function ObjectOption(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lrr`}>
<div className="modal-head">
<h1 className="title">傾斜設定 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button
key={item.id}
className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`}
onClick={() => setButtonAct(item.id)}
>
{item.name}
</button>
))}
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{buttonAct === 1 && <ObjectOptionTab01/>}
{buttonAct === 2 && <ObjectOptionTab02/>}
{buttonAct === 3 && <ObjectOptionTab03/>}
{buttonAct === 4 && <ObjectOptionTab04/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">作成</button>
</div>
</div>
</div>
</WithDraggable>
)
}

54
src/components/canvas/modal/objectoption/ObjectOptionTab01.jsx Normal file
View File

@ -0,0 +1,54 @@
export default function ObjectOptionTab01(){
return(
<div className="discrimination-box mb10">
<div className="mb-box">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">フリー入力</label>
</div>
</div>
<div className="mb-box">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">寸法入力</label>
</div>
</div>
<div className="mb-box">
<div className="padding-form">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
横長
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
縦長
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="d-check-box pop">
<input type="checkbox" id="ch99" />
<label htmlFor="ch99">エリア交差</label>
</div>
</div>
)
}

50
src/components/canvas/modal/objectoption/ObjectOptionTab02.jsx Normal file
View File

@ -0,0 +1,50 @@
export default function ObjectOptionTab02(){
return(
<div className="discrimination-box mb10">
<div className="mb-box">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">フリー入力</label>
</div>
</div>
<div className="mb-box">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">寸法入力</label>
</div>
</div>
<div className="mb-box">
<div className="padding-form">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
横長
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
縦長
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}

87
src/components/canvas/modal/objectoption/ObjectOptionTab03.jsx Normal file
View File

@ -0,0 +1,87 @@
import Image from "next/image";
export default function ObjectOptionTab03(){
return(
<>
<div className="discrimination-box mb10">
<div className="discrimination-tit">サイズ設定</div>
<div className="object-size-wrap">
<div className="object-size-img">
<Image src="/static/images/canvas/object_img01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
</div>
<div className="object-size-input">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
同意の深さ
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={2000}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
出幅 (深さ)
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
幅
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={4000}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
傾斜
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={4}/>
</div>
<span className="thin">寸法</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="discrimination-box">
<div className="discrimination-tit">方向の選択</div>
<div className="object-direction-wrap">
<div className="plane-direction">
<span className="top">北</span>
<span className="right">ドン</span>
<span className="bottom">南</span>
<span className="left">立つ</span>
<button className="plane-btn up"></button>
<button className="plane-btn right"></button>
<button className="plane-btn down act"></button>
<button className="plane-btn left"></button>
</div>
</div>
</div>
</>
)
}

100
src/components/canvas/modal/objectoption/ObjectOptionTab04.jsx Normal file
View File

@ -0,0 +1,100 @@
import Image from "next/image";
export default function ObjectOptionTab04(){
return(
<>
<div className="discrimination-box mb10">
<div className="discrimination-tit">サイズ設定</div>
<div className="object-size-wrap">
<div className="object-size-img">
<Image src="/static/images/canvas/object_img02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
</div>
<div className="object-size-input">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
同意の深さ
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={2000}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
出幅 (深さ)
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
幅
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={4000}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
出幅 (幅)
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={500}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
傾斜
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={4}/>
</div>
<span className="thin">寸法</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="discrimination-box">
<div className="discrimination-tit">方向の選択</div>
<div className="object-direction-wrap">
<div className="plane-direction">
<span className="top">北</span>
<span className="right">ドン</span>
<span className="bottom">南</span>
<span className="left">立つ</span>
<button className="plane-btn up"></button>
<button className="plane-btn right"></button>
<button className="plane-btn down act"></button>
<button className="plane-btn left"></button>
</div>
</div>
</div>
</>
)
}

33
src/styles/_modal.scss
View File

@ -969,3 +969,36 @@ $alert-color: #101010;
}
// 오브젝트 배치
.mb-box{
margin-bottom: 24px;
}
.object-direction-wrap{
display: flex;
align-items: center;
justify-content: center;
}
.discrimination-tit{
font-size: 13px;
color: #fff;
font-weight: 500;
}
.object-size-wrap{
display: flex;
min-height: 206px;
gap: 24px;
margin-top: 14px;
.object-size-img{
position: relative;
flex: none;
width: 200px;
background-color: #fff;
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}