@@ -132,8 +187,12 @@ export default function PlanRequestPop(props) {
@@ -223,13 +282,22 @@ export default function PlanRequestPop(props) {
{getMessage('stuff.planReqPopup.search.planStatName')} |
-
- |
diff --git a/src/hooks/useAxios.js b/src/hooks/useAxios.js
index c125c28a..f2e8add9 100644
--- a/src/hooks/useAxios.js
+++ b/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 }) => {
- return await getInstances(url).get(url)
+ const promiseGet = async ({ url, option = {} }) => {
+ 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 }) => {
- return await getInstances(url).post(url, data)
+ const promisePost = async ({ url, data, option = {} }) => {
+ 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 }) => {
- return await getInstances(url).put(url, data)
+ const promisePut = async ({ url, data, option = {} }) => {
+ 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 }) => {
- return await getInstances(url).patch(url, data)
+ const promisePatch = async ({ url, data, option = {} }) => {
+ 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 }) => {
- return await getInstances(url).delete(url)
+ const promiseDel = async ({ url, option = {} }) => {
+ return await getInstances(url).delete(url, option)
}
return { get, promiseGet, post, promisePost, put, promisePut, patch, promisePatch, del, promiseDel }
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 6d74cd93..6c67eaa4 100644
--- a/src/hooks/usePlan.js
+++ b/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 [plans, setPlans] = useRecoilState(plansState)
+ const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
+ 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 = addCanvas()
+ const canvasStatus = currentCanvasData()
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) {
- return false
- } else {
- // 각각 object들의 id 목록을 추출하여 비교
- 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])
- }
+ // 각각 object들의 id 목록을 추출하여 비교
+ 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 = addCanvas()
-
- if (initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)) {
- // 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)
- })
- }
+ const canvasStatus = currentCanvasData()
+ initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
+ ? await putCanvasStatus(canvasStatus)
+ : await postCanvasStatus(userId, canvasStatus)
}
/**
- * 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') + `${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,
- currentCanvasData,
+ plans,
saveCanvas,
- addCanvas,
- checkModifiedCanvasPlan,
- getCanvasByObjectNo,
- delCanvasById,
+ handleCurrentPlan,
+ handleAddPlan,
+ handleDeletePlan,
+ loadCanvasPlanData,
}
}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 980d1400..71611af3 100644
--- a/src/locales/ja.json
+++ b/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": "風速",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 21aca2be..5f557e27 100644
--- a/src/locales/ko.json
+++ b/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": "풍속",
diff --git a/src/util/board-utils.js b/src/util/board-utils.js
index a129c4d4..c41ba22a 100644
--- a/src/util/board-utils.js
+++ b/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.')
})
}