Import configuration module in useRefFiles hook for enhanced background image management.

Reviewed-on: #82

.env.development

@@ -1,3 +1,5 @@
+NEXT_PUBLIC_RUN_MODE="development"
+
 NEXT_PUBLIC_API_SERVER_PATH="https://dev-api.hanasys.jp"
 
 NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"

.env.local.dev

@@ -0,0 +1,30 @@
+NEXT_PUBLIC_RUN_MODE="local.dev"
+
+NEXT_PUBLIC_API_SERVER_PATH="https://dev-api.hanasys.jp"
+
+NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"
+
+NEXT_PUBLIC_API_HOST_URL="http://1.248.227.176:5000"
+
+SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
+
+# NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
+# NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_yAS4QDalL9jgQ7vS"
+NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
+
+NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
+
+# 테스트용
+# AWS_REGION="ap-northeast-2"
+# AMPLIFY_BUCKET="interplug"
+# AWS_ACCESS_KEY_ID="AKIAVWMWJCUXFHEAZ4FR"
+# AWS_SECRET_ACCESS_KEY="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"
+# NEXT_PUBLIC_AWS_S3_BASE_URL="https://interplug.s3.ap-northeast-2.amazonaws.com"
+
+# 실제 일본 서버
+AWS_REGION="ap-northeast-1"
+AMPLIFY_BUCKET="files.hanasys.jp"
+AWS_ACCESS_KEY_ID="AKIA3K4QWLZHFZRJOM2E"
+AWS_SECRET_ACCESS_KEY="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"
+NEXT_PUBLIC_AWS_S3_BASE_URL="//files.hanasys.jp"

.env.localhost

@@ -1,3 +1,5 @@
+NEXT_PUBLIC_RUN_MODE="local"
+
 NEXT_PUBLIC_API_SERVER_PATH="https://dev-api.hanasys.jp"
 
 NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"

.env.production

@@ -1,3 +1,5 @@
+NEXT_PUBLIC_RUN_MODE="production"
+
 NEXT_PUBLIC_API_SERVER_PATH="https://api.hanasys.jp/"
 
 NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"

dev.local.ecosystem.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  apps: [
+    {
+      name: 'qcast-front-local-development',
+      script: 'node_modules/next/dist/bin/next',
+      instances: 1,
+      exec_mode: 'fork',
+      env: {
+        PORT: 5000,
+      },
+    },
+  ],
+}

package.json

@@ -4,8 +4,10 @@
   "private": true,
   "scripts": {
     "dev": "env-cmd -f .env.localhost next dev",
+    "local:dev": "env-cmd -f .env.local.dev next dev",
     "build": "env-cmd -f .env.productionnext build",
     "build:dev": "env-cmd -f .env.development next build",
+    "build:local.dev": "env-cmd -f .env.local.dev next build",
     "start:cluster1": "env-cmd -f .env.production next start -p 5000",
     "start:cluster2": "env-cmd -f .env.production next start -p 5001",
     "start:dev": "env-cmd -f .env.development next start -p 5010",

src/app/api/image/cad/route.js

@@ -11,9 +11,10 @@ const s3 = new S3Client({
 })
 
 const uploadImage = async (file) => {
+  console.log('🚀 ~ uploadImage ~ file:', file)
   const Body = Buffer.from(await file.arrayBuffer())
   const Key = `cads/${file.name}`
-  const ContentType = file.ContentType
+  const ContentType = 'image/png'
 
   await s3.send(
     new PutObjectCommand({

src/components/Main.jsx

@@ -136,11 +136,6 @@ export default function MainPage() {
           <ChangePasswordPop setChagePasswordPopOpen={setChagePasswordPopOpen} />
         </>
       )}
-      {Config().mode}
-      <br />
-      {Config().baseUrl}
-      <br />
-      {process.env.NEXT_PUBLIC_API_HOST_URL}
     </>
   )
 }

src/config/config.export.js

@@ -1,5 +1,6 @@
 import configDevelopment from './config.development'
 import configLocal from './config.local'
+import configLocalDev from './config.local.dev'
 import configProduction from './config.production'
 
 // 클라이언트에서는 이 함수를 사용하여 config 값을 참조합니다.
@@ -7,6 +8,8 @@ const Config = () => {
   switch (process.env.NEXT_PUBLIC_RUN_MODE) {
     case 'local':
       return configLocal
+    case 'local.dev':
+      return configLocalDev
     case 'development':
       return configDevelopment
     case 'production':

src/config/config.local.dev.js

@@ -0,0 +1,13 @@
+import getConfigs from './config.common'
+
+// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 local 환경에 맞는 값을 지정합니다.)
+const baseUrl = 'http://1.248.227.176:5000'
+const mode = 'local.dev'
+
+// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
+const configLocalDev = getConfigs({
+  baseUrl,
+  mode,
+})
+
+export default configLocalDev

src/hooks/common/useCommonUtils.js

@@ -22,7 +22,7 @@ export function useCommonUtils() {
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
   const [commonUtils, setCommonUtilsState] = useRecoilState(commonUtilsState)
-  const { addPopup, closeAll } = usePopup()
+  const { addPopup, closeAll, targetClose } = usePopup()
   const { drawDirectionArrow, addLengthText } = usePolygon()
   const { applyDormers } = useObjectBatch({})
 
@@ -38,8 +38,9 @@ export function useCommonUtils() {
 
   const commonTextMode = () => {
     let textbox
-    closeAll()
+
     if (commonUtils.text) {
+      targetClose('other')
       setTimeout(() => {
         commonTextKeyEvent()
         addCanvasMouseEventListener('mouse:down', (event) => {

src/hooks/common/useRefFiles.js

@@ -239,14 +239,40 @@ export function useRefFiles() {
     const res = await post({ url: converterUrl, data: formData })
     console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
 
+    // Convert Base64 to Blob
+    const base64Data = res.Files[0].FileData
+    const byteCharacters = atob(base64Data)
+    const byteArrays = []
+
+    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+      const slice = byteCharacters.slice(offset, offset + 512)
+      const byteNumbers = new Array(slice.length)
+
+      for (let i = 0; i < slice.length; i++) {
+        byteNumbers[i] = slice.charCodeAt(i)
+      }
+
+      const byteArray = new Uint8Array(byteNumbers)
+      byteArrays.push(byteArray)
+    }
+
+    const blob = new Blob(byteArrays, { type: 'image/png' })
+
+    // Create File object from Blob
+    const convertImg = new File([blob], res.Files[0].FileName, { type: 'image/png' })
+
+    const newFormData = new FormData()
+    newFormData.append('file', convertImg)
+
     /** 캐드 도면 파일 업로드 */
     const result = await post({
       url: `${Config().baseUrl}/api/image/cad`,
-      data: res,
+      data: newFormData,
     })
     console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
 
-    setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
+    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${result.fileName}`)
+    setCurrentBgImage(result.filePath)
     setRefImage(file)
 
     const params = {

src/hooks/usePolygon.js

@@ -1100,7 +1100,7 @@ export const usePolygon = () => {
       })
 
       // blue로 생성된 것들은 대표라인이 될 수 없음.
-      // representLines = representLines.filter((line) => line.stroke !== 'blue')
+      representLines = representLines.filter((line) => line.stroke !== 'blue')
       // representLines중 가장 긴 line을 찾는다.
       representLines.forEach((line) => {
         if (!representLine) {

src/hooks/usePopup.js

@@ -128,11 +128,17 @@ export function usePopup() {
     }
   }
 
+  const targetClose = (type) => {
+    popup[type] = []
+    setPopup({ ...popup, [type]: [] })
+  }
+
   return {
     popup,
     addPopup,
     closePopup,
     closePopups,
     closeAll,
+    targetClose,
   }
 }

startscript.js

@@ -1,2 +1,2 @@
 var exec = require('child_process').exec
-exec('yarn dev -p 5000', { windowsHide: true })
+exec('yarn local:dev -p 5000', { windowsHide: true })