From 1387c8aa0bc9fc9aa824fce33f5653feb8473718 Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Fri, 25 Oct 2024 16:19:20 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=EC=BA=94=EB=B2=84=EC=8A=A4=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20=ED=99=95=EC=9D=B8=20?= =?UTF-8?q?=EB=B0=A9=EB=B2=95=EC=9D=84=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=EC=98=A4=EB=B8=8C=EC=A0=9D=ED=8A=B8=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EA=B0=90=EC=A7=80=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/fabric/QPolygon.js | 2 +- src/components/floor-plan/CanvasFrame.jsx | 15 ++++++++-- src/components/floor-plan/CanvasLayout.jsx | 6 ++-- src/hooks/useCanvasEvent.js | 34 ++++++++++++++++++++-- src/hooks/usePlan.js | 32 ++++++++++---------- src/store/canvasAtom.js | 5 ++++ 6 files changed, 71 insertions(+), 23 deletions(-) diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index b28a3b47..31076b69 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -172,7 +172,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { addLengthText() { this.canvas ?.getObjects() - .filter((obj) => obj.name === 'lengthText' && obj.parent === this) + .filter((obj) => obj.name === 'lengthText' && obj.parentId === this.id) .forEach((text) => { this.canvas.remove(text) }) diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index 086e9441..4cc08372 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -2,18 +2,20 @@ import { useEffect, useRef } from 'react' +import { useRecoilState, useRecoilValue } from 'recoil' + import { useCanvas } from '@/hooks/useCanvas' import { useEvent } from '@/hooks/useEvent' import { usePlan } from '@/hooks/usePlan' import { useContextMenu } from '@/hooks/useContextMenu' -import { useRecoilValue } from 'recoil' -import { currentObjectState } from '@/store/canvasAtom' +import { currentObjectState, modifiedPlanFlagState } from '@/store/canvasAtom' import { useCanvasEvent } from '@/hooks/useCanvasEvent' import QContextMenu from '@/components/common/context-menu/QContextMenu' import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize' export default function CanvasFrame({ plan }) { const canvasRef = useRef(null) + const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) const { canvas } = useCanvas('canvas') const { handleZoomClear } = useCanvasEvent() const { contextMenu, currentContextMenu, setCurrentContextMenu, handleClick } = useContextMenu({ @@ -21,7 +23,7 @@ export default function CanvasFrame({ plan }) { handleZoomClear, }, }) - const { checkCanvasObjectEvent, checkUnsavedCanvasPlan } = usePlan() + const { checkCanvasObjectEvent, resetModifiedPlans } = usePlan() const { canvasLoadInit, gridInit } = useCanvasConfigInitialize() const currentObject = useRecoilValue(currentObjectState) @@ -40,8 +42,15 @@ export default function CanvasFrame({ plan }) { } } + useEffect(() => { + if (modifiedPlanFlag && plan?.id) { + checkCanvasObjectEvent(plan.id) + } + }, [modifiedPlanFlag]) + useEffect(() => { loadCanvas() + resetModifiedPlans() }, [plan, canvas]) const onClickContextMenu = (index) => {} diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx index 63722a64..ac247f6b 100644 --- a/src/components/floor-plan/CanvasLayout.jsx +++ b/src/components/floor-plan/CanvasLayout.jsx @@ -1,11 +1,12 @@ 'use client' import { useContext, useEffect, useState } from 'react' -import { useRecoilValue } from 'recoil' +import { useRecoilState, useRecoilValue } from 'recoil' import CanvasFrame from './CanvasFrame' import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' import { usePlan } from '@/hooks/usePlan' +import { modifiedPlansState } from '@/store/canvasAtom' import { globalLocaleStore } from '@/store/localeAtom' import { SessionContext } from '@/app/SessionProvider' @@ -13,11 +14,12 @@ export default function CanvasLayout(props) { const { menuNumber } = props const { session } = useContext(SessionContext) const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요 + const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan const globalLocaleState = useRecoilValue(globalLocaleStore) const { getMessage } = useMessage() const { swalFire } = useSwal() - const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() + const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() useEffect(() => { loadCanvasPlanData(session.userId, objectNo) diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index bf878c7b..0df650c0 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -1,7 +1,15 @@ import { useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' import { v4 as uuidv4 } from 'uuid' -import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom' +import { + canvasSizeState, + canvasState, + canvasZoomState, + currentObjectState, + fontFamilyState, + fontSizeState, + modifiedPlanFlagState, +} from '@/store/canvasAtom' import { QPolygon } from '@/components/fabric/QPolygon' // 캔버스에 필요한 이벤트 @@ -13,6 +21,7 @@ export function useCanvasEvent() { const fontSize = useRecoilValue(fontSizeState) const fontFamily = useRecoilValue(fontFamilyState) const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) + const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) // 기본적인 이벤트 필요시 추가 const attachDefaultEventOnCanvas = () => { @@ -34,14 +43,32 @@ export function useCanvasEvent() { onChange: (e) => { const target = e.target + if (target.name !== 'mouseLine') { + if (!modifiedPlanFlag) { + setModifiedPlanFlag((prev) => !prev) + } + } + if (target) { - target.uuid = uuidv4() // settleDown(target) } }, addEvent: (e) => { const target = e.target + if (!target.id) { + target.id = uuidv4() + } + if (!target.uuid) { + target.uuid = uuidv4() + } + + if (target.name !== 'mouseLine') { + if (!modifiedPlanFlag) { + setModifiedPlanFlag((prev) => !prev) + } + } + if (target.type === 'QPolygon' || target.type === 'QLine') { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText') textObjs.forEach((obj) => { @@ -141,6 +168,9 @@ export function useCanvasEvent() { })*/ target.on('moving', (e) => { + target.uuid = uuidv4() + setModifiedPlanFlag((prev) => !prev) + if (target.parentDirection === 'left' || target.parentDirection === 'right') { const minX = target.minX const maxX = target.maxX diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index e00c78e8..8ed84af4 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' import { useRecoilState } from 'recoil' -import { v4 as uuidv4 } from 'uuid' -import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState } from '@/store/canvasAtom' +import { v4 as uuidv4, validate as isValidUUID } from 'uuid' +import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom' import { useAxios } from '@/hooks/useAxios' import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' @@ -14,6 +14,7 @@ export function usePlan() { const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan) const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan + const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) // 캔버스 실시간 오브젝트 이벤트 감지 flag const { swalFire } = useSwal() const { getMessage } = useMessage() @@ -90,30 +91,29 @@ export function usePlan() { } /** - * 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 판단 + * 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 확인 후 관리 */ - const checkCanvasObjectEvent = (e, planId) => { + const checkCanvasObjectEvent = (planId) => { if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) { - setModifiedPlans([...modifiedPlans, planId]) + setModifiedPlans((prev) => [...prev, planId]) + setModifiedPlanFlag(false) } } - /** * 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단 */ const checkModifiedCanvasPlan = (planId) => { const canvasStatus = currentCanvasData() - const initPlanData = initCanvasPlans.find((plan) => plan.id === planId) - - if (!initPlanData) { + if (isValidUUID(planId)) { // 새로운 캔버스 return JSON.parse(canvasStatus).objects.length > 0 } else { // 저장된 캔버스 // 각각 object들의 uuid 목록을 추출하여 비교 const canvasObjsUuids = getObjectUuids(JSON.parse(canvasStatus).objects) + const initPlanData = initCanvasPlans.find((plan) => plan.id === planId) const dbObjsUuids = getObjectUuids(JSON.parse(initPlanData.canvasStatus).objects) - return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((id, index) => id === dbObjsUuids[index]) + return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((uuid, index) => uuid === dbObjsUuids[index]) } } const getObjectUuids = (objects) => { @@ -122,10 +122,12 @@ export function usePlan() { .map((obj) => obj.uuid) .sort() } - /** - * 캔버스에 저장되지 않은 변경사항이 있는 경우 저장 여부를 확인 후 저장 - */ - const checkUnsavedCanvasPlan = async () => { + + const resetModifiedPlans = () => { + setModifiedPlans([]) + setModifiedPlanFlag(false) + } + const checkUnsavedCanvasPlan = (str) => { if (modifiedPlans.length > 0) { swalFire({ text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'), @@ -365,7 +367,7 @@ export function usePlan() { plans, modifiedPlans, checkCanvasObjectEvent, - checkUnsavedCanvasPlan, + resetModifiedPlans, saveCanvas, handleCurrentPlan, handleAddPlan, diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index d9878f2f..0f2428ee 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -275,6 +275,11 @@ export const modifiedPlansState = atom({ key: 'modifiedPlansState', default: [], }) +// 변경감지 flag +export const modifiedPlanFlagState = atom({ + key: 'modifiedPlanFlagState', + default: false, +}) export const tempGridModeState = atom({ key: 'tempGridModeState', From 45b0063b8b2befba7142116386a85a5f6c5c847c Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 25 Oct 2024 16:26:07 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=ED=99=94=EB=A9=B4=20,=20?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=99=94=EB=A9=B4=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main/MainContents.jsx | 10 +++++++--- src/components/management/StuffQGrid.jsx | 5 ++++- .../management/popup/FindAddressPopQGrid.jsx | 6 +++++- src/components/management/popup/PlanRequestPop.jsx | 7 +++++++ .../management/popup/PlanRequestPopQGrid.jsx | 4 ++++ src/components/ui/MainSkeleton.jsx | 4 ++-- src/locales/ja.json | 1 + src/locales/ko.json | 1 + 8 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx index fa61b676..9490a868 100644 --- a/src/components/main/MainContents.jsx +++ b/src/components/main/MainContents.jsx @@ -136,7 +136,7 @@ export default function MainContents() { })} ) : ( - + )} @@ -147,7 +147,9 @@ export default function MainContents() {
{recentNoticeList[0]?.title}
{recentNoticeList[0]?.contents}
- ) : null} + ) : ( + + )} @@ -168,7 +170,9 @@ export default function MainContents() { ) })} - ) : null} + ) : ( + + )} diff --git a/src/components/management/StuffQGrid.jsx b/src/components/management/StuffQGrid.jsx index 33836e79..abbafca4 100644 --- a/src/components/management/StuffQGrid.jsx +++ b/src/components/management/StuffQGrid.jsx @@ -1,11 +1,14 @@ import React from 'react' import { useCallback, useEffect, useMemo, useState } from 'react' import { AgGridReact } from 'ag-grid-react' +import { useMessage } from '@/hooks/useMessage' import 'ag-grid-community/styles/ag-grid.css' import 'ag-grid-community/styles/ag-theme-quartz.css' export default function StuffQGrid(props) { + const { getMessage } = useMessage() + const { gridData, gridColumns, isPageable = true, count, gridRef } = props /** * 행 데이터를 설정할 때 useState을 사용하여 렌더링 전반에 걸쳐 일관된 배열 참조를 유지하는 것이 좋습니다 @@ -95,7 +98,7 @@ export default function StuffQGrid(props) { onSelectionChanged={onSelectionChanged} onCellDoubleClicked={onCellDoubleClicked} pagination={isPageable} - overlayNoRowsTemplate={'물건 목록이 없습니다.'} + overlayNoRowsTemplate={`${getMessage('stuff.grid.noData')}`} getRowClass={getRowClass} autoSizeAllColumns={true} /> diff --git a/src/components/management/popup/FindAddressPopQGrid.jsx b/src/components/management/popup/FindAddressPopQGrid.jsx index b9d1bb90..383e1cc7 100644 --- a/src/components/management/popup/FindAddressPopQGrid.jsx +++ b/src/components/management/popup/FindAddressPopQGrid.jsx @@ -1,11 +1,14 @@ import React from 'react' import { useCallback, useEffect, useMemo, useState } from 'react' import { AgGridReact } from 'ag-grid-react' +import { useMessage } from '@/hooks/useMessage' import 'ag-grid-community/styles/ag-grid.css' import 'ag-grid-community/styles/ag-theme-quartz.css' export default function FindAddressPopGrid(props) { + const { getMessage } = useMessage() + const { gridData, gridColumns, isPageable = true } = props const [rowData, setRowData] = useState(null) @@ -46,7 +49,7 @@ export default function FindAddressPopGrid(props) { } return ( -
+
${getMessage('stuff.grid.noData')}`} />
) diff --git a/src/components/management/popup/PlanRequestPop.jsx b/src/components/management/popup/PlanRequestPop.jsx index cde86d6b..bbe0f6c9 100644 --- a/src/components/management/popup/PlanRequestPop.jsx +++ b/src/components/management/popup/PlanRequestPop.jsx @@ -253,6 +253,12 @@ export default function PlanRequestPop(props) { } }, [commonCode]) + // 숫자만 입력 가능 + const handleKeyUp = (e) => { + let input = e.target + input.value = input.value.replace(/[^0-9]/g, '') + } + return (
@@ -301,6 +307,7 @@ export default function PlanRequestPop(props) { type="text" className="input-light" value={schPlanReqNo} + onKeyUp={handleKeyUp} onChange={(e) => { setSchPlanReqNo(e.target.value) }} diff --git a/src/components/management/popup/PlanRequestPopQGrid.jsx b/src/components/management/popup/PlanRequestPopQGrid.jsx index e610a138..6e3a8467 100644 --- a/src/components/management/popup/PlanRequestPopQGrid.jsx +++ b/src/components/management/popup/PlanRequestPopQGrid.jsx @@ -1,11 +1,14 @@ import React from 'react' import { useCallback, useEffect, useMemo, useState } from 'react' import { AgGridReact } from 'ag-grid-react' +import { useMessage } from '@/hooks/useMessage' import 'ag-grid-community/styles/ag-grid.css' import 'ag-grid-community/styles/ag-theme-quartz.css' export default function PlanRequestPopQGrid(props) { + const { getMessage } = useMessage() + const { gridData, gridColumns, isPageable = true } = props const [rowData, setRowData] = useState(null) @@ -56,6 +59,7 @@ export default function PlanRequestPopQGrid(props) { rowSelection={'singleRow'} pagination={isPageable} onSelectionChanged={onSelectionChanged} + overlayNoRowsTemplate={`${getMessage('stuff.grid.noData')}`} />
) diff --git a/src/components/ui/MainSkeleton.jsx b/src/components/ui/MainSkeleton.jsx index fa0a48c2..e8b64e17 100644 --- a/src/components/ui/MainSkeleton.jsx +++ b/src/components/ui/MainSkeleton.jsx @@ -1,13 +1,13 @@ import Skeleton from 'react-loading-skeleton' import 'react-loading-skeleton/dist/skeleton.css' -export default function MainSkeleton() { +export default function MainSkeleton({ count }) { return ( <>
- + ) } diff --git a/src/locales/ja.json b/src/locales/ja.json index baa74f41..91b6df42 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -587,6 +587,7 @@ "stuff.detail.planGridHeader.management": "管理", "stuff.detail.planGrid.btn1": "見積書の照会", "stuff.detail.planGrid.btn2": "Excel", + "stuff.grid.noData": "照会されたデータがありません", "length": "長さ", "height": "高さ", "output": "出力", diff --git a/src/locales/ko.json b/src/locales/ko.json index d46e7726..f21c282e 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -592,6 +592,7 @@ "stuff.detail.planGridHeader.management": "관리", "stuff.detail.planGrid.btn1": "견적서 조회", "stuff.detail.planGrid.btn2": "Excel", + "stuff.grid.noData": "조회된 데이터가 없습니다", "length": "길이", "height": "높이", "output": "출력", From c8a27c5f019f2d51de8d03b4e95d73d957a1a7ee Mon Sep 17 00:00:00 2001 From: leeyongjae Date: Fri, 25 Oct 2024 16:32:18 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=ED=8C=9D=EC=97=85=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/community/modal/BoardDetailModal.jsx | 7 +++++-- src/locales/ja.json | 1 + src/locales/ko.json | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/community/modal/BoardDetailModal.jsx b/src/components/community/modal/BoardDetailModal.jsx index ec324966..c1ba4213 100644 --- a/src/components/community/modal/BoardDetailModal.jsx +++ b/src/components/community/modal/BoardDetailModal.jsx @@ -3,8 +3,11 @@ import { useEffect, useState } from 'react' import { useAxios } from '@/hooks/useAxios' import { handleFileDown } from '@/util/board-utils' +import { useMessage } from '@/hooks/useMessage' export default function BoardDetailModal({ noticeNo, setOpen }) { + const { getMessage } = useMessage() + // api 조회 관련 const { get } = useAxios() const [boardDetail, setBoardDetail] = useState({}) @@ -46,7 +49,7 @@ export default function BoardDetailModal({ noticeNo, setOpen }) { setOpen(false) }} > - 닫기 + {getMessage('board.sub.btn.close')}
@@ -55,7 +58,7 @@ export default function BoardDetailModal({ noticeNo, setOpen }) { {boardDetail.listFile && (
-
첨부파일 목록
+
{getMessage('board.sub.fileList')}
{boardDetail.listFile.map((boardFile) => (