diff --git a/src/app/GlobalDataProvider.js b/src/app/GlobalDataProvider.js new file mode 100644 index 00000000..e4162cd1 --- /dev/null +++ b/src/app/GlobalDataProvider.js @@ -0,0 +1,24 @@ +'use client' + +import { createContext, useEffect, useState } from 'react' +import { useLocalStorage } from 'usehooks-ts' + +export const GlobalDataContext = createContext({ + managementState: {}, + setManagementState: () => {}, + managementStateLoaded: null, +}) + +const GlobalDataProvider = ({ children }) => { + const [managementState, setManagementState] = useState({}) + // TODO: 임시 조치이며 개발 완료시 삭제 예정 -> 잊지말기... + const [managementStateLoaded, setManagementStateLoaded] = useLocalStorage('managementStateLoaded', null) + + useEffect(() => { + setManagementStateLoaded(managementState) + }, [managementState]) + + return {children} +} + +export default GlobalDataProvider diff --git a/src/app/layout.js b/src/app/layout.js index 0f688eea..4385f2f8 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -4,10 +4,11 @@ import { getSession } from '@/lib/authActions' import RecoilRootWrapper from './RecoilWrapper' import { QcastProvider } from './QcastProvider' +import SessionProvider from './SessionProvider' +import GlobalDataProvider from './GlobalDataProvider' import Header from '@/components/header/Header' import QModal from '@/components/common/modal/QModal' import Dimmed from '@/components/ui/Dimmed' -import SessionProvider from './SessionProvider' import PopupManager from '@/components/common/popupManager/PopupManager' import './globals.css' @@ -60,26 +61,28 @@ export default async function RootLayout({ children }) { return ( - - - {headerPathname === '/login' || headerPathname === '/join' ? ( - {children} - ) : ( - -
-
-
- - {children} + + + + {headerPathname === '/login' || headerPathname === '/join' ? ( + {children} + ) : ( + +
+
+
+ + {children} +
+
-
-
- - )} - - - - + + )} + + + + + ) } diff --git a/src/app/management/ManagementProvider.js b/src/app/management/ManagementProvider.js index 197b30c0..fb57e948 100644 --- a/src/app/management/ManagementProvider.js +++ b/src/app/management/ManagementProvider.js @@ -1,20 +1,18 @@ 'ues client' -import { createContext, useEffect, useState } from 'react' +import { createContext } from 'react' -export const ManagementContext = createContext({ - managementState: {}, - setManagementState: () => {}, -}) +export const ManagementContext = createContext({}) const ManagementProvider = ({ children }) => { - const [managementState, setManagementState] = useState({}) + // const [managementState, setManagementState] = useState({}) - useEffect(() => { - console.log('🚀 ~ managementState:', managementState) - }, [managementState]) + // useEffect(() => { + // console.log('🚀 ~ managementState:', managementState) + // }, [managementState]) - return {children} + // return {children} + return {children} } export default ManagementProvider diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx index fcc5468d..2f3e2ab5 100644 --- a/src/components/Playground.jsx +++ b/src/components/Playground.jsx @@ -1,6 +1,6 @@ 'use client' -import { useRef, useState, useEffect } from 'react' +import { useRef, useState, useEffect, useContext } from 'react' import { useRecoilState } from 'recoil' import { v4 as uuidv4 } from 'uuid' import { FaAnglesUp } from 'react-icons/fa6' @@ -26,6 +26,7 @@ import QPagination from './common/pagination/QPagination' import { trestleRequestModels, constructionRequestModels, trestleDetailRequestModels } from '@/models/apiModels' import QSelectBox from './common/select/QSelectBox' import SampleReducer from './sample/SampleReducer' +import { GlobalDataContext } from '@/app/GlobalDataProvider' export default function Playground() { const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState) @@ -52,6 +53,8 @@ export default function Playground() { const [users, setUsers] = useState([]) + const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) + useEffect(() => { console.log('textInput:', textInput) }, [textInput]) @@ -508,6 +511,20 @@ export default function Playground() {
+
+ +
+
+ +
+
+

{managementStateLoaded?.objectNo}

+
+
+ +
) diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js index 2a0bbca0..65575731 100644 --- a/src/components/fabric/QLine.js +++ b/src/components/fabric/QLine.js @@ -35,10 +35,6 @@ export const QLine = fabric.util.createClass(fabric.Line, { this.startPoint = { x: this.x1, y: this.y1 } this.endPoint = { x: this.x2, y: this.y2 } - - if (canvas) { - this.canvas = canvas - } }, init: function () { diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index b211b420..34a7b6c4 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -79,7 +79,7 @@ export default function CanvasMenu(props) { const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext) const { restoreModuleInstArea } = useModuleBasicSetting() - const addedRoofs = useRecoilValue(addedRoofsState) + const [addedRoofs, setAddedRoofsState] = useRecoilState(addedRoofsState) const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState) const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) @@ -118,6 +118,16 @@ export default function CanvasMenu(props) { const changeSelectedRoofMaterial = (e) => { setBasicSetting({ ...basicSetting, selectedRoofMaterial: e }) + + const newAddedRoofs = addedRoofs.map((roof) => { + if (roof.index === e.index) { + return { ...roof, selected: true } + } else { + return { ...roof, selected: false } + } + }) + + setAddedRoofsState(newAddedRoofs) } const settingsModalOptions = useRecoilState(settingModalFirstOptionsState) diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 77d49d5e..7ed4e56e 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -238,15 +238,17 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
{ return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp } })} - value={currentRoofMaterial} + value={basicSetting.roofSizeSet === '3' ? null : currentRoofMaterial} onChange={(e) => handleRoofTypeChange(e.roofMatlCd)} sourceKey="id" targetKey="id" showKey="name" + disabled={basicSetting.roofSizeSet === '3'} /> {/* {raftCodes.map((raft, index) => { diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index 95cb2fef..001530a8 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -18,7 +18,8 @@ import WindSelectPop from './popup/WindSelectPop' import { useCommonCode } from '@/hooks/common/useCommonCode' import StuffPlanQGrid from './StuffPlanQGrid' import { floorPlanObjectState } from '@/store/floorPlanObjectAtom' -import { ManagementContext } from '@/app/management/ManagementProvider' +import { GlobalDataContext } from '@/app/GlobalDataProvider' +// import { ManagementContext } from '@/app/management/ManagementProvider' import DocDownOptionPop from '../estimate/popup/DocDownOptionPop' import { stuffSearchState } from '@/store/stuffAtom' import { QcastContext } from '@/app/QcastProvider' @@ -106,7 +107,7 @@ export default function StuffDetail() { const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set const [editMode, setEditMode] = useState('NEW') - const { managementState, setManagementState } = useContext(ManagementContext) + const { managementState, setManagementState } = useContext(GlobalDataContext) const [planGridProps, setPlanGridProps] = useState({ planGridData: [], isPageable: false, diff --git a/src/components/management/StuffHeader.jsx b/src/components/management/StuffHeader.jsx index f32c971c..142a15a5 100644 --- a/src/components/management/StuffHeader.jsx +++ b/src/components/management/StuffHeader.jsx @@ -3,11 +3,12 @@ import { useContext } from 'react' import { useMessage } from '@/hooks/useMessage' import dayjs from 'dayjs' -import { ManagementContext } from '@/app/management/ManagementProvider' +import { GlobalDataContext } from '@/app/GlobalDataProvider' +// import { ManagementContext } from '@/app/management/ManagementProvider' export default function StuffHeader() { const { getMessage } = useMessage() - const { managementState } = useContext(ManagementContext) + const { managementState } = useContext(GlobalDataContext) //물건번호 복사 const copyObjectNo = async (objectNo) => { diff --git a/src/components/management/StuffSubHeader.jsx b/src/components/management/StuffSubHeader.jsx index 27acf615..c92b4616 100644 --- a/src/components/management/StuffSubHeader.jsx +++ b/src/components/management/StuffSubHeader.jsx @@ -13,7 +13,8 @@ import { useMessage } from '@/hooks/useMessage' import { floorPlanObjectState } from '@/store/floorPlanObjectAtom' import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils' -import { ManagementContext } from '@/app/management/ManagementProvider' +import { GlobalDataContext } from '@/app/GlobalDataProvider' +// import { ManagementContext } from '@/app/management/ManagementProvider' import { SessionContext } from '@/app/SessionProvider' export default function StuffSubHeader({ type }) { @@ -25,7 +26,7 @@ export default function StuffSubHeader({ type }) { const { isGlobalLoading } = useContext(QcastContext) - const { managementState } = useContext(ManagementContext) + const { managementState } = useContext(GlobalDataContext) const [buttonStyle, setButtonStyle] = useState('') useEffect(() => { diff --git a/src/components/sample/SampleReducer.jsx b/src/components/sample/SampleReducer.jsx index 26150fea..c7403c25 100644 --- a/src/components/sample/SampleReducer.jsx +++ b/src/components/sample/SampleReducer.jsx @@ -54,7 +54,7 @@ export default function SampleReducer() { return t } }) - setSampleState({ ...sampleState, tabs: newTabs }) + setSampleState({ tabs: newTabs }) } useEffect(() => { diff --git a/src/hooks/common/useRoofFn.js b/src/hooks/common/useRoofFn.js index afe1c71e..a35ef9fc 100644 --- a/src/hooks/common/useRoofFn.js +++ b/src/hooks/common/useRoofFn.js @@ -1,11 +1,18 @@ import { useRecoilValue } from 'recoil' -import { canvasState } from '@/store/canvasAtom' +import { canvasState, currentObjectState } from '@/store/canvasAtom' import { selectedRoofMaterialSelector } from '@/store/settingAtom' import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' - +import { POLYGON_TYPE } from '@/common/common' +const ROOF_COLOR = { + 0: 'rgb(199,240,213)', + 1: 'rgb(178,238,255)', + 2: 'rgb(187,204,255)', + 3: 'rgb(228,202,255)', +} export function useRoofFn() { const canvas = useRecoilValue(canvasState) const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) + const currentObject = useRecoilValue(currentObjectState) //면형상 선택 클릭시 지붕 패턴 입히기 function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial = selectedRoofMaterial) { @@ -14,6 +21,7 @@ export function useRoofFn() { let width = (roofMaterial.width ?? 226) / 10 let height = (roofMaterial.length ?? 158) / 10 + const index = roofMaterial.index ?? 0 let roofStyle = 2 const inputPatternSize = { width: width, height: height } //임시 사이즈 const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해 @@ -33,7 +41,7 @@ export function useRoofFn() { const rows = Math.floor(patternSourceCanvas.height / patternSize.height) const cols = Math.floor(patternSourceCanvas.width / patternSize.width) - ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'blue' + ctx.strokeStyle = mode === 'allPainted' ? 'black' : ROOF_COLOR[index] ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4 ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white' @@ -141,5 +149,22 @@ export function useRoofFn() { polygon.roofMaterial = roofMaterial polygon.canvas?.renderAll() } - return { setSurfaceShapePattern } + + function removeRoofMaterial(roof = currentObject) { + if (roof === null || roof.name !== POLYGON_TYPE.ROOF) { + return + } + roof.set('fill', null) + roof.roofMaterial = null + canvas?.renderAll() + } + + function removeAllRoofMaterial() { + const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) + roofBases.forEach((roofBase) => { + removeRoofMaterial(roofBase) + }) + } + + return { setSurfaceShapePattern, removeRoofMaterial, removeAllRoofMaterial } } diff --git a/src/hooks/roofcover/useRoofShapePassivitySetting.js b/src/hooks/roofcover/useRoofShapePassivitySetting.js index f054e23e..02f56fa7 100644 --- a/src/hooks/roofcover/useRoofShapePassivitySetting.js +++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js @@ -88,10 +88,10 @@ export function useRoofShapePassivitySetting(id) { const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') let stroke, strokeWidth lines.forEach((line) => { - if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES || line.attributes.type === LINE_TYPE.WALLLINE.HIPANDGABLE) { + if (line.attributes?.type === LINE_TYPE.WALLLINE.EAVES || line.attributes?.type === LINE_TYPE.WALLLINE.HIPANDGABLE) { stroke = '#45CD7D' strokeWidth = 4 - } else if (line.attributes.type === LINE_TYPE.WALLLINE.GABLE || line.attributes.type === LINE_TYPE.WALLLINE.JERKINHEAD) { + } else if (line.attributes?.type === LINE_TYPE.WALLLINE.GABLE || line.attributes?.type === LINE_TYPE.WALLLINE.JERKINHEAD) { stroke = '#3FBAE6' strokeWidth = 4 } else { @@ -136,7 +136,7 @@ export function useRoofShapePassivitySetting(id) { const index = lines.findIndex((line) => line === selectedLine) const nextLine = lines[index + 1] || lines[0] - if (nextLine.attributes.isFixed) { + if (nextLine.attributes?.isFixed) { canvas.discardActiveObject() return } diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index a66c2c11..02896cb3 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -39,6 +39,7 @@ import ContextRoofAllocationSetting from '@/components/floor-plan/modal/roofAllo import { useCanvasSetting } from './option/useCanvasSetting' import { useGrid } from './common/useGrid' import { useAdsorptionPoint } from './useAdsorptionPoint' +import { useRoofFn } from '@/hooks/common/useRoofFn' export function useContextMenu() { const canvas = useRecoilValue(canvasState) @@ -65,6 +66,7 @@ export function useContextMenu() { const commonTextFont = useRecoilValue(fontSelector('commonText')) const { settingsData, setSettingsDataSave } = useCanvasSetting() const { swalFire } = useSwal() + const { removeRoofMaterial, removeAllRoofMaterial } = useRoofFn() const currentMenuSetting = () => { switch (currentMenu) { @@ -124,14 +126,17 @@ export function useContextMenu() { { id: 'roofMaterialPlacement', name: getMessage('contextmenu.roof.material.placement'), + component: , }, { id: 'roofMaterialRemove', name: getMessage('contextmenu.roof.material.remove'), + fn: () => removeRoofMaterial(), }, { id: 'roofMaterialRemoveAll', name: getMessage('contextmenu.roof.material.remove.all'), + fn: () => removeAllRoofMaterial(), }, { id: 'selectMove', diff --git a/src/hooks/useSwal.js b/src/hooks/useSwal.js index cb18e6a7..018d8f32 100644 --- a/src/hooks/useSwal.js +++ b/src/hooks/useSwal.js @@ -21,6 +21,8 @@ export const useSwal = () => { text, icon: icon === '' ? 'success' : icon, confirmButtonText: '확인', + }).then(() => { + confirmFn() }) } else if (type === 'confirm') { MySwal.fire({ diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index df5022a7..1b837fdd 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -239,16 +239,6 @@ export const roofMaterialsSelector = selector({ }, }) -// 지붕면 할당에서 추가된 지붕재 목록 -export const addedRoofsSelector = selector({ - key: 'addedRoofsSelector', - get: ({ get }) => { - const basicSetting = get(basicSettingState) - return basicSetting.roofs - }, - dangerouslyAllowMutability: true, -}) - /** * 현재 선택된 물건 번호 */