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-09-27 14:52:52 +09:00
parent 8420fe0b7f
commit b64589dd40
15 changed files with 390 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/static/images/canvas/alert_close.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon">
<circle id="Ellipse 2012" cx="10" cy="10" r="9.5" fill="white" stroke="#272727"/>
<g id="elements">
<path id="Vector" d="M12.9994 13L7 7M7.00064 13L13 7" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 364 B

BIN
public/static/images/canvas/outline_cul.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 860 B

3
public/static/images/canvas/reset_ico.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M10.0046 1V2.5661C10.0046 2.71303 9.82091 2.77954 9.72684 2.66667C8.81131 1.64375 7.48083 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11C8.76142 11 11 8.76142 11 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 381 B

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

@ -6,9 +6,7 @@ import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
import GridMove from '@/components/canvas/modal/gridoption/GridMove'
import GridOption from '@/components/canvas/modal/gridoption/GridOption'
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
import PlacementGuidePop from '@/components/canvas/modal/placementsetting/PlacementGuidePop'
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
import RoofingMaterialGudiePop from '@/components/canvas/modal/placementsetting/RoofingMaterialGuidePop'
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
import Header from '@/components/layout/Header'
import { modalState } from '@/store/modalAtom'
@ -29,9 +27,7 @@ export default function CanvasPage() {
<CanvasLayout menuValue={menuValue}/>
</div>
{/* 배치면 초기 설정 */}
<PlacementSettingPop/>
<PlacementGuidePop/>
<RoofingMaterialGudiePop/>
{/* <PlacementSettingPop/> */}
{/* 캔버스 기본 셋팅 */}
{/* {modalOption.option && <SettingModal01/>} */}
@ -42,7 +38,7 @@ export default function CanvasPage() {
{/* {modalOption.gridmove && <GridMove/>} */}
{/* 외벽선 그리기 */}
{/* {modalOption.outerwall && <OuterLineWall/>} */}
{modalOption.outerwall && <OuterLineWall/>}
</div>
</div>
</div>

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

@ -4,6 +4,11 @@ import { useState } from "react";
import WithDraggable from "@/components/common/draggable/withDraggable";
import { modalState } from "@/store/modalAtom";
import { useRecoilState } from "recoil";
import Tab01 from "./Tab01";
import Tab02 from "./Tab02";
import Tab03 from "./Tab03";
import Tab04 from "./Tab04";
import Tab05 from "./Tab05";
export default function OuterLineWall (){
@ -19,7 +24,7 @@ export default function OuterLineWall (){
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<div className={`modal-pop-wrap r ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<div className="modal-head">
<h1 className="title">外壁線を描</h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
@ -58,32 +63,15 @@ export default function OuterLineWall (){
対角線
</button>
</div>
<div className="modal-check-btn-wrap">
<h3 className="check-wrap-title">設定</h3>
<div className="outer-line-wrap">
<div className="form-input">
<label htmlFor="">長さ (mm)</label>
<input type="text" className="input-origin block" placeholder="320mm"/>
</div>
<div className="form-input">
<label htmlFor="">方向 (矢印)</label>
<input type="text" className="input-origin block" placeholder="320mm"/>
</div>
</div>
<div className="flex-check-box for2 btn">
<button className="arr-btn dark">
<span>外壁線確定</span>
</button>
<button className="arr-btn dark act">
<span>一変戦に戻る</span>
</button>
<button className="arr-btn dark">
<span>外壁の削除</span>
</button>
<button className="arr-btn dark">
<span>外壁の選択、移動</span>
</button>
</div>
{buttonAct === 1 && <Tab01/>}
{buttonAct === 2 && <Tab02/>}
{buttonAct === 3 && <Tab03/>}
{buttonAct === 4 && <Tab04/>}
{buttonAct === 5 && <Tab05/>}
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5">一変戦に戻る</button>
<button className="btn-frame modal act">外壁線確定</button>
</div>
</div>
</div>

24
src/components/canvas/modal/outerlinesetting/Tab01.jsx Normal file
View File

@ -0,0 +1,24 @@
export default function Tab01(){
return(
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
)
}

42
src/components/canvas/modal/outerlinesetting/Tab02.jsx Normal file
View File

@ -0,0 +1,42 @@
export default function Tab02(){
return(
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
)
}

64
src/components/canvas/modal/outerlinesetting/Tab03.jsx Normal file
View File

@ -0,0 +1,64 @@
export default function Tab03(){
return(
<>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={4}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={6}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={3000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</>
)
}

31
src/components/canvas/modal/outerlinesetting/Tab04.jsx Normal file
View File

@ -0,0 +1,31 @@
import Image from "next/image";
export default function Tab04(){
return(
<>
<div className="outline-wrap">
<div className="cul-wrap">
<div className="outline-box">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={4}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="cul-box">
<Image src="/static/images/canvas/outline_cul.png" alt="react" width={69} height={59} />
</div>
</div>
</div>
</>
)
}

52
src/components/canvas/modal/outerlinesetting/Tab05.jsx Normal file
View File

@ -0,0 +1,52 @@
export default function Tab05(){
return(
<>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">対角線の<br/>長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '98px'}}>
<input type="text" className="input-origin block" defaultValue={8000}/>
</div>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</>
)
}

12
src/components/canvas/modal/placementsetting/PlacementGuidePop.jsx
View File

@ -1,19 +1,16 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function PlacementGuidePop(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap sm`}>
<div className={`modal-pop-wrap sm alert`}>
<div className="modal-head">
<h1 className="title">寸法入力方法案内</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="placement-table">
<div className="alert-title">寸法入力方法案内</div>
<div className="placement-table light">
<table>
<colgroup>
<col style={{width: '100px'}}/>
<col style={{width: '60px'}}/>
<col />
</colgroup>
<tbody>
@ -34,6 +31,5 @@ export default function PlacementGuidePop(){
</div>
</div>
</div>
</WithDraggable>
)
}

4
src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
View File

@ -1,4 +1,6 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import PlacementGuidePop from "./PlacementGuidePop";
import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
export default function PlacementSettingPop(){
@ -102,6 +104,8 @@ export default function PlacementSettingPop(){
<button className="btn-frame modal act">保存</button>
</div>
</div>
<PlacementGuidePop/>
<RoofingMaterialGudiePop/>
</div>
</WithDraggable>
)

6
src/components/canvas/modal/placementsetting/RoofingMaterialGuidePop.jsx
View File

@ -1,18 +1,14 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function RoofingMaterialGudiePop(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm`}>
<div className={`modal-pop-wrap ssm alert`}>
<div className="modal-head">
<h1 className="title">屋根材選択案内</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-guide">対応可能な屋根材や足場は限定されますので、必ず事前マニュアルをご確認ください。</div>
</div>
</div>
</WithDraggable>
)
}

143
src/styles/_modal.scss
View File

@ -2,6 +2,7 @@ $pop-color: #fff;
$pop-normal-weight: 400;
$pop-bold-weight: 500;
$pop-normal-size: 12px;
$alert-color: #101010;
@keyframes mountpop{
from{opacity: 0; scale: 0.95;}
@ -26,6 +27,9 @@ $pop-normal-size: 12px;
background-color: #272727;
z-index: 9999999;
overflow: hidden;
&.r{
width: 400px;
}
&.sm{
width: 580px;
}
@ -44,13 +48,42 @@ $pop-normal-size: 12px;
&.unmount{
animation: unmountpop .17s ease-in-out forwards;
}
&.alert{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
border: none;
.modal-head{
background-color: transparent;
padding: 0 0 8px;
.modal-close{
width: 20px;
height: 20px;
background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
}
}
.modal-body{
background-color: #fff;
padding: 22px;
border-radius: 4px;
border: 1px solid #101010;
color: $alert-color;
.alert-title{
font-size: 13px;
font-weight: 700;
color: $alert-color;
margin-bottom: 15px;
}
}
}
}
.modal-head{
display: flex;
align-items: center;
padding: 10px 24px;
background-color: #000;
cursor: pointer;
h1.title{
font-size: 13px;
color: $pop-color;
@ -66,7 +99,7 @@ $pop-normal-size: 12px;
}
}
.modal-body{
padding: 15px;
padding: 24px;
.modal-btn-wrap{
display: flex;
align-items: center;
@ -123,9 +156,8 @@ $pop-normal-size: 12px;
.modal-guide{
display: block;
font-size: $pop-normal-size;
color: $pop-color;
color: $alert-color;
font-weight: $pop-normal-weight;
line-height: 24px;
}
}
@ -181,12 +213,13 @@ $pop-normal-size: 12px;
display: flex;
align-items: center;
span{
flex: none;
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-bold-weight;
}
.input-grid{
width: 63px;
width: 54px;
input{
width: 100%;
}
@ -224,6 +257,7 @@ $pop-normal-size: 12px;
display: flex;
align-items: center;
gap: 5px;
flex: 1;
}
.direction{
width: 22px;
@ -235,12 +269,13 @@ $pop-normal-size: 12px;
background-size: 16px 15px;
border-radius: 50%;
transition: all .15s ease-in-out;
opacity: 0.6;
&.down{transform: rotate(180deg);}
&.left{transform: rotate(-90deg);}
&.right{transform: rotate(90deg);}
&:hover,
&.act{
background-color: #1083E3;
opacity: 1;
}
}
@ -261,7 +296,7 @@ $pop-normal-size: 12px;
font-size: $pop-normal-size;
}
.input-move{
width: 148px;
width: 130px;
input{
width: 100%;
}
@ -276,7 +311,6 @@ $pop-normal-size: 12px;
// 배치면 초기 설정
.placement-table{
padding: 9px;
table{
table-layout: fixed;
tr{
@ -312,6 +346,31 @@ $pop-normal-size: 12px;
background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
background-size: cover;
}
&.light{
padding: 0;
th,td{
color: $alert-color;
border-bottom: none;
border-top: 1px solid #EFEFEF;
}
th{
padding: 14px 0;
}
tr{
&:first-child{
td,
th{
padding-top: 14px;
}
}
&:last-child{
td,
th{
padding-bottom: 0px;
}
}
}
}
}
.pop-form-radio{
@ -338,4 +397,72 @@ $pop-normal-size: 12px;
color: $pop-color;
font-weight: $pop-normal-weight;
}
}
// 외벽선 그리기
.outline-wrap{
padding: 24px 0;
border-bottom: 1px solid #424242;
.outline-inner{
display: flex;
align-items: center;
margin-bottom: 14px;
&:last-child{
margin-bottom: 0;
}
}
}
.outline-form{
width: 50%;
display: flex;
align-items: center;
margin-right: 15px;
span{
width: 60px;
flex: none;
font-size: $pop-normal-size;
font-weight: $pop-bold-weight;
color: $pop-color;
margin-right: 10px;
}
.reset-btn{
flex: none;
width: 30px;
height: 30px;
background: transparent;
border: 1px solid #484848;
border-radius: 2px;
margin-left: 5px;
background-image: url(../../public/static/images/canvas/reset_ico.svg);
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: center;
}
&:last-child{
margin-right: 0;
}
}
.cul-wrap{
display: flex;
.outline-box{
width: 50%;
margin-right: 15px;
.outline-form{
width: 100%;
margin-bottom: 14px;
margin-right: 0;
&:last-child{
margin-bottom: 0;
}
}
}
.cul-box{
display: flex;
align-items: center;
justify-content: center;
width: 50%;
background-color: #3D3D3D;
border-radius: 2px ;
}
}

7
src/styles/_reset.scss
View File

@ -143,7 +143,7 @@ button{
// button
.btn-frame{
display: inline-block;
padding: 0 9px;
padding: 0 7px;
height: 34px;
line-height: 34px;
border-radius: 2px;
@ -178,6 +178,7 @@ button{
border: 1px solid #484848;
}
&.modal{
font-family: 'Noto Sans JP', sans-serif;
background-color: #272727;
border: 1px solid #484848;
color: #aaa;
@ -355,13 +356,14 @@ input[type=text]{
height: 30px;
line-height: 30px;
border-radius: 2px;
background-color: #313131;
background-color: #323234;
color: #fff;
font-size: 12px;
font-weight: 500;
font-family: 'Pretendard', sans-serif;
padding: 0 10px;
letter-spacing: 0px;
text-align: right;
&::placeholder{
opacity: 1;
font-size: 12px;
@ -384,6 +386,7 @@ input[type=text]{
color: #45576F;
font-weight: normal;
transition: border-color .17s ease-in-out;
text-align: left;
&:read-only{
background-color: #FAFAFA;
color: #999999;