Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

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')}
               </button>
             </div>
             <div className="modal-body">
@@ -55,7 +58,7 @@ export default function BoardDetailModal({ noticeNo, setOpen }) {
 
                 {boardDetail.listFile && (
                   <dl className="community_detail-file-wrap">
-                    <dt>첨부파일 목록</dt>
+                    <dt>{getMessage('board.sub.fileList')}</dt>
                     {boardDetail.listFile.map((boardFile) => (
                       <dd key={boardFile.encodeFileNo}>
                         <button type="button" className="down" onClick={() => handleFileDown(boardFile)}>

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)
       })

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, modifiedPlanFlagState } from '@/store/canvasAtom'
-import { currentObjectState } 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) => {}

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)

src/components/main/MainContents.jsx

@@ -136,7 +136,7 @@ export default function MainContents() {
               })}
             </ul>
           ) : (
-            <MainSkeleton />
+            <MainSkeleton count={6} />
           )}
         </ProductItem>
         <ProductItem num={2} name={getMessage('main.content.notice')}>
@@ -147,7 +147,9 @@ export default function MainContents() {
                 <div className="notice-title">{recentNoticeList[0]?.title}</div>
                 <div className="notice-contents">{recentNoticeList[0]?.contents}</div>
               </>
-            ) : null}
+            ) : (
+              <MainSkeleton count={5} />
+            )}
           </div>
         </ProductItem>
       </div>
@@ -168,7 +170,9 @@ export default function MainContents() {
                   )
                 })}
               </>
-            ) : null}
+            ) : (
+              <MainSkeleton count={2} />
+            )}
           </ul>
         </ProductItem>
         <ProductItem num={4} name={'Data Download'}>

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={'<span className="ag-overlay-loading-center">물건 목록이 없습니다.</span>'}
+        overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
         getRowClass={getRowClass}
         autoSizeAllColumns={true}
       />

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 (
-    <div className="ag-theme-quartz" style={{ height: 500 }}>
+    <div className="ag-theme-quartz" style={{ height: 400 }}>
       <AgGridReact
         onGridReady={onGridReady}
         rowBuffer={rowBuffer}
@@ -56,6 +59,7 @@ export default function FindAddressPopGrid(props) {
         rowSelection={'singleRow'}
         pagination={isPageable}
         onSelectionChanged={onSelectionChanged}
+        overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
       />
     </div>
   )

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 (
     <div className="modal-popup">
       <div className="modal-dialog big">
@@ -301,6 +307,7 @@ export default function PlanRequestPop(props) {
                               type="text"
                               className="input-light"
                               value={schPlanReqNo}
+                              onKeyUp={handleKeyUp}
                               onChange={(e) => {
                                 setSchPlanReqNo(e.target.value)
                               }}

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={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
       />
     </div>
   )

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 (
     <>
       <div className="mb-6">
         <Skeleton height={`50px`} />
       </div>
-      <Skeleton count={5} />
+      <Skeleton count={count} />
     </>
   )
 }

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

src/hooks/usePlan.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
-import { v4 as uuidv4 } from 'uuid'
+import { v4 as uuidv4, validate as isValidUUID } from 'uuid'
-import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState } from '@/store/canvasAtom'
+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 (isValidUUID(planId)) {
-
-    if (!initPlanData) {
       // 새로운 캔버스
       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 resetModifiedPlans = () => {
-   */
+    setModifiedPlans([])
-  const checkUnsavedCanvasPlan = async () => {
+    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,

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": "出力",

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": "출력",

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',