- menuNumber -> selectedMenu 명칭 변경

- menuType 삭제
This commit is contained in:
김민식 2025-02-24 18:54:03 +09:00
parent 6b3d091848
commit 60ed70445b
13 changed files with 85 additions and 120 deletions

View File

@ -87,7 +87,7 @@ export default function Estimate({}) {
const { getMessage } = useMessage()
const { closeAll } = usePopup()
const { setMenuNumber } = useCanvasMenu()
const { setSelectedMenu } = useCanvasMenu()
// props
const fileUploadProps = {
uploadFiles: files,
@ -142,7 +142,7 @@ export default function Estimate({}) {
}, [selectedPlan])
useEffect(() => {
setMenuNumber(5)
setSelectedMenu('estimate')
initEstimate()
}, [])

View File

@ -14,7 +14,7 @@ import { globalLocaleStore } from '@/store/localeAtom'
export default function CanvasLayout({ children }) {
// const { menuNumber } = props
const pathname = usePathname()
const { menuNumber } = useCanvasMenu()
const { selectedMenu } = useCanvasMenu()
const { session } = useContext(SessionContext)
const { floorPlanState } = useContext(FloorPlanContext)
const { objectNo, pid } = floorPlanState
@ -30,7 +30,7 @@ export default function CanvasLayout({ children }) {
return (
<div className="canvas-layout">
<div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<div className={`canvas-page-list ${['outline', 'surface', 'module'].includes(selectedMenu) ? 'active' : ''}`}>
<div className="canvas-plane-wrap">
{plans.map((plan, index) => (
<button

View File

@ -38,7 +38,7 @@ import {
} from '@/store/settingAtom'
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
import { commonUtilsState } from '@/store/commonUtilsAtom'
import { menusState, menuTypeState } from '@/store/menuAtom'
import { menusState } from '@/store/menuAtom'
import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
import { isObjectNotEmpty } from '@/util/common-utils'
@ -51,12 +51,11 @@ import { QcastContext } from '@/app/QcastProvider'
import { useRoofFn } from '@/hooks/common/useRoofFn'
import { usePolygon } from '@/hooks/usePolygon'
export default function CanvasMenu(props) {
const { menuNumber, setMenuNumber } = props
const { selectedMenu, setSelectedMenu } = props
const pathname = usePathname()
const router = useRouter()
const { addPopup } = usePopup()
const canvasMenus = useRecoilValue(menusState)
const [type, setType] = useRecoilState(menuTypeState)
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
const setAppMessageState = useSetRecoilState(appMessageStore)
const setCurrentMenu = useSetRecoilState(currentMenuState)
@ -154,8 +153,8 @@ export default function CanvasMenu(props) {
}
const onClickNav = async (menu) => {
switch (menu.index) {
case 0:
switch (menu.type) {
case 'drawing':
swalFire({
text: getMessage('stuff.detail.move.confirmMsg'),
type: 'confirm',
@ -165,17 +164,15 @@ export default function CanvasMenu(props) {
},
})
break
case 1:
setType('placementShape')
case 'placement':
onClickPlacementInitialMenu()
await reloadCanvasStatus(objectNo, pid)
break
case 2:
setType('outline')
case 'outline':
await reloadCanvasStatus(objectNo, pid)
break
case 3:
if (menuNumber > menu.index) {
case 'surface':
if (selectedMenu > menu.index) {
const modules = canvas.getObjects().filter((module) => module.name === POLYGON_TYPE.MODULE)
const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@ -210,7 +207,6 @@ export default function CanvasMenu(props) {
canvas.renderAll()
onClickNav(menu)
}
setType('surface')
},
denyFn: () => {
return
@ -218,24 +214,23 @@ export default function CanvasMenu(props) {
})
return
} else {
setType('surface')
}
} else {
setType('surface')
setSelectedMenu(menu.type)
}
await reloadCanvasStatus(objectNo, pid)
break
case 4:
if (menuNumber < menu.index) {
if (selectedMenu < menu.index) {
if (!checkMenuAndCanvasState()) {
swalFire({ text: getMessage('menu.validation.canvas.roof') })
return
} else {
setType('module')
setSelectedMenu('module')
}
} else {
router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
setType('module')
setSelectedMenu('module')
}
await reloadCanvasStatus(objectNo, pid)
break
@ -245,11 +240,11 @@ export default function CanvasMenu(props) {
if (res.status === 200) {
const estimateDetail = res.data
if (estimateDetail.estimateDate !== null) {
setMenuNumber(menu.index)
setSelectedMenu(menu.type)
setCurrentMenu(menu.title)
setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
setIsGlobalLoading(false)
router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
router.push(`/floor-plan/estimate/${menu.type}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
if (pathname === '/floor-plan/estimate/5') {
setIsGlobalLoading(false)
}
@ -266,7 +261,7 @@ export default function CanvasMenu(props) {
if (res.status === 200) {
const estimateDetail = res.data
if (estimateDetail.estimateDate !== null && estimateDetail.docNo) {
setMenuNumber(menu.index)
setSelectedMenu(menu.type)
setCurrentMenu(menu.title)
router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
if (pathname === '/floor-plan/simulator/6') {
@ -281,14 +276,14 @@ export default function CanvasMenu(props) {
break
}
if (menu.index !== 6 && menu.index !== 0 && menu.index !== 5) {
setMenuNumber(menu.index)
if (menu.type !== 'simulation' && menu.type !== 'estimate' && menu.type !== 'drawing') {
setSelectedMenu(menu.type)
setCurrentMenu(menu.title)
}
if (pathname !== '/floor-plan') {
// if (menu.index !== 0 ) {
// or ..
if (menu.index !== 0 && menu.index !== 5 && menu.index !== 6) {
if (menu.type !== 'drawing' && menu.type !== 'estimate' && menu.type !== 'simulation') {
router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
}
}
@ -311,10 +306,10 @@ export default function CanvasMenu(props) {
const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
useEffect(() => {
if (menuNumber === 1) {
if (selectedMenu === 'placement') {
onClickPlacementInitialMenu()
}
if (menuNumber === 3) {
if (selectedMenu === 'surface') {
const moduleSurfacesArray = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
if (moduleSurfacesArray.length > 0) {
moduleSurfacesArray.forEach((moduleSurface) => {
@ -324,7 +319,7 @@ export default function CanvasMenu(props) {
canvas.renderAll()
}
}
}, [menuNumber, type])
}, [selectedMenu])
// (btn08)
const handleSaveCanvas = async () => {
@ -421,26 +416,13 @@ export default function CanvasMenu(props) {
} else {
setAppMessageState(JA)
}
}, [type, globalLocale])
/*useEffect(() => {
if (menuNumber === 1) {
return
}
setMenuNumber(1)
// if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) {
// setMenuNumber(3)
// setType('surface')
// setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
// } else {
// setMenuNumber(2)
// setType('outline')
// setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
// }
}, [basicSetting])*/
}, [globalLocale])
const checkMenuState = (menu) => {
return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && [1, 2].includes(menu.index))
return (
(['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.type === 'surface') ||
(selectedMenu === 'module' && ['drawing', 'placement'].includes(menu.type))
)
}
/**
@ -549,17 +531,17 @@ export default function CanvasMenu(props) {
}
return (
<div className={`canvas-menu-wrap ${[2, 3, 4].some((num) => num === menuNumber) ? 'active' : ''}`}>
<div className={`canvas-menu-wrap ${['outline', 'surface', 'module'].some((num) => num === selectedMenu) ? 'active' : ''}`}>
<div className="canvas-menu-inner">
<ul className="canvas-menu-list">
{canvasMenus.map((menu) => {
return (
<li
key={`canvas-menu-${menu.index}`}
className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
key={`canvas-menu-${menu.type}`}
className={`canvas-menu-item ${selectedMenu === menu.type ? 'active' : ''}`}
onClick={async () => {
if (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) return
if (menuNumber === 4 && [1, 2].includes(menu.index)) return
if (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.type === 'surface') return
if (selectedMenu === 'module' && ['drawing', 'placement'].includes(menu.type)) return
await onClickNav(menu)
}}
>
@ -572,7 +554,7 @@ export default function CanvasMenu(props) {
})}
</ul>
<div className="canvas-side-btn-wrap">
{![5, 6].some((num) => num === menuNumber) && (
{!['estimate', 'simulation'].some((num) => num === selectedMenu) && (
<>
{
<div className={`vertical-horizontal ${verticalHorizontalMode ? 'on' : ''}`}>
@ -643,7 +625,7 @@ export default function CanvasMenu(props) {
</>
)}
{menuNumber === 5 && (
{selectedMenu === 'estimate' && (
<>
<div className="ico-btn-from">
<button
@ -705,7 +687,7 @@ export default function CanvasMenu(props) {
</div>
</>
)}
{menuNumber === 6 && (
{selectedMenu === 'simulation' && (
<>
<div className="ico-btn-from">
<button type="button" className="btn-frame gray ico-flx" onClick={() => handleExcelPdfFileDown('EXCEL', '2')}>
@ -721,8 +703,8 @@ export default function CanvasMenu(props) {
)}
</div>
</div>
<div className={`canvas-depth2-wrap ${[2, 3, 4].some((num) => num === menuNumber) ? 'active' : ''}`}>
{[2, 3, 4].some((num) => num === menuNumber) && <MenuDepth01 />}
<div className={`canvas-depth2-wrap ${['outline', 'surface', 'module'].some((num) => num === selectedMenu) ? 'active' : ''}`}>
{['outline', 'surface', 'module'].some((num) => num === selectedMenu) && <MenuDepth01 />}
</div>
{/* 견적서(menuNumber=== 5) 상세화면인경우 문서다운로드 팝업 */}
{estimatePopupOpen && (

View File

@ -18,7 +18,7 @@ export default function FloorPlan({ children }) {
const pid = searchParams.get('pid')
const { closeAll } = usePopup()
const { menuNumber, setMenuNumber } = useCanvasMenu()
const { selectedMenu, setSelectedMenu } = useCanvasMenu()
const { fetchSettings } = useCanvasSetting()
const resetCurrentMenu = useResetRecoilState(currentMenuState)
useEffect(() => {
@ -54,15 +54,17 @@ export default function FloorPlan({ children }) {
}, [correntObjectNo])
const modalProps = {
menuNumber,
setMenuNumber,
selectedMenu,
setSelectedMenu,
}
return (
<>
<div className="canvas-wrap">
<CanvasMenu {...modalProps} />
<div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>{children}</div>
<div className={`canvas-content ${selectedMenu === 'outline' || selectedMenu === 'surface' || selectedMenu === 'module' ? 'active' : ''}`}>
{children}
</div>
</div>
</>
)

View File

@ -6,32 +6,37 @@ import { useMessage } from '@/hooks/useMessage'
import useMenu from '@/hooks/common/useMenu'
import { canvasState, currentMenuState } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue } from 'recoil'
import { menuTypeState, subMenusState } from '@/store/menuAtom'
import { subMenusState } from '@/store/menuAtom'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
export default function MenuDepth01() {
const type = useRecoilValue(menuTypeState)
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
const { handleMenu } = useMenu()
const { selectedMenu, setSelectedMenu } = useCanvasMenu()
const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
const subMenus = useRecoilValue(subMenusState)
const onClickMenu = ({ id, menu }) => {
if (menu === currentMenu) {
handleMenu(type)
handleMenu(selectedMenu)
} else {
setCurrentMenu(menu)
}
}
useEffect(() => {
handleMenu(type)
console.log(subMenus[selectedMenu])
}, [selectedMenu])
useEffect(() => {
handleMenu(selectedMenu)
canvas?.discardActiveObject()
}, [currentMenu])
return (
<div className="canvas-depth2-inner">
<ul className="canvas-depth2-list">
{subMenus[type]?.map((menu) => {
{subMenus[selectedMenu]?.map((menu) => {
return (
<li key={menu.id} className={`canvas-depth2-item ${menu.menu === currentMenu ? 'active' : ''}`}>
<button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>

View File

@ -220,8 +220,8 @@ export default function PassivityCircuitAllocation(props) {
goodsNo: model.goodsNo,
serQtyList: [
{
serQty: result[index + 1].maxValue,
paralQty: result[index + 1].count,
serQty: result[(index + 1).toString()].maxValue,
paralQty: result[(index + 1).toString()].count,
rmdYn: 'Y',
usePossYn: 'Y',
roofSurfaceList: roofSurfaceList,

View File

@ -38,7 +38,7 @@ export default function StuffDetail() {
const [showButton, setShowButton] = useState('') //, ,
const { setMenuNumber } = useCanvasMenu()
const { setSelectedMenu } = useCanvasMenu()
//
const { commonCode, findCommonCode } = useCommonCode()
@ -308,7 +308,7 @@ export default function StuffDetail() {
onClick={() => {
setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
setIsGlobalLoading(true)
setMenuNumber(5)
setSelectedMenu('estimate')
router.push(`/floor-plan/estimate/5?pid=${params.data.planNo}&objectNo=${params.data.objectNo}`)
}}
>
@ -1653,7 +1653,7 @@ export default function StuffDetail() {
pid: planNo,
objectNo: objectNo,
}
setMenuNumber(null)
setSelectedMenu(null)
const url = `/floor-plan?${queryStringFormatter(param)}`
router.push(url)
}

View File

@ -27,7 +27,7 @@ export default function StuffSubHeader({ type }) {
const [buttonStyle, setButtonStyle] = useState('')
const { setMenuNumber } = useCanvasMenu()
const { setSelectedMenu } = useCanvasMenu()
useEffect(() => {
window.scrollTo(0, 0)
@ -55,7 +55,7 @@ export default function StuffSubHeader({ type }) {
objectNo: objectNo,
}
setMenuNumber(null)
setSelectedMenu(null)
const url = `/floor-plan?${queryStringFormatter(param)}`
router.push(url)

View File

@ -1,4 +1,4 @@
import { menuNumberState } from '@/store/menuAtom'
import { selectedMenuState } from '@/store/menuAtom'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useEffect } from 'react'
import { canvasState } from '@/store/canvasAtom'
@ -6,28 +6,12 @@ import { usePolygon } from '@/hooks/usePolygon'
import { POLYGON_TYPE } from '@/common/common'
export const useCanvasMenu = () => {
const [menuNumber, setMenuNumber] = useRecoilState(menuNumberState)
const [selectedMenu, setSelectedMenu] = useRecoilState(selectedMenuState)
const canvas = useRecoilValue(canvasState)
const { drawDirectionArrow } = usePolygon()
/*useEffect(() => {
/!*
* 모듈,회로 구성을 벗어나면 방향 표시 초기화 필요
* *!/
if (!canvas) return
if (![4, 5].includes(menuNumber)) {
canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.ROOF)
.forEach((obj) => {
obj.set('moduleCompass', null)
// drawDirectionArrow(obj)
})
}
}, [menuNumber])*/
return {
menuNumber,
setMenuNumber,
selectedMenu,
setSelectedMenu,
}
}

View File

@ -33,7 +33,6 @@ import { useColor } from 'react-color-palette'
import { useMasterController } from '@/hooks/common/useMasterController'
import PlacementShapeSetting, { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
import { useCanvasMenu } from '../common/useCanvasMenu'
import { menuTypeState } from '@/store/menuAtom'
import { usePopup } from '../usePopup'
import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
@ -88,7 +87,7 @@ export function useCanvasSetting() {
)
const [gridColor, setGridColor] = useRecoilState(gridColorState)
const [color, setColor] = useColor(gridColor ?? '#FF0000')
const { menuNumber, setMenuNumber } = useCanvasMenu()
const { selectedMenu, setSelectedMenu } = useCanvasMenu()
const [settingsData, setSettingsData] = useState({
...settingModalFirstOptions,
@ -116,7 +115,6 @@ export function useCanvasSetting() {
const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
const [fetchRoofMaterials, setFetchRoofMaterials] = useRecoilState(fetchRoofMaterialsState)
const [type, setType] = useRecoilState(menuTypeState)
const setCurrentMenu = useSetRecoilState(currentMenuState)
const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
@ -482,12 +480,10 @@ export function useCanvasSetting() {
/* 메뉴 설정 */
if (['2', '3'].includes(params.roofSizeSet)) {
setMenuNumber(3)
setType('surface')
setSelectedMenu('surface')
setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
} else {
setMenuNumber(2)
setType('outline')
setSelectedMenu('outline')
setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
}
@ -543,12 +539,10 @@ export function useCanvasSetting() {
/* 메뉴 설정 */
if (['2', '3'].includes(params?.roofSizeSet)) {
setMenuNumber(3)
setType('surface')
setSelectedMenu('surface')
setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
} else {
setMenuNumber(2)
setType('outline')
setSelectedMenu('outline')
setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
}

View File

@ -19,7 +19,6 @@ import ActualSizeSetting from '@/components/floor-plan/modal/roofAllocation/Actu
import { useMessage } from '@/hooks/useMessage'
import useMenu from '@/hooks/common/useMenu'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { menuTypeState } from '@/store/menuAtom'
import { useRoofFn } from '@/hooks/common/useRoofFn'
import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
import { globalLocaleStore } from '@/store/localeAtom'
@ -37,8 +36,7 @@ export function useRoofAllocationSetting(id) {
const [popupId, setPopupId] = useState(uuidv4())
const { addPopup, closePopup, closeAll } = usePopup()
const currentObject = useRecoilValue(currentObjectState)
const { setMenuNumber } = useCanvasMenu()
const setMenuType = useSetRecoilState(menuTypeState)
const { setSelectedMenu } = useCanvasMenu()
const roofMaterials = useRecoilValue(roofMaterialsSelector)
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
@ -387,8 +385,7 @@ export function useRoofAllocationSetting(id) {
})
setEditingLines([])
closeAll()
setMenuNumber(3)
setMenuType('surface')
setSelectedMenu('surface')
modifyModuleSelectionData()
}

View File

@ -140,7 +140,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
}
}
} else {
imageRotate = (rotate + 4) % 4
imageRotate = (rotate + 360) % 360
}
obj.set({ angle: imageRotate })
obj.setCoords() //좌표 변경 적용

View File

@ -6,32 +6,33 @@ export const menuNumberState = atom({
default: null,
})
export const menuTypeState = atom({
key: 'menuTypeState',
export const selectedMenuState = atom({
key: 'selectedMenuState',
default: null,
})
export const menusState = atom({
key: 'menusState',
default: [
{ index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
{ type: 'drawing', name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING }, //. 도면 작성
{
index: 1,
type: 'placement', // 배치면 초기설정
name: 'plan.menu.placement.surface.initial.setting',
icon: 'con01',
title: MENU.INITIAL_CANVAS_SETTING,
},
{ index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
{ index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
{ index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
{ index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
{ index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
{ type: 'outline', name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
{ type: 'surface', name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
{ type: 'module', name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
{ type: 'estimate', name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
{ type: 'simulation', name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
],
})
export const subMenusState = atom({
key: 'subMenusState',
default: {
placement: [], // 배치면 초기 설정
outline: [
// 지붕덮개
{ id: 0, name: 'plan.menu.roof.cover.outline.drawing', menu: MENU.ROOF_COVERING.EXTERIOR_WALL_LINE },