qcast-front/src/hooks/usePlan.js

import { useRecoilState } from 'recoil'
import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { toastUp } from '@/hooks/useToast'

export function usePlan() {
  const [canvas, setCanvas] = useRecoilState(canvasState)
  const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
  const { getMessage } = useMessage()
  const { get, promisePost, promisePut } = useAxios()

  /**
   * 마우스 포인터의 가이드라인을 제거합니다.
   */
  const removeMouseLines = () => {
    if (canvas?._objects.length > 0) {
      const mouseLines = canvas?._objects.filter((obj) => obj.name === 'mouseLine')
      mouseLines.forEach((item) => canvas?.remove(item))
    }
    canvas?.renderAll()
  }

  const addCanvas = () => {
    const objs = canvas?.toJSON([
      'selectable',
      'name',
      'parentId',
      'id',
      'length',
      'idx',
      'direction',
      'lines',
      'points',
      'lockMovementX',
      'lockMovementY',
      'lockRotation',
      'lockScalingX',
      'lockScalingY',
      'opacity',
      'cells',
      'maxX',
      'maxY',
      'minX',
      'minY',
      'x',
      'y',
      'stickeyPoint',
    ])

    const str = JSON.stringify(objs)

    // canvas?.clear()
    return str

    // setTimeout(() => {
    //   // 역직렬화하여 캔버스에 객체를 다시 추가합니다.
    //   canvas?.loadFromJSON(JSON.parse(str), function () {
    //     // 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다.
    //     console.log(canvas?.getObjects().filter((obj) => obj.name === 'roof'))
    //     canvas?.renderAll() // 캔버스를 다시 그립니다.
    //   })
    // }, 1000)
  }

  /**
   * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
   */
  const dbToCanvasFormat = (cs) => {
    return JSON.stringify(cs.replace(/##/g, '"').replace(/\\/g, '').slice(1, -1))
  }

  /**
   * canvas의 데이터를 DB에 저장할 수 있도록 포맷화
   */
  const canvasToDbFormat = (cs) => {
    return JSON.stringify(cs).replace(/"/g, '##')
  }

  /**
   * 페이지 내 캔버스를 저장하는 함수
   *
   * 1. 신규 저장 : POST
   *      param(body) : userId, objectNo, canvasStatus
   * 2. 수정 저장 : PUT
   *      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),
      }

      await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
        .then((res) => {
          toastUp({ message: getMessage('common.message.save'), type: 'success' }) // 성공 시 메세지 없음
          console.log('[PUT] canvas-statuses res :::::::: %o', res)
          setInitCanvasPlans((initCanvasPlans) =>
            initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
          )
        })
        .catch((error) => {
          toastUp({ message: error.message, type: '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),
      }

      await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
        .then((res) => {
          toastUp({ message: getMessage('common.message.save'), type: 'success' }) // 성공 시 메세지 없음
          console.log('[POST] canvas-statuses response :::::::: %o', res)
        })
        .catch((error) => {
          toastUp({ message: error.message, type: 'error' })
          console.error('[POST] canvas-statuses res error :::::::: %o', error)
        })
    }
  }

  /**
   * objectNo에 해당하는 canvas 목록을 조회하는 함수
   */
  const getCanvasByObjectNo = async (objectNo) => {
    return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }).then((res) =>
      res.map((item) => ({
        id: item.id,
        name: item.objectNo + '-' + item.id, // tab button에 표출될 이름 (임시)
        userId: item.userId,
        canvasStatus: dbToCanvasFormat(item.canvasStatus),
        isCurrent: false,
      })),
    )
  }

  return {
    canvas,
    removeMouseLines,
    saveCanvas,
    addCanvas,
    getCanvasByObjectNo,
  }
}