)
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/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/locales/ja.json b/src/locales/ja.json
index baa74f41..26502c8d 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -376,6 +376,7 @@
"board.sub.total": "全体",
"board.sub.fileList": "添付ファイル一覧",
"board.sub.updDt": "更新日",
+ "board.sub.btn.close": "閉じる",
"myinfo.title": "マイプロフィール",
"myinfo.info.userId": "ユーザーID",
"myinfo.info.nameKana": "担当者名ふりがな",
@@ -587,6 +588,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..4d1c50da 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -381,6 +381,7 @@
"board.sub.total": "전체",
"board.sub.fileList": "첨부파일 목록",
"board.sub.updDt": "업데이트",
+ "board.sub.btn.close": "닫기",
"myinfo.title": "My profile",
"myinfo.info.userId": "사용자ID",
"myinfo.info.nameKana": "담당자명 후리가나",
@@ -592,6 +593,7 @@
"stuff.detail.planGridHeader.management": "관리",
"stuff.detail.planGrid.btn1": "견적서 조회",
"stuff.detail.planGrid.btn2": "Excel",
+ "stuff.grid.noData": "조회된 데이터가 없습니다",
"length": "길이",
"height": "높이",
"output": "출력",
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',