Merge branch 'dev' into dev-yj

# Conflicts:
#	src/hooks/useCanvas.js

next.config.mjs

@@ -1,7 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  swcMinify: true,
   webpack: (config) => {
+    config.resolve.fallback = { fs: false }
     config.externals.push({
       'utf-8-validate': 'commonjs utf-8-validate',
       bufferutil: 'commonjs bufferutil',

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.7.3",
     "fabric": "^5.3.0",
     "framer-motion": "^11.2.13",
+    "fs": "^0.0.1-security",
     "iron-session": "^8.0.2",
     "mathjs": "^13.0.2",
     "mssql": "^11.0.1",

src/hooks/useCanvas.js

@@ -1,6 +1,13 @@
 import { useEffect, useRef, useState } from 'react'
 import { fabric } from 'fabric'
-import { actionHandler, anchorWrapper, calculateIntersection, distanceBetweenPoints, polygonPositionHandler } from '@/util/canvas-util'
+import {
+  actionHandler,
+  anchorWrapper,
+  calculateIntersection,
+  distanceBetweenPoints,
+  polygonPositionHandler,
+  test,
+} from '@/util/canvas-util'
 
 import { useRecoilState } from 'recoil'
 import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
@@ -8,8 +15,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { defineQLine } from '@/util/qline-utils'
 import { defineQPloygon } from '@/util/qpolygon-utils'
-
-import * as turf from '@turf/turf'
+import { writeImage } from '@/lib/canvas'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
@@ -502,16 +508,12 @@ export function useCanvas(id) {
    * 이미지로 저장하는 함수
    * @param {string} title - 저장할 이미지 이름
    */
-  const saveImage = (title = 'canvas') => {
-    removeMouseLines()
-    const dataURL = canvas?.toDataURL('png')
-    // 이미지 다운로드 링크 생성
-    const link = document.createElement('a')
-    link.download = `${title}.png`
-    link.href = dataURL
-
-    // 링크 클릭하여 이미지 다운로드
-    link.click()
+  const saveImage = async (title = 'canvas') => {
+    await writeImage(title, canvas?.toDataURL('image/png').replace('data:image/png;base64,', '')).then(res => {
+      console.log('success', res)
+    }).catch(err => {
+      console.log('err', err)
+    })
   }
 
   const handleFlip = () => {
@@ -568,7 +570,7 @@ export function useCanvas(id) {
     const dataUrl = tempCanvas.toDataURL({ format: 'png' })
 
     // Set the image as the background of the original canvas
-    fabric.Image.fromURL(dataUrl, function (img) {
+    fabric.Image.fromURL(dataUrl, function(img) {
       canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
         scaleX: canvas.width / img.width,
         scaleY: canvas.height / img.height,

src/hooks/useMode.js

@@ -925,8 +925,8 @@ export function useMode() {
     setRoof(roof)
     setWall(polygon)
 
-    // roof.drawHelpLine()
-    // roof.divideLine()
+    roof.drawHelpLine()
+    roof.divideLine()
   }
 
   const drawRoofPolygon = (wall, offset = 50) => {

src/lib/canvas.js

@@ -1,8 +1,10 @@
 'use server'
 
 import { PrismaClient } from '@prisma/client'
+import fs from 'fs/promises'
 
 const prisma = new PrismaClient()
+const imagePath = 'public/canvasState'
 
 export const getTests = () => {
   return prisma.test.findMany()
@@ -36,3 +38,14 @@ export const insertCanvasState = (param) => {
     data: param,
   })
 }
+
+export const writeImage = async (title, data) => {
+  // 해당 경로에 Directory 가 없다면 생성
+  try {
+    await fs.readdir(imagePath)
+  } catch {
+    await fs.mkdir(imagePath)
+  }
+
+  return fs.writeFile(`${imagePath}/${title}.png`, data, 'base64')
+}