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-17 15:28:05 +09:00
parent 97afaf3f5c
commit 38c38e67d4
8 changed files with 427 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,6 +57,11 @@ import AdditionalBundleDelete from '@/components/canvas/modal/additionalfunction
import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit'
import CanvasContextMenu from '@/components/canvas/CanvasContextMenu'
import ColorSelect from '@/components/canvas/modal/colorselect/ColorSelect'
import FontOption from '@/components/canvas/modal/font_lineoption/FontOption'
import LineOption from '@/components/canvas/modal/font_lineoption/LineOption'
import ShapeSizeOption from '@/components/canvas/modal/font_lineoption/ShapeSizeOption'
import RoofSelect from '@/components/canvas/modal/roofselect/RoofSelect'
import SizeChange from '@/components/canvas/modal/sizechange/SizeChang'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -177,7 +182,18 @@ export default function CanvasPage() {
{/* <AdditionalBundleEdit/> */}
{/* 색상 팝업 */}
<ColorSelect/>
{/* <ColorSelect/> */}
{/* 글꼴 설정, 치수선 설정 */}
<FontOption/>
<LineOption/>
<ShapeSizeOption/>
{/* 지붕재 선택 */}
<RoofSelect/>
{/* 사이즈 변경 */}
<SizeChange/>
</div>
</div>
</div>

2
src/app/reactselect/page.jsx
View File

@ -30,7 +30,7 @@ export default function ReactSelect() {
<div className="input-content">
<div className="input-wrap">
<h1>REACT-SELECT</h1>
<div className="select-wrap">
<div className="react-select-wrap">
<Select ref={ref} options={selectOption} onChange={onSelectionChange} isSearchable={false} placeholder="선택하세요" isClearable={true} />
</div>
</div>

57
src/components/canvas/modal/font_lineoption/FontOption.jsx Normal file
View File

@ -0,0 +1,57 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Qselect from "@/components/common/select/Qselect";
const SelectOption = [
{name: '原寸',}, {name: '原寸'}, {name: '原寸'}, {name: '原寸'}
]
export default function FontOption(){
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="slope-wrap">
<div className="font-option-warp">
<div className="font-option-item">
<div className="option-item-tit">文字(F)</div>
<div className="grid-select">
<Qselect title={'MS PGothic'} option={SelectOption}/>
</div>
</div>
<div className="font-option-item">
<div className="option-item-tit">フォントスタイル(Y)</div>
<div className="grid-select">
<Qselect title={'いつもの'} option={SelectOption}/>
</div>
</div>
<div className="font-option-item">
<div className="option-item-tit">サイズ(S)</div>
<div className="grid-select">
<Qselect title={'8'} option={SelectOption}/>
</div>
</div>
<div className="font-option-item">
<div className="option-item-tit">フォン</div>
<div className="grid-select">
<Qselect title={'黒'} option={SelectOption}/>
</div>
</div>
</div>
<div className="font-ex-wrap">
<div className="font-ex-tit">見る</div>
<div className="font-ex-box">
<span style={{fontSize: '12px', fontWeight: '400', color: '#101010'}}>Aaあぁアァ</span>
</div>
</div>
<div className="normal-font">ントです。プリンタと画面 でも同じフォントを使用します.</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button>
</div>
</div>
</div>
</WithDraggable>
)
}

46
src/components/canvas/modal/font_lineoption/LineOption.jsx Normal file
View File

@ -0,0 +1,46 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function LineOption(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">寸法線 設定 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="font-btn-wrap">
<button className="btn-frame modal">フォント設定</button>
</div>
<div className="line-color-wrap">
<div className="outline-form mb10">
<span style={{width: 'auto'}}>寸法線の線太さ</span>
<div className="input-grid mr5" style={{width: '66px'}}>
<input type="text" className="input-origin block" defaultValue={1}/>
</div>
<span className="thin">pixel</span>
</div>
<div className="outline-form">
<span style={{width: 'auto'}}>寸法線の線の色</span>
<button className="color-btn" style={{backgroundColor: "#ff0000"}}></button>
</div>
</div>
<div className="font-ex-wrap">
<div className="font-ex-tit">見る</div>
<div className="form-box">
<div className="line-form">
<div className="line-font-box">
<span className="font" style={{fontSize: "12px", fontWeight: "400"}}>9,999</span>
<span className="line" style={{backgroundColor: "#ff0000", borderColor: "#ff0000", height: "1px"}}></span>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button>
</div>
</div>
</div>
</WithDraggable>
)
}

35
src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx Normal file
View File

@ -0,0 +1,35 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function ShapeSizeOption(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xsm`}>
<div className="modal-head">
<h1 className="title">寸法線 設定 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="slope-wrap">
<div className="outline-form mb10">
<span style={{width: 'auto'}}>ガロ</span>
<div className="input-grid mr5" style={{width: '90px'}}>
<input type="text" className="input-origin block" defaultValue={1600}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form">
<span style={{width: 'auto'}}>縦ロ</span>
<div className="input-grid mr5" style={{width: '90px'}}>
<input type="text" className="input-origin block" defaultValue={1600}/>
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button>
</div>
</div>
</div>
</WithDraggable>
)
}

29
src/components/canvas/modal/roofselect/RoofSelect.jsx Normal file
View File

@ -0,0 +1,29 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Qselect from "@/components/common/select/Qselect";
const SelectOption = [
{name: '53A',}, {name: '53A'}, {name: '53A'}, {name: '53A'}
]
export default function RoofSelect(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">変更 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="slope-wrap">
<div className="grid-select">
<Qselect title={'53A'} option={SelectOption}/>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button>
</div>
</div>
</div>
</WithDraggable>
)
}

56
src/components/canvas/modal/sizechange/SizeChang.jsx Normal file
View File

@ -0,0 +1,56 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
export default function SizeChange(){
const [sizeCheck, setSizeCheck] = useState(1)
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm`}>
<div className="modal-head">
<h1 className="title">サイズ変更 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="slope-wrap">
<div className="size-option-top">
<div className="size-option-wrap">
<div className="size-option mb5">
<input type="text" className="input-origin mr5" defaultValue={1000} readOnly/>
<span className="normal-font">mm</span>
</div>
<div className="size-option">
<input type="text" className="input-origin mr5" defaultValue={1000}/>
<span className="normal-font">mm</span>
</div>
</div>
</div>
<div className="size-inner-warp">
<div className="size-option-side">
<div className="size-option-wrap">
<div className="size-option mb5">
<input type="text" className="input-origin mr5" defaultValue={1000} readOnly/>
<span className="normal-font">mm</span>
</div>
<div className="size-option">
<input type="text" className="input-origin mr5" defaultValue={1000}/>
<span className="normal-font">mm</span>
</div>
</div>
</div>
<div className="size-check-wrap">
<button className={`size-btn ${sizeCheck === 1 ? 'act': ''}`} onClick={() => setSizeCheck(1)}></button>
<button className={`size-btn ${sizeCheck === 2 ? 'act': ''}`} onClick={() => setSizeCheck(2)}></button>
<button className={`size-btn ${sizeCheck === 3 ? 'act': ''}`} onClick={() => setSizeCheck(3)}></button>
<button className={`size-btn ${sizeCheck === 4 ? 'act': ''}`} onClick={() => setSizeCheck(4)}></button>
<div className="size-box"></div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">作成</button>
</div>
</div>
</div>
</WithDraggable>
)
}

186
src/styles/_modal.scss
View File

@ -34,6 +34,9 @@ $alert-color: #101010;
border-radius: 4px;
background-color: #272727;
z-index: 9999999;
&.xsm{
width: 200px;
}
&.xxxm{
width: 240px;
}
@ -1592,3 +1595,186 @@ $alert-color: #101010;
}
}
}
// 글꼴 설정 팝업
.font-option-warp{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px 5px;
margin-bottom: 15px;
.font-option-item{
.option-item-tit{
font-size: 12px;
font-weight: 500;
color: #fff;
margin-bottom: 10px;
}
}
}
.font-ex-wrap{
margin-bottom: 15px;
.font-ex-tit{
font-size: 12px;
font-weight: 500;
color: #fff;
margin-bottom: 10px;
}
.font-ex-box{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80px;
background-color: #fff;
}
}
// 치수선 설정
.font-btn-wrap{
margin-bottom: 15px;
button{
width: 100%;
height: 30px;
line-height: 28px;
}
}
.line-color-wrap{
margin-bottom: 15px;
.color-btn{
display: block;
width: 100%;
height: 30px;
border-radius: 2px;
}
}
.form-box{
width: 100%;
background-color: #fff;
padding: 10px 0 20px;
.line-form{
position: relative;
width: 102px;
height: 40px;
margin: 0 auto;
border-left: 1px dashed #101010;
border-right: 1px dashed #101010;
.line-font-box{
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
text-align: center;
.font{
display: block;
padding-bottom: 6px;
color: #101010;
}
.line{
position: relative;
display: block;
width: 100%;
height: 1px;
border-radius: 30px;
&::before{
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(45deg);
left: 1px;
width: 9px;
height: 9px;
border: 1px solid;
border-color: inherit;
border-top: none;
border-right: none;
}
&::after{
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(45deg);
right: 1px;
width: 9px;
height: 9px;
border: 1px solid;
border-color: inherit;
border-bottom: none;
border-left: none;
}
}
}
}
}
// 사이즈 변경
.size-inner-warp{
position: relative;
}
.size-check-wrap{
position: relative;
display: block;
width: 132px;
height: 132px;
margin: 0 auto;
.size-btn{
position: absolute;
width: 16px;
height: 16px;
border: 1px solid #fff;
border-radius: 50%;
&.act{
&::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
}
}
&:nth-child(1){ top: 0; left: 0; }
&:nth-child(2){ top: 0; right: 0; }
&:nth-child(3){ bottom: 0; left: 0; }
&:nth-child(4){ bottom: 0; right: 0; }
}
.size-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #fff;
}
}
.size-option-top{
margin-bottom: 15px;
}
.size-option-side{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.size-option-wrap{
width: 88px;
margin: 0 auto;
.size-option{
display: flex;
align-items: center;
input{
width: 100%;
flex: 1;
}
span{
flex: none;
}
}
}