- 파일 저장 공통 코드 적용

- 파일 삭제 기능 추가
- 다국어 적용

src/app/api/html2canvas/route.js

@@ -3,6 +3,7 @@
 import fs from 'fs/promises'
 
 import { NextResponse } from 'next/server'
+import { writeImage, writeImageBuffer } from '@/lib/fileAction'
 
 export async function GET(req) {
   const path = 'public/plan-map-images'
@@ -15,14 +16,7 @@ export async function GET(req) {
   const response = await fetch(decodeUrl)
   const data = await response.arrayBuffer()
   const buffer = Buffer.from(data)
-
+  await writeImage(fileNm, buffer)
-  try {
-    await fs.readdir(path)
-  } catch {
-    await fs.mkdir(path)
-  } finally {
-    await fs.writeFile(`${path}/${fileNm}.png`, buffer)
-  }
 
   return NextResponse.json({ fileNm: `${fileNm}.png` })
 }

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

@@ -3,23 +3,25 @@
 import fs from 'fs/promises'
 
 import { NextResponse } from 'next/server'
+import { writeImage } from '@/lib/fileAction'
 
 export async function POST(req) {
   const path = 'public/plan-bg-images'
 
   const formData = await req.formData()
   const file = formData.get('file')
+  const fileName = formData.get('fileName')
   const arrayBuffer = await file.arrayBuffer()
   const buffer = Buffer.from(arrayBuffer)
   // const buffer = new Uint8Array(arrayBuffer)
+  await writeImage(fileName, buffer)
+  // try {
+  //   await fs.readdir(path)
+  // } catch {
+  //   await fs.mkdir(path)
+  // } finally {
+  //   await fs.writeFile(`${path}/${fileName}`, buffer)
+  // }
 
-  try {
+  return NextResponse.json({ fileNm: `${fileName}` })
-    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

@@ -22,18 +22,20 @@ export default function ImgLoad() {
     setMapPositionAddress,
     handleFileDelete,
     handleMapImageDown,
+    handleAddressDelete,
   } = useRefFiles()
   const { currentCanvasPlan } = usePlan()
   const { getMessage } = useMessage()
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
 
   const handleModal = () => {
+    console.log(floorPlanState)
     setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })
   }
 
   useEffect(() => {
-    console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
+    // console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
-    console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
+    // console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
   }, [floorPlanState.refFileModalOpen])
 
   useEffect(() => {
@@ -50,7 +52,7 @@ export default function ImgLoad() {
         </div>
         <div className="modal-body">
           <div className="img-flex-box">
-            <span className="normal-font mr10">サイズ調整と回転</span>
+            <span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
             <label className="toggle-btn">
               <input
                 type="checkbox"
@@ -64,13 +66,13 @@ export default function ImgLoad() {
             <div className="img-load-item">
               <div className="d-check-radio pop">
                 <input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
-                <label htmlFor="ra06">ファイルを読み込む</label>
+                <label htmlFor="ra06">{getMessage('common.input.file')}</label>
               </div>
               <div className="img-flex-box">
                 <div className="img-edit-wrap">
                   <label className="img-edit-btn" htmlFor="img_file">
                     <span className="img-edit"></span>
-                    ファイルの追加
+                    {getMessage('common.load')}
                   </label>
                   <input
                     type="file"
@@ -82,10 +84,10 @@ export default function ImgLoad() {
                 <div className="img-name-wrap">
                   {/* <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
                   <button className="img-check"></button> */}
-                  {currentCanvasPlan?.bgImageName === null ? (
+                  {!currentCanvasPlan?.bgImageName ? (
-                    <input type="text" className="input-origin al-l" value={refImage ? refImage.name : ''} readOnly />
+                    <input type="text" className="input-origin al-l" value={refImage ? 'ref' + refImage.name : ''} readOnly />
                   ) : (
-                    <input type="text" className="input-origin al-l" value={currentCanvasPlan?.bgImageName} readOnly />
+                    <input type="text" className="input-origin al-l" value={'bg' + currentCanvasPlan?.bgImageName} readOnly />
                   )}
                   {(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
                 </div>
@@ -94,7 +96,7 @@ export default function ImgLoad() {
             <div className="img-load-item">
               <div className="d-check-radio pop">
                 <input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
-                <label htmlFor="ra07">アドレスを読み込む</label>
+                <label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
               </div>
               <div className="img-flex-box for-address">
                 <input
@@ -106,18 +108,21 @@ export default function ImgLoad() {
                   onChange={(e) => setMapPositionAddress(e.target.value)}
                 />
                 <div className="img-edit-wrap">
-                  <button className="img-edit-btn" onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}>
+                  <button
-                    完了
+                    className={`img-edit-btn ${mapPositionAddress.trim().length === 0 ? 'no-click' : ''}`}
+                    onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}
+                  >
+                    {getMessage('common.finish')}
                   </button>
                 </div>
-                {mapPositionAddress && <span className="check-address fail"></span>}
+                {mapPositionAddress && <button className="check-address fail" onClick={handleAddressDelete}></button>}
                 {/* <span className="check-address success"></span> */}
               </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
             <button className="btn-frame modal act" onClick={handleModal}>
-              完了
+              {getMessage('common.finish')}
             </button>
           </div>
         </div>

src/hooks/common/useRefFiles.js

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { useSwal } from '@/hooks/useSwal'
 import { useAxios } from '../useAxios'
 import { currentCanvasPlanState } from '@/store/canvasAtom'
-import { convertDwgToPng, writeImageBuffer } from '@/lib/fileAction'
+import { convertDwgToPng, removeImage, writeImageBuffer } from '@/lib/fileAction'
 
 export function useRefFiles() {
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
@@ -19,17 +19,51 @@ export function useRefFiles() {
   const { get, promisePut, promisePost } = useAxios()
   // const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
 
+  useEffect(() => {
+    console.log('refImage', refImage)
+  }, [refImage])
+
+  useEffect(() => {
+    if (refFileMethod === '1') {
+      // 파일 불러오기
+      setMapPositionAddress('')
+    } else {
+      setRefImage(null)
+    }
+  }, [refFileMethod])
   /**
    * 파일 불러오기 버튼 컨트롤
    * @param {*} file
    */
   const handleRefFile = (file) => {
-    setRefImage(file)
+    console.log('handleRefFile', file)
+    console.log('refImage', refImage)
+    if (file && ['image/png', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/gif'].includes(file.type)) {
+      // setRefImage(file)
+      file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
+    } else {
+      swalFire({
+        text: '이미지가 아닙니다.',
+        type: 'alert',
+        icon: 'error',
+      })
+    }
+    if (refImage) {
+      swalFire({
+        text: '파일을 변경하시겠습니까?',
+        type: 'confirm',
+        confirmFn: () => {
+          setRefImage(file)
+          file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
+        },
+      })
+    }
+
     /**
      * 파일 확장자가 dwg일 경우 변환하여 이미지로 저장
      * 파일 확장자가 이미지일 경우 이미지 저장
      */
-    file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
+
     // handleUploadRefFile(file)
   }
 
@@ -37,15 +71,34 @@ export function useRefFiles() {
    * 파일 삭제
    */
   const handleFileDelete = () => {
-    setRefImage(null)
+    swalFire({
-    setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: null }))
+      text: '삭제하시겠습니까?',
+      type: 'confirm',
+      confirmFn: () => {
+        setRefImage(null)
+        setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: null }))
+        removeImage(currentCanvasPlan.id).then((res) => {
+          console.log(res)
+        })
+      },
+    })
   }
 
   /**
    * 주소 삭제
    */
   const handleAddressDelete = () => {
-    setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
+    swalFire({
+      text: '삭제하시겠습니까?',
+      type: 'confirm',
+      confirmFn: () => {
+        setMapPositionAddress('')
+        setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
+        removeImage(currentCanvasPlan.id).then((res) => {
+          console.log(res)
+        })
+      },
+    })
   }
 
   /**
@@ -56,9 +109,10 @@ export function useRefFiles() {
       return
     }
 
-    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryRef.current.value}&fileNm=${uuidv4()}&zoom=20` })
+    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20` })
-    console.log('🚀 ~ handleMapImageDown ~ res:', res)
+    // console.log('🚀 ~ handleMapImageDown ~ res:', res)
-    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: res.fileNm, mapPositionAddress: queryRef.current.value }))
+    console.log('currentCanvasPlan', currentCanvasPlan)
+    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: currentCanvasPlan.id, mapPositionAddress: queryRef.current.value }))
   }
 
   /**
@@ -66,9 +120,10 @@ export function useRefFiles() {
    * @param {*} file
    */
   const handleUploadImageRefFile = async (file) => {
-    console.log('🚀 ~ handleUploadImageRefFile ~ file:', file)
+    // console.log('🚀 ~ handleUploadImageRefFile ~ file:', file)
     const formData = new FormData()
     formData.append('file', file)
+    formData.append('fileName', currentCanvasPlan.id)
 
     const response = await fetch('http://localhost:3000/api/image-upload', {
       method: 'POST',
@@ -76,7 +131,8 @@ export function useRefFiles() {
     })
 
     const result = await response.json()
-    console.log('🚀 ~ handleUploadImageRefFile ~ res:', result)
+    setRefImage(file)
+    // console.log('🚀 ~ handleUploadImageRefFile ~ res:', result)
     // writeImageBuffer(file)
   }
 
@@ -92,6 +148,7 @@ export function useRefFiles() {
       .then((res) => {
         convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
         swalFire({ text: '파일 변환 성공' })
+        setRefImage(res.data.Files[0].FileData)
       })
       .catch((err) => {
         swalFire({ text: '파일 변환 실패', icon: 'error' })
@@ -110,7 +167,7 @@ export function useRefFiles() {
    * 현재 플랜이 변경되면 플랜 상태 저장
    */
   useEffect(() => {
-    console.log('🚀 ~ useRefFiles ~ currentCanvasPlan:', currentCanvasPlan)
+    // 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)

src/hooks/usePlan.js

@@ -6,6 +6,7 @@ import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { SAVE_KEY } from '@/common/common'
+import { readImage } from '@/lib/fileAction'
 
 export function usePlan() {
   const [planNum, setPlanNum] = useState(0)
@@ -204,6 +205,7 @@ export function usePlan() {
       userId: userId,
       imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
       objectNo: currentCanvasPlan.objectNo,
+      mapPositionAddress: currentCanvasPlan.mapPositionAddress,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
     await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
@@ -233,6 +235,7 @@ export function usePlan() {
   const putCanvasStatus = async (canvasStatus) => {
     const planData = {
       id: currentCanvasPlan.id,
+      mapPositionAddress: currentCanvasPlan.mapPositionAddress,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
@@ -285,6 +288,7 @@ export function usePlan() {
       updateCurrentPlan(newCurrentId)
     }
   }
+
   const updateCurrentPlan = (newCurrentId) => {
     setPlans((plans) =>
       plans.map((plan) => {
@@ -295,8 +299,13 @@ export function usePlan() {
   useEffect(() => {
     setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
     setSelectedPlan(plans.find((plan) => plan.isCurrent))
+    // setBgImage()
   }, [plans])
 
+  const setBgImage = () => {
+    readImage(selectedPlan?.id)
+  }
+
   /**
    * 새로운 plan 생성
    * 현재 plan의 데이터가 있을 경우 복제 여부를 확인

src/lib/fileAction.js

@@ -4,6 +4,7 @@ import fs from 'fs/promises'
 
 const CAD_FILE_PATH = 'public/cad-images'
 const IMAGE_FILE_PATH = 'public/plan-bg-images'
+const FILE_PATH = 'public/plan-images'
 
 /**
  * 파일 변환 & 저장
@@ -39,25 +40,54 @@ const writeImageBase64 = async (title, data) => {
   return fs.writeFile(`${IMAGE_FILE_PATH}/${title}.png`, data, 'base64')
 }
 
-/**
+// /**
- * 이미지 저장
+//  * 이미지 저장
- * Buffer 형식으로 저장
+//  * Buffer 형식으로 저장
- * @param {*} title
+//  * @param {*} title
- * @param {*} data
+//  * @param {*} data
- * @returns
+//  * @returns
- */
+//  */
-const writeImageBuffer = async (file) => {
+// const writeImageBuffer = async (file) => {
-  // 해당 경로에 Directory 가 없다면 생성
+//   // 해당 경로에 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)
+// }
+
+const writeImage = async (fileName, file) => {
   try {
-    await fs.readdir(IMAGE_FILE_PATH)
+    await fs.readdir(FILE_PATH)
   } catch {
-    await fs.mkdir(IMAGE_FILE_PATH)
+    await fs.mkdir(FILE_PATH)
   }
 
-  const arrayBuffer = await fileURLToPath.arrayBuffer()
+  return fs.writeFile(`${FILE_PATH}/${fileName}.png`, file)
-  const buffer = new Uint8Array(arrayBuffer)
-
-  return fs.writeFile(`${IMAGE_FILE_PATH}/${file.fileName}`, buffer)
 }
 
-export { convertDwgToPng, writeImageBase64, writeImageBuffer }
+const readImage = async (fileName) => {
+  await fs
+    .readFile(`${FILE_PATH}/${fileName}.png`)
+    .then((res) => {
+      console.log('readImage-then', res)
+    })
+    .catch((e) => {
+      console.log('readImage-catch', e)
+    })
+}
+
+const removeImage = async (fileName) => {
+  try {
+    await fs.rm(`${FILE_PATH}/${fileName}.png`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+export { convertDwgToPng, writeImageBase64, writeImage, readImage, removeImage }