fix: 도면 배경 설정 개발중

- api 스펙 추가 및 수정

src/app/api/html2canvas/route.js

@@ -5,7 +5,7 @@ import fs from 'fs/promises'
 import { NextResponse } from 'next/server'
 
 export async function GET(req) {
-  const path = 'public/mapImages'
+  const path = 'public/plan-map-images'
   const q = req.nextUrl.searchParams.get('q')
   const fileNm = req.nextUrl.searchParams.get('fileNm')
   const zoom = req.nextUrl.searchParams.get('zoom')

src/app/api/image-upload/route.js

@@ -0,0 +1,25 @@
+'use server'
+
+import fs from 'fs/promises'
+
+import { NextResponse } from 'next/server'
+
+export async function POST(req) {
+  const path = 'public/plan-bg-images'
+
+  const formData = await req.formData()
+  const file = formData.get('file')
+  const arrayBuffer = await file.arrayBuffer()
+  const buffer = Buffer.from(arrayBuffer)
+  // const buffer = new Uint8Array(arrayBuffer)
+
+  try {
+    await fs.readdir(path)
+  } catch {
+    await fs.mkdir(path)
+  } finally {
+    await fs.writeFile(`${path}/${file.name}`, buffer)
+  }
+
+  return NextResponse.json({ fileNm: `${file.name}` })
+}

src/components/floor-plan/modal/ImgLoad.jsx

@@ -95,7 +95,14 @@ export default function ImgLoad() {
                 <label htmlFor="ra07">アドレスを読み込む</label>
               </div>
               <div className="img-flex-box for-address">
-                <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} value={currentCanvasPlan?.mapPositionAddress} />
+                <input
+                  type="text"
+                  ref={queryRef}
+                  className="input-origin al-l mr10"
+                  placeholder={'住所入力'}
+                  value={mapPositionAddress}
+                  onChange={(e) => setMapPositionAddress(e.target.value)}
+                />
                 <div className="img-edit-wrap">
                   <button className="img-edit-btn" onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}>
                     完了

src/hooks/common/useRefFiles.js

@@ -1,11 +1,11 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 
 import { useSwal } from '@/hooks/useSwal'
-import { convertDwgToPng } from '@/lib/cadAction'
 import { useAxios } from '../useAxios'
 import { currentCanvasPlanState } from '@/store/canvasAtom'
+import { convertDwgToPng, writeImageBuffer } from '@/lib/fileAction'
 
 export function useRefFiles() {
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
@@ -16,7 +16,7 @@ export function useRefFiles() {
   const queryRef = useRef(null)
 
   const { swalFire } = useSwal()
-  const { get, promisePut } = useAxios()
+  const { get, promisePut, promisePost } = useAxios()
   // const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
 
   /**
@@ -25,7 +25,11 @@ export function useRefFiles() {
    */
   const handleRefFile = (file) => {
     setRefImage(file)
-    file.name.split('.').pop() === 'dwg' ? handleUploadRefFile(file) : () => {}
+    /**
+     * 파일 확장자가 dwg일 경우 변환하여 이미지로 저장
+     * 파일 확장자가 이미지일 경우 이미지 저장
+     */
+    file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
     // handleUploadRefFile(file)
   }
 
@@ -58,22 +62,29 @@ export function useRefFiles() {
   }
 
   /**
-   * 현재 플랜이 변경되면 플랜 상태 저장
+   * 이미지 파일 업로드
+   * @param {*} file
    */
-  // useEffect(() => {
-  //   const handleCurrentPlan = async () => {
-  //     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
-  //       console.log('🚀 ~ awaitpromisePut ~ res:', res)
-  //     })
-  //   }
-  //   handleCurrentPlan()
-  // }, [currentCanvasPlan])
+  const handleUploadImageRefFile = async (file) => {
+    console.log('🚀 ~ handleUploadImageRefFile ~ file:', file)
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const response = await fetch('http://localhost:3000/api/image-upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    const result = await response.json()
+    console.log('🚀 ~ handleUploadImageRefFile ~ res:', result)
+    // writeImageBuffer(file)
+  }
 
   /**
    * RefFile이 캐드 도면 파일일 경우 변환하여 이미지로 저장
    * @param {*} file
    */
-  const handleUploadRefFile = async (file) => {
+  const handleUploadConvertRefFile = async (file) => {
     const formData = new FormData()
     formData.append('file', file)
 
@@ -95,6 +106,19 @@ export function useRefFiles() {
     setRefFileMethod(e.target.value)
   }
 
+  /**
+   * 현재 플랜이 변경되면 플랜 상태 저장
+   */
+  useEffect(() => {
+    console.log('🚀 ~ useRefFiles ~ currentCanvasPlan:', currentCanvasPlan)
+    //   const handleCurrentPlan = async () => {
+    //     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
+    //       console.log('🚀 ~ awaitpromisePut ~ res:', res)
+    //     })
+    //   }
+    //   handleCurrentPlan()
+  }, [currentCanvasPlan])
+
   return {
     refImage,
     queryRef,

src/lib/cadAction.js

@@ -1,5 +1,10 @@
 'use server'
 
+/**
+ * Deprecated
+ * 개발후 삭제 예정
+ */
+
 import fs from 'fs/promises'
 
 const imageSavePath = 'public/cadImages'

src/lib/canvas.js

@@ -1,5 +1,10 @@
 'use server'
 
+/**
+ * Deprecated
+ * 개발후 삭제 예정
+ */
+
 // import { PrismaClient } from '@prisma/client'
 import fs from 'fs/promises'
 

src/lib/fileAction.js

@@ -0,0 +1,64 @@
+'use server'
+
+import fs from 'fs/promises'
+
+const CAD_FILE_PATH = 'public/cad-images'
+const IMAGE_FILE_PATH = 'public/plan-bg-images'
+
+/**
+ * 파일 변환 & 저장
+ * @param {*} fileName
+ * @param {*} data
+ * @returns
+ */
+const convertDwgToPng = async (fileName, data) => {
+  console.log('fileName', fileName)
+  try {
+    await fs.readdir(CAD_FILE_PATH)
+  } catch {
+    await fs.mkdir(CAD_FILE_PATH)
+  }
+
+  return await fs.writeFile(`${CAD_FILE_PATH}/${fileName}`, data, 'base64')
+}
+
+/**
+ * 이미지 저장
+ * base64 형식으로 저장
+ * @param {*} title
+ * @param {*} data
+ * @returns
+ */
+const writeImageBase64 = async (title, data) => {
+  // 해당 경로에 Directory 가 없다면 생성
+  try {
+    await fs.readdir(IMAGE_FILE_PATH)
+  } catch {
+    await fs.mkdir(IMAGE_FILE_PATH)
+  }
+
+  return fs.writeFile(`${IMAGE_FILE_PATH}/${title}.png`, data, 'base64')
+}
+
+/**
+ * 이미지 저장
+ * Buffer 형식으로 저장
+ * @param {*} title
+ * @param {*} data
+ * @returns
+ */
+const writeImageBuffer = async (file) => {
+  // 해당 경로에 Directory 가 없다면 생성
+  try {
+    await fs.readdir(IMAGE_FILE_PATH)
+  } catch {
+    await fs.mkdir(IMAGE_FILE_PATH)
+  }
+
+  const arrayBuffer = await fileURLToPath.arrayBuffer()
+  const buffer = new Uint8Array(arrayBuffer)
+
+  return fs.writeFile(`${IMAGE_FILE_PATH}/${file.fileName}`, buffer)
+}
+
+export { convertDwgToPng, writeImageBase64, writeImageBuffer }