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

canvas page 퍼블리싱 추가

Browse Source
This commit is contained in:
김창수 2024-09-06 16:50:50 +09:00
parent bff190828d
commit cedc17a96b
10 changed files with 203 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/canvas/plan_close_black.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="7" height="8" viewBox="0 0 7 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 1.5L1 6.5" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
<path d="M1 1.5L6 6.5" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 267 B

4
public/static/images/canvas/plan_close_gray.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="7" height="8" viewBox="0 0 7 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 1.5L1 6.5" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
<path d="M1 1.5L6 6.5" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 267 B

4
public/static/images/canvas/plane_add.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.50001 0.964466V8.03553" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M0.964466 4.5H8.03553" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

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

@ -1,4 +1,5 @@
import CanvasMenu from '@/components/canvas_menu/CanvasMenu'
import CanvasLayout from '@/components/canvas/CanvasLayout'
import CanvasMenu from '@/components/canvas/CanvasMenu'
import Header from '@/components/header/Header'
import '@/styles/style.scss'
@ -9,7 +10,9 @@ export default function CanvasPage() {
<div className="content">
<div className="canvas-wrap">
<CanvasMenu/>
asdasd
<div className="canvas-content">
<CanvasLayout/>
</div>
</div>
</div>
</div>

7
src/components/canvas/CanvasFrame.jsx Normal file
View File

@ -0,0 +1,7 @@
export default function CanvasFrame () {
return(
<div className="canvas-frame">
<canvas></canvas>
</div>
)
}

45
src/components/canvas/CanvasLayout.jsx Normal file
View File

@ -0,0 +1,45 @@
'use client'
import { useState } from "react"
import CanvasFrame from "./CanvasFrame";
export default function CanvasLayout () {
const [plans, setPlans] = useState([{ id: 0, name: 'Plan 1' }, { id: 1, name: 'Plan 2' }, { id: 2, name: 'Plan 3' }]);
const [idxNum, setIdxNum] = useState(null);
const onClickPlane = (num) => {
setIdxNum(num);
}
const handleDeletePlan = (e, id) => {
e.stopPropagation(); // 이벤트 버블링 방지
setPlans(plans.filter(plan => plan.id !== id)); // 삭제할 아이디와 다른 아이템만 남김
}
const addNewPlan = () => {
setPlans([...plans, { id: plans.length, name: `Plan ${plans.length + 1}` }]);
}
return(
<div className="canvas-layout">
<div className="canvas-page-list">
<div className="canvas-plane-wrap">
{plans.map((plan, idx) => (
<button
key={plan.id}
className={`canvas-page-box ${idx === idxNum ? 'on' : ''}`}
onClick={() => onClickPlane(idx)}
>
<span>{plan.name}</span>
<i className="close" onClick={(e) => handleDeletePlan(e, plan.id)}></i>
</button>
))}
</div>
<button className="plane-add" onClick={addNewPlan}>
<span></span>
</button>
</div>
<CanvasFrame/>
</div>
)
}

16
src/components/canvas_menu/CanvasMenu.jsx → src/components/canvas/CanvasMenu.jsx
View File

@ -15,25 +15,25 @@ export default function CanvasMenu() {
}
}
return(
<div className="canvas-menu-wrap">
<div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ""}`}>
<div className="canvas-menu-inner">
<ul className="canvas-menu-list">
<li className={`canvas-menu-item ${menuNumber === 1 && 'active'}`} onClick={() => onClickNav(1)}>
<li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
<button><span className="menu-icon con01"></span>配置面 初期設定</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 2 && 'active'}`} onClick={() => onClickNav(2)}>
<li className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`} onClick={() => onClickNav(2)}>
<button><span className="menu-icon con02"></span>配置面 初期設定</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 3 && 'active'}`} onClick={() => onClickNav(3)}>
<li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
<button><span className="menu-icon con03"></span>配置面</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 4 && 'active'}`} onClick={() => onClickNav(4)}>
<li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
<button><span className="menu-icon con04"></span>モジュール回路構成</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 5 && 'active'}`} onClick={() => onClickNav(5)}>
<li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
<button><span className="menu-icon con05"></span>発展シミュレーション</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 6 && 'active'}`} onClick={() => onClickNav(6)}>
<li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
<button><span className="menu-icon con06"></span>見積</button>
</li>
</ul>
@ -61,7 +61,7 @@ export default function CanvasMenu() {
</div>
</div>
</div>
<div className={`canvas-depth2-wrap ${menuNumber !== null && 'active'}`}>
<div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
{menuNumber === 1 && <MenuDepth01/>}
{menuNumber === 2 && <MenuDepth01/>}
{menuNumber === 3 && <MenuDepth01/>}

0
src/components/canvas_menu/MenuDepth01.jsx → src/components/canvas/MenuDepth01.jsx
View File

136
src/styles/_contents.scss
View File

@ -1,34 +1,46 @@
// CanvasPage
.canvas-wrap{
height: calc(100vh - 47px);
display: flex;
flex-direction: column;
.canvas-content{
flex: 1 1 auto;
.canvas-layout{
height: 100%;
}
}
}
// CanvasMenu
.canvas-menu-wrap{
position: relative;
display: block;
width: 100%;
background-color: #2C2C2C;
padding-bottom: 0;
background-color: #383838;
transition: padding .17s ease-in-out;
.canvas-menu-inner{
position: relative;
display: flex;
height: 46px;
align-items: center;
padding: 0 40px 0 20px;
background-color: inherit;
background-color: #2C2C2C;
z-index: 999;
.canvas-menu-list{
display: flex;
align-items: center;
height: inherit;
height: 100%;
.canvas-menu-item{
display: flex;
align-items: center;
height: inherit;
height: 100%;
button{
display: flex;
align-items: center;
font-size: 12px;
height: inherit;
height: 100%;
color: #fff;
font-weight: 600;
padding: 0 20px;
padding: 15px 20px;
opacity: 0.55;
transition: all .17s ease-in-out;
.menu-icon{
@ -129,10 +141,12 @@
}
}
.canvas-depth2-wrap{
position: relative;
height: 50px;
position: absolute;
top: -100%;
left: 0;
background-color: #383838;
transform: translateY(-100%);
width: 100%;
height: 50px;
transition: all .17s ease-in-out;
.canvas-depth2-inner{
display: flex;
@ -179,14 +193,17 @@
display: flex;
align-items: center;
margin-left: auto;
height: 100%;
.depth2-btn-box{
display: flex;
align-items: center;
margin-right: 34px;
height: 100%;
button{
position: relative;
font-size: 12px;
font-weight: 400;
height: 100%;
color: #fff;
padding-right: 12px;
&:after{
@ -207,7 +224,102 @@
}
}
&.active{
transform: translateY(0);
top: 47px;
}
}
&.active{
padding-bottom: 50px;
}
}
// canvas-layout
.canvas-layout{
.canvas-page-list{
display: flex;
background-color: #1C1C1C;
border-top: 1px solid #000;
width: 100%;
.canvas-plane-wrap{
display: flex;
align-items: center;
max-width: calc(100% - 45px);
.canvas-page-box{
display: flex;
align-items: center;
background-color: #1c1c1c;
padding: 9.6px 20px;
border-right:1px solid #000;
min-width: 0;
transition: all .17s ease-in-out;
span{
display: flex;
align-items: center;
width: 100%;
font-size: 12px;
font-family: 'Pretendard', sans-serif;
color: #AAA;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.close{
flex: none;
display: block;
width: 7px;
height: 8px;
margin-left: 15px;
background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
background-size: cover;
}
&.on{
background-color: #fff;
span{
font-weight: 600;
color: #101010;
}
.close{
background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
}
&:hover{
background-color: #fff;
}
}
&:hover{
background-color: #000;
}
}
}
.plane-add{
display: flex;
align-items: center;
justify-content: center;
width: 45px;
padding: 13.5px 0;
background-color: #1C1C1C;
border-right: 1px solid #000;
transition: all .17s ease-in-out;
span{
display: block;
width: 9px;
height: 9px;
background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
background-size: cover;
}
&:hover{
background-color: #000;
}
}
}
}
.canvas-frame{
position: relative;
height: calc(100% - 35.5px);
canvas{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

3
src/styles/_layout.scss
View File

@ -208,4 +208,5 @@ header{
}
}
}
}
}