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

src/components/Playground.jsx

@@ -30,7 +30,7 @@ export default function Playground() {
   const fileRef = useRef(null)
   const queryRef = useRef(null)
   const [zoom, setZoom] = useState(20)
-  const { get, promisePost } = useAxios()
+  const { get, promiseGet, promisePost } = useAxios()
   const testVar = process.env.NEXT_PUBLIC_TEST
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
   const { getMessage } = useMessage()
@@ -43,6 +43,8 @@ export default function Playground() {
   const [checkboxInput, setCheckboxInput] = useState([])
   const [selectedValue, setSelectedValue] = useState('')
 
+  const [users, setUsers] = useState([])
+
   useEffect(() => {
     console.log('textInput:', textInput)
   }, [textInput])
@@ -142,6 +144,10 @@ export default function Playground() {
     },
   }
 
+  useEffect(() => {
+    console.log('users:', users)
+  }, [users])
+
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
@@ -305,6 +311,32 @@ export default function Playground() {
         <div className="my-2">
           <QPagination {...paginationProps} />
         </div>
+        <div className="my-2">
+          <Button
+            onClick={() => {
+              promiseGet({ url: 'http://localhost:8080/api/user' }).then((res) => setUsers(res.data))
+            }}
+          >
+            axios get test
+          </Button>
+        </div>
+        <div className="my-2">
+          <Button
+            onClick={() => {
+              const result = promisePost({
+                url: 'http://localhost:8080/api/user',
+                data: {
+                  firstName: 'Yoo',
+                  lastName: 'Sangwook',
+                  email: 'yoo1757@naver.com',
+                  age: 46,
+                },
+              }).then((res) => console.log('res', res))
+            }}
+          >
+            axios post test
+          </Button>
+        </div>
       </div>
     </>
   )

src/components/floor-plan/CanvasLayout.jsx

@@ -1,124 +1,28 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import CanvasFrame from './CanvasFrame'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 
 export default function CanvasLayout() {
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
-  const [planNum, setPlanNum] = useState(0)
-  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
-  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
-  const [plans, setPlans] = useRecoilState(plansState)
-  const globalLocaleState = useRecoilValue(globalLocaleStore)
   const sessionState = useRecoilValue(sessionStore)
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas, currentCanvasData } = usePlan()
+  const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
-
-  const handleCurrentPlan = (newCurrentId) => {
-    // console.log('currentPlan newCurrentId: ', newCurrentId)
-    if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
-      if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
-        swalFire({
-          html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
-          type: 'confirm',
-          confirmFn: async () => {
-            await saveCanvas(sessionState.userId)
-            updateCurrentPlan(newCurrentId)
-          },
-          denyFn: () => {
-            updateCurrentPlan(newCurrentId)
-          },
-        })
-      } else {
-        updateCurrentPlan(newCurrentId)
-      }
-    }
-  }
-  const updateCurrentPlan = (newCurrentId) => {
-    setPlans((plans) =>
-      plans.map((plan) => {
-        return { ...plan, isCurrent: plan.id === newCurrentId }
-      }),
-    )
-  }
-  useEffect(() => {
-    setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
-  }, [plans])
-
-  const handleDeletePlan = (e, id) => {
-    e.stopPropagation() // 이벤트 버블링 방지
-
-    if (initCanvasPlans.some((plan) => plan.id === id)) {
-      delCanvasById(id)
-        .then((res) => {
-          swalFire({ text: getMessage('common.message.delete') })
-          // console.log('[DELETE] canvas-statuses res :::::::: %o', res)
-          setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
-          setPlans((plans) => plans.filter((plan) => plan.id !== id))
-        })
-        .catch((error) => {
-          swalFire({ text: error.message, icon: 'error' })
-          // console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
-        })
-    } else {
-      setPlans((plans) => plans.filter((plan) => plan.id !== id))
-      swalFire({ text: getMessage('common.message.delete') })
-    }
-
-    // 삭제 후 last 데이터에 포커싱
-    const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
-    if (!lastPlan) {
-      setPlanNum(0)
-      setCurrentCanvasPlan(null)
-    } else if (id !== lastPlan.id) {
-      handleCurrentPlan(lastPlan.id)
-    }
-  }
-
-  const addEmptyPlan = () => {
-    setPlans([...plans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
-    handleCurrentPlan(planNum)
-    setPlanNum(planNum + 1)
-  }
-
-  const addCopyPlan = () => {
-    const copyPlan = {
-      id: planNum,
-      name: `Plan ${planNum + 1}`,
-      objectNo: `${objectNo}`,
-      userId: sessionState.userId,
-      canvasStatus: currentCanvasData(),
-    }
-    setPlans((plans) => [...plans, copyPlan])
-    handleCurrentPlan(planNum)
-    setPlanNum(planNum + 1)
-  }
 
   useEffect(() => {
-    if (!currentCanvasPlan) {
+    console.log('loadCanvasPlanData 실행, sessionState.userId >>> ', sessionState.userId)
-      getCanvasByObjectNo(sessionState.userId, objectNo).then((res) => {
+    loadCanvasPlanData(sessionState.userId, objectNo)
-        // console.log('canvas 목록 ', res)
-        if (res.length > 0) {
-          setInitCanvasPlans(res)
-          setPlans(res)
-          handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
-          setPlanNum(res.length)
-        } else {
-          addEmptyPlan()
-        }
-      })
-    }
   }, [])
-
+  
   return (
     <div className="canvas-layout">
       <div className="canvas-page-list">
@@ -127,7 +31,7 @@ export default function CanvasLayout() {
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
-              onClick={() => handleCurrentPlan(plan.id)}
+              onClick={() => handleCurrentPlan(sessionState.userId, plan.id)}
             >
               <span>{plan.name}</span>
               <i
@@ -146,23 +50,7 @@ export default function CanvasLayout() {
           ))}
         </div>
         {plans.length < 10 && (
-          <button
+          <button className="plane-add" onClick={() => handleAddPlan(sessionState.userId, objectNo)}>
-            className="plane-add"
-            onClick={() =>
-              JSON.parse(currentCanvasData()).objects.length > 0
-                ? swalFire({
-                    html: `${currentCanvasPlan.name} 을 복제하시겠습니까?`,
-                    type: 'confirm',
-                    confirmFn: () => {
-                      addCopyPlan()
-                    },
-                    denyFn: () => {
-                      addEmptyPlan()
-                    },
-                  })
-                : addEmptyPlan()
-            }
-          >
             <span></span>
           </button>
         )}

src/components/floor-plan/CanvasMenu.jsx

@@ -127,8 +127,8 @@ export default function CanvasMenu(props) {
     swalFire({
       html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
       type: 'confirm',
-      confirmFn: () => {
+      confirmFn: async () => {
-        saveCanvas(sessionState.userId)
+        await saveCanvas(sessionState.userId)
       },
     })
   }

src/components/management/Stuff.jsx

@@ -406,14 +406,14 @@ export default function Stuff() {
       <div className="sub-table-box">
         <div className="table-box-title-wrap">
           <div className="title-wrap">
-            <h3>물건목록</h3>
+            <h3>{getMessage('stuff.search.grid.title')}</h3>
             <ul className="info-wrap">
               <li>
-                전체
+                {getMessage('stuff.search.grid.all')}
                 <span>{convertNumberToPriceDecimal(totalCount)}</span>
               </li>
               <li>
-                선택
+                {getMessage('stuff.search.grid.selected')}
                 <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span>
               </li>
             </ul>
@@ -421,8 +421,8 @@ export default function Stuff() {
           <div className="left-unit-box">
             <div className="select-box mr5" style={{ width: '110px' }}>
               <select className="select-light black" name="" id="" onChange={onChangeSortType}>
-                <option value="R">최근 등록일</option>
+                <option value="R">{getMessage('stuff.search.grid.schSortTypeR')}</option>
-                <option value="U">최근 수정일</option>
+                <option value="U">{getMessage('stuff.search.grid.schSortTypeU')}</option>
               </select>
             </div>
             <div className="select-box" style={{ width: '80px' }}>

src/components/management/StuffSearchCondition.jsx

@@ -99,7 +99,6 @@ export default function StuffSearchCondition() {
 
   useEffect(() => {
     if (isObjectNotEmpty(sessionState)) {
-      // console.log('판매대리점 리스트 가져오기 위한 세션정보::::::::', sessionState)
       // storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
       // get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
       get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
@@ -190,7 +189,6 @@ export default function StuffSearchCondition() {
                     <input
                       type="text"
                       className="input-light"
-                      // placeholder="물건번호 입력"
                       value={stuffSearch?.code === 'E' || stuffSearch?.code === 'M' ? stuffSearch.schObjectNo : objectNo}
                       onChange={(e) => {
                         setObjectNo(e.target.value)
@@ -205,7 +203,6 @@ export default function StuffSearchCondition() {
                     <input
                       type="text"
                       className="input-light"
-                      // placeholder="판매대리점명 입력"
                       value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
                       onChange={(e) => {
                         setSaleStoreName(e.target.value)
@@ -220,7 +217,6 @@ export default function StuffSearchCondition() {
                     <input
                       type="text"
                       className="input-light"
-                      // placeholder="물건주소 입력"
                       value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
                       onChange={(e) => {
                         setAddress(e.target.value)
@@ -237,7 +233,6 @@ export default function StuffSearchCondition() {
                     <input
                       type="text"
                       className="input-light"
-                      // placeholder="물건명 입력"
                       value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
                       onChange={(e) => {
                         setobjectName(e.target.value)
@@ -252,7 +247,6 @@ export default function StuffSearchCondition() {
                     <input
                       type="text"
                       className="input-light"
-                      // placeholder="견적처 입력"
                       value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
                       onChange={(e) => {
                         setDispCompanyName(e.target.value)

src/components/management/popup/PlanRequestPop.jsx

@@ -12,6 +12,9 @@ import dayjs from 'dayjs'
 import PlanRequestPopQGrid from './PlanRequestPopQGrid'
 import { sessionStore } from '@/store/commonAtom'
 import { planReqSearchState } from '@/store/planReqAtom'
+import { isObjectNotEmpty } from '@/util/common-utils'
+
+import Select from 'react-select'
 export default function PlanRequestPop(props) {
   const sessionState = useRecoilValue(sessionStore)
 
@@ -20,6 +23,7 @@ export default function PlanRequestPop(props) {
   const { get } = useAxios(globalLocaleState)
 
   const { getMessage } = useMessage()
+  const ref = useRef()
   // 검색조건 달력 셋팅
   const [startDate, setStartDate] = useState(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
   const [endDate, setEndDate] = useState(dayjs(new Date()).format('YYYY-MM-DD'))
@@ -34,7 +38,6 @@ export default function PlanRequestPop(props) {
     setStartDate: setEndDate,
   }
 
-  const ref = useRef()
   const resetPlanReqRecoil = useResetRecoilState(planReqSearchState)
 
   const [planReqSearch, setPlanReqSearch] = useRecoilState(planReqSearchState)
@@ -47,14 +50,42 @@ export default function PlanRequestPop(props) {
   const [schDateGbn, setSchDateGbn] = useState('S') //기간구분코드(S/R)
 
   //초기화
-  const resetRecoil = () => {}
+  const resetRecoil = () => {
+    console.log('초기화')
+    setSchPlanReqNo('')
+    setSchTitle('')
+    setSchAddress('')
+    setSchSaleStoreName('')
+    setSchPlanReqName('')
+    setSchDateGbn('S')
+    setStartDate(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
+    setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
+    setSchPlanStatCd('')
+    handleClear() //셀렉트 자동완성 초기화
+    resetPlanReqRecoil()
+  }
 
-  //초기화 눌렀을 때 자동완성도..
+  //셀렉트 자동완성 초기화
   const handleClear = () => {
-    if (ref.current.state.dropDown) {
+    if (ref.current) {
-      ref.current.methods.dropDown()
+      ref.current.clearValue()
+    }
+  }
+
+  // 상태 검색조건 변경
+  const onSelectionChange = (key) => {
+    //임시작업
+    console.log('E::::::::', key)
+    if (isObjectNotEmpty(key)) {
+      setSchPlanStatCd(key.value)
+      setPlanReqSearch({
+        ...planReqSearch,
+        schPlanStatCd: key.value,
+      })
     } else {
-      ref.current.state.values = []
+      //X누름
+      setSchPlanStatCd('')
+      setPlanReqSearch({ ...planReqSearch, schPlanStatCd: '' })
     }
   }
 
@@ -63,6 +94,11 @@ export default function PlanRequestPop(props) {
     setEndDate(planReqSearch?.schEndDt ? planReqSearch.schEndDt : dayjs(new Date()).format('YYYY-MM-DD'))
   }, [planReqSearch])
 
+  // 조회
+  const onSubmit = () => {
+    console.log('조회!!!!', planReqSearch)
+  }
+
   const [gridProps, setGridProps] = useState({
     gridData: [],
     isPageable: false,
@@ -117,6 +153,25 @@ export default function PlanRequestPop(props) {
     ],
   })
 
+  const tempList = [
+    {
+      label: '완료',
+      value: 'C',
+    },
+    {
+      label: '저장',
+      value: 'I',
+    },
+    {
+      label: '접수',
+      value: 'R',
+    },
+    {
+      label: '제출',
+      value: 'S',
+    },
+  ]
+
   return (
     <div className="modal-popup">
       <div className="modal-dialog big">
@@ -132,8 +187,12 @@ export default function PlanRequestPop(props) {
               <div className="design-tit-wrap">
                 <h3>{getMessage('stuff.planReqPopup.popTitle')}</h3>
                 <div className="design-search-wrap">
-                  <button className="btn-origin grey mr5">{getMessage('stuff.planReqPopup.btn1')}</button>
+                  <button className="btn-origin navy mr5" onClick={onSubmit}>
-                  <button className="btn-origin navy ">{getMessage('stuff.planReqPopup.btn2')}</button>
+                    {getMessage('stuff.planReqPopup.btn1')}
+                  </button>
+                  <button className="btn-origin grey" onClick={resetRecoil}>
+                    {getMessage('stuff.planReqPopup.btn2')}
+                  </button>
                 </div>
               </div>
               <div className="design-request-table">
@@ -223,13 +282,22 @@ export default function PlanRequestPop(props) {
                         </td>
                         <th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
                         <td>
-                          <div className="select-wrap">
+                          <div className="">
-                            <select className="select-light" name="" id="">
+                            {/* <select className="select-light" name="" id="" onChange={onSelectionChange}>
                               <option value={''}>All</option>
-                              <option value={'SAVE'}>저장</option>
+                              <option value={'C'}>완료</option>
-                              <option value={'SUBMIT'}>제출</option>
+                              <option value={'I'}>저장</option>
-                              <option value={'RECEIPT'}>접수</option>
+                              <option value={'R'}>접수</option>
-                            </select>
+                              <option value={'S'}>제출</option>
+                            </select> */}
+                            <Select
+                              ref={ref}
+                              options={tempList}
+                              onChange={onSelectionChange}
+                              isSearchable={false}
+                              placeholder="선택하세요."
+                              isClearable={true}
+                            />
                           </div>
                         </td>
                       </tr>

src/hooks/useAxios.js

@@ -40,59 +40,59 @@ export function useAxios(lang = '') {
   // response 추가 로직
   axios.interceptors.request.use(undefined, (error) => {})
 
-  const get = async ({ url }) => {
+  const get = async ({ url, option = {} }) => {
     return await getInstances(url)
-      .get(url)
+      .get(url, option)
       .then((res) => res.data)
       .catch(console.error)
   }
 
-  const promiseGet = async ({ url }) => {
+  const promiseGet = async ({ url, option = {} }) => {
-    return await getInstances(url).get(url)
+    return await getInstances(url).get(url, option)
   }
 
-  const post = async ({ url, data }) => {
+  const post = async ({ url, data, option = {} }) => {
     return await getInstances(url)
-      .post(url, data)
+      .post(url, data, option)
       .then((res) => res.data)
       .catch(console.error)
   }
 
-  const promisePost = async ({ url, data }) => {
+  const promisePost = async ({ url, data, option = {} }) => {
-    return await getInstances(url).post(url, data)
+    return await getInstances(url).post(url, data, option)
   }
 
-  const put = async ({ url, data }) => {
+  const put = async ({ url, data, option = {} }) => {
     return await getInstances(url)
-      .put(url, data)
+      .put(url, data, option)
       .then((res) => res.data)
       .catch(console.error)
   }
 
-  const promisePut = async ({ url, data }) => {
+  const promisePut = async ({ url, data, option = {} }) => {
-    return await getInstances(url).put(url, data)
+    return await getInstances(url).put(url, data, option)
   }
 
-  const patch = async ({ url, data }) => {
+  const patch = async ({ url, data, option = {} }) => {
     return await getInstances(url)
-      .patch(url, data)
+      .patch(url, data, option)
       .then((res) => res.data)
       .catch(console.error)
   }
 
-  const promisePatch = async ({ url, data }) => {
+  const promisePatch = async ({ url, data, option = {} }) => {
-    return await getInstances(url).patch(url, data)
+    return await getInstances(url).patch(url, data, option)
   }
 
-  const del = async ({ url }) => {
+  const del = async ({ url, option = {} }) => {
     return await getInstances(url)
-      .delete(url)
+      .delete(url, option)
       .then((res) => res.data)
       .catch(console.error)
   }
 
-  const promiseDel = async ({ url }) => {
+  const promiseDel = async ({ url, option = {} }) => {
-    return await getInstances(url).delete(url)
+    return await getInstances(url).delete(url, option)
   }
 
   return { get, promiseGet, post, promisePost, put, promisePut, patch, promisePatch, del, promiseDel }

src/hooks/usePlan.js

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
@@ -5,10 +6,13 @@ import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 
 export function usePlan() {
+  const [planNum, setPlanNum] = useState(0)
+
   const [canvas, setCanvas] = useRecoilState(canvasState)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
-  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
-  const [plans, setPlans] = useRecoilState(plansState)
+  const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
+
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const { get, promisePost, promisePut, promiseDel } = useAxios()
@@ -72,6 +76,9 @@ export function usePlan() {
     // }, 1000)
   }
 
+  /**
+   * 현재 캔버스에 그려진 데이터를 추출
+   */
   const currentCanvasData = () => {
     removeMouseLines()
     return addCanvas()
@@ -81,8 +88,7 @@ export function usePlan() {
    * 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
    */
   const checkModifiedCanvasPlan = () => {
-    removeMouseLines()
+    const canvasStatus = currentCanvasData()
-    const canvasStatus = addCanvas()
     const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
 
     if (!initPlanData) {
@@ -90,15 +96,10 @@ export function usePlan() {
       return JSON.parse(canvasStatus).objects.length > 0
     } else {
       // 저장된 캔버스
-      if (canvasStatus === initPlanData.canvasStatus) {
+      // 각각 object들의 id 목록을 추출하여 비교
-        return false
+      const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
-      } else {
+      const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
-        // 각각 object들의 id 목록을 추출하여 비교
+      return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
-        const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
-        const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
-
-        return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
-      }
     }
   }
   const getObjectIds = (objects) => {
@@ -112,9 +113,6 @@ export function usePlan() {
    * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
    */
   const dbToCanvasFormat = (cs) => {
-    // return JSON.stringify(cs.replace(/##/g, '"')) //.replace(/\\/g, ''))//.slice(1, -1))
-    // JSON.stringify()를 사용하면 "가 \"로 바뀐다. 따라서, JSON.stringify를 제거
-    // canvasToDbFormat()에서 \\의 상황을 없앴으므로 replace(/\\/g, '')를 제거
     return cs.replace(/##/g, '"')
   }
 
@@ -122,8 +120,6 @@ export function usePlan() {
    * canvas의 데이터를 DB에 저장할 수 있도록 포맷화
    */
   const canvasToDbFormat = (cs) => {
-    // return JSON.stringify(cs).replace(/"/g, '##')
-    // addCanvas()에서 JSON.stringify()를 거쳐서 나오는데, 또 감싸버려서 \가 \\로 된다. 따라서, JSON.stringify를 제거
     return cs.replace(/"/g, '##')
   }
 
@@ -136,78 +132,17 @@ export function usePlan() {
    *      param(body) : id, canvasStatus
    */
   const saveCanvas = async (userId) => {
-    removeMouseLines()
+    const canvasStatus = currentCanvasData()
-    const canvasStatus = addCanvas()
+    initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
-
+      ? await putCanvasStatus(canvasStatus)
-    if (initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)) {
+      : await postCanvasStatus(userId, canvasStatus)
-      // canvas 수정
-      const planData = {
-        id: currentCanvasPlan.id,
-        canvasStatus: canvasToDbFormat(canvasStatus),
-      }
-
-      return await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
-        .then((res) => {
-          swalFire({ text: getMessage('common.message.save') })
-          // console.log('[PUT] canvas-statuses res :::::::: %o', res)
-          setInitCanvasPlans((initCanvasPlans) =>
-            initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
-          )
-          setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
-        })
-        .catch((error) => {
-          swalFire({ text: error.message, icon: 'error' })
-          // console.error('[PUT] canvas-statuses error :::::::: %o', error)
-        })
-    } else {
-      // canvas 신규 등록
-      const planData = {
-        userId: userId,
-        imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
-        objectNo: currentCanvasPlan.objectNo,
-        canvasStatus: canvasToDbFormat(canvasStatus),
-      }
-
-      return await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
-        .then((res) => {
-          swalFire({ text: getMessage('common.message.save') })
-          // console.log('[POST] canvas-statuses response :::::::: %o', res)
-          setInitCanvasPlans((initCanvasPlans) => [
-            ...initCanvasPlans,
-            {
-              id: res.data,
-              name: currentCanvasPlan.objectNo + '-' + res.data,
-              userId: userId,
-              canvasStatus: canvasStatus,
-              isNew: currentCanvasPlan.id,
-            },
-          ])
-          setPlans((plans) =>
-            plans.map((plan) =>
-              plan.id === currentCanvasPlan.id
-                ? {
-                    ...plan,
-                    id: res.data,
-                    name: currentCanvasPlan.objectNo + '-' + res.data,
-                    userId: userId,
-                    canvasStatus: canvasStatus,
-                    isNew: currentCanvasPlan.id,
-                  }
-                : plan,
-            ),
-          )
-        })
-        .catch((error) => {
-          swalFire({ text: error.message, icon: 'error' })
-          // console.error('[POST] canvas-statuses res error :::::::: %o', error)
-        })
-    }
   }
 
   /**
-   * objectNo에 해당하는 canvas 목록을 조회하는 함수
+   * objectNo에 해당하는 canvas 목록을 조회
    */
   const getCanvasByObjectNo = async (userId, objectNo) => {
+    // console.log(`[GET] objectNo: ${objectNo}  /  userId: ${userId}`)
     return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
       res.map((item) => ({
         id: item.id,
@@ -220,27 +155,192 @@ export function usePlan() {
   }
 
   /**
-   * id에 해당하는 canvas 데이터를 삭제하는 함수
+   * canvas 데이터를 추가
+   */
+  const postCanvasStatus = async (userId, canvasStatus) => {
+    const planData = {
+      userId: userId,
+      imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
+      objectNo: currentCanvasPlan.objectNo,
+      canvasStatus: canvasToDbFormat(canvasStatus),
+    }
+    await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
+      .then((res) => {
+        swalFire({ text: getMessage('common.message.save') })
+        setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
+        setPlans((plans) =>
+          plans.map((plan) =>
+            plan.id === currentCanvasPlan.id
+              ? {
+                  ...plan,
+                  id: res.data,
+                  name: currentCanvasPlan.objectNo + '-' + res.data,
+                  canvasStatus: canvasStatus,
+                }
+              : plan,
+          ),
+        )
+      })
+      .catch((error) => {
+        swalFire({ text: error.message, icon: 'error' })
+      })
+  }
+
+  /**
+   * id에 해당하는 canvas 데이터를 수정
+   */
+  const putCanvasStatus = async (canvasStatus) => {
+    const planData = {
+      id: currentCanvasPlan.id,
+      canvasStatus: canvasToDbFormat(canvasStatus),
+    }
+    await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
+      .then((res) => {
+        swalFire({ text: getMessage('common.message.save') })
+        setInitCanvasPlans((initCanvasPlans) =>
+          initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
+        )
+        setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
+      })
+      .catch((error) => {
+        swalFire({ text: error.message, icon: 'error' })
+      })
+  }
+
+  /**
+   * id에 해당하는 canvas 데이터를 삭제
    */
   const delCanvasById = (id) => {
     return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
   }
 
   /**
-   * objectNo에 해당하는 canvas 데이터들을 삭제하는 함수
+   * objectNo에 해당하는 canvas 데이터들을 삭제
    */
   const delCanvasByObjectNo = (objectNo) => {
     return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
   }
 
+  /**
+   * plan 이동
+   * 현재 plan의 작업상태를 확인, 저장 후 이동
+   */
+  const handleCurrentPlan = (userId, newCurrentId) => {
+    if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
+      if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
+        swalFire({
+          html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
+          type: 'confirm',
+          confirmFn: async () => {
+            await saveCanvas(userId)
+            updateCurrentPlan(newCurrentId)
+          },
+          denyFn: () => {
+            updateCurrentPlan(newCurrentId)
+          },
+        })
+      } else {
+        updateCurrentPlan(newCurrentId)
+      }
+    }
+  }
+  const updateCurrentPlan = (newCurrentId) => {
+    setPlans((plans) =>
+      plans.map((plan) => {
+        return { ...plan, isCurrent: plan.id === newCurrentId }
+      }),
+    )
+  }
+  useEffect(() => {
+    setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
+  }, [plans])
+
+  /**
+   * 새로운 plan 생성
+   * 현재 plan의 데이터가 있을 경우 복제 여부를 확인
+   */
+  const handleAddPlan = (userId, objectNo) => {
+    JSON.parse(currentCanvasData()).objects.length > 0
+      ? swalFire({
+          html: `${currentCanvasPlan.name} PLAN을 복사하시겠습니까?`,
+          type: 'confirm',
+          confirmFn: () => {
+            addPlan(userId, objectNo, currentCanvasData())
+          },
+          denyFn: () => {
+            addPlan(userId, objectNo)
+          },
+        })
+      : addPlan(userId, objectNo)
+  }
+  const addPlan = (userId, objectNo, canvasStatus = '') => {
+    const newPlan = {
+      id: planNum,
+      name: `Plan ${planNum + 1}`,
+      objectNo: objectNo,
+      userId: userId,
+      canvasStatus: canvasStatus,
+    }
+    setPlans([...plans, newPlan])
+    handleCurrentPlan(userId, planNum)
+    setPlanNum(planNum + 1)
+  }
+
+  /**
+   * plan 삭제
+   */
+  const handleDeletePlan = (e, id) => {
+    e.stopPropagation() // 이벤트 버블링 방지
+
+    if (initCanvasPlans.some((plan) => plan.id === id)) {
+      delCanvasById(id)
+        .then((res) => {
+          swalFire({ text: getMessage('common.message.delete') })
+          setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
+          setPlans((plans) => plans.filter((plan) => plan.id !== id))
+        })
+        .catch((error) => {
+          swalFire({ text: error.message, icon: 'error' })
+        })
+    } else {
+      setPlans((plans) => plans.filter((plan) => plan.id !== id))
+      swalFire({ text: getMessage('common.message.delete') })
+    }
+
+    // 삭제 후 last 데이터에 포커싱
+    const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
+    if (!lastPlan) {
+      setPlanNum(0)
+      setCurrentCanvasPlan(null)
+    } else if (id !== lastPlan.id) {
+      updateCurrentPlan(lastPlan.id)
+    }
+  }
+
+  /**
+   * plan 조회
+   */
+  const loadCanvasPlanData = (userId, objectNo) => {
+    getCanvasByObjectNo(userId, objectNo).then((res) => {
+      // console.log('canvas 목록 ', res)
+      if (res.length > 0) {
+        setInitCanvasPlans(res)
+        setPlans(res)
+        updateCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
+        setPlanNum(res.length)
+      } else {
+        addPlan(userId, objectNo)
+      }
+    })
+  }
+
   return {
     canvas,
-    removeMouseLines,
+    plans,
-    currentCanvasData,
     saveCanvas,
-    addCanvas,
+    handleCurrentPlan,
-    checkModifiedCanvasPlan,
+    handleAddPlan,
-    getCanvasByObjectNo,
+    handleDeletePlan,
-    delCanvasById,
+    loadCanvasPlanData,
   }
 }

src/locales/ja.json

@@ -335,7 +335,7 @@
   "common.message.writeToConfirm": "作成解除を実行しますか？",
   "common.message.password.init.success": "パスワード [{0}] に初期化されました。",
   "common.message.no.edit.save": "この文書は変更できません。",
-  "common.require": "필수",
+  "common.require": "必須",
   "commons.west": "立つ",
   "commons.east": "ドン",
   "commons.south": "立つ",
@@ -511,6 +511,11 @@
   "stuff.search.period": "期間検索",
   "stuff.search.schDateTypeU": "更新日",
   "stuff.search.schDateTypeR": "登録日",
+  "stuff.search.grid.title": "商品リスト",
+  "stuff.search.grid.all": "全体",
+  "stuff.search.grid.selected": "選択",
+  "stuff.search.grid.schSortTypeR": "最近の登録日",
+  "stuff.search.grid.schSortTypeU": "最近の更新日",
   "stuff.windSelectPopup.title": "風速選択",
   "stuff.windSelectPopup.table.selected": "選択",
   "stuff.windSelectPopup.table.windspeed": "風速",

src/locales/ko.json

@@ -516,6 +516,11 @@
   "stuff.search.period": "기간검색",
   "stuff.search.schDateTypeU": "갱신일",
   "stuff.search.schDateTypeR": "등록일",
+  "stuff.search.grid.title": "물건목록",
+  "stuff.search.grid.all": "전체",
+  "stuff.search.grid.selected": "선택",
+  "stuff.search.grid.schSortTypeR": "최근 등록일",
+  "stuff.search.grid.schSortTypeU": "최근 갱신일",
   "stuff.windSelectPopup.title": "풍속선택",
   "stuff.windSelectPopup.table.selected": "선택",
   "stuff.windSelectPopup.table.windspeed": "풍속",

src/util/board-utils.js

@@ -8,8 +8,10 @@ export const handleFileDown = async (file) => {
   const params = new URLSearchParams({
     encodeFileNo: file.encodeFileNo,
   })
+  const options = { responseType: 'blob' }
   const apiUrl = `${url}?${params.toString()}`
-  await promiseGet({ url: apiUrl, responseType: 'blob' })
+
+  await promiseGet({ url: apiUrl, option: options })
     .then((resultData) => {
       if (resultData) {
         const blob = new Blob([resultData.data], { type: resultData.headers['content-type'] || 'application/octet-stream' })
@@ -25,7 +27,7 @@ export const handleFileDown = async (file) => {
       }
     })
     .catch((error) => {
-      alert(error.response.data.message)
+      alert('File does not exist.')
     })
 }