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

- FloorPlan Page 수정

Browse Source
This commit is contained in:
minsik 2024-09-09 14:32:09 +09:00
parent 598c89faf5
commit ffc758c001
11 changed files with 349 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/[locale]/floor-plan/page.jsx
View File

@ -1,5 +1,9 @@
import FloorPlan from '@/components/floor-plan/FloorPlan'
export default function floorPlanPage() {
return <FloorPlan />
export default function FloorPlanPage() {
return (
<>
<FloorPlan />
</>
)
}

1
src/app/[locale]/layout.js
View File

@ -4,6 +4,7 @@ import { useCurrentLocale } from '@/locales/client'
import { LocaleProvider } from './LocaleProvider'
import ServerError from './error'
import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
import '@/styles/common.scss'
export default function LocaleLayout({ children }) {
const locale = useCurrentLocale()

11
src/app/layout.js
View File

@ -3,13 +3,13 @@ import { Inter } from 'next/font/google'
import RecoilRootWrapper from './RecoilWrapper'
import UIProvider from './UIProvider'
import { headers } from 'next/headers'
import Headers from '@/components/Headers'
import { ToastContainer } from 'react-toastify'
import QModal from '@/components/common/modal/QModal'
import './globals.css'
import '../styles/style.scss'
import Header from '@/components/header/Header'
const inter = Inter({ subsets: ['latin'] })
@ -26,9 +26,14 @@ export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
{headerPathname !== '/login' && <Headers />}
{/*{headerPathname !== '/login' && <Headers />}*/}
<RecoilRootWrapper>
<UIProvider>{children}</UIProvider>
<div className="wrap">
<Header />
<div className="content">
<UIProvider>{children}</UIProvider>
</div>
</div>
<QModal />
<ToastContainer />
</RecoilRootWrapper>

28
src/components/Main.jsx
View File

@ -21,20 +21,20 @@ export default function MainPage(props) {
return (
<>
<h3>{t('locale', { locale: <Chip color="primary">{currentLocale}</Chip> })}</h3>
<div>{t('hello')}</div>
<div>{t('welcome', { name: '효준' })}</div>
<div>
<Button onClick={handleChangeLocale}>Change Locale</Button>
</div>
{isLoggedIn && (
<div className="my-4">
<Button color="primary" onClick={handleLogout}>
로그아웃
</Button>
</div>
)}
<div className="font-test">font-test</div>
{/*<h3>{t('locale', { locale: <Chip color="primary">{currentLocale}</Chip> })}</h3>*/}
{/*<div>{t('hello')}</div>*/}
{/*<div>{t('welcome', { name: '효준' })}</div>*/}
{/*<div>*/}
{/* <Button onClick={handleChangeLocale}>Change Locale</Button>*/}
{/*</div>*/}
{/*{isLoggedIn && (*/}
{/* <div className="my-4">*/}
{/* <Button color="primary" onClick={handleLogout}>*/}
{/* 로그아웃*/}
{/* </Button>*/}
{/* </div>*/}
{/*)}*/}
{/*<div className="font-test">font-test</div>*/}
</>
)
}

20
src/components/common/select/QSelect.jsx Normal file
View File

@ -0,0 +1,20 @@
'use client'
import { useState } from 'react'
export default function QSelect({ title, option }) {
const [selectAct, setSelectAct] = useState(false)
return (
<div className={`sort-select ${selectAct ? 'active' : ''}`} onClick={() => setSelectAct(!selectAct)}>
<p>{title}</p>
<ul className="select-item-wrap">
{option.map((el, idx) => (
<li key={idx} className="select-item">
<button>{el.name}</button>
</li>
))}
s
</ul>
</div>
)
}

7
src/components/floor-plan/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/floor-plan/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>
)
}

84
src/components/floor-plan/CanvasMenu.jsx Normal file
View File

@ -0,0 +1,84 @@
'use client'
import { useState } from 'react'
import QSelect from '@/components/common/select/QSelect'
import MenuDepth01 from './MenuDepth01'
export default function CanvasMenu() {
const [menuNumber, setMenuNumber] = useState(null)
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
const onClickNav = (number) => {
setMenuNumber(number)
if (menuNumber === number) {
setMenuNumber(null)
}
}
return (
<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)}>
<button>
<span className="menu-icon con01"></span>配置面 初期設定
</button>
</li>
<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)}>
<button>
<span className="menu-icon con03"></span>配置面
</button>
</li>
<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)}>
<button>
<span className="menu-icon con05"></span>発展シミュレーション
</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
<button>
<span className="menu-icon con06"></span>見積
</button>
</li>
</ul>
<div className="canvas-side-btn-wrap">
<div className="select-box">
<QSelect title={'瓦53A'} option={SelectOption} />
</div>
<div className="btn-from">
<button className="btn01 "></button>
<button className="btn02 active"></button>
<button className="btn03"></button>
<button className="btn04"></button>
<button className="btn05"></button>
<button className="btn06"></button>
</div>
<div className="size-control">
<button className="control-btn minus"></button>
<span>100%</span>
<button className="control-btn plus"></button>
</div>
<div className="btn-from">
<button className="btn07"></button>
<button className="btn08"></button>
<button className="btn09"></button>
</div>
</div>
</div>
<div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
{menuNumber === 1 && <MenuDepth01 />}
{menuNumber === 2 && <MenuDepth01 />}
{menuNumber === 3 && <MenuDepth01 />}
{menuNumber === 4 && <MenuDepth01 />}
{menuNumber === 5 && <MenuDepth01 />}
{menuNumber === 6 && <MenuDepth01 />}
</div>
</div>
)
}

10
src/components/floor-plan/FloorPlan.jsx
View File

@ -1,7 +1,15 @@
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
export default function FloorPlan() {
return (
<>
<h1>도면 작성 페이지</h1>
<div className="canvas-wrap">
<CanvasMenu />
<div className="canvas-content">
<CanvasLayout />
</div>
</div>
</>
)
}

44
src/components/floor-plan/MenuDepth01.jsx Normal file
View File

@ -0,0 +1,44 @@
'use client'
import { ToggleonMouse } from '@/components/header/Header'
export default function MenuDepth01() {
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">
<button>補助線を描</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>
<li className="canvas-depth2-item">
<button>銅線移動</button>
</li>
<li className="canvas-depth2-item">
<button>特殊コーナー形状</button>
</li>
</ul>
<ul className="canvas-depth2-btn-list">
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
<button>屋根面の割り当て</button>
</li>
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
<button>屋根材の設定と変更</button>
</li>
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
<button>屋根面全体削除</button>
</li>
</ul>
</div>
)
}

111
src/components/header/Header.jsx Normal file
View File

@ -0,0 +1,111 @@
'use client'
import Link from 'next/link'
import QSelect from '@/components/common/select/QSelect'
export const ToggleonMouse = (e, act, target) => {
const listWrap = e.target.closest(target)
const ListItem = Array.from(listWrap.childNodes)
ListItem.forEach((el) => {
if (act === 'add') {
el.classList.add('mouse')
} else {
el.classList.remove('mouse')
}
})
if (act === 'add') {
e.target.parentElement.classList.remove('mouse')
}
}
export default function Header() {
const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
return (
<header>
<div className="header-inner">
<div className="header-right">
<h1 className="logo">
<Link href={'#'}></Link>
</h1>
<nav>
<ul className="nav-list ">
<li
className="nav-item "
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
>
<Link href={'#'}>ホームへ</Link>
</li>
<li
className="nav-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
>
<button>物品及び図面管理</button>
<ul className="nav-depth2">
<li
className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
>
<Link href={'#'}>新規物件登録</Link>
</li>
<li
className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
>
<Link href={'#'}>モノ/図面管理</Link>
</li>
</ul>
</li>
<li
className="nav-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
>
<button>コミュニティ</button>
<ul className="nav-depth2">
<li
className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
>
<Link href={'#'}>お知らせ</Link>
</li>
<li
className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
>
<Link href={'#'}>FAQ</Link>
</li>
<li
className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
>
<Link href={'#'}>素材のダウンロード</Link>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div className="header-left">
<div className="profile-box">
<button className="profile">Kim Ji Young</button>
</div>
<div className="sign-out-box">
<button className="sign-out">ログアウト</button>
</div>
<div className="select-box">
<QSelect title={'Q.ORDER'} option={SelectOption} />
</div>
<div className="btn-wrap">
<button className="btn-frame small dark">移動</button>
</div>
</div>
</div>
</header>
)
}