diff 2로 수정

Reviewed-on: #564

.env.development

@@ -1,11 +1,36 @@
-NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
+NEXT_PUBLIC_RUN_MODE="development"
 
-NEXT_PUBLIC_HOST_URL="http://1.248.227.176:4000"
+NEXT_PUBLIC_API_SERVER_PATH="https://dev-api.hanasys.jp"
+
+NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"
+
+NEXT_PUBLIC_API_HOST_URL="https://dev.hanasys.jp"
 
 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_yAS4QDalL9jgQ7vS"
+NEXT_PUBLIC_CONVERTER_DWG_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
+NEXT_PUBLIC_CONVERTER_DXF_API_URL="https://v2.convertapi.com/convert/dxf/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"
+
+S3_PROFILE="dev"
+
+#logging
+NEXT_PUBLIC_ENABLE_LOGGING=true

.env.local.dev

@@ -0,0 +1,32 @@
+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"
+
+S3_PROFILE="dev"

.env.localhost

@@ -0,0 +1,36 @@
+NEXT_PUBLIC_RUN_MODE="local"
+
+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://localhost:3000"
+
+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_DWG_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
+NEXT_PUBLIC_CONVERTER_DXF_API_URL="https://v2.convertapi.com/convert/dxf/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"
+
+S3_PROFILE="dev"
+
+#logging
+NEXT_PUBLIC_ENABLE_LOGGING=false

.env.production

@@ -1,13 +1,35 @@
+NEXT_PUBLIC_RUN_MODE="production"
+
 NEXT_PUBLIC_API_SERVER_PATH="https://api.hanasys.jp/"
 
-NEXT_PUBLIC_HOST_URL="http://1.248.227.176:4000"
+NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"
+
+NEXT_PUBLIC_API_HOST_URL="https://www.hanasys.jp"
 
 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_yAS4QDalL9jgQ7vS"
+NEXT_PUBLIC_CONVERTER_DWG_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
+NEXT_PUBLIC_CONVERTER_DXF_API_URL="https://v2.convertapi.com/convert/dxf/to/png?Secret=secret_a0FLEK6M2oTpXInK"
 
-# NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="https://q-order.q-cells.jp/eos/login/autoLogin"
-# NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="https://q-musubi.q-cells.jp/qm/login/autoLogin"
-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"
+NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="https://q-order.q-cells.jp/eos/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="https://q-musubi.q-cells.jp/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="//files.hanasys.jp"
+
+# 실제 일본 서버
+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"
+
+S3_PROFILE="prd"
+
+#logging
+NEXT_PUBLIC_ENABLE_LOGGING=false

.gitignore

@@ -43,3 +43,4 @@ yarn.lock
 package-lock.json
 pnpm-lock.yaml
 certificates
+.ai

.gitmessage.txt

@@ -0,0 +1,3 @@
+[일감번호] : [제목]
+
+[작업내용] : 

README.md

@@ -1,6 +1,6 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## Getting Started
+### Getting Started
 
 First, run the development server:
 
@@ -34,3 +34,5 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+deploy test

dev.ecosystem.config.js

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

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,
+      },
+    },
+  ],
+}

ecosystem.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  apps: [
+    {
+      name: 'qcast-front-production',
+      script: 'node_modules/next/dist/bin/next',
+      instances: 2,
+      exec_mode: 'cluster',
+      env: {
+        NODE_ENV: 'production',
+      },
+    },
+  ],
+}

package.json

@@ -3,27 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start -p 5000",
-    "start:dev": "next start -p 5010",
+    "dev": "env-cmd -f .env.localhost next dev",
+    "local:dev": "env-cmd -f .env.local.dev next dev",
+    "build": "env-cmd -f .env.production next 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",
     "lint": "next lint",
     "serve": "node server.js"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.772.0",
     "ag-grid-react": "^32.0.2",
     "axios": "^1.7.8",
     "big.js": "^6.2.2",
     "chart.js": "^4.4.6",
     "dayjs": "^1.11.13",
-    "fabric": "^5.3.0",
+    "env-cmd": "^10.1.0",
+    "fabric": "^5.5.2",
     "framer-motion": "^11.2.13",
     "fs": "^0.0.1-security",
     "iron-session": "^8.0.2",
+    "jimp": "^1.6.0",
     "js-cookie": "^3.0.5",
     "mathjs": "^13.0.2",
     "mssql": "^11.0.1",
-    "next": "14.2.21",
+    "next": "14.2.28",
     "next-international": "^1.2.4",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
@@ -37,6 +44,7 @@
     "react-responsive-modal": "^6.4.2",
     "react-select": "^5.8.1",
     "recoil": "^0.7.7",
+    "sharp": "^0.33.5",
     "sqlite": "^5.1.1",
     "sqlite3": "^5.1.7",
     "sweetalert2": "^11.14.1",
@@ -47,11 +55,14 @@
   },
   "devDependencies": {
     "@turf/turf": "^7.0.0",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.11",
     "convertapi": "^1.14.0",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "react-color-palette": "^7.2.2",
     "sass": "^1.77.8",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.9.2"
   }
 }

prd1.ecosystem.config.js

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

prd2.ecosystem.config.js

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

public/static/images/canvas/hide-check-arr.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0L15.7942 13.5H0.205771L8 0Z" fill="white"/>
+</svg>

public/static/images/sub/oneonone_profile_icon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="#101010" stroke-width="1.5"/>
+<path d="M7.94995 16.5C10.0485 14.302 13.9289 14.1986 16.05 16.5M14.2455 9.75C14.2455 10.9926 13.2367 12 11.9923 12C10.7479 12 9.73912 10.9926 9.73912 9.75C9.73912 8.50736 10.7479 7.5 11.9923 7.5C13.2367 7.5 14.2455 8.50736 14.2455 9.75Z" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/app/GlobalDataProvider.js

@@ -1,21 +1,13 @@
 'use client'
 
-import { createContext, useEffect, useState } from 'react'
-import { useLocalStorage } from 'usehooks-ts'
+import { createContext, useState } from 'react'
 
 export const GlobalDataContext = createContext(null)
 
 const GlobalDataProvider = ({ children }) => {
   const [managementState, setManagementState] = useState(null)
-  const [managementStateLoaded, setManagementStateLoaded] = useLocalStorage('managementStateLoaded', null)
 
-  useEffect(() => {
-    if (managementState !== null) {
-      setManagementStateLoaded(managementState)
-    }
-  }, [managementState])
-
-  return <GlobalDataContext.Provider value={{ managementState, setManagementState, managementStateLoaded }}>{children}</GlobalDataContext.Provider>
+  return <GlobalDataContext.Provider value={{ managementState, setManagementState }}>{children}</GlobalDataContext.Provider>
 }
 
 export default GlobalDataProvider

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

@@ -0,0 +1,70 @@
+import { NextResponse } from 'next/server'
+import { S3Client, PutObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3'
+
+const Bucket = process.env.AMPLIFY_BUCKET
+const s3 = new S3Client({
+  region: process.env.AWS_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  },
+})
+
+const uploadImage = async (file) => {
+  console.log('🚀 ~ uploadImage ~ file:', file)
+  const Body = Buffer.from(await file.arrayBuffer())
+  const Key = `cads/${file.name}`
+  const ContentType = 'image/png'
+
+  await s3.send(
+    new PutObjectCommand({
+      Bucket,
+      Key,
+      Body,
+      ContentType,
+    }),
+  )
+
+  return {
+    filePath: `https://${process.env.AMPLIFY_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key}`,
+    fileName: Key,
+  }
+}
+
+export async function POST(req) {
+  try {
+    const formData = await req.formData()
+    const file = formData.get('file')
+
+    const result = await uploadImage(file)
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error(error)
+    return NextResponse.json({ error: 'Failed to upload image' }, { status: 500 })
+  }
+}
+
+export async function DELETE(req) {
+  try {
+    const searchParams = req.nextUrl.searchParams
+    const Key = `cads/${searchParams.get('fileName')}`
+    console.log('🚀 ~ DELETE ~ Key:', Key)
+
+    if (!Key) {
+      return NextResponse.json({ error: 'fileName parameter is required' }, { status: 400 })
+    }
+
+    await s3.send(
+      new DeleteObjectCommand({
+        Bucket,
+        Key,
+      }),
+    )
+
+    return NextResponse.json({ message: '이미지 삭제 성공' }, { status: 200 })
+  } catch (error) {
+    console.error('S3 Delete Error:', error)
+    return NextResponse.json({ error: 'Failed to delete image' }, { status: 500 })
+  }
+}

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

@@ -0,0 +1,203 @@
+import { NextResponse } from 'next/server'
+import { DeleteObjectCommand, GetObjectCommand, PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
+import { v4 as uuidv4 } from 'uuid'
+import { Jimp } from 'jimp'
+
+const Bucket = process.env.AMPLIFY_BUCKET
+const s3 = new S3Client({
+  region: process.env.AWS_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  },
+})
+
+const checkArea = (obj) => {
+  const { width, height, left, top } = obj
+
+  if (left < 0 || top < 0 || width > 1600 || height > 1000) {
+    return false
+  }
+
+  return true
+}
+
+const cropImage = async (Key, width, height, left, top) => {
+  try {
+    // Get the image from S3
+    const { Body } = await s3.send(
+      new GetObjectCommand({
+        Bucket,
+        Key,
+      }),
+    )
+
+    const chunks = []
+    for await (const chunk of Body) {
+      chunks.push(chunk)
+    }
+    const buffer = Buffer.concat(chunks)
+
+    let image = await Jimp.read(buffer)
+    image.autocrop({ tolerance: 0.0002, leaveBorder: 10 })
+
+    const resizedImage = await resizeImage(image).then((result) => {
+      return result
+    })
+
+    return await resizedImage.getBuffer('image/png')
+
+    // Convert stream to buffer
+    // const chunks = []
+    // for await (const chunk of Body) {
+    //   chunks.push(chunk)
+    // }
+    // const imageBuffer = Buffer.concat(chunks)
+
+    // const image = await Jimp.read(Body)
+
+    // if (!checkResult) {
+    //   processedImage = await image.toBuffer()
+    // }
+
+    //let processedImage
+    // if (!checkResult) {
+    //   processedImage = await sharp(imageBuffer).toBuffer()
+    // } else {
+    //   processedImage = await sharp(imageBuffer)
+    //     .extract({
+    //       width: parseInt(width),
+    //       height: parseInt(height),
+    //       left: parseInt(left),
+    //       top: parseInt(top),
+    //     })
+    //     .png()
+    //     .toBuffer()
+    // }
+    // return processedImage
+  } catch (error) {
+    console.error('Error processing image:', error)
+    throw error
+  }
+}
+
+//크롭된 이미지를 배경 크기에 맞게 리사이즈
+const resizeImage = async (image) => {
+  //엑셀 템플릿 너비 35.4cm, 높이 12.89cm
+  const convertStandardWidth = Math.round((35.4 * 96) / 2.54)
+  const convertStandardHeight = Math.round((12.89 * 96) / 2.54)
+
+  // 이미지를 배경의 98%까지 확대 (훨씬 더 크게)
+  const targetImageWidth = convertStandardWidth * 0.98
+  const targetImageHeight = convertStandardHeight * 0.98
+
+  const scaleX = targetImageWidth / image.bitmap.width
+  const scaleY = targetImageHeight / image.bitmap.height
+  let scale = Math.min(scaleX, scaleY) // 비율 유지하면서 최대한 크게
+
+  // scale 저장 (나중에 전체 확대에 사용)
+  const originalScale = scale
+
+  let finalWidth = Math.round(image.bitmap.width * scale)
+  let finalHeight = Math.round(image.bitmap.height * scale)
+
+  if (scale >= 0.6) {
+    // 실제 리사이즈 실행
+    image.resize({ w: finalWidth, h: finalHeight })
+  }
+
+  //배경 이미지를 생성
+  const mixedImage = new Jimp({ width: convertStandardWidth, height: convertStandardHeight, color: 0xffffffff })
+
+  //이미지를 중앙에 배치
+  const x = Math.floor((mixedImage.bitmap.width - image.bitmap.width) / 2)
+  const y = Math.floor((mixedImage.bitmap.height - image.bitmap.height) / 2)
+
+  //이미지를 배경 이미지에 합성
+  mixedImage.composite(image, x, y, {
+    opacitySource: 1, // 원본 투명도 유지
+    opacityDest: 1,
+  })
+
+  // scale이 0.8 이하인 경우 완성된 이미지를 전체적으로 확대
+  if (originalScale <= 0.8) {
+    const enlargeRatio = 1.5 // 50% 확대
+    const newWidth = Math.round(mixedImage.bitmap.width * enlargeRatio)
+    const newHeight = Math.round(mixedImage.bitmap.height * enlargeRatio)
+
+    mixedImage.resize({ w: newWidth, h: newHeight })
+  }
+
+  return mixedImage
+}
+
+export async function POST(req) {
+  try {
+    const formData = await req.formData()
+    const file = formData.get('file')
+    const objectNo = formData.get('objectNo')
+    const planNo = formData.get('planNo')
+    const type = formData.get('type')
+    const width = formData.get('width')
+    const height = formData.get('height')
+    const left = formData.get('left')
+    const top = formData.get('top')
+
+    const OriginalKey = `Drawing/${uuidv4()}`
+
+    /**
+     * 원본 이미지를 우선 저장한다.
+     * 이미지 이름이 겹지는 현상을 방지하기 위해 uuid 를 사용한다.
+     */
+    await s3.send(
+      new PutObjectCommand({
+        Bucket,
+        Key: OriginalKey,
+        Body: Buffer.from(await file.arrayBuffer()),
+        ContentType: 'image/png',
+      }),
+    )
+
+    /**
+     * 저장된 원본 이미지를 기준으로 크롭여부를 결정하여 크롭 이미지를 저장한다.
+     */
+    const bufferImage = await cropImage(OriginalKey, width, height, left, top)
+
+    /**
+     * 크롭 이미지 이름을 결정한다.
+     */
+    const Key = `Drawing/${process.env.S3_PROFILE}/${objectNo}_${planNo}_${type}.png`
+
+    /**
+     * 크롭이 완료된 이미지를 업로드한다.
+     */
+    await s3.send(
+      new PutObjectCommand({
+        Bucket,
+        Key,
+        Body: bufferImage,
+        ContentType: 'image/png',
+      }),
+    )
+
+    /**
+     * 크롭이미지 저장이 완료되면 원본 이미지를 삭제한다.
+     */
+    await s3.send(
+      new DeleteObjectCommand({
+        Bucket,
+        Key: OriginalKey,
+      }),
+    )
+
+    const result = {
+      filePath: `https://${process.env.AMPLIFY_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key}`,
+      fileName: Key,
+    }
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error('Error in POST:', error)
+    return NextResponse.json({ error: 'Failed to process and upload image' }, { status: 500 })
+  }
+}

src/app/api/image/estimate-image-copy/route.js

@@ -0,0 +1,59 @@
+import { NextResponse } from 'next/server'
+import { S3Client, CopyObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3'
+import sharp from 'sharp'
+import { v4 as uuidv4 } from 'uuid'
+const Bucket = process.env.AMPLIFY_BUCKET
+const s3 = new S3Client({
+  region: process.env.AWS_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  },
+})
+
+export async function POST(req) {
+  const { objectNo, planNo, newObjectNo, newPlanNo } = await req.json()
+
+  const responseArray = []
+
+  //견적서1 번 이미지
+  const isExistImage1 = await s3.send(
+    new GetObjectCommand({
+      Bucket,
+      Key: `Drawing/${process.env.S3_PROFILE}/${objectNo}_${planNo}_1.png`,
+    }),
+  )
+
+  //견적서2 번 이미지
+  const isExistImage2 = await s3.send(
+    new GetObjectCommand({
+      Bucket,
+      Key: `Drawing/${process.env.S3_PROFILE}/${objectNo}_${planNo}_2.png`,
+    }),
+  )
+
+  //견적서1,2 번 이미지 둘다 있어야함
+  if (isExistImage1.$metadata.httpStatusCode === 200 && isExistImage2.$metadata.httpStatusCode === 200) {
+    //견적서1 번 이미지 복사
+    const copyCommand = new CopyObjectCommand({
+      Bucket,
+      CopySource: encodeURI(`${Bucket}/Drawing/${process.env.S3_PROFILE}/${objectNo}_${planNo}_1.png`),
+      Key: `Drawing/${process.env.S3_PROFILE}/${newObjectNo}_${newPlanNo}_1.png`,
+    })
+
+    const response = await s3.send(copyCommand)
+
+    const copyCommand2 = new CopyObjectCommand({
+      Bucket,
+      CopySource: encodeURI(`${Bucket}/Drawing/${process.env.S3_PROFILE}/${objectNo}_${planNo}_2.png`),
+      Key: `Drawing/${process.env.S3_PROFILE}/${newObjectNo}_${newPlanNo}_2.png`,
+    })
+
+    const response2 = await s3.send(copyCommand2)
+
+    responseArray.push(response, response2)
+    return NextResponse.json({ message: '견적서 이미지 복사 성공', responseArray }, { status: 200 })
+  } else {
+    return NextResponse.json({ message: '견적서 이미지 복사 실패(존재하지 않는 이미지)', responseArray }, { status: 400 })
+  }
+}

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

@@ -0,0 +1,78 @@
+import { NextResponse } from 'next/server'
+import { S3Client, PutObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3'
+
+const Bucket = process.env.AMPLIFY_BUCKET
+const s3 = new S3Client({
+  region: process.env.AWS_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  },
+})
+
+export async function GET(req) {
+  try {
+    const searchParams = req.nextUrl.searchParams
+    const q = searchParams.get('q')
+    const fileNm = searchParams.get('fileNm')
+    const zoom = searchParams.get('zoom')
+
+    /** 구글 맵을 이미지로 변경하기 위한 API */
+    const API_KEY = 'AIzaSyDO7nVR1N_D2tKy60hgGFavpLaXkHpiHpc'
+    const targetUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${q}&zoom=${zoom}&maptype=satellite&size=640x640&scale=1&key=${API_KEY}`
+    const decodeUrl = decodeURIComponent(targetUrl)
+
+    /** 구글 맵을 이미지로 변경하기 위한 API 호출 */
+    const response = await fetch(decodeUrl)
+    const data = await response.arrayBuffer()
+    // const buffer = Buffer.from(data)
+
+    /** 변경된 이미지를 S3에 업로드 */
+    const Body = Buffer.from(data)
+    const Key = `maps/${fileNm}`
+    const ContentType = 'image/png'
+
+    await s3.send(
+      new PutObjectCommand({
+        Bucket,
+        Key,
+        Body,
+        ContentType,
+      }),
+    )
+
+    const result = {
+      filePath: `https://${process.env.AMPLIFY_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key}`,
+      fileName: Key,
+    }
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error(error)
+    return NextResponse.json({ error: 'Failed to upload image' }, { status: 500 })
+  }
+}
+
+export async function DELETE(req) {
+  try {
+    const searchParams = req.nextUrl.searchParams
+    const Key = `maps/${searchParams.get('fileName')}`
+    console.log('🚀 ~ DELETE ~ Key:', Key)
+
+    if (!Key) {
+      return NextResponse.json({ error: 'fileName parameter is required' }, { status: 400 })
+    }
+
+    await s3.send(
+      new DeleteObjectCommand({
+        Bucket,
+        Key,
+      }),
+    )
+
+    return NextResponse.json({ message: '이미지 삭제 성공' }, { status: 200 })
+  } catch (error) {
+    console.error('S3 Delete Error:', error)
+    return NextResponse.json({ error: 'Failed to delete image' }, { status: 500 })
+  }
+}

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

@@ -0,0 +1,72 @@
+import { NextResponse } from 'next/server'
+import { S3Client, PutObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3'
+
+const Bucket = process.env.AMPLIFY_BUCKET
+const s3 = new S3Client({
+  region: process.env.AWS_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  },
+})
+
+const uploadImage = async (file) => {
+  const Body = Buffer.from(await file.arrayBuffer())
+  const Key = `upload/${file.name}`
+  const ContentType = file.ContentType
+
+  await s3.send(
+    new PutObjectCommand({
+      Bucket,
+      Key,
+      Body,
+      ContentType,
+    }),
+  )
+
+  return {
+    filePath: `https://${process.env.AMPLIFY_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key}`,
+    fileName: Key,
+  }
+}
+
+export async function POST(req) {
+  try {
+    const formData = await req.formData()
+    const file = formData.get('file')
+
+    const result = await uploadImage(file)
+    result.message = '이미지 업로드 성공'
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error(error)
+    return NextResponse.json({ error: 'Failed to upload image' }, { status: 500 })
+  }
+}
+
+export async function DELETE(req) {
+  try {
+    const searchParams = req.nextUrl.searchParams
+    const fileName = searchParams.get('fileName')
+
+    if (!fileName) {
+      return NextResponse.json({ error: 'fileName parameter is required' }, { status: 400 })
+    }
+
+    const Key = `upload/${fileName}`
+    console.log('🚀 ~ DELETE ~ Key:', Key)
+
+    await s3.send(
+      new DeleteObjectCommand({
+        Bucket,
+        Key,
+      }),
+    )
+
+    return NextResponse.json({ message: '이미지 삭제 성공' }, { status: 200 })
+  } catch (error) {
+    console.error('S3 Delete Error:', error)
+    return NextResponse.json({ error: 'Failed to delete image' }, { status: 500 })
+  }
+}

src/app/community/qna/page.jsx

@@ -0,0 +1,9 @@
+import Qna from '@/components/community/Qna'
+
+export default async function CommunityQnaPage() {
+  return (
+    <>
+      <Qna />
+    </>
+  )
+}

src/app/floor-plan/FloorPlanProvider.js

@@ -21,6 +21,8 @@ const defaultEstimateData = {
   fileList: [],
   fileFlg: '0', //후일 자료 제출 (체크 1 노체크 0)
   priceCd: '',
+  pricingFlag: false, // 가격 처리 플래그 추가
+
 }
 
 /**
@@ -45,8 +47,19 @@ const FloorPlanProvider = ({ children }) => {
   // const pathname = usePathname()
   // const setCorrentObjectNo = useSetRecoilState(correntObjectNoState)
   const searchParams = useSearchParams()
+  const path = usePathname()
   const objectNo = searchParams.get('objectNo')
   const pid = searchParams.get('pid')
+
+  useEffect(() => {
+    setFloorPlanState((prev) => {
+      return {
+        ...prev,
+        objectNo,
+        pid,
+      }
+    })
+  }, [path])
   // useEffect(() => {
   //   console.log('🚀 ~ useEffect ~ objectNo:')
   //   if (pathname === '/floor-plan') {

src/app/layout.js

@@ -21,8 +21,8 @@ import GlobalLoadingProvider from './GlobalLoadingProvider'
  * 서버 컴포넌트에 한해서 개별로 설정할 수 있음
  */
 export const metadata = {
-  title: 'HANASYS設計',
-  description: 'HANASYS設計',
+  title: 'HANASYS DESIGN',
+  description: 'HANASYS DESIGN',
 }
 
 /**
@@ -58,6 +58,8 @@ export default async function RootLayout({ children }) {
       pwdInitYn: session.pwdInitYn,
       custCd: session.custCd,
       isLoggedIn: session.isLoggedIn,
+      builderNo: session.builderNo,
+      custNm: session.custNm
     }
   }
   if (!headerPathname.includes('/login') && !session.isLoggedIn) {

src/common/common.js

@@ -13,6 +13,7 @@ export const MENU = {
     MOVEMENT_SHAPE_UPDOWN: 'movementShapeUpdown', // 동선이동.형올림내림
     OUTLINE_EDIT_OFFSET: 'outlineEditOffset', // 외벽선 편집 및 오프셋
     ROOF_SHAPE_ALLOC: 'rootShapeAlloc', // 지붕면 항당
+    ALL_REMOVE: 'allRemove', // 전체 삭제
     DEFAULT: 'roofCoveringDefault', // 아무것도 선택 안할 경우
   }, // 지붕덮개
   BATCH_CANVAS: {
@@ -60,6 +61,7 @@ export const LINE_TYPE = {
      */
     DEFAULT: 'default',
     EAVES: 'eaves',
+    EAVE_HELP_LINE: 'eaveHelpLine',
     GABLE: 'gable',
     GABLE_LEFT: 'gableLeft', //케라바 왼쪽
     GABLE_RIGHT: 'gableRight', //케라바 오른쪽
@@ -125,6 +127,11 @@ export const TRESTLE_MATERIAL = {
   BRACKET: 'bracket',
 }
 
+export const MODULE_SETUP_TYPE = {
+  LAYOUT: 'layout',
+  AUTO: 'auto',
+}
+
 export const SAVE_KEY = [
   'selectable',
   'name',
@@ -203,6 +210,21 @@ export const SAVE_KEY = [
   'fontWeight',
   'dormerAttributes',
   'toFixed',
+  'startPoint',
+  'endPoint',
+  'editable',
+  'isSortedPoints',
+  'isMultipleOf45',
+  'from',
+  'originColor',
+  'originWidth',
+  'originHeight',
+  'skeletonLines',
+  'skeleton',
+  'viewportTransform',
+  'outerLineFix',
+  'adjustRoofLines',
+  'northModuleYn',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]

src/components/Main.jsx

@@ -14,11 +14,13 @@ import { sessionStore } from '@/store/commonAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 
 import BoardDetailModal from './community/modal/BoardDetailModal'
+import Config from '@/config/config.export'
 
 export default function MainPage() {
   const [sessionState, setSessionState] = useRecoilState(sessionStore)
-  const [chagePasswordPopOpen, setChagePasswordPopOpen] = useState(false)
-
+  const [changePasswordPopOpen, setChangePasswordPopOpen] = useState(false)
+  // 데이터 확인 완료 여부 상태 추가
+  const [isSessionLoaded, setIsSessionLoaded] = useState(false)
   const router = useRouter()
   const { getMessage } = useMessage()
 
@@ -51,6 +53,14 @@ export default function MainPage() {
     }
   }
 
+  useEffect(() => {
+    if (isObjectNotEmpty(sessionState)) {
+      if (sessionState?.pwdInitYn !== 'Y') {
+        setChangePasswordPopOpen(true)
+      }
+    }
+  }, [sessionState])
+
   // 라디오 변경 이벤트
   const handleOnChangeRadio = (e) => {
     setSearchRadioType(e.target.value)
@@ -76,7 +86,7 @@ export default function MainPage() {
   useEffect(() => {
     if (isObjectNotEmpty(sessionState)) {
       if (sessionState?.pwdInitYn !== 'Y') {
-        setChagePasswordPopOpen(true)
+        setChangePasswordPopOpen(true)
       }
     }
   }, [sessionState])
@@ -85,10 +95,25 @@ export default function MainPage() {
   const [open, setOpen] = useState(false)
   const [modalNoticeNo, setModalNoticeNo] = useState('')
 
+  useEffect(() => {
+    if (isObjectNotEmpty(sessionState)) {
+      if (sessionState?.pwdInitYn !== 'Y') {
+        setChangePasswordPopOpen(true)
+      } else {
+        // pwdInitYn이 'Y'라면 팝업을 닫음 (false)
+        setChangePasswordPopOpen(false)
+      }
+    }
+  }, [sessionState])
+
+  //if (!isSessionLoaded) return null
+
   return (
     <>
       {open && <BoardDetailModal noticeNo={modalNoticeNo} setOpen={setOpen} />}
-      {(!chagePasswordPopOpen && (
+      {changePasswordPopOpen ? (
+        <ChangePasswordPop setChangePasswordPopOpen={setChangePasswordPopOpen} />
+      ) : (
         <>
           <div className="background-bord"></div>
           <div className="main-contents">
@@ -130,11 +155,8 @@ export default function MainPage() {
             <MainContents setFaqOpen={setOpen} setFaqModalNoticeNo={setModalNoticeNo} />
           </div>
         </>
-      )) || (
-        <>
-          <ChangePasswordPop setChagePasswordPopOpen={setChagePasswordPopOpen} />
-        </>
       )}
+
     </>
   )
 }

src/components/auth/AutoLogin.jsx

@@ -2,15 +2,51 @@
 
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
+import { setSession, login } from '@/lib/authActions'
+import { sessionStore } from '@/store/commonAtom'
+import { useRecoilState } from 'recoil'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useRouter } from 'next/navigation'
+
 import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
 
-export default function AutoLoginPage() {
-  const [isLoading, setIsLoading] = useState(true)
+export default function AutoLoginPage({ autoLoginParam }) {
+  const router = useRouter()
+
+  const [isLoading, setIsLoading] = useState(autoLoginParam === 'Y' ? false : true)
+  const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore)
+
+  const { promisePost } = useAxios(globalLocaleState)
   const { getMessage } = useMessage()
 
+  const [userId, setUserId] = useState('')
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+
+  const [idFocus, setIdFocus] = useState(false)
+
+  const loginProcess = async () => {
+    setIsLoading(true)
+    await promisePost({ url: '/api/login/v1.0/user', data: { loginId: userId } }).then((response) => {
+      setIsLoading(false)
+      if (response.data) {
+        const res = response.data
+        const result = { ...res, storeLvl: res.groupId === '60000' ? '1' : '2', pwdInitYn: 'Y' }
+        setSession(result)
+        setSessionState(result)
+        login()
+      } else {
+        alert(getMessage('login.fail'))
+        router.push('/login?autoLoginParam1=Y')
+      }
+    })
+  }
+
   return (
     <>
       {isLoading && <GlobalSpinner />}
+      {autoLoginParam !== 'Y' ? (
+        <>
           <div className="login-input-frame">
             <div className="login-frame-tit ">
               <span>{getMessage('site.name')}</span>
@@ -23,5 +59,54 @@ export default function AutoLoginPage() {
             </div>
           </div>
         </>
+      ) : (
+        <>
+          <div className="login-input-frame">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                loginProcess()
+              }}
+              className="space-y-6"
+            >
+              <div className="login-frame-tit">
+                <span>{getMessage('site.name')}</span>
+                {getMessage('site.sub_name')}
+              </div>
+              <div className="login-input-wrap">
+                <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
+                  <input
+                    type="text"
+                    className="login-input"
+                    id="userId"
+                    name="id"
+                    required
+                    value={userId}
+                    placeholder={getMessage('login.id.placeholder')}
+                    onChange={(e) => {
+                      setUserId(e.target.value)
+                    }}
+                    onFocus={() => setIdFocus(true)}
+                    onBlur={() => setIdFocus(false)}
+                  />
+                  <button
+                    type="button"
+                    className="id-delete"
+                    onClick={(e) => {
+                      setUserId('')
+                    }}
+                  ></button>
+                </div>
+                <div className="login-btn-box">
+                  <button type="submit" className="login-btn">
+                    {getMessage('login')}
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </>
+      )}
+    </>
   )
 }

src/components/auth/Login.jsx

@@ -25,8 +25,10 @@ export default function Login() {
 
   useEffect(() => {
     if (autoLoginParam) {
+      if (autoLoginParam !== 'Y') {
         autoLoginProcess(autoLoginParam)
       }
+    }
 
     // console.log('🚀 ~ checkSession ~ checkSession():', checkSession())
     // checkSession().then((res) => {
@@ -334,7 +336,7 @@ export default function Login() {
               </div>
             </>
           )}
-          {autoLoginParam && <AutoLogin />}
+          {autoLoginParam && <AutoLogin autoLoginParam={autoLoginParam} />}
         </div>
         <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
       </div>

src/components/common/context-menu/QContextMenu.jsx

@@ -6,29 +6,19 @@ import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useEvent } from '@/hooks/useEvent'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
 
 export default function QContextMenu(props) {
   const canvas = useRecoilValue(canvasState)
   const { contextRef, canvasProps } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
   const contextMenuList = useRecoilValue(contextMenuListState)
-  const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
+  const currentObject = useRecoilValue(currentObjectState)
   const { tempGridMode, setTempGridMode } = useTempGrid()
   const { handleKeyup } = useContextMenu()
   const { addDocumentEventListener, removeDocumentEvent } = useEvent()
   // const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)
 
-  let contextType = ''
-
-  if (activeObject) {
-    if (activeObject.initOptions && activeObject.initOptions.name) {
-      //이건 바뀔 가능성이 있음
-      if (activeObject.initOptions?.name?.indexOf('guide') > -1) {
-        contextType = 'surface' //면형상
-      }
-    }
-  }
   const getYPosition = (e) => {
     const contextLength = contextMenuList.reduce((acc, cur, index) => {
       return acc + cur.length
@@ -36,11 +26,13 @@ export default function QContextMenu(props) {
     return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
   }
 
-  useEffect(() => {
-    if (!contextRef.current) return
-
   const handleContextMenu = (e) => {
-      e.preventDefault() //기존 contextmenu 막고
+    // e.preventDefault() //기존 contextmenu 막고
+
+    if (currentObject) {
+      const isArray = currentObject.hasOwnProperty('arrayData')
+      if (isArray && currentObject.arrayData.length === 0) return
+
       if (tempGridMode) return
       const position = {
         x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
@@ -48,7 +40,7 @@ export default function QContextMenu(props) {
       }
       setContextMenu({ visible: true, ...position, currentMousePos: canvasProps.getPointer(e) })
       addDocumentEventListener('keyup', document, handleKeyup)
-      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+    }
   }
 
   const handleClick = (e) => {
@@ -64,6 +56,9 @@ export default function QContextMenu(props) {
     }
   }
 
+  useEffect(() => {
+    if (!contextRef.current) return
+
     canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
     document.addEventListener('click', handleClick)
     document.addEventListener('click', handleOutsideClick)
@@ -72,43 +67,9 @@ export default function QContextMenu(props) {
       removeDocumentEvent('keyup')
       document.removeEventListener('click', handleClick)
       document.removeEventListener('click', handleOutsideClick)
+      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
-  }, [contextRef, contextMenuList])
-
-  const handleObjectMove = () => {
-    activeObject.set({
-      lockMovementX: false, // X 축 이동 잠금
-      lockMovementY: false, // Y 축 이동 잠금
-    })
-
-    canvasProps?.on('object:modified', function (e) {
-      activeObject.set({
-        lockMovementX: true, // X 축 이동 잠금
-        lockMovementY: true, // Y 축 이동 잠금
-      })
-    })
-  }
-
-  const handleObjectDelete = () => {
-    if (confirm('삭제하실거?')) {
-      canvasProps.remove(activeObject)
-    }
-  }
-
-  const handleObjectCopy = () => {
-    activeObject.clone((cloned) => {
-      cloned.set({
-        left: activeObject.left + activeObject.width + 20,
-        initOptions: { ...activeObject.initOptions },
-        lockMovementX: true, // X 축 이동 잠금
-        lockMovementY: true, // Y 축 이동 잠금
-        lockRotation: true, // 회전 잠금
-        lockScalingX: true, // X 축 크기 조정 잠금
-        lockScalingY: true, // Y 축 크기 조정 잠금
-      })
-      canvasProps?.add(cloned)
-    })
-  }
+  }, [contextRef, contextMenuList, currentObject])
 
   return (
     <>

src/components/common/draggable/WithDraggable.jsx

@@ -24,7 +24,8 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
         <Draggable
           position={{ x: position.x, y: position.y }}
           onDrag={(e, data) => handleOnDrag(e, data)}
-          handle={handle === '' ? '.modal-handle' : handle}
+          handle="" //{handle === '' ? '.modal-handle' : handle} //전체 handle
+          cancel="input, button, select, textarea, [contenteditable], .sort-select"
         >
           <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
             {children}
@@ -37,16 +38,19 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
   )
 }
 
-function WithDraggableHeader({ title, onClose, children }) {
+function WithDraggableHeader({ title, onClose, children, isFold, onFold = null }) {
   return (
     <div className="modal-head modal-handle">
       <h1 className="title">{title}</h1>
+      <div className="modal-btn-wrap">
+        {onFold && <button className={`modal-fold ${isFold ? '' : 'act'}`} onClick={onFold}></button>}
         {onClose && (
           <button className="modal-close" onClick={() => onClose()}>
             닫기
           </button>
         )}
       </div>
+    </div>
   )
 }
 

src/components/common/input/CalcInput.jsx

@@ -0,0 +1,526 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'
+import { createCalculator } from '@/util/calc-utils'
+import '@/styles/calc.scss'
+
+export const CalculatorInput = forwardRef(
+  ({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder, name='', disabled = false, maxLength = 12 }, ref) => {
+    const [showKeypad, setShowKeypad] = useState(false)
+    const [displayValue, setDisplayValue] = useState(value || '0')
+    const [hasOperation, setHasOperation] = useState(false)
+    const calculatorRef = useRef(createCalculator(options))
+    const containerRef = useRef(null)
+    const inputRef = useRef(null)
+
+    // 외부 ref와 내부 ref를 동기화
+    useEffect(() => {
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(inputRef.current)
+        } else {
+          ref.current = inputRef.current
+        }
+      }
+    }, [ref])
+
+    // Sync displayValue with value prop
+    // useEffect(() => {
+    //   setDisplayValue(value || '0')
+    // }, [value])
+
+    useEffect(() => {
+      const newValue = value || '0'
+      setDisplayValue(newValue)
+
+      // 외부에서 value가 변경될 때 계산기 내부 상태도 동기화
+      const calculator = calculatorRef.current
+      if (calculator) {
+        // 연산 중이 아닐 때 외부에서 값이 들어오면 현재 피연산자로 설정
+        calculator.currentOperand = newValue.toString()
+        calculator.previousOperand = ''
+        calculator.operation = undefined
+        setHasOperation(false)
+      }
+    }, [value])
+
+    // 클릭 외부 감지
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setShowKeypad(false)
+          if (hasOperation) {
+            // If there's an operation in progress, compute the result when losing focus
+            handleCompute()
+          }
+        }
+      }
+
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
+    }, [value, onChange, hasOperation])
+
+    // 숫자 입력 처리 함수 수정
+    const handleNumber = (num) => {
+      const calculator = calculatorRef.current
+      let newDisplayValue = ''
+
+      // maxLength 체크
+      if (maxLength > 0) {
+        const currentLength = (calculator.currentOperand || '').length + (calculator.previousOperand || '').length + (calculator.operation || '').length
+        if (currentLength >= maxLength) {
+          return
+        }
+      }
+
+      // 소수점 이하 2자리 제한 로직 추가
+      const shouldPreventInput = (value) => {
+        if (!value) return false
+        const decimalParts = value.toString().split('.')
+        return decimalParts.length > 1 && decimalParts[1].length >= 2
+      }
+
+      // 숫자 추가 함수
+      const appendNumber = (current, num) => {
+        // maxLength 체크
+        if (maxLength > 0 && (current + num).length > maxLength) {
+          return current
+        }
+        // 현재 값이 0이고 소수점이 없을 때 0이 아닌 숫자를 입력하면 대체
+        if (current === '0' && num !== '.' && !current.includes('.')) {
+          return num.toString()
+        }
+        // 0. 다음에 0을 입력하는 경우 허용
+        if (current === '0' && num === '0') {
+          return '0.'
+        }
+        return current + num
+      }
+
+      if (hasOperation) {
+        // 연산자 이후 숫자 입력 시
+        if (calculator.shouldResetDisplay) {
+          calculator.currentOperand = num.toString()
+          calculator.shouldResetDisplay = false
+        } else if (num === '.') {
+          if (!calculator.currentOperand.includes('.')) {
+            calculator.currentOperand = calculator.currentOperand || '0' + '.'
+          }
+        } else if (!shouldPreventInput(calculator.currentOperand)) {
+          calculator.currentOperand = appendNumber(calculator.currentOperand || '0', num)
+        }
+        
+        newDisplayValue = calculator.previousOperand + calculator.operation + calculator.currentOperand
+        setDisplayValue(newDisplayValue)
+      } else {
+        // 첫 번째 숫자 입력 시
+        if (calculator.shouldResetDisplay) {
+          calculator.currentOperand = num.toString()
+          calculator.shouldResetDisplay = false
+          newDisplayValue = calculator.currentOperand
+          setDisplayValue(newDisplayValue)
+          if (!hasOperation) {
+            onChange(calculator.currentOperand)
+          }
+        } else if (num === '.') {
+          if (!calculator.currentOperand.includes('.')) {
+            calculator.currentOperand = (calculator.currentOperand || '0') + '.'
+            newDisplayValue = calculator.currentOperand
+            setDisplayValue(newDisplayValue)
+            if (!hasOperation) {
+              onChange(newDisplayValue)
+            }
+          }
+        } else if (!shouldPreventInput(calculator.currentOperand)) {
+          calculator.currentOperand = appendNumber(calculator.currentOperand || '0', num)
+          newDisplayValue = calculator.currentOperand
+          setDisplayValue(newDisplayValue)
+          if (!hasOperation) {
+            onChange(newDisplayValue)
+          }
+        }
+        // else {
+        //   calculator.currentOperand = (calculator.currentOperand || '') + num
+        //   newDisplayValue = calculator.currentOperand
+        //   setDisplayValue(newDisplayValue)
+        //   if (!hasOperation) {
+        //     onChange(newDisplayValue)
+        //   }
+        // }
+      }
+
+      // 커서를 텍스트 끝으로 이동하고 스크롤 처리
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          const len = newDisplayValue.length
+          inputRef.current.setSelectionRange(len, len)
+          // 텍스트 끝으로 스크롤
+          inputRef.current.scrollLeft = inputRef.current.scrollWidth
+        }
+      })
+    }
+
+    // 연산자 처리 함수 수정
+    const handleOperation = (operation) => {
+      const calculator = calculatorRef.current
+      let newDisplayValue = ''
+
+      // 현재 입력된 값이 없으면 이전 값 사용 (연속 연산 시)
+      if (!calculator.currentOperand && calculator.previousOperand) {
+        calculator.operation = operation
+        newDisplayValue = calculator.previousOperand + operation
+        setDisplayValue(newDisplayValue)
+        setHasOperation(true)
+      } else if (hasOperation) {
+        // 이미 연산자가 있는 경우, 계산 실행
+        const result = calculator.compute()
+        if (result !== undefined) {
+          calculator.previousOperand = result.toString()
+          calculator.operation = operation
+          calculator.currentOperand = ''
+          newDisplayValue = calculator.previousOperand + operation
+          setDisplayValue(newDisplayValue)
+        }
+      } else {
+        // 첫 번째 연산자 입력 시
+        calculator.previousOperand = calculator.currentOperand || '0'
+        calculator.operation = operation
+        calculator.currentOperand = ''
+        setHasOperation(true)
+        newDisplayValue = calculator.previousOperand + operation
+        setDisplayValue(newDisplayValue)
+      }
+
+      // 커서를 텍스트 끝으로 이동하고 스크롤 처리
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          const len = newDisplayValue.length
+          inputRef.current.setSelectionRange(len, len)
+          // 텍스트 끝으로 스크롤
+          inputRef.current.scrollLeft = inputRef.current.scrollWidth
+        }
+      })
+    }
+
+    // AC 버튼 클릭 핸들러
+    const handleClear = () => {
+      const calculator = calculatorRef.current
+      const newValue = calculator.clear()
+      const displayValue = newValue || '0'
+      setDisplayValue(displayValue)
+      setHasOperation(false)
+      onChange(displayValue)
+      // 커서를 텍스트 끝으로 이동하고 스크롤 처리
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          const len = displayValue.length
+          inputRef.current.setSelectionRange(len, len)
+          // 텍스트 끝으로 스크롤
+          inputRef.current.scrollLeft = inputRef.current.scrollWidth
+        }
+      })
+    }
+
+    // 계산 실행 함수 수정
+    const handleCompute = (fromEnterKey = false) => {
+      const calculator = calculatorRef.current
+      if (!hasOperation || !calculator.currentOperand) return
+
+      const result = calculator.compute()
+      if (result !== undefined) {
+        const resultStr = result.toString()
+        setDisplayValue(resultStr)
+        setHasOperation(false)
+        // Only call onChange with the final result
+        onChange(resultStr)
+
+        // 엔터키로 호출된 경우 포커스 설정하지 않음
+        if (!fromEnterKey) {
+          requestAnimationFrame(() => {
+            if (inputRef.current) {
+              inputRef.current.focus()
+              const len = resultStr.length
+              inputRef.current.setSelectionRange(len, len)
+            }
+          })
+        }
+      }
+    }
+
+    // DEL 버튼 클릭 핸들러
+    const handleDelete = () => {
+      const calculator = calculatorRef.current
+      const newValue = calculator.deleteNumber()
+      const displayValue = newValue || '0'
+      setDisplayValue(displayValue)
+      setHasOperation(!!calculator.operation)
+      onChange(displayValue)
+      // 커서를 텍스트 끝으로 이동하고 스크롤 처리
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          const len = displayValue.length
+          inputRef.current.setSelectionRange(len, len)
+          // 텍스트 끝으로 스크롤
+          inputRef.current.scrollLeft = inputRef.current.scrollWidth
+        }
+      })
+    }
+
+    // input의 onChange 이벤트 처리 - 허용된 계산기 입력만 처리
+    const handleInputChange = (e) => {
+      if (readOnly) return
+
+      const inputValue = e.target.value
+
+      // 허용된 문자만 필터링 (숫자, 연산자, 소수점)
+      const filteredValue = inputValue.replace(/[^0-9+\-×÷.]/g, '')
+
+      // 연산자 연속 입력 방지
+      const lastChar = filteredValue[filteredValue.length - 1]
+      const prevChar = filteredValue[filteredValue.length - 2]
+
+      if (['+', '×', '÷'].includes(lastChar) && ['+', '-', '×', '÷', '.'].includes(prevChar)) {
+        // 연산자나 소수점이 연속으로 입력된 경우 이전 문자 유지
+        return
+      }
+
+      // 소수점 중복 입력 방지
+      const parts = filteredValue.split(/[+\-×÷]/)
+      if (parts[parts.length - 1].split('.').length > 2) {
+        // 한 숫자에 소수점이 2개 이상인 경우
+        return
+      }
+
+      setDisplayValue(filteredValue)
+
+      // 계산기 상태 업데이트
+      if (filteredValue !== displayValue) {
+        const calculator = calculatorRef.current
+        const hasOperation = /[+\-×÷]/.test(filteredValue)
+
+        if (hasOperation) {
+          const [operand1, operator, operand2] = filteredValue.split(/([+\-×÷])/)
+          calculator.previousOperand = operand1 || ''
+          calculator.operation = operator || ''
+          calculator.currentOperand = operand2 || ''
+          setHasOperation(true)
+        } else {
+          calculator.currentOperand = filteredValue
+          setHasOperation(false)
+          // 연산자가 없는 순수 숫자일 때만 부모 컴포넌트의 onChange 호출
+          onChange(filteredValue)
+        }
+
+        //onChange(filteredValue)
+      }
+    }
+
+    // 키패드 토글 함수
+    const toggleKeypad = (e) => {
+      if (e) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+      const newShowKeypad = !showKeypad
+      setShowKeypad(newShowKeypad)
+
+      // Show keypad 시에만 포커스 유지
+      if (newShowKeypad) {
+        setTimeout(() => {
+          inputRef.current?.focus()
+        }, 0)
+      }
+    }
+
+    // 키보드 이벤트 처리 수정
+    const handleKeyDown = (e) => {
+      if (readOnly) return
+
+      // Tab 키는 계산기 숨기고 기본 동작 허용
+      if (e.key === 'Tab') {
+        if (hasOperation) {
+          handleCompute(true) // 계산 수행
+        }
+        setShowKeypad(false)
+        return
+      }
+
+      // 모든 방향키는 기본 동작 허용
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        if (hasOperation) {
+          handleCompute(true) // 계산 수행
+        }
+        setShowKeypad(false)
+        return
+      }
+
+      // 계산기 허용 키들이 입력되면 키패드 표시 (엔터키 제외)
+      if (/^[0-9+\-×÷.=]$/.test(e.key) || e.key === 'Backspace' || e.key === 'Delete' || e.key === '*' || e.key === '/') {
+        setShowKeypad(true)
+      }
+
+      // 키패드가 숨겨진 상태에서 엔터키는 페이지로 전달
+      if (!showKeypad && e.key === 'Enter') {
+        return
+      }
+
+      // --- 여기서부터는 브라우저의 기본 입력을 막고 계산기 로직만 적용함 ---
+      if (e.key !== 'Process') { // 한글 입력 등 특수 상황 방지 (필요시)
+        // e.preventDefault() 호출 위치를 확인하세요.
+      }
+
+
+      e.preventDefault()
+      const calculator = calculatorRef.current
+      const { allowDecimal } = options
+
+      if (e.key === '.') {
+        // allowDecimal이 false이면 소수점 입력 무시
+        if (!allowDecimal) return
+
+        // 소수점 입력 처리
+        const currentValue = displayValue.toString()
+        const parts = currentValue.split(/[+\-×÷]/)
+        const lastPart = parts[parts.length - 1]
+
+        // 이미 소수점이 있으면 무시
+        if (!lastPart.includes('.')) {
+          handleNumber(e.key)
+        }
+      } else if (/^[0-9]$/.test(e.key)) {
+        handleNumber(e.key)
+      } else {
+        switch (e.key) {
+          case '+':
+          case '-':
+          case '*':
+          case '/':
+            const opMap = { '*': '×', '/': '÷' }
+            handleOperation(opMap[e.key] || e.key)
+            break
+          case 'Enter':
+          case '=':
+            if (showKeypad) {
+              // 키패드가 보이는 상태에서 엔터키: 계산 후 키패드만 숨김
+              handleCompute(true) // 엔터키로 호출됨을 표시
+              setShowKeypad(false)
+            }
+            // 키패드가 숨겨진 상태에서 엔터키: 페이지로 전달 (preventDefault 하지 않음)
+            break
+          case 'Backspace':
+          case 'Delete':
+            handleDelete()
+            break
+
+          case 'Escape':
+            handleClear()
+            setShowKeypad(false)
+            break
+
+          default:
+            break
+        }
+      }
+    }
+
+    return (
+      <div ref={containerRef} className="calculator-input-wrapper">
+        {label && (
+          <label htmlFor={id} className="calculator-label">
+            {label}
+          </label>
+        )}
+        <input
+          ref={inputRef}
+          type="text"
+          id={id}
+          name={name}
+          value={displayValue}
+          readOnly={readOnly}
+          className={className}
+          onClick={() => !readOnly && setShowKeypad(true)}
+          onFocus={() => !readOnly && setShowKeypad(true)}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          tabIndex={readOnly ? -1 : 0}
+          placeholder={placeholder}
+          autoComplete={'off'}
+          disabled={disabled}
+          maxLength={maxLength}
+        />
+
+        {showKeypad && !readOnly && (
+          <div className="keypad-container">
+            <div className="keypad-grid">
+              <button
+                onClick={() => {
+                  // const newValue = calculatorRef.current.clear()
+                  // setDisplayValue(newValue || '0')
+                  // onChange(newValue || '0')
+                  handleClear()
+                  setHasOperation(false)
+                }}
+                className="btn-clear"
+              >
+                AC
+              </button>
+              <button
+                onClick={() => {
+                  // const newValue = calculatorRef.current.deleteNumber()
+                  // setDisplayValue(newValue || '0')
+                  // onChange(newValue || '0')
+                  //setHasOperation(!!calculatorRef.current.operation)
+                  handleDelete()
+                }}
+                className="btn-delete"
+              >
+                DEL
+              </button>
+              <button onClick={() => handleOperation('÷')} className="btn-operator">
+                ÷
+              </button>
+
+              <button onClick={() => handleOperation('×')} className="btn-operator">
+                ×
+              </button>
+              <button onClick={() => handleOperation('-')} className="btn-operator">
+                -
+              </button>
+              <button onClick={() => handleOperation('+')} className="btn-operator">
+                +
+              </button>
+
+              {/* 숫자 버튼 */}
+              {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+                <button key={num} onClick={() => handleNumber(num)} className="btn-number">
+                  {num}
+                </button>
+              ))}
+              {/* 0 버튼 */}
+              <button onClick={() => handleNumber('0')} className="btn-number btn-zero">
+                0
+              </button>
+              <button
+                onClick={() => {
+                  const newValue = calculatorRef.current.appendNumber('.')
+                  onChange(newValue)
+                }}
+                className="btn-number"
+              >
+                .
+              </button>
+              {/* = 버튼 */}
+              <button onClick={() => handleCompute(false)} className="btn-equals">
+                =
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+CalculatorInput.displayName = 'CalculatorInput'

src/components/common/select/QSelectBox.jsx

@@ -14,6 +14,7 @@ import { useMessage } from '@/hooks/useMessage'
  * @param {string} targetKey - value에 있는 키
  * @param {string} showKey - options 있는 키중 보여줄 키
  * @param {object} params - 추가 파라미터
+ * @param {boolean} showFirstOptionWhenEmpty - value가 빈값일 때 첫 번째 옵션을 보여줄지 여부
  * @returns
  */
 export default function QSelectBox({
@@ -26,6 +27,8 @@ export default function QSelectBox({
   targetKey = '',
   showKey = '',
   params = {},
+  tagTitle = '',
+  showFirstOptionWhenEmpty = false,
 }) {
   const { getMessage } = useMessage()
 
@@ -38,8 +41,10 @@ export default function QSelectBox({
     if (options.length === 0) return title !== '' ? title : getMessage('selectbox.title')
     if (showKey !== '' && !value) {
       //value가 없으면 showKey가 있으면 우선 보여준다
-      // return options[0][showKey]
-      return title
+      if (showFirstOptionWhenEmpty && options.length > 0) {
+        return options[0][showKey]
+      }
+      return title !== '' ? title : getMessage('selectbox.title')
     } else if (showKey !== '' && value) {
       //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
 
@@ -47,12 +52,18 @@ export default function QSelectBox({
         return option[sourceKey] === value[targetKey]
       })
       if (!option) {
+        if (showFirstOptionWhenEmpty && options.length > 0) {
+          return options[0][showKey]
+        }
         return title !== '' ? title : getMessage('selectbox.title')
       } else {
         return option[showKey]
       }
     } else {
       //일치하는 조건이 없으면 기본값을 보여준다.
+      if (showFirstOptionWhenEmpty && options.length > 0) {
+        return showKey !== '' ? options[0][showKey] : options[0].name
+      }
       return title !== '' ? title : getMessage('selectbox.title')
     }
   }
@@ -73,7 +84,7 @@ export default function QSelectBox({
   useEffect(() => {
     // value && handleClickSelectOption(value)
     setSelected(handleInitState())
-  }, [options, value, sourceKey, targetKey, showKey])
+  }, [options, value, sourceKey, targetKey, showKey, showFirstOptionWhenEmpty])
 
   useOnClickOutside(ref, handleClose)
 
@@ -82,12 +93,13 @@ export default function QSelectBox({
       className={`sort-select ${openSelect ? 'active' : ''} ${disabled ? 'disabled' : ''}`}
       ref={ref}
       onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}
+      title={tagTitle}
     >
       <p>{selected}</p>
-      <ul className="select-item-wrap">
+      <ul className="select-item-wrap" style={{ maxHeight: '200px' }}>
         {options?.length > 0 &&
           options?.map((option, index) => (
-            <li key={option.id || index} className="select-item" onClick={() => handleClickSelectOption(option)}>
+            <li key={option.id + '_' + index} className="select-item" onClick={() => handleClickSelectOption(option)}>
               <button key={option.id + 'btn'}>{showKey !== '' ? option[showKey] : option.name}</button>
             </li>
           ))}

src/components/community/Qna.jsx

@@ -0,0 +1,213 @@
+'use client'
+
+import Link from 'next/link'
+import Image from 'next/image'
+
+import Search from '@/components/community/Search'
+import Pagination from '@/components/community/Pagination'
+
+import { useContext } from 'react'
+
+import { useEffect, useState } from 'react'
+import { useResetRecoilState, useRecoilValue, useRecoilState } from 'recoil'
+import { useMessage } from '@/hooks/useMessage'
+
+import { searchState } from '@/store/boardAtom'
+
+import { QcastContext } from '@/app/QcastProvider'
+import QnaBoardDetailModal from '@/components/community/modal/QnaDetailModal'
+import { sessionStore } from '@/store/commonAtom'
+import { useAxios } from '@/hooks/useAxios'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+
+export default function Qna() {
+  const { getMessage } = useMessage()
+  const resetSearch = useResetRecoilState(searchState)
+  const [isInitialized, setIsInitialized] = useState(false)
+
+  //const search = useRecoilValue(searchState)
+  const [searchForm, setSearchForm] = useRecoilState(searchState)
+  const { findCommonCode } = useCommonCode()
+  const { setIsGlobalLoading } = useContext(QcastContext)
+  const { get } = useAxios()
+  const [boardList, setBoardList] = useState([])
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+  const [search, setSearch] = useRecoilState(searchState)
+  // 팝업 관련
+  const [open, setOpen] = useState(false)
+  const [modalQnaNo, setModalQnaNo] = useState('')
+  const [modalQnaType, setModalQnaType] = useState('')
+
+  // 목록 조회
+  useEffect(() => {
+    async function fetchData() {
+      setIsGlobalLoading(true)
+      const startRow = (search.currentPage - 1) * search.pageBlock > 0 ? (search.currentPage - 1) * search.pageBlock + 1 : 1
+      const endRow = search.currentPage * search.pageBlock
+
+      const url = `/api/board/list`
+      const params = new URLSearchParams({
+        schNoticeTpCd : 'QC',
+        schNoticeClsCd: 'QNA',
+        compCd        : 5200,
+        storeId       : sessionState.storeId,
+        loginId       : sessionState.userId,
+        schTitle      : search.searchValue ? search.searchValue : '',
+        startRow      : startRow,
+        endRow        : endRow,
+        schMainYn     : 'N',
+        siteTpCd      : 'QC',
+        langCd        : 'JA',
+      })
+      const apiUrl = `${url}?${params.toString()}`
+
+      const resultData = await get({ url: apiUrl })
+
+      if (resultData) {
+        if (resultData.result.code === 200) {
+          if (resultData.data.length > 0) {
+            setBoardList(resultData.data)
+            setSearch({ ...search, totalCount: resultData.data[0].totCnt })
+          } else {
+            setBoardList([])
+            setSearch({ ...search, totalCount: 0 })
+          }
+        } else {
+          alert(resultData.result.message)
+        }
+      }
+      setIsGlobalLoading(false)
+    }
+
+    fetchData()
+  }, [search.currentPage, search.searchValue, search.pageBlock, search.searchFlag])
+
+
+  useEffect(() => {
+    if (search.mainFlag === 'N') {
+      resetSearch()
+    } else {
+      //메인에서 FAQ 조회 왔을때 로딩바 해제
+      setIsGlobalLoading(false)
+      setSearchForm({ ...searchForm, mainFlag: 'N' })
+    }
+    setIsInitialized(true)
+
+    //문의구분코드
+    // const codeL = findCommonCode(204200)
+    // const codeM = findCommonCode(204300)
+    // const codeS = findCommonCode(204400)
+
+
+
+  }, [])
+
+  if (!isInitialized) {
+    return null
+  }
+
+  const boardType = {
+    boardTitle: getMessage('qna.title'),
+    subTitle: getMessage('qna.sub.title'),
+    clsCode: 'QNA',
+  }
+
+
+  return (
+    <>
+      <div className="sub-header">
+        <div className="sub-header-inner">
+          <ul className="sub-header-title-wrap">
+            <li className="title-item">
+              <Link className="sub-header-title" href={'#'}>
+                {getMessage('qna.title')}
+              </Link>
+            </li>
+          </ul>
+          <ul className="sub-header-location">
+            <li className="location-item">
+              <span className="home">
+                <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+              </span>
+            </li>
+            <li className="location-item">
+              <span>{getMessage('header.menus.community')}</span>
+            </li>
+            <li className="location-item">
+              <span>{getMessage('qna.title')}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="sub-content">
+        <div className="sub-content-inner">
+          <div className="sub-table-box">
+            <Search title={boardType.boardTitle} subTitle={boardType.subTitle} isSelectUse={true} clsCode={boardType.clsCode} />
+            {/*<QnaTable clsCode={boardType.clsCode} />*/}
+            <div className="community-table">
+              <table>
+                <colgroup>
+                  <col width={100}/>
+                  <col width={150}/>
+                  <col />
+                  <col width={150}/>
+                  <col width={150}/>
+                </colgroup>
+                <tbody>
+                {boardList.length > 0 ? (
+                  boardList?.map((board) => (
+                    <tr
+                      key={board.qnaNo}
+                      onClick={() => {
+                        setOpen(true)
+                        setModalQnaNo(board.qnaNo)
+                        setModalQnaType("["+board?.qnaClsLrgCd+"/"+board?.qnaClsMidCd+"/"+board?.qnaClsSmlCd+"]")
+                      }}
+                    >
+                      <td className="al-c">
+                        {/* 번호 */}
+                        {board.totCnt - board.rowNumber + 1}
+                      </td>
+                      {/* 답변 */}
+                      {board?.answerYn === 'Y'? (<td className="al-c "> {getMessage('qna.list.header.answer.yes')}</td>) : (<td className="al-c org"> {getMessage('qna.list.header.answer.no')}</td>)}
+                      <td>
+                        <div className="mb5">[{board?.qnaClsLrgCd} / {board?.qnaClsMidCd} / {board?.qnaClsSmlCd}]</div>
+                        {/* 제목 */}
+                        <div className="text-frame">
+                          <div className="text-overflow">{board.title}{board.qstTitle}</div>
+                          {board.attachYn === 'Y' && <span className="clip"></span>}
+                        </div>
+                      </td>
+                      <td>
+                        <div className="renewal">
+                          {/*{board.uptDt && (*/}
+                          {/*  <>*/}
+                          {/*    (<span>{getMessage('board.uptDt')}</span> : {board.uptDt})*/}
+                          {/*  </>*/}
+                          {/*)}*/}
+                          {board.regUserNm}
+                        </div>
+                      </td>
+                      <td className="al-c">
+                        {/* 등록일 */}
+                        {board.regDt.split(' ')[0]}
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td className="al-c no-data" colSpan={5}>{getMessage('common.message.no.data')}</td>
+                  </tr>
+                )}
+                </tbody>
+              </table>
+            </div>
+
+            <Pagination />
+          </div>
+        </div>
+      </div>
+      {open && <QnaBoardDetailModal qnaNo={modalQnaNo} setOpen={setOpen} qnaType = {modalQnaType} />}
+    </>
+  )
+}

src/components/community/Search.jsx

@@ -4,10 +4,11 @@ import { searchState } from '@/store/boardAtom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
+import QnaRegModal from '@/components/community/modal/QnaRegModal'
 
-export default function Search({ title = '', subTitle = '', isSelectUse = false }) {
+export default function Search({ title = '', subTitle = '', isSelectUse = false, clsCode = '' }) {
   const { getMessage } = useMessage()
-
+  const [open, setOpen] = useState(false)
   const search = useRecoilValue(searchState)
   const [searchForm, setSearchForm] = useRecoilState(searchState)
 
@@ -32,7 +33,13 @@ export default function Search({ title = '', subTitle = '', isSelectUse = false
     } else {
       setSearchView(false)
       setSearchViewText('')
-      setSearchForm({ ...searchForm, currentPage: 1, searchValue: '', pageBlock: block, searchFlag: !searchForm.searchFlag })
+      setSearchForm({
+        ...searchForm,
+        currentPage: 1,
+        searchValue: '',
+        pageBlock  : block,
+        searchFlag : !searchForm.searchFlag,
+      })
     }
     // 조회 후 값 비워주기
     setSearchValue('')
@@ -57,7 +64,10 @@ export default function Search({ title = '', subTitle = '', isSelectUse = false
             onKeyDown={handleKeyDown}
             value={searchValue}
           />
-          <button type="button" className="community-search-ico" onClick={() => handleSearch(searchValue, selectPageBlock)}></button>
+
+          <button type="button" className="community-search-ico"
+                  onClick={() => handleSearch(searchValue, selectPageBlock)}></button>
+
         </div>
         {searchView && (
           <div className="community-search-keyword">
@@ -92,6 +102,14 @@ export default function Search({ title = '', subTitle = '', isSelectUse = false
         </div>
         {isSelectUse && (
           <div className="left-unit-box">
+            {clsCode === 'QNA' &&
+              <div>
+                <button className="btn-origin navy mr10"
+                        onClick={() => {
+                          setOpen(true)
+                        }}> {getMessage('qna.sub.btn.inquiry')}</button>
+              </div>
+            }
             <div className="select-box" style={{ width: '80px' }}>
               <select
                 className="select-light black"
@@ -112,6 +130,7 @@ export default function Search({ title = '', subTitle = '', isSelectUse = false
           </div>
         )}
       </div>
+      {open && <QnaRegModal setOpen={setOpen} setReload={handleSearch} searchValue={searchValue ? searchValue : searchViewText} selectPageBlock = {selectPageBlock}/>}
     </>
   )
 }

src/components/community/modal/QnaDetailModal.jsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
+import { handleFileDown } from '@/util/board-utils'
+import { useMessage } from '@/hooks/useMessage'
+import { sessionStore } from '@/store/commonAtom'
+import { useRecoilState } from 'recoil'
+
+export default function QnaDetailModal({ qnaNo, setOpen, qnaType }) {
+  const { getMessage } = useMessage()
+  // api 조회 관련
+  const { get } = useAxios()
+  const [boardDetail, setBoardDetail] = useState({})
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+
+  useEffect(() => {
+    // 상세 조회
+    const fetchDetail = async (qnaNo) => {
+      const url = `/api/board/detail`
+      const params = new URLSearchParams({
+        noticeNo      : qnaNo,
+        qnaNo         : qnaNo,
+        schNoticeClsCd: 'QNA',
+        compCd        : 5200,
+        loginId       : sessionState.userId,
+        langCd        : 'JA',
+        siteTpCd      : 'QC',
+      })
+      const apiUrl = `${url}?${params.toString()}`
+
+      const resultData = await get({ url: apiUrl })
+
+      if (resultData) {
+        if (resultData.result.code === 200) {
+          const boardDetail = resultData.data
+          setBoardDetail(boardDetail)
+        } else {
+          alert(resultData.result.message)
+        }
+      }
+    }
+
+    fetchDetail(qnaNo)
+  }, [])
+
+  return (
+    <>
+      <div key={qnaNo} className="modal-popup community">
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <button
+                type="button"
+                className="modal-close"
+                onClick={() => {
+                  setOpen(false)
+                }}
+              >
+                {getMessage('board.sub.btn.close')}
+              </button>
+            </div>
+            <div className="modal-body">
+              <div className="oneonone-header-wrap">
+                <div className="oneonone-title"> {qnaType} {boardDetail.qstTitle}</div>
+                <div className="oneonone-infor">
+                  <div className="profile">{boardDetail.regUserNm}</div>
+                  <div className="date">{boardDetail.regDt}</div>
+                </div>
+              </div>
+              <div className="oneonone-detail">
+                {boardDetail.listFile && (
+                  <dl className="community_detail-file-wrap">
+                    <dt>{getMessage('qna.detail.sub.fileList')}</dt>
+                    {boardDetail.listFile.map((boardFile) => (
+                      <dd key={boardFile.encodeFileNo}>
+                        <button type="button" className="down" onClick={() => handleFileDown(boardFile.fileNo, 'NO')}>
+                          {boardFile.srcFileNm}
+                        </button>
+                      </dd>
+                    ))}
+                  </dl>
+                )}
+                <div
+                  className="community_detail-inner"
+                  dangerouslySetInnerHTML={{
+                    __html: boardDetail.qstContents ? boardDetail.qstContents.replaceAll('\n', '<br/>') : '',
+                  }}
+                ></div>
+              </div>
+              {boardDetail?.answerYn === 'Y' && (
+              <div className="oneonone-answer">
+                <div className="answer-title-wrap">
+                  <div className="answer-title">Hanwha Japan {getMessage('qna.detail.sub.answer')}</div>
+                  <div className="oneonone-infor">
+                    <div className="profile">{boardDetail.ansRegNm}</div>
+                    <div className="date">{boardDetail.ansRegDt}</div>
+                  </div>
+                </div>
+                <div
+                  className="community_detail-inner"
+                  dangerouslySetInnerHTML={{
+                    __html: boardDetail.ansContents ? boardDetail.ansContents.replaceAll('\n', '<br/>') : '',
+                  }}
+                ></div>
+                {boardDetail.ansListFile && (
+                  <dl className="community_detail-file-wrap">
+                    <dt>{getMessage('qna.detail.sub.fileList')}</dt>
+                    {boardDetail.ansListFile.map((boardFile) => (
+                      <dd key={boardFile.encodeFileNo}>
+                        <button type="button" className="down" onClick={() => handleFileDown(boardFile.fileNo, 'N')}>
+                          {boardFile.srcFileNm}
+                        </button>
+                      </dd>
+                    ))}
+                  </dl>
+                )}
+              </div>
+              )}
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </>
+  )
+}

src/components/community/modal/QnaFileUploader.jsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { useRef } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+import { useMessage } from '@/hooks/useMessage'
+import { useSwal } from '@/hooks/useSwal'
+
+export default function QnaFileUploader({ uploadFiles, setUploadFiles, qnaData, setQnaData }) {
+  const fileInputRef = useRef(null)
+  const { getMessage } = useMessage()
+
+  const { swalFire } = useSwal()
+
+  const handleButtonClick = (e) => {
+    e.preventDefault()
+    fileInputRef.current.click()
+  }
+
+  const onChangeFiles = async (e) => {
+    if (e.target.files.length <= 0) {
+      return
+    }
+
+    const fileList = []
+    let passFlag = true
+    const allowedFileTypes = [
+      'image/',
+      'application/pdf',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation', // PPTX 형식
+      'application/vnd.ms-powerpoint', // PPT 형식
+    ]
+    Array.from(e.target.files).forEach((file) => {
+      //엑셀, pdf, 이미지
+      const fileType = file.type
+      if (!allowedFileTypes.some((type) => fileType.includes(type))) {
+        passFlag = false
+      } else {
+        fileList.push({ data: file, id: uuidv4() })
+      }
+    })
+
+    if (!passFlag) {
+      swalFire({ text: getMessage('estimate.detail.fileList.extCheck'), type: 'alert', icon: 'error' })
+    }
+
+    setUploadFiles([...uploadFiles, ...fileList])
+    setQnaData({...qnaData, files:[...uploadFiles, ...fileList]})
+    e.target.value = ''
+  }
+
+  const deleteFile = (id) => {
+    setUploadFiles(uploadFiles.filter((file) => file.id !== id))
+    setQnaData({...qnaData, files:uploadFiles.filter((file) => file.id !== id)})
+  }
+
+  const handleDrop = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const fileList = []
+    let passFlag = true
+    const allowedFileTypes = [
+      'image/',
+      'application/pdf',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation', // PPTX 형식
+      'application/vnd.ms-powerpoint', // PPT 형식
+    ]
+
+    Array.from(e.dataTransfer.files).forEach((file) => {
+      //엑셀, pdf, 이미지
+      let fileType = file.type
+      if (!allowedFileTypes.some((type) => fileType.includes(type))) {
+        passFlag = false
+      } else {
+        fileList.push({ data: file, id: uuidv4() })
+      }
+    })
+
+    if (!passFlag) {
+      swalFire({ text: getMessage('estimate.detail.fileList.extCheck'), type: 'alert', icon: 'error' })
+    }
+
+    setUploadFiles([...uploadFiles, ...fileList])
+    setQnaData({...qnaData, files:[...uploadFiles, ...fileList]})
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragEnd = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragLeave = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  return (
+
+    <div className="design-request-grid mt15">
+      <div className="design-request-count">
+        <div className="design-request-grid-tit">{getMessage("qna.reg.header.fileList")}</div>
+        <div className="btn-area one-on-one">
+          <label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
+            Attach File
+          </label>
+          <input type="file" multiple name="file" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
+        </div>
+      </div>
+      <div className="drag-file-box one-on-one">
+        <div className="drag-file-area"
+             draggable
+             onDrop={(e) => handleDrop(e)}
+             onDragOver={(e) => handleDragOver(e)}
+             onDragEnd={(e) => handleDragEnd(e)}
+             onDragLeave={(e) => handleDragLeave(e)}>
+          <p>Drag file here</p>
+          <ul className="file-list">
+            {uploadFiles.length > 0 &&
+              uploadFiles.map((file) => (
+                <li className="file-item" key={file.id}>
+                <span>
+                  {file.data.name} <button className="delete" onClick={() => deleteFile(file.id)}></button>
+                </span>
+                </li>
+              ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+
+  )
+}

src/components/community/modal/QnaRegModal.jsx

@@ -0,0 +1,464 @@
+'use client'
+
+import { useMessage } from '@/hooks/useMessage'
+import { sessionStore } from '@/store/commonAtom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import QnaFileUploader from '@/components/community/modal/QnaFileUploader'
+import { useContext, useEffect, useRef, useState } from 'react'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+import Select from 'react-select'
+import dayjs from 'dayjs'
+import { useSwal } from '@/hooks/useSwal'
+import { QcastContext } from '@/app/QcastProvider'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { e } from 'mathjs'
+import { set } from 'react-hook-form'
+
+
+export default function QnaRegModal({ setOpen, setReload, searchValue, selectPageBlock }) {
+  const { getMessage } = useMessage()
+  const [fileList, setFileList] = useState([])
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const [files, setFiles] = useState([])
+  //const [qnaData, setQnaData] = useState([])
+  const [qnaData, setQnaData] = useState({})
+  const [closeMdFlg, setCloseMdFlg] = useState(true)
+  const [closeSmFlg, setCloseSmFlg] = useState(true)
+  const [hideSmFlg, setHideSmFlg] = useState(false)
+  const qnaTypeLgCodeRef = useRef(null)
+  const qnaTypeMdCodeRef = useRef(null)
+  const qnaTypeSmCodeRef = useRef(null)
+  const qstMail = useRef(null);
+  const regUserNmRef = useRef(null)
+  const regUserTelNoRef = useRef(null)
+  const titleRef = useRef(null)
+  const contentsRef = useRef(null)
+  const { findCommonCode } = useCommonCode()
+  const [qnaTypeLgCodeList, setQnaTypeLgCodeList] = useState([])
+  const [qnaTypeMdCodeList, setQnaTypeMdCodeList] = useState([])
+  const [qnaTypeSmCodeList, setQnaTypeSmCodeList] = useState([])
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const { swalFire } = useSwal()
+  const { setIsGlobalLoading } = useContext(QcastContext)
+  const [isBtnDisable, setIsBtnDisable] = useState(false);
+  const { promiseGet, post, promisePost } = useAxios(globalLocaleState)
+
+  useEffect(() => {
+    console.log('qnaData updated:', qnaData);
+  }, [qnaData]);
+
+let fileCheck = false;
+  const regPhoneNumber = (e) => {
+    const result = e.target.value
+      .replace(/[^0-9.]/g, "")
+      //.replace(/^(\d{0,3})(\d{0,4})(\d{0,4})$/g, "$1-$2-$3")
+      //.replace(/(-{1,2})$/g, "");
+    //setPhoneNumber(result);
+
+    setQnaData({...qnaData, regUserTelNo: result })
+  }
+
+  const fileUploadProps = {
+    uploadFiles: files,
+    setUploadFiles: setFiles,
+
+  }
+
+  // const fileSave = (qnaData, fileUploadProps) => {
+  //   return  qnaData.files.push(fileUploadProps.uploadFiles)
+  // }
+
+  const initQnaReg = async () => {
+
+
+    qstMail.current.value = ''
+    regUserNmRef.current.value = ''
+    regUserTelNoRef.current.value = ''
+    qnaTypeLgCodeRef.current.setValue();
+    qnaTypeMdCodeRef.current.setValue();
+    qnaTypeSmCodeRef.current?.setValue();
+    titleRef.current.value = ''
+    contentsRef.current.value = ''
+
+    //setQnaData([])
+
+    setQnaData({
+      compCd: "5200",
+      siteTpCd: "QC",
+      schNoticeClsCd: "QNA",
+      regId: sessionState?.userId || '',
+      storeId: sessionState?.storeId || '',
+      qstMail: sessionState?.email || '',
+      qnaClsLrgCd: '',
+      qnaClsMidCd: '',
+      qnaClsSmlCd: ''
+    });
+
+    const codeL = findCommonCode(204200)
+    if (codeL != null) {
+      setQnaTypeLgCodeList(codeL)
+    }
+    setIsGlobalLoading(false)
+    setIsBtnDisable(false);
+  }
+  const onChangeQnaTypeL = (e) => {
+    if(e === undefined || e === null) return;
+    const codeM = findCommonCode(204300)
+    if (codeM != null) {
+
+      let codeList = []
+
+      codeM.map((item) => {
+
+        if(item.clRefChr1 === e.clCode) {
+          codeList.push(item);
+
+        }
+      })
+      setQnaTypeMdCodeList(codeList)
+      setQnaData({ ...qnaData, qnaClsLrgCd:e.clCode})
+      setCloseMdFlg(false)
+      qnaTypeMdCodeRef.current.setValue();
+      qnaTypeSmCodeRef.current?.setValue();
+    }
+
+  }
+  const onChangeQnaTypeM = (e) => {
+    if (!e?.clCode) return;
+
+    // 중분류 코드 업데이트
+    setQnaData(prevState => ({
+      ...prevState,
+      qnaClsMidCd: e.clCode,
+      // 소분류는 초기화 (새로 선택하도록)
+      qnaClsSmlCd: ''
+    }));
+
+    // 소분류 코드 목록 설정
+    const codeS = findCommonCode(204400);
+    if (codeS) {
+      const filteredCodeList = codeS.filter(item => item.clRefChr1 === e.clCode);
+      setQnaTypeSmCodeList(filteredCodeList);
+
+      // 소분류가 있으면 초기화, 없으면 숨김
+      const hasSubCategories = filteredCodeList.length > 0;
+      setCloseSmFlg(!hasSubCategories);
+      setHideSmFlg(!hasSubCategories);
+    } else {
+      setHideSmFlg(true)
+    }
+
+    // 소분류 선택기 초기화
+    qnaTypeSmCodeRef.current?.setValue();
+  };
+
+
+  const onChangeQnaTypeS = (e) => {
+    if (!e?.clCode) return;
+
+    setQnaData(prevState => ({
+      ...prevState,
+      qnaClsSmlCd: e.clCode
+    }));
+  }
+
+  const onFileSave = () => {
+    const formData= []
+    if(fileUploadProps.uploadFiles.length === 0) return;
+    if(!fileCheck) return;
+
+    fileUploadProps.uploadFiles.forEach((file) => {
+      //console.log("file::::::::",file)
+      formData.push(file)
+
+    })
+    setQnaData({ ...qnaData, files:formData })
+    fileCheck = false;
+  }
+
+  const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const isEmpty = (value) => {
+    return value === null || value === undefined || value.trim() === "";
+  };
+
+
+  const handleQnaSubmit = async () => {
+    //필수 체크
+
+    //console.log("1::::",qnaData)
+
+
+     let regUserNm = qnaData?.regUserNm??'';
+
+    if (!isValidEmail(qnaData.qstMail)) {
+      qstMail.current.focus();
+      swalFire({
+        title: getMessage('qna.reg.alert.require.qstMail'),
+        icon: 'warning',
+      });
+      return;
+    }
+
+
+    if (isEmpty(regUserNm)) {
+      regUserNmRef.current.value = '';
+        regUserNmRef.current.focus()
+        swalFire({
+          title: getMessage('qna.reg.alert.require.regUserNm'),
+          icon: 'warning',
+        })
+        return false
+      }
+
+      let qnaClsLrgCd = qnaData?.qnaClsLrgCd??'';
+      let qnaClsMidCd = qnaData?.qnaClsMidCd??'';
+
+      if (isEmpty(qnaClsLrgCd) || isEmpty(qnaClsMidCd) ) {
+        (isEmpty(qnaClsLrgCd))?qnaTypeLgCodeRef.current.focus():qnaTypeMdCodeRef.current.focus()
+        swalFire({
+          title: getMessage('qna.reg.alert.select.type'),
+          icon: 'warning',
+        })
+        return false
+      }
+
+     let title = qnaData?.title??'';
+
+     if (isEmpty(title)) {
+       titleRef.current.value = '';
+       titleRef.current.focus()
+       swalFire({
+         title: getMessage('qna.reg.alert.require.title'),
+         icon: 'warning',
+       })
+       return false
+     }
+    //console.log("5::::",qnaData)
+    let contents = qnaData?.contents??'';
+
+    if (isEmpty(contents)) {
+      contentsRef.current.value = '';
+      contentsRef.current.focus()
+      swalFire({
+        title: getMessage('qna.reg.alert.require.contents'),
+        icon: 'warning',
+      })
+      return false
+    }
+
+    const formData = new FormData()
+    if(qnaData?.files?.length > 0) {
+      qnaData?.files.forEach((file) => {
+        formData.append('files', file.data)
+      })
+    }
+    formData.append("compCd", qnaData.compCd)
+    formData.append("siteTpCd", qnaData.siteTpCd)
+    formData.append("qnaClsLrgCd", qnaData.qnaClsLrgCd)
+    formData.append("qnaClsMidCd", qnaData.qnaClsMidCd)
+    formData.append("qnaClsSmlCd", qnaData.qnaClsSmlCd)
+    formData.append("title", qnaData.title)
+    formData.append("contents", qnaData.contents)
+    formData.append("regId", qnaData.regId)
+    formData.append("storeId", qnaData.storeId)
+    formData.append("regUserNm", qnaData.regUserNm)
+    formData.append("regUserTelNo", qnaData.regUserTelNo)
+    formData.append("qstMail", qnaData.qstMail)
+    formData.append("schNoticeClsCd", qnaData.schNoticeClsCd)
+
+
+
+    //console.log(Array.from(formData));
+
+    swalFire({
+      html: getMessage('qna.reg.confirm.save'),
+      type: 'confirm',
+      confirmFn: async () => {
+
+        setIsBtnDisable(true);
+        setIsGlobalLoading(true)
+
+        try {
+
+          const apiUrl = 'api/board'
+          //console.log("7::::",qnaData)
+          await post({ url: `${apiUrl}/saveQna`, data: formData }).then((res) => {
+            if (res?.result.code === 200) {
+              //qnaData.newFileList = []
+              setIsGlobalLoading(false)
+              swalFire({ text: getMessage('qna.reg.alert.save'), type: 'alert' })
+              setOpen(false)
+              setReload(searchValue, selectPageBlock);
+            }else{
+              setIsGlobalLoading(false)
+              swalFire({ text: getMessage('qna.reg.alert.saveFail'), type: 'alert', icon: 'error' })
+              console.error('error::::::::::::', res)
+            }
+
+            setIsBtnDisable(false)
+          })
+        } catch (e) {
+          setIsGlobalLoading(false)
+          setIsBtnDisable(false);
+          console.error('error::::::::::::', e.message)
+          swalFire({ text: e.message, type: 'alert' , icon: 'error'})
+          console.error('error::::::::::::', e.message)
+        }
+      }
+    })
+  }
+
+  useEffect(() => {
+    initQnaReg()
+  },[])
+
+  // useEffect(() => {
+  //   onFileSave()
+  //
+  // }, [onFileSave])
+  return (
+    <div className="modal-popup">
+      <div className="modal-dialog big">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="title">{getMessage('qna.title')}</h1>
+            <button className="modal-close"
+                    onClick={() => {
+                      setOpen(false)
+                    }}>{getMessage('board.sub.btn.close')}</button>
+          </div>
+          <div className="modal-body">
+            <div className="modal-body-inner">
+              <div className="design-request-table">
+                <div className="common-table">
+                  <table>
+                    <colgroup>
+                      <col style={{ width: '100px' }} />
+                      <col />
+                      <col style={{ width: '120px' }} />
+                      <col />
+                      <col style={{ width: '150px' }} />
+                      <col />
+                    </colgroup>
+                    <tbody>
+                    <tr>
+                      <th>{getMessage('qna.list.header.regNm')}</th>
+                      <td><input type="text" className="input-light" value={sessionState?.userNm || ''} readOnly  /></td>
+                      <th>E-Mail<span className="red">*</span></th>
+                      <td ><input type="text" className="input-light"  required
+                                  ref={qstMail}
+                                  value={qnaData?.qstMail || ''}
+                                  onChange={(e) => setQnaData({...qnaData, qstMail: e.target.value })}
+                                  onBlur={(e) => setQnaData({ ...qnaData, qstMail: e.target.value })} />
+                      </td>
+
+                      <th>{getMessage('qna.reg.header.regDt')}</th>
+                      <td>{dayjs(new Date()).format('YYYY-MM-DD')}</td>
+                    </tr>
+                    <tr>
+                      <th>Customer</th>
+                      <td><input type="text" className="input-light" value={sessionState?.custNm || ''} readOnly  /></td>
+                      <th>{getMessage('qna.reg.header.regUserNm')}<span className="red">*</span></th>
+                      <td ><input type="text" className="input-light"  required
+                                  ref={regUserNmRef}
+                                  value={qnaData?.regUserNm || '' }
+                                  onChange={(e) => setQnaData({...qnaData, regUserNm: e.target.value })}
+                                  onBlur={(e) => setQnaData({ ...qnaData, regUserNm: e.target.value })} /> </td>
+                      <th>{getMessage('qna.reg.header.regUserTelNo')}</th>
+                      <td ><input type="text" className="input-light"
+                                             ref={regUserTelNoRef}
+                                             maxLength={13}
+                                             value={qnaData?.regUserTelNo || '' }
+                                             onChange={regPhoneNumber}
+                                              /></td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <div className="design-request-grid">
+                <div className="design-request-count">
+                  <div className="design-request-grid-tit">{getMessage("qna.reg.header.type")}, {getMessage("qna.reg.header.title")} <span
+                    className="red">*</span></div>
+                </div>
+                <div className="flx-box one-on-one">
+                  <div className="select-wrap mr5" >
+                    <Select  name="" ref={qnaTypeLgCodeRef}
+                            options={qnaTypeLgCodeList}
+                            placeholder="Select"
+                            onChange={(e) => onChangeQnaTypeL(e)}
+                            getOptionLabel={(x) => x.clCodeNm}
+                            getOptionValue={(x) => x.clCode}
+                            isClearable={false}
+                            isSearchable={false}
+
+                      />
+
+                  </div>
+                  <div className="select-wrap mr5" >
+                    <Select  name="" ref={qnaTypeMdCodeRef}
+                            options={qnaTypeMdCodeList}
+                            placeholder="Select"
+                            onChange={(e) => onChangeQnaTypeM(e)}
+                            getOptionLabel={(x) => x.clCodeNm}
+                            getOptionValue={(x) => x.clCode}
+                            isClearable={false}
+                            isSearchable={false}
+                            isDisabled={closeMdFlg}
+                             defaultValue={''}
+                    />
+                  </div>
+                  <div className="select-wrap" >
+                    {!hideSmFlg && (
+                    <Select  name="" ref={qnaTypeSmCodeRef}
+                            options={qnaTypeSmCodeList}
+                            placeholder="Select"
+                            onChange={(e) => onChangeQnaTypeS(e)}
+                            getOptionLabel={(x) => x.clCodeNm}
+                            getOptionValue={(x) => x.clCode}
+                            isClearable={false}
+                            isSearchable={false}
+                            isDisabled={closeSmFlg}
+                    />)}
+                  </div>
+                </div>
+                <div className="input-wrap mt5">
+                  <input type="text" className="input-light" maxLength={200}
+                         ref = {titleRef}
+                         value={qnaData?.title || '' }
+                         onChange={(e) => {setQnaData({ ...qnaData, title: e.target.value })}}
+                  />
+                </div>
+              </div>
+              <div className="design-request-grid mt15">
+                <div className="design-request-count">
+                  <div className="design-request-grid-tit">{getMessage("qna.reg.header.contents")} <span className="red">*</span></div>
+                </div>
+                <div>
+                  <textarea className="textarea-form" name="" id="" maxLength={4000}
+                            ref={contentsRef}
+                            value={qnaData?.contents || '' }
+                            onChange={(e) => {setQnaData({ ...qnaData, contents: e.target.value })}} ></textarea>
+                </div>
+              </div>
+              <QnaFileUploader {...fileUploadProps} qnaData={qnaData} setQnaData={setQnaData} />
+
+            </div>
+            <div className="footer-btn-wrap">
+              {isBtnDisable === false && <button className="btn-origin navy mr5" onClick={handleQnaSubmit}>{getMessage("qna.reg.header.save")}</button>}
+              <button className="btn-origin grey" onClick={() => {
+                setOpen(false)
+              }}>{getMessage("board.sub.btn.close")}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/estimate/Estimate.jsx

@@ -13,7 +13,7 @@ import dayjs from 'dayjs'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 import { SessionContext } from '@/app/SessionProvider'
-import Select from 'react-select'
+import Select, { components } from 'react-select'
 import { convertNumberToPriceDecimal, convertNumberToPriceDecimalToFixed } from '@/util/common-utils'
 import ProductFeaturesPop from './popup/ProductFeaturesPop'
 import { v4 as uuidv4 } from 'uuid'
@@ -23,6 +23,8 @@ import { usePopup } from '@/hooks/usePopup'
 import { useSwal } from '@/hooks/useSwal'
 import { QcastContext } from '@/app/QcastProvider'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import {normalizeDigits, normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 export default function Estimate({}) {
   const [uniqueData, setUniqueData] = useState([])
   const [handlePricingFlag, setHandlePricingFlag] = useState(false)
@@ -60,7 +62,7 @@ export default function Estimate({}) {
 
   const [cableItemList, setCableItemList] = useState([]) //케이블 리스트
   const [cableItem, setCableItem] = useState('') //케이블 선택값
-
+  const [cableDbItem, setCableDbItem] = useState('') //케이블 선택값
   const [startDate, setStartDate] = useState(new Date())
   const singleDatePickerProps = {
     startDate,
@@ -98,7 +100,7 @@ export default function Estimate({}) {
   }
 
   const initEstimate = (currPid = currentPid) => {
-    console.log('🚀 ~ initEstimate ~ currPid:', currPid)
+    // console.log('🚀 ~ initEstimate ~ currPid:', currPid)
     closeAll()
     setObjectNo(objectRecoil.floorPlanObjectNo)
 
@@ -117,6 +119,7 @@ export default function Estimate({}) {
         item.value = item.clRefChr1
         item.label = item.clRefChr2
       })
+      // console.log(code2)
       setCableItemList(code2)
     }
 
@@ -136,7 +139,27 @@ export default function Estimate({}) {
           updatedRes = [...res]
         }
 
-        setOriginDisplayItemList(res)
+        const groupByItemGroup = (items) => {
+          const grouped = items.reduce((acc, item) => {
+            const group = item.itemGroup || '기타';
+            if (!acc[group]) {
+              acc[group] = {
+                label: group,
+                options: []
+              };
+            }
+            acc[group].options.push({
+              value: item.itemId,
+              label: `${item.itemNo} - ${item.itemName}`,
+              ...item
+            });
+            return acc;
+          }, {});
+
+          return Object.values(grouped);
+        };
+        const groupedItems = groupByItemGroup(res);
+        setOriginDisplayItemList(groupedItems)
         setDisplayItemList(updatedRes)
       }
     })
@@ -151,9 +174,22 @@ export default function Estimate({}) {
     })
   }
 
+  const groupStyles = {
+    groupHeading: (provided) => ({
+      ...provided,
+      fontSize: '14px',
+      fontWeight: 'bold',
+      color: '#333',
+      backgroundColor: '#f5f5f5',
+      padding: '8px 12px',
+      marginBottom: '4px',
+      borderBottom: '2px solid #ddd'
+    })
+  };
+
   useEffect(() => {
-    console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
-    if (selectedPlan) initEstimate(selectedPlan.planNo)
+    // console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
+    if (selectedPlan) initEstimate(selectedPlan?.planNo?? currentPid)
   }, [selectedPlan])
 
   useEffect(() => {
@@ -175,7 +211,10 @@ export default function Estimate({}) {
               row.check = false
               estimateOption.map((row2) => {
                 if (row.pkgYn === '0') {
-                  if (row2 === row.code) {
+                  // if (row2 === row.code) {
+                  //   row.check = true
+                  // }
+                  if (row.code.split('、').includes(row2)) {
                     row.check = true
                   }
                 } else {
@@ -217,7 +256,10 @@ export default function Estimate({}) {
               row.check = false
               estimateOption.map((row2) => {
                 if (row.pkgYn === '0') {
-                  if (row2 === row.code) {
+                  // if (row2 === row.code) {
+                  //   row.check = true
+                  // }
+                  if (row.code.split('、').includes(row2)) {
                     row.check = true
                   }
                 } else {
@@ -240,7 +282,6 @@ export default function Estimate({}) {
                 }
               }
             })
-
             setSpecialNoteList(res)
 
             setSpecialNoteFirstFlg(true)
@@ -377,8 +418,8 @@ export default function Estimate({}) {
   useEffect(() => {
     if (estimateContextState.estimateType !== '') {
       const param = {
-        saleStoreId: session.storeId,
-        sapSalesStoreCd: session.custCd,
+        saleStoreId: estimateContextState.sapSaleStoreId,
+        sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
         docTpCd: estimateContextState?.estimateType,
       }
 
@@ -387,6 +428,8 @@ export default function Estimate({}) {
         if (isNotEmptyArray(res?.data)) {
           setStorePriceList(res.data)
         }
+
+        setItemChangeYn(true)
       })
 
       if (estimateContextState.estimateType === 'YJSS') {
@@ -416,8 +459,6 @@ export default function Estimate({}) {
           handlePricing('UNIT_PRICE')
         }
       }
-
-      setItemChangeYn(true)
     }
   }, [estimateContextState?.estimateType])
 
@@ -469,6 +510,21 @@ export default function Estimate({}) {
         } else {
           item.check = false
         }
+      } else {
+        let codes = item.code.split('、')
+        let flg = '0'
+        if (codes.length > 1) {
+          for (let i = 0; i < pushData.length; i++) {
+            if (codes.indexOf(pushData[i]) > -1) {
+              flg = '1'
+            }
+          }
+          if (flg === '1') {
+            item.check = true
+          } else {
+            item.check = false
+          }
+        }
       }
     })
 
@@ -478,12 +534,27 @@ export default function Estimate({}) {
     })
   }
 
+ //Pricing 버튼클릭시  confirm 노출
+  const handlePricingBtn = (showPriceCd) => {
+   swalFire({
+     text: getMessage('estimate.detail.showPrice.pricingBtn.confirm'),
+     type: 'confirm',
+     icon: 'warning',
+     confirmFn: () => {
+       handlePricing(showPriceCd)
+       setEstimateContextState({ pricingFlag:true })
+     },
+   })
+ }
+
   //Pricing 버튼
   const handlePricing = async (showPriceCd) => {
     const param = {
-      saleStoreId: session.storeId,
-      sapSalesStoreCd: session.custCd,
+      saleStoreId: estimateContextState.sapSaleStoreId,
+      sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
       docTpCd: estimateContextState.estimateType,
+      secSapSalesStoreCd:
+        estimateContextState.secSapSalesStoreCd?.length > 0 && showPriceCd === 'QSP_PRICE' ? estimateContextState.secSapSalesStoreCd : '',
       priceCd: showPriceCd,
       itemIdList: estimateContextState.itemList.filter((item) => item.delFlg === '0' && item.paDispOrder === null),
     }
@@ -506,7 +577,6 @@ export default function Estimate({}) {
         })
       }
     }
-
     setIsGlobalLoading(true)
     await promisePost({ url: '/api/estimate/price/item-price-list', data: param }).then((res) => {
       let updateList = []
@@ -531,6 +601,7 @@ export default function Estimate({}) {
                       updateList.push({
                         ...item,
                         openFlg: data.data2[i].unitPrice === '0.0' ? '1' : '0',
+                        unitOpenFlg: (showPriceCd === 'QSP_PRICE' && item.openFlg === '1') ? '1' : '0',
                         salePrice: data.data2[i].unitPrice === null ? '0' : data.data2[i].unitPrice,
                         saleTotPrice: (item.amount * data.data2[i].unitPrice).toString(),
                       })
@@ -609,11 +680,14 @@ export default function Estimate({}) {
         newValue = parts[0] + '.' + parts[1].substring(0, 2)
       }
 
-      let pkgAsp = newValue || '0'
+      let pkgAsp = normalizeDecimal(newValue || '0')
 
       //현재 PKG용량값 가져오기
       let totVolKw = estimateContextState.totVolKw * 1000
-      let pkgTotPrice = parseFloat(pkgAsp?.replaceAll(',', '')) * totVolKw * 1000
+      // let pkgTotPrice = parseFloat(pkgAsp?.replaceAll(',', '')) * totVolKw * 1000
+
+      const pkgAspNumber = Number(normalizeDecimal(pkgAsp))
+      const pkgTotPrice = pkgAspNumber * totVolKw * 1000
 
       setEstimateContextState({
         pkgAsp: pkgAsp,
@@ -627,7 +701,7 @@ export default function Estimate({}) {
   // 수량 변경
   const onChangeAmount = (value, dispOrder, index) => {
     //itemChangeFlg = 1, partAdd = 0 셋팅
-    let amount = Number(value.replace(/[^0-9]/g, '').replaceAll(',', ''))
+    let amount = Number(normalizeDigits(value))
 
     if (isNaN(amount)) {
       amount = '0'
@@ -665,7 +739,8 @@ export default function Estimate({}) {
   // 단가 변경
   const onChangeSalePrice = (value, dispOrder, index) => {
     //itemChangeFlg, partAdd 받아온 그대로
-    let salePrice = Number(value.replace(/[^0-9]/g, '').replaceAll(',', ''))
+    let salePrice = Number(normalizeDecimal(value))
+
     if (isNaN(salePrice)) {
       salePrice = 0
     } else {
@@ -696,7 +771,7 @@ export default function Estimate({}) {
   /* 케이블 select 변경시  */
   const onChangeDisplayCableItem = (value, itemList) => {
     itemList.map((item, index) => {
-      if (item.dispCableFlg === '1') {
+      if (item.dispCableFlg === '1' && item.itemTpCd !== 'M12' && item.itemTpCd !== 'S13') {
         if (value !== '') {
           onChangeDisplayItem(value, item.dispOrder, index, true)
         }
@@ -705,6 +780,18 @@ export default function Estimate({}) {
     setCableItem(value)
   }
 
+  /* 케이블 select 변경시  */
+  const onChangeDisplayDoubleCableItem = (value, itemList) => {
+    itemList.map((item, index) => {
+      if (item.dispCableFlg === '1' && (item.itemTpCd === 'M12' || item.itemTpCd === 'S13')) {
+        if (value !== '') {
+          onChangeDisplayItem(value, item.dispOrder, index, true)
+        }
+      }
+    })
+    setCableDbItem(value)
+  }
+
   // 아이템 자동완성 검색시 아이템 추가/변경시
   const onChangeDisplayItem = (itemId, dispOrder, index, flag) => {
     const param = {
@@ -892,7 +979,7 @@ export default function Estimate({}) {
           delete item.showSalePrice
           delete item.showSaleTotPrice
           if (item.delFlg === '0') {
-            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
+            let amount = Number(normalizeDigits(item.amount)) || 0
             let price
             if (amount === 0) {
               price = 0
@@ -927,7 +1014,7 @@ export default function Estimate({}) {
         makeUniqueSpecialNoteCd(itemList)
         itemList.forEach((item) => {
           if (item.delFlg === '0') {
-            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
+            let amount = Number(normalizeDigits(item.amount)) || 0
             let salePrice
             if (item.moduleFlg === '1') {
               const volKw = (item.pnowW * amount) / 1000
@@ -961,8 +1048,8 @@ export default function Estimate({}) {
             }
           }
         })
-        let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
-
+        //let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
+        const pkgAsp = Number(normalizeDecimal(estimateContextState.pkgAsp))
         totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
         totals.supplyPrice = totals.addSupplyPrice + totals.pkgTotPrice
         totals.vatPrice = totals.supplyPrice * 0.1
@@ -1021,7 +1108,7 @@ export default function Estimate({}) {
         let dispCableFlgCnt = 0
         estimateContextState.itemList.forEach((item) => {
           if (item.delFlg === '0') {
-            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
+            let amount = Number(normalizeDigits(item.amount)) || 0
             let salePrice
             if (item.moduleFlg === '1') {
               const volKw = (item.pnowW * amount) / 1000
@@ -1056,18 +1143,24 @@ export default function Estimate({}) {
 
             if (item.dispCableFlg === '1') {
               dispCableFlgCnt++
+              if(item.itemTpCd === 'M12' || item.itemTpCd === 'S13') {
+                setCableDbItem(item.itemId)
+              }else{
                 setCableItem(item.itemId)
               }
             }
+          }
         })
 
         if (dispCableFlgCnt === 0) {
           setCableItem('100038')
+          setCableDbItem('100037')
         }
 
-        let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
-
+        // let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
+        const pkgAsp = Number(normalizeDecimal(estimateContextState.pkgAsp))
         totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
+
         totals.supplyPrice = totals.addSupplyPrice + totals.pkgTotPrice
         totals.vatPrice = totals.supplyPrice * 0.1
         totals.totPrice = totals.supplyPrice + totals.vatPrice
@@ -1097,7 +1190,7 @@ export default function Estimate({}) {
           delete item.showSalePrice
           delete item.showSaleTotPrice
           if (item.delFlg === '0') {
-            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
+            let amount = Number(normalizeDigits(item.amount)) || 0
             let price
             if (amount === 0) {
               price = 0
@@ -1123,16 +1216,18 @@ export default function Estimate({}) {
 
             if (item.dispCableFlg === '1') {
               dispCableFlgCnt++
-            }
-
-            if (item.dispCableFlg === '1') {
+              if(item.itemTpCd === 'M12' || item.itemTpCd === 'S13') {
+                setCableDbItem(item.itemId)
+              }else{
                 setCableItem(item.itemId)
               }
             }
+          }
         })
 
         if (dispCableFlgCnt === 0) {
           setCableItem('100038')
+          setCableDbItem('100037')
         }
 
         totals.vatPrice = totals.supplyPrice * 0.1
@@ -1193,10 +1288,26 @@ export default function Estimate({}) {
 
       if (dispCableFlgCnt === 0) {
         setCableItem('100038')
+        setCableDbItem('100037')
       }
     }
   }, [estimateContextState?.itemList, cableItemList])
 
+  const [agencyCustList, setAgencyCustList] = useState([])
+  useEffect(() => {
+    // 952 - 2차점 특가 sapSalesStoreCd
+    if (estimateContextState?.sapSalesStoreCd && session?.storeLvl === '1') {
+      const param = {
+        sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
+      }
+      const apiUrl = `api/estimate/agency-cust-list?${queryStringFormatter(param)}`
+      get({ url: apiUrl }).then((res) => {
+        if (isNotEmptyArray(res?.data)) {
+          setAgencyCustList(res?.data)
+        }
+      })
+    }
+  }, [estimateContextState?.sapSalesStoreCd])
   return (
     <div className="sub-content estimate">
       <div className="sub-content-inner">
@@ -1207,7 +1318,7 @@ export default function Estimate({}) {
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
                 <div className="estimate-name">
-                  {currentObjectNo} (Plan No: {planNo})
+                  {currentObjectNo} (Plan No: {currentPid})
                 </div>
               </div>
               <div className="estimate-box">
@@ -1341,21 +1452,32 @@ export default function Estimate({}) {
                       {getMessage('estimate.detail.estimateType')} <span className="important">*</span>
                     </th>
                     <td colSpan={3}>
+                      <div className="form-flex-wrap">
                         <div className="radio-wrap">
-                        <div className="d-check-radio light mr10">
-                          <input
-                            type="radio"
-                            name="estimateType"
-                            id="YJSS"
-                            value={'YJSS'}
-                            checked={estimateContextState?.estimateType === 'YJSS' ? true : false}
-                            onChange={(e) => {
-                              //주문분류
-                              setHandlePricingFlag(true)
-                              setEstimateContextState({ estimateType: e.target.value })
+                          {/*pkgRank is null, empty 인 경우 : 사용불가, 이전에 등록된 경우 사용가능, style로 제어*/}
+                          <div
+                            className="d-check-radio light mr10"
+                            style={{
+                              display:
+                                (isNotEmptyArray(storePriceList) > 0 && storePriceList[0].pkgRank !== null && storePriceList[0].pkgRank !== '') ||
+                                estimateContextState?.estimateType === 'YJSS'
+                                  ? ''
+                                  : 'none',
                             }}
-                          />
-                          <label htmlFor="YJSS">{getMessage('estimate.detail.estimateType.yjss')}</label>
+                          >
+                            {/*<input*/}
+                            {/*  type="radio"*/}
+                            {/*  name="estimateType"*/}
+                            {/*  id="YJSS"*/}
+                            {/*  value={'YJSS'}*/}
+                            {/*  checked={estimateContextState?.estimateType === 'YJSS' ? true : false}*/}
+                            {/*  onChange={(e) => {*/}
+                            {/*    //주문분류*/}
+                            {/*    setHandlePricingFlag(true)*/}
+                            {/*    setEstimateContextState({ estimateType: e.target.value, setEstimateContextState })*/}
+                            {/*  }}*/}
+                            {/*/>*/}
+                            {/*<label htmlFor="YJSS">{getMessage('estimate.detail.estimateType.yjss')}</label>*/}
                           </div>
                           <div className="d-check-radio light">
                             <input
@@ -1372,6 +1494,38 @@ export default function Estimate({}) {
                             <label htmlFor="YJOD">{getMessage('estimate.detail.estimateType.yjod')}</label>
                           </div>
                         </div>
+                        {session?.storeLvl === '100000' && agencyCustList.length > 0 ? (  //일시적으로 1 => 100000로 정리
+                          <div className="form-flex-select ml10">
+                            <label htmlFor="">{getMessage('estimate.detail.agency')}</label>
+                            <div className="select-wrap" style={{ width: '400px' }}>
+                              <Select
+                                id="agencyName"
+                                instanceId="agencyName"
+                                className="react-select-custom"
+                                classNamePrefix="custom"
+                                placeholder="Select"
+                                options={agencyCustList}
+                                onChange={(e) => {
+                                  if (isObjectNotEmpty(e)) {
+                                    setEstimateContextState({ secSapSalesStoreCd: e.sapSalesStoreCd })
+                                  } else {
+                                    setEstimateContextState({ secSapSalesStoreCd: '' })
+                                  }
+                                }}
+                                getOptionLabel={(x) => x.sapSalesStoreNm}
+                                getOptionValue={(x) => x.sapSalesStoreCd}
+                                isClearable={true}
+                                isSearchable={true}
+                                value={agencyCustList.filter(function (option) {
+                                  return option.sapSalesStoreCd === estimateContextState.secSapSalesStoreCd
+                                })}
+                              />
+                            </div>
+                          </div>
+                        ) : (
+                          ''
+                        )}
+                      </div>
                     </td>
                   </tr>
                   <tr>
@@ -1540,13 +1694,13 @@ export default function Estimate({}) {
             {/* 파일첨부 끝 */}
             {/* 견적특이사항 시작 */}
             <div className="table-box-title-wrap">
-              <div className="title-wrap">
-                <h3 className="product">{getMessage('estimate.detail.header.specialEstimate')}</h3>
-                <div className="estimate-check-btn">
-                  <button className={`estimate-arr-btn down mr5 ${hidden ? '' : 'on'}`} onClick={() => setHidden(false)}></button>
-                  <button className={`estimate-arr-btn up ${hidden ? 'on' : ''}`} onClick={() => setHidden(true)}></button>
-                </div>
-              </div>
+              {/*<div className="title-wrap">*/}
+              {/*  <h3 className="product">{getMessage('estimate.detail.header.specialEstimate')}</h3>*/}
+              {/*  <div className="estimate-check-btn">*/}
+              {/*    <button className={`estimate-arr-btn down mr5 ${hidden ? '' : 'on'}`} onClick={() => setHidden(false)}></button>*/}
+              {/*    <button className={`estimate-arr-btn up ${hidden ? 'on' : ''}`} onClick={() => setHidden(true)}></button>*/}
+              {/*  </div>*/}
+              {/*</div>*/}
             </div>
             {/* 견적 특이사항 코드영역시작 */}
             <div className={`estimate-check-wrap ${hidden ? 'hide' : ''}`}>
@@ -1729,15 +1883,17 @@ export default function Estimate({}) {
                 <button
                   type="button"
                   className="btn-origin grey ml5"
-                  onClick={() => {
+                  onClick={(event) => {
+
                     setHandlePricingFlag(true)
-                    handlePricing(showPriceCd)
+                    handlePricingBtn(showPriceCd)
                   }}
                 >
                   {getMessage('estimate.detail.showPrice.pricingBtn')}
                 </button>
               </div>
               <div className="product-price-wrap ml10">
+                <div className="product-price-tit">{getMessage('estimate.detail.header.singleCable')}</div>
                 <div className="select-wrap">
                   <select
                     className="select-light"
@@ -1747,11 +1903,34 @@ export default function Estimate({}) {
                     value={cableItem}
                   >
                     {cableItemList.length > 0 &&
-                      cableItemList.map((row) => (
-                        <option key={row.clRefChr1} value={row.clRefChr1}>
+                      cableItemList.map((row) => {
+                        if(!row.clRefChr2.includes('S')){
+                          return <option key={row.clRefChr1} value={row.clRefChr1}>
                             {row.clRefChr2}
                           </option>
-                      ))}
+                        }
+                      })}
+                  </select>
+                </div>
+              </div>
+              <div className="product-price-wrap ml10">
+                <div className="product-price-tit">{getMessage('estimate.detail.header.doubleCable')}</div>
+                <div className="select-wrap">
+                  <select
+                    className="select-light"
+                    onChange={(e) => {
+                      onChangeDisplayDoubleCableItem(e.target.value, estimateContextState.itemList)
+                    }}
+                    value={cableDbItem}
+                  >
+                    {cableItemList.length > 0 &&
+                      cableItemList.map((row) => {
+                        if(row.clRefChr2.includes('S')){
+                          return <option key={row.clRefChr1} value={row.clRefChr1}>
+                            {row.clRefChr2.replace('S','')}
+                          </option>
+                        }
+                      })}
                   </select>
                 </div>
               </div>
@@ -1834,7 +2013,7 @@ export default function Estimate({}) {
                                 <input
                                   type="checkbox"
                                   id={item?.dispOrder}
-                                  disabled={!!item?.paDispOrder || item.dispCableFlg === '1'}
+                                  disabled={!!item?.paDispOrder || item.dispCableFlg === '1X'}
                                   onChange={() => onChangeSelect(item.dispOrder)}
                                   checked={!!selection.has(item.dispOrder)}
                                 />
@@ -1853,14 +2032,20 @@ export default function Estimate({}) {
                                       classNamePrefix="custom"
                                       placeholder="Select"
                                       options={originDisplayItemList}
+                                      styles={groupStyles}
                                       onChange={(e) => {
                                         if (isObjectNotEmpty(e)) {
                                           onChangeDisplayItem(e.itemId, item.dispOrder, index, false)
                                         }
                                       }}
                                       menuPlacement={'auto'}
-                                      getOptionLabel={(x) => x.itemName}
+                                      getOptionLabel={(x) => x.itemName + ' (' + x.itemNo + ')'}
                                       getOptionValue={(x) => x.itemNo}
+                                      components={{
+                                        SingleValue: ({ children, ...props }) => {
+                                          return <components.SingleValue {...props}>{props.data.itemName}</components.SingleValue>
+                                        },
+                                      }}
                                       isClearable={false}
                                       isDisabled={!!item?.paDispOrder}
                                       value={displayItemList.filter(function (option) {
@@ -1880,12 +2065,17 @@ export default function Estimate({}) {
                                       placeholder="Select"
                                       options={cableItemList}
                                       menuPlacement={'auto'}
-                                      getOptionLabel={(x) => x.clRefChr3}
+                                      getOptionLabel={(x) => x.clRefChr3 + ' (' + x.clRefChr1 + ')'}
                                       getOptionValue={(x) => x.clRefChr1}
+                                      components={{
+                                        SingleValue: ({ children, ...props }) => {
+                                          return <components.SingleValue {...props}>{(item.itemTpCd === 'M12' || item.itemTpCd === 'S13')? item.itemName : props.data.clRefChr3}</components.SingleValue>
+                                        },
+                                      }}
                                       isClearable={false}
                                       isDisabled={true}
                                       value={cableItemList.filter(function (option) {
-                                        return option.clRefChr1 === item.itemId
+                                        return (item.itemTpCd === 'M12' || item.itemTpCd === 'S13' )? item.itemId : option.clRefChr1 === item.itemId
                                       })}
                                     />
                                   )}
@@ -1917,15 +2107,27 @@ export default function Estimate({}) {
                             </td>
                             <td>
                               <div className="input-wrap" style={{ width: '100%' }}>
-                                <input
-                                  type="text"
-                                  className="input-light al-r"
+                                {/*<input*/}
+                                {/*  type="text"*/}
+                                {/*  className="input-light al-r"*/}
+                                {/*  value={convertNumberToPriceDecimal(item?.amount?.replaceAll(',', ''))}*/}
+                                {/*  disabled={item.itemId === '' || !!item?.paDispOrder}*/}
+                                {/*  onChange={(e) => {*/}
+                                {/*    onChangeAmount(e.target.value, item.dispOrder, index)*/}
+                                {/*  }}*/}
+                                {/*  maxLength={6}*/}
+                                {/*/>*/}
+                                <CalculatorInput
+                                  className={"input-light al-r"}
                                   value={convertNumberToPriceDecimal(item?.amount?.replaceAll(',', ''))}
                                   disabled={item.itemId === '' || !!item?.paDispOrder}
-                                  onChange={(e) => {
-                                    onChangeAmount(e.target.value, item.dispOrder, index)
+                                  onChange={(value) =>{
+                                    onChangeAmount(value, item.dispOrder, index)
+                                  }}
+                                  options={{
+                                    allowNegative: false,
+                                    allowDecimal: false
                                   }}
-                                  maxLength={6}
                                   />
                               </div>
                             </td>
@@ -1933,10 +2135,37 @@ export default function Estimate({}) {
                             <td>
                               <div className="form-flex-wrap">
                                 <div className="input-wrap mr5">
-                                  <input
-                                    type="text"
-                                    className="input-light al-r"
-                                    value={convertNumberToPriceDecimal(item?.showSalePrice === '0' ? null : item?.salePrice?.replaceAll(',', ''))}
+                                  {/*<input*/}
+                                  {/*  type="text"*/}
+                                  {/*  className="input-light al-r"*/}
+                                  {/*  value={*/}
+                                  {/*    item.openFlg === '1'*/}
+                                  {/*      ? 'OPEN'*/}
+                                  {/*      : convertNumberToPriceDecimal(item?.showSalePrice === '0' ? null : item?.salePrice?.replaceAll(',', ''))*/}
+                                  {/*  }*/}
+                                  {/*  disabled={*/}
+                                  {/*    item.openFlg === '1'*/}
+                                  {/*      ? true*/}
+                                  {/*      : estimateContextState?.estimateType === 'YJSS'*/}
+                                  {/*        ? item?.paDispOrder*/}
+                                  {/*          ? true*/}
+                                  {/*          : item.pkgMaterialFlg !== '1'*/}
+                                  {/*        : item.itemId === '' || !!item?.paDispOrder*/}
+                                  {/*          ? true*/}
+                                  {/*          : item.openFlg === '1'*/}
+                                  {/*  }*/}
+                                  {/*  onChange={(e) => {*/}
+                                  {/*    onChangeSalePrice(e.target.value, item.dispOrder, index)*/}
+                                  {/*  }}*/}
+                                  {/*  maxLength={12}*/}
+                                  {/*/>*/}
+                                  <CalculatorInput
+                                    className={"input-light al-r"}
+                                    value={
+                                      item.openFlg === '1'
+                                        ? 'OPEN'
+                                        : convertNumberToPriceDecimal(item?.showSalePrice === '0' ? null : item?.salePrice?.replaceAll(',', ''))
+                                    }
                                     disabled={
                                       item.openFlg === '1'
                                         ? true
@@ -1947,13 +2176,15 @@ export default function Estimate({}) {
                                           : item.itemId === '' || !!item?.paDispOrder
                                             ? true
                                             : item.openFlg === '1'
-                                              ? true
-                                              : false
                                     }
-                                    onChange={(e) => {
-                                      onChangeSalePrice(e.target.value, item.dispOrder, index)
+                                    onChange={(value) =>{
+                                      onChangeSalePrice(value, item.dispOrder, index)
                                     }}
                                     maxLength={12}
+                                    options={{
+                                      allowNegative: false,
+                                      allowDecimal: false
+                                    }}
                                   />
                                 </div>
                                 {item.openFlg === '1' && (
@@ -1964,7 +2195,9 @@ export default function Estimate({}) {
                               </div>
                             </td>
                             <td className="al-r">
-                              {convertNumberToPriceDecimal(
+                              {item?.openFlg === '1'
+                                ? 'OPEN'
+                                : convertNumberToPriceDecimal(
                                     item?.showSaleTotPrice === '0'
                                       ? null
                                       : item?.amount === ''

src/components/estimate/popup/DocDownOptionPop.jsx

@@ -6,6 +6,7 @@ import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState, estimateState } from '@/store/floorPlanObjectAtom'
 import { usePathname, useSearchParams } from 'next/navigation'
 import { QcastContext } from '@/app/QcastProvider'
+import { sessionStore } from '@/store/commonAtom'
 
 export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDownPopLockFlg }) {
   const { setIsGlobalLoading } = useContext(QcastContext)
@@ -30,7 +31,7 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
   // recoil 물건번호
   const objectRecoil = useRecoilValue(floorPlanObjectState)
   const estimateRecoilState = useRecoilValue(estimateState)
-
+ const sessionState = useRecoilValue(sessionStore)
   //문서 다운로드
   const handleFileDown = async () => {
     const url = '/api/estimate/excel-download'
@@ -67,6 +68,8 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
       schWeightFlg: schWeightFlg,
       schDrawingFlg: defaultSchDrawingFlg,
       pwrGnrSimType: 'D', //default 화면에 안보여줌
+      userId: sessionState.userId ? sessionState.userId : "",
+      saleStoreId: sessionState.storeId ? sessionState.storeId : "",
     }
 
     const options = { responseType: 'blob' }
@@ -130,7 +133,7 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
               <div className="common-table">
                 <table>
                   <colgroup>
-                    <col style={{ width: '260px' }} />
+                    <col style={{ width: '220px' }} />
                     <col />
                   </colgroup>
                   <tbody>
@@ -183,7 +186,7 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
                             />
                             <label htmlFor="schUnitPricePdfFlg0">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.pdfFlg0')}</label>
                           </div>
-                          <div className="d-check-radio light ">
+                          <div className="d-check-radio light mr10">
                             <input
                               type="radio"
                               id="schUnitPricePdfFlg1"
@@ -197,6 +200,20 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
                             />
                             <label htmlFor="schUnitPricePdfFlg1">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.pdfFlg1')}</label>
                           </div>
+                          <div className="d-check-radio light">
+                            <input
+                              type="radio"
+                              id="schUnitPriceExcelFlg2"
+                              name="schUnitPriceFlg"
+                              value={'4'}
+                              checked={schUnitPriceFlg === '4'}
+                              onChange={(e) => {
+                                setSchDownload('EXCEL2')
+                                setSchUnitPriceFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schUnitPriceExcelFlg2">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.excelFlg2')}</label>
+                          </div>
                         </div>
                       </td>
                     </tr>

src/components/fabric/QLine.js

@@ -1,6 +1,8 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { getDirectionByPoint } from '@/util/canvas-util'
+import { calcLinePlaneSize } from '@/util/qpolygon-utils'
+import { logger } from '@/util/logger'
 
 export const QLine = fabric.util.createClass(fabric.Line, {
   type: 'QLine',
@@ -14,10 +16,11 @@ export const QLine = fabric.util.createClass(fabric.Line, {
   children: [],
   padding: 5,
   textVisible: true,
+  textBaseline: 'alphabetic',
   initialize: function (points, options, length = 0) {
     // 소수점 전부 제거
 
-    points = points.map((point) => Number(point?.toFixed(1)))
+    points = points.map((point) => Number(Number(point)?.toFixed(1)))
 
     this.callSuper('initialize', points, { ...options, selectable: options.selectable ?? true })
     if (options.id) {
@@ -31,14 +34,16 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
     this.textMode = options.textMode ?? 'plane' // plane:복시도, actual:실측, none:표시안함
     this.textVisible = options.textVisible ?? true
-    if (length !== 0) {
-      this.length = length
-    } else {
-      this.setLength()
-    }
 
     this.startPoint = { x: this.x1, y: this.y1 }
     this.endPoint = { x: this.x2, y: this.y2 }
+    try {
+      this.setLength()
+    } catch (e) {
+      setTimeout(() => {
+        this.setLength()
+      }, 100)
+    }
   },
 
   init: function () {
@@ -66,31 +71,29 @@ export const QLine = fabric.util.createClass(fabric.Line, {
   },
 
   setLength() {
-    if (this.attributes?.actualSize !== undefined && this.attributes?.planeSize !== undefined) {
-      if (this.textMode === 'plane') {
-        this.length = this.attributes.planeSize / 10
-      } else if (this.textMode === 'actual') {
-        this.length = this.attributes.actualSize / 10
-      }
-    } else {
-      const scaleX = this.scaleX
-      const scaleY = this.scaleY
-      const x1 = this.left
-      const y1 = this.top
-      const x2 = this.left + this.width * scaleX
-      const y2 = this.top + this.height * scaleY
-      const dx = x2 - x1
-      const dy = y2 - y1
-      this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1))
+    // Ensure all required properties are valid numbers
+    const { x1, y1, x2, y2 } = this
+    if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2)) {
+      logger.error('Invalid coordinates in QLine:', { x1, y1, x2, y2 })
+      this.length = 0
+      return
     }
+    this.length = calcLinePlaneSize({ x1, y1, x2, y2 }) / 10
+  },
+
+  setLengthByValue(length) {
+    this.length = length / 10
   },
 
   addLengthText() {
     const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
 
-    if (this.textMode === 'none') {
     if (thisText) {
-        this.canvas.remove(thisText)
+      if (this.attributes?.actualSize) {
+        thisText.set({ actualSize: this.attributes.actualSize })
+      }
+      if (this.attributes?.planeSize) {
+        thisText.set({ planeSize: this.attributes.planeSize })
       }
     } else {
       this.setLength()
@@ -101,11 +104,6 @@ export const QLine = fabric.util.createClass(fabric.Line, {
       const x2 = this.left + this.width * scaleX
       const y2 = this.top + this.height * scaleY
 
-      if (thisText) {
-        thisText.set({ text: this.getLength().toString(), left: (x1 + x2) / 2, top: (y1 + y2) / 2 })
-        this.text = thisText
-        return
-      }
       let left, top
       if (this.direction === 'left' || this.direction === 'right') {
         left = (x1 + x2) / 2
@@ -122,6 +120,8 @@ export const QLine = fabric.util.createClass(fabric.Line, {
       const degree = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI
 
       const text = new fabric.Textbox(this.getLength().toString(), {
+        actualSize: this.attributes?.actualSize,
+        planeSize: this.attributes?.planeSize,
         left: left,
         top: top,
         fontSize: this.fontSize,
@@ -182,4 +182,78 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     }
     return this
   },
+
+  setCoords: function () {
+    // 부모 클래스의 setCoords 호출
+    this.callSuper('setCoords')
+
+    // QLine의 경우 추가 처리 - 항상 강제로 재계산
+    if (this.canvas) {
+      // 모든 좌표 관련 캐시 초기화
+      delete this.oCoords
+      delete this.aCoords
+      delete this.__corner
+
+      // 다시 부모 setCoords 호출
+      this.callSuper('setCoords')
+
+      // 한 번 더 강제로 bounding rect 재계산
+      this._clearCache && this._clearCache()
+    }
+  },
+
+  containsPoint: function (point) {
+    // 먼저 좌표 업데이트
+    this.setCoords()
+
+    // 캔버스 줌과 viewport transform 고려한 좌표 변환
+    let localPoint = point
+    if (this.canvas) {
+      const vpt = this.canvas.viewportTransform
+      if (vpt) {
+        // viewport transform 역변환
+        const inverted = fabric.util.invertTransform(vpt)
+        localPoint = fabric.util.transformPoint(point, inverted)
+      }
+    }
+
+    // 기본 boundingRect 사용하되 줌을 고려하여 선택 영역 조정
+    const boundingRect = this.getBoundingRect(true)
+
+    // 선의 방향 판단
+    const dx = Math.abs(this.x2 - this.x1)
+    const dy = Math.abs(this.y2 - this.y1)
+    const isVertical = dx < dy && dx < 10
+    const isDiagonal = dx > 10 && dy > 10
+
+    // 줌 레벨에 따른 선택 영역 조정
+    const zoom = this.canvas ? this.canvas.getZoom() : 1
+    const baseMultiplier = 1 // 줌이 클수록 선택 영역을 줄임
+
+    let reducedWidth, reducedHeight
+
+    if (isDiagonal) {
+      reducedWidth = Math.max(boundingRect.width / 2, 10 * baseMultiplier)
+      reducedHeight = Math.max(boundingRect.height / 2, 10 * baseMultiplier)
+    } else if (isVertical) {
+      reducedWidth = Math.max(boundingRect.width * 2, 20 * baseMultiplier)
+      reducedHeight = boundingRect.height
+    } else {
+      reducedWidth = boundingRect.width
+      reducedHeight = Math.max(boundingRect.height * 2, 20 * baseMultiplier)
+    }
+
+    // 축소된 영역의 중심점 계산
+    const centerX = boundingRect.left + boundingRect.width / 2
+    const centerY = boundingRect.top + boundingRect.height / 2
+
+    // 축소된 영역의 경계 계산
+    const left = centerX - reducedWidth / 2
+    const top = centerY - reducedHeight / 2
+    const right = centerX + reducedWidth / 2
+    const bottom = centerY + reducedHeight / 2
+
+    // 점이 축소된 영역 내에 있는지 확인
+    return localPoint.x >= left && localPoint.x <= right && localPoint.y >= top && localPoint.y <= bottom
+  },
 })

src/components/fabric/QPolygon.js

@@ -2,10 +2,11 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawGabledRoof, drawRidgeRoof, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawGableRoof, drawRoofByAttribute, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import Big from 'big.js'
+import { drawSkeletonRidgeRoof } from '@/util/skeleton-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -29,12 +30,14 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.texts = []
     this.hips = []
     this.ridges = []
-    this.connectRidges = []
     this.cells = []
     this.innerLines = []
     this.children = []
     this.separatePolygon = []
     this.toFixed = options.toFixed ?? 1
+    this.baseLines = []
+    this.adjustRoofLines = []
+    // this.colorLines = []
 
     // 소수점 전부 제거
     points.forEach((point) => {
@@ -45,8 +48,11 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     options.sort = options.sort ?? true
     options.parentId = options.parentId ?? null
 
+    this.isSortedPoints = false
+
     if (!options.sort && points.length <= 8) {
       points = sortedPointLessEightPoint(points)
+      this.isSortedPoints = true
     } else {
       let isDiagonal = false
       points.forEach((point, i) => {
@@ -62,6 +68,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
       if (!isDiagonal) {
         points = sortedPoints(points)
+        this.isSortedPoints = true
       }
     }
 
@@ -82,6 +89,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.initLines()
     this.init()
     this.setShape()
+    const originWidth = this.originWidth ?? this.width
+    const originHeight = this.originHeight ?? this.height
+    this.originWidth = this.angle === 90 || this.angle === 270 ? originHeight : originWidth
+    this.originHeight = this.angle === 90 || this.angle === 270 ? originWidth : originHeight
   },
 
   setShape() {
@@ -119,11 +130,15 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.addLengthText()
 
     this.on('moving', () => {
+      this.initLines()
       this.addLengthText()
+      this.setCoords()
     })
 
-    this.on('modified', (e) => {
+    this.on('modified', () => {
+      this.initLines()
       this.addLengthText()
+      this.setCoords()
     })
 
     this.on('selected', () => {
@@ -166,8 +181,27 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
           return fabric.util.transformPoint(p, matrix)
         })
       this.points = transformedPoints
-      const { left, top } = this.calcOriginCoords()
-      this.set('pathOffset', { x: left, y: top })
+
+      // 바운딩 박스 재계산 (width, height 업데이트 - fill 영역 수정)
+      const calcDim = this._calcDimensions({})
+      this.width = calcDim.width
+      this.height = calcDim.height
+
+      const newPathOffset = {
+        x: calcDim.left + this.width / 2,
+        y: calcDim.top + this.height / 2,
+      }
+      this.set('pathOffset', newPathOffset)
+
+      // 변환을 points에 적용했으므로 left, top, angle, scale 모두 리셋 (이중 변환 방지)
+      this.set({
+        left: newPathOffset.x,
+        top: newPathOffset.y,
+        angle: 0,
+        scaleX: 1,
+        scaleY: 1,
+      })
+
       this.setCoords()
       this.initLines()
     })
@@ -183,8 +217,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.lines = []
 
-    this.points.forEach((point, i) => {
-      const nextPoint = this.points[(i + 1) % this.points.length]
+    this.getCurrentPoints().forEach((point, i) => {
+      const nextPoint = this.getCurrentPoints()[(i + 1) % this.points.length]
       const line = new QLine([point.x, point.y, nextPoint.x, nextPoint.y], {
         stroke: this.stroke,
         strokeWidth: this.strokeWidth,
@@ -203,14 +237,50 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       line.startPoint = point
       line.endPoint = nextPoint
       this.lines.push(line)
+      this.calculateDegree()
     })
   },
+  calculateDegree() {
+    const degrees = []
+    // polygon.lines를 순회하며 각도를 구해 출력
+    this.lines.forEach((line) => {
+      const dx = line.x2 - line.x1
+      const dy = line.y2 - line.y1
+      const rad = Math.atan2(dy, dx)
+      const degree = (rad * 180) / Math.PI
+      degrees.push(degree)
+    })
+
+    function isMultipleOf45(degree, epsilon = 1) {
+      return Math.abs(degree % 45) <= epsilon || Math.abs((degree % 45) - 45) <= epsilon
+    }
+
+    this.isMultipleOf45 = degrees.every((degree) => isMultipleOf45(degree))
+  },
 
   /**
    * 보조선 그리기
    * @param settingModalFirstOptions
    */
   drawHelpLine(settingModalFirstOptions) {
+    /* innerLines 초기화 */
+    this.canvas
+      .getObjects()
+      .filter(
+        (obj) =>
+          obj.parentId === this.id &&
+          obj.name !== POLYGON_TYPE.WALL &&
+          obj.name !== POLYGON_TYPE.ROOF &&
+          obj.name !== 'lengthText' &&
+          obj.name !== 'outerLine' &&
+          obj.name !== 'baseLine',
+        // && obj.name !== 'outerLinePoint',
+      )
+      .forEach((obj) => this.canvas.remove(obj))
+    this.innerLines = []
+    this.adjustRoofLines = []
+    this.canvas.renderAll()
+
     let textMode = 'plane'
 
     const dimensionDisplay = settingModalFirstOptions?.dimensionDisplay.find((opt) => opt.selected).id
@@ -228,61 +298,80 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         break
     }
 
-    const types = []
-    this.lines.forEach((line) => types.push(line.attributes.type))
+    const types = this.lines.map((line) => line.attributes.type)
 
-    const eavesType = [LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.HIPANDGABLE]
-    const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+    const isGableRoof = function (types) {
+      if (!types.includes(LINE_TYPE.WALLLINE.GABLE)) {
+        return false
+      }
+      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+      const oddTypes = types.filter((type, i) => i % 2 === 0)
+      const evenTypes = types.filter((type, i) => i % 2 === 1)
 
-    // const isEaves = types.every((type) => eavesType.includes(type))
-    const gableOdd = types.filter((type, i) => i % 2 === 0)
-    const gableEven = types.filter((type, i) => i % 2 === 1)
-    const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
+      const oddAllEaves = oddTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
+      const evenAllGable = evenTypes.every((type) => gableTypes.includes(type))
+      const evenAllEaves = evenTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
+      const oddAllGable = oddTypes.every((type) => gableTypes.includes(type))
 
-    // A형, B형 박공 지붕
-    if (
-      (gableOdd.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableEven.every((type) => gableType.includes(type))) ||
-      (gableEven.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableOdd.every((type) => gableType.includes(type)))
-    ) {
-      drawGabledRoof(this.id, this.canvas, textMode)
-    } else if (hasShed) {
-      const sheds = this.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
-      const areLinesParallel = function (line1, line2) {
-        const angle1 = calculateAngle(line1.startPoint, line1.endPoint)
-        const angle2 = calculateAngle(line2.startPoint, line2.endPoint)
+      return (oddAllEaves && evenAllGable) || (evenAllEaves && oddAllGable)
+    }
+
+    const isShedRoof = function (types, lines) {
+      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+      if (!types.includes(LINE_TYPE.WALLLINE.SHED)) {
+        return false
+      }
+      const shedLines = lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.SHED)
+      const areShedLinesParallel = function (shedLines) {
+        return shedLines.every((shed, i) => {
+          const nextShed = shedLines[(i + 1) % shedLines.length]
+          const angle1 = calculateAngle(shed.startPoint, shed.endPoint)
+          const angle2 = calculateAngle(nextShed.startPoint, nextShed.endPoint)
           return angle1 === angle2
+        })
+      }
+      if (!areShedLinesParallel(shedLines)) {
+        return false
       }
 
-      let isShedRoof = true
-      sheds.forEach((shed, i) => {
-        isShedRoof = areLinesParallel(shed, sheds[(i + 1) % sheds.length])
+      const getParallelEavesLines = function (shedLines, lines) {
+        const referenceAngle = calculateAngle(shedLines[0].startPoint, shedLines[0].endPoint)
+        const otherSideLines = lines.filter((line) => {
+          const lineAngle = calculateAngle(line.startPoint, line.endPoint)
+          return Math.abs(referenceAngle - lineAngle) === 180
         })
-      if (isShedRoof) {
-        const eaves = this.lines
-          .filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
-          .filter((line) => {
-            const angle1 = calculateAngle(sheds[0].startPoint, sheds[0].endPoint)
-            const angle2 = calculateAngle(line.startPoint, line.endPoint)
-            if (Math.abs(angle1 - angle2) === 180) {
-              return line
+        const containNotEaves = otherSideLines.filter((line) => line.attributes?.type !== LINE_TYPE.WALLLINE.EAVES)
+
+        if (containNotEaves.length === 0) {
+          return otherSideLines
+        } else {
+          return []
         }
-          })
-        if (eaves.length > 0) {
-          const gables = this.lines.filter((line) => sheds.includes(line) === false && eaves.includes(line) === false)
-          const isGable = gables.every((line) => gableType.includes(line.attributes.type))
-          if (isGable) {
+      }
+
+      const parallelEaves = getParallelEavesLines(shedLines, lines)
+      if (parallelEaves.length === 0) {
+        return false
+      }
+
+      const remainingLines = lines.filter((line) => !shedLines.includes(line) && !parallelEaves.includes(line))
+      return remainingLines.every((line) => gableTypes.includes(line.attributes.type))
+    }
+
+    if (types.every((type) => type === LINE_TYPE.WALLLINE.EAVES)) {
+      // 용마루 -- straight-skeleton
+      // console.log('용마루 지붕')
+      drawSkeletonRidgeRoof(this.id, this.canvas, textMode)
+    } else if (isGableRoof(types)) {
+      // A형, B형 박공 지붕
+      // console.log('패턴 지붕')
+      drawGableRoof(this.id, this.canvas, textMode)
+    } else if (isShedRoof(types, this.lines)) {
+      // console.log('한쪽흐름 지붕')
       drawShedRoof(this.id, this.canvas, textMode)
     } else {
-            drawRidgeRoof(this.id, this.canvas, textMode)
-          }
-        } else {
-          drawRidgeRoof(this.id, this.canvas, textMode)
-        }
-      } else {
-        drawRidgeRoof(this.id, this.canvas, textMode)
-      }
-    } else {
-      drawRidgeRoof(this.id, this.canvas, textMode)
+      // console.log('변별로 설정')
+      drawRoofByAttribute(this.id, this.canvas, textMode)
     }
   },
 
@@ -311,13 +400,31 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       const dy = Big(end.y).minus(Big(start.y))
       const length = dx.pow(2).plus(dy.pow(2)).sqrt().times(10).round().toNumber()
 
+      const direction = getDirectionByPoint(start, end)
+
+      let left, top
+
+      if (direction === 'bottom') {
+        left = (start.x + end.x) / 2 - 50
+        top = (start.y + end.y) / 2
+      } else if (direction === 'top') {
+        left = (start.x + end.x) / 2 + 30
+        top = (start.y + end.y) / 2
+      } else if (direction === 'left') {
+        left = (start.x + end.x) / 2
+        top = (start.y + end.y) / 2 - 30
+      } else if (direction === 'right') {
+        left = (start.x + end.x) / 2
+        top = (start.y + end.y) / 2 + 30
+      }
+
       let midPoint
 
-      midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
+      midPoint = new fabric.Point(left, top)
 
       const degree = Big(Math.atan2(dy.toNumber(), dx.toNumber())).times(180).div(Math.PI).toNumber()
 
-      // Create new text object if it doesn't exist
+      // Create a new text object if it doesn't exist
       const text = new fabric.Text(length.toString(), {
         left: midPoint.x,
         top: midPoint.y,
@@ -366,7 +473,15 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.canvas = canvas
   },
   fillCellABType(
-    cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1, isCellCenter: false },
+    cell = {
+      width: 50,
+      height: 100,
+      padding: 5,
+      wallDirection: 'left',
+      referenceDirection: 'none',
+      startIndex: -1,
+      isCellCenter: false,
+    },
   ) {
     const points = this.points
 
@@ -668,13 +783,115 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     return intersects % 2 === 1
   },
+
+  inPolygonImproved(point) {
+    const vertices = this.getCurrentPoints()
+    let inside = false
+    const testX = Number(point.x.toFixed(this.toFixed))
+    const testY = Number(point.y.toFixed(this.toFixed))
+
+    for (let i = 0, j = vertices.length - 1; i < vertices.length; j = i++) {
+      const xi = Number(vertices[i].x.toFixed(this.toFixed))
+      const yi = Number(vertices[i].y.toFixed(this.toFixed))
+      const xj = Number(vertices[j].x.toFixed(this.toFixed))
+      const yj = Number(vertices[j].y.toFixed(this.toFixed))
+
+      // 점이 정점 위에 있는지 확인
+      if (Math.abs(xi - testX) <= 0.01 && Math.abs(yi - testY) <= 0.01) {
+        return true
+      }
+
+      // 점이 선분 위에 있는지 확인
+      if (this.isPointOnSegment(point, { x: xi, y: yi }, { x: xj, y: yj })) {
+        return true
+      }
+
+      // Ray casting 알고리즘 - 부동소수점 정밀도 개선
+      if (yi > testY !== yj > testY) {
+        const denominator = yj - yi
+        if (Math.abs(denominator) > 1e-10) {
+          // 0으로 나누기 방지
+          const intersection = ((xj - xi) * (testY - yi)) / denominator + xi
+          if (testX < intersection) {
+            inside = !inside
+          }
+        }
+      }
+    }
+
+    return inside
+  },
+
+  isPointOnSegment(point, segStart, segEnd) {
+    const tolerance = 0.1
+    const dxSegment = segEnd.x - segStart.x
+    const dySegment = segEnd.y - segStart.y
+    const dxPoint = point.x - segStart.x
+    const dyPoint = point.y - segStart.y
+
+    // 벡터의 외적을 계산하여 점이 선분 위에 있는지 확인
+    const crossProduct = Math.abs(dxPoint * dySegment - dyPoint * dxSegment)
+
+    if (crossProduct > tolerance) {
+      return false
+    }
+
+    // 점이 선분의 범위 내에 있는지 확인
+    const dotProduct = dxPoint * dxSegment + dyPoint * dySegment
+    const squaredLength = dxSegment * dxSegment + dySegment * dySegment
+
+    return dotProduct >= 0 && dotProduct <= squaredLength
+  },
+  setCoords: function () {
+    // 부모 클래스의 setCoords 호출
+    this.callSuper('setCoords')
+
+    // QPolygon의 경우 추가 처리 - 항상 강제로 재계산
+    if (this.canvas) {
+      // 모든 좌표 관련 캐시 초기화
+      delete this.oCoords
+      delete this.aCoords
+      delete this.__corner
+
+      // 다시 부모 setCoords 호출
+      this.callSuper('setCoords')
+
+      // 한 번 더 강제로 bounding rect 재계산
+      this._clearCache && this._clearCache()
+    }
+  },
+
   containsPoint: function (point) {
+    // 먼저 좌표 업데이트
+    this.setCoords()
+
+    // viewport transform만 역변환 (캔버스 줌/팬 보정)
+    // 결과는 WORLD 좌표 (캔버스 좌표계)
+    let canvasPoint = point
+    if (this.canvas) {
+      const vpt = this.canvas.viewportTransform
+      if (vpt) {
+        const inverted = fabric.util.invertTransform(vpt)
+        canvasPoint = fabric.util.transformPoint(point, inverted)
+      }
+    }
+
+    // canvasPoint는 WORLD 좌표
+    // inPolygonImproved에서 getCurrentPoints()도 WORLD 좌표를 반환
+    // 따라서 좌표 시스템이 일치함
+    const checkPoint = {
+      x: Number(canvasPoint.x.toFixed(this.toFixed)),
+      y: Number(canvasPoint.y.toFixed(this.toFixed)),
+    }
+
     if (this.name === POLYGON_TYPE.ROOF && this.isFixed) {
-      const isInside = this.inPolygon(point)
+      const isInside = this.inPolygonImproved(checkPoint)
+      if (!this.selectable) {
         this.set('selectable', isInside)
+      }
       return isInside
     } else {
-      return this.callSuper('containsPoint', point)
+      return this.inPolygonImproved(checkPoint)
     }
   },
 

src/components/floor-plan/CanvasFrame.jsx

@@ -11,9 +11,9 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
-import { currentMenuState } from '@/store/canvasAtom'
+import { canvasZoomState, currentMenuState } from '@/store/canvasAtom'
 import { totalDisplaySelector } from '@/store/settingAtom'
-import { MENU, POLYGON_TYPE } from '@/common/common'
+import { POLYGON_TYPE } from '@/common/common'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { QcastContext } from '@/app/QcastProvider'
 import {
@@ -30,11 +30,15 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useEvent } from '@/hooks/useEvent'
 import { compasDegAtom } from '@/store/orientationAtom'
+import { hotkeyStore } from '@/store/hotkeyAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { outerLinePointsState } from '@/store/outerLineAtom'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
+  const { closeAll } = usePopup()
   const currentMenu = useRecoilValue(currentMenuState)
   const { floorPlanState } = useContext(FloorPlanContext)
   const { contextMenu, handleClick } = useContextMenu()
@@ -42,11 +46,13 @@ export default function CanvasFrame() {
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
   const { setIsGlobalLoading } = useContext(QcastContext)
   const resetModuleStatisticsState = useResetRecoilState(moduleStatisticsState)
+  const resetOuterLinePoints = useResetRecoilState(outerLinePointsState)
   const resetMakersState = useResetRecoilState(makersState)
   const resetSelectedMakerState = useResetRecoilState(selectedMakerState)
   const resetSeriesState = useResetRecoilState(seriesState)
   const resetModelsState = useResetRecoilState(modelsState)
   const resetCompasDeg = useResetRecoilState(compasDegAtom)
+  const [zoom, setCanvasZoom] = useRecoilState(canvasZoomState)
   const resetSelectedModelsState = useResetRecoilState(selectedModelsState)
   const resetPcsCheckState = useResetRecoilState(pcsCheckState)
   const { handleModuleSelectionTotal } = useCanvasPopupStatusController()
@@ -64,15 +70,45 @@ export default function CanvasFrame() {
           canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
           canvas?.renderAll() // 캔버스를 다시 그립니다.
 
-          if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length > 0) {
-            setSelectedMenu('module')
-          } else {
-            setSelectedMenu('surface')
+          if (canvas.viewportTransform) {
+            if (canvas.viewportTransform[0] !== 1) {
+              setCanvasZoom(Number((canvas.viewportTransform[0] * 100).toFixed(0)))
             }
+          }
+          canvas.originViewPortTransform = canvas.viewportTransform
+
+          if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length > 0) {
+            setTimeout(() => {
+              setSelectedMenu('module')
+            }, 500)
+          } else if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL).length > 0) {
+            setSelectedMenu('outline')
+          } else {
+            setTimeout(() => {
+              setSelectedMenu('surface')
+            }, 500)
+          }
+
+          const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+          roofs.forEach((roof) => {
+            const auxiliaryLines = canvas
+              .getObjects()
+              .filter((obj) => obj.name === 'auxiliaryLine' && roof.inPolygonImproved(obj.startPoint) && roof.inPolygonImproved(obj.endPoint))
+
+            auxiliaryLines.forEach((auxiliaryLine) => {
+              roof.innerLines.push(auxiliaryLine)
+            })
+          })
+
           initEvent()
         })
+      } else {
+        setSelectedMenu(null)
       }
       Object.keys(currentCanvasPlan).length > 0 && canvas && handleModuleSelectionTotal()
+    } else {
+      setSelectedMenu(null)
     }
     gridInit()
   }
@@ -92,6 +128,8 @@ export default function CanvasFrame() {
 
   useEffect(() => {
     setIsGlobalLoading(false)
+    // 혹시 모를 팝업이 떠있는 경우 닫고 시작한다.
+    closeAll()
 
     return () => {
       canvas?.clear()
@@ -101,6 +139,7 @@ export default function CanvasFrame() {
 
   const resetRecoilData = () => {
     // resetModuleStatisticsState()
+    resetOuterLinePoints()
     resetMakersState()
     resetSelectedMakerState()
     resetSeriesState()
@@ -110,6 +149,38 @@ export default function CanvasFrame() {
     resetPcsCheckState()
   }
 
+  /**
+   * 캔버스가 있을 경우 핫키 이벤트 처리
+   * hotkeyStore에 핫키 이벤트 리스너 추가
+   *
+   * const hotkeys = [
+   { key: 'c', fn: () => asdf() },
+   { key: 'v', fn: () => qwer() },
+   ]
+   setHotkeyStore(hotkeys)
+   */
+  const hotkeyState = useRecoilValue(hotkeyStore)
+  const hotkeyHandlerRef = useRef(null)
+
+  useEffect(() => {
+    hotkeyHandlerRef.current = (e) => {
+      hotkeyState.forEach((hotkey) => {
+        if (e.key === hotkey.key) {
+          hotkey.fn()
+        }
+      })
+    }
+
+    document.addEventListener('keyup', hotkeyHandlerRef.current)
+
+    return () => {
+      if (hotkeyHandlerRef.current) {
+        document.removeEventListener('keyup', hotkeyHandlerRef.current)
+      }
+    }
+  }, [hotkeyState])
+  /** 핫키 이벤트 처리 끝 */
+
   return (
     <div className="canvas-frame">
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>

src/components/floor-plan/CanvasLayout.jsx

@@ -31,12 +31,13 @@ export default function CanvasLayout({ children }) {
   return (
     <div className="canvas-layout">
       <div className={`canvas-page-list ${['outline', 'surface', 'module'].includes(selectedMenu) ? 'active' : ''}`}>
+        <div className="canvas-id">{objectNo}</div>
         <div className="canvas-plane-wrap">
           {plans.map((plan, index) => (
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
-              onClick={() => handleCurrentPlan(plan.id)}
+              onClick={() => (plan.isCurrent ? '' : handleCurrentPlan(plan.id))}
             >
               <span>{`Plan ${plan.planNo}`}</span>
               {plans.length > 1 && !pathname.includes('/estimate') && !pathname.includes('/simulator') && (

src/components/floor-plan/CanvasMenu.jsx

@@ -2,9 +2,9 @@
 
 import { useContext, useEffect, useState } from 'react'
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 
 import { v4 as uuidv4 } from 'uuid'
 
@@ -25,17 +25,18 @@ import { useCommonUtils } from '@/hooks/common/useCommonUtils'
 import useMenu from '@/hooks/common/useMenu'
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 import { useAxios } from '@/hooks/useAxios'
-import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
+import {
+  canvasSettingState,
+  canvasState,
+  canvasZoomState,
+  currentCanvasPlanState,
+  currentMenuState,
+  verticalHorizontalModeState,
+} from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-import {
-  addedRoofsState,
-  basicSettingState,
-  corridorDimensionSelector,
-  selectedRoofMaterialSelector,
-  settingModalFirstOptionsState,
-} from '@/store/settingAtom'
+import { addedRoofsState, basicSettingState, selectedRoofMaterialSelector, settingModalFirstOptionsState } from '@/store/settingAtom'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
 import { commonUtilsState } from '@/store/commonUtilsAtom'
 import { menusState } from '@/store/menuAtom'
@@ -50,7 +51,10 @@ import JA from '@/locales/ja.json'
 import { QcastContext } from '@/app/QcastProvider'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { usePolygon } from '@/hooks/usePolygon'
+import { useTrestle } from '@/hooks/module/useTrestle'
+
 export default function CanvasMenu(props) {
+  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const { selectedMenu, setSelectedMenu } = props
   const pathname = usePathname()
   const router = useRouter()
@@ -67,6 +71,7 @@ export default function CanvasMenu(props) {
   const globalLocale = useRecoilValue(globalLocaleStore)
   const canvas = useRecoilValue(canvasState)
   const { handleZoomClear, handleZoom } = useCanvasEvent()
+  const { setAllModuleSurfaceIsComplete, isAllComplete } = useTrestle()
   const { handleMenu } = useMenu()
   // const urlParams = useSearchParams()
   const { handleEstimateSubmit, fetchSetting, estimateContextState, setEstimateContextState } = useEstimateController()
@@ -96,7 +101,7 @@ export default function CanvasMenu(props) {
   const [lockButtonStyle, setLockButtonStyle] = useState('') //잠금 버튼
 
   const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
-
+  const resetCommonUtils = useResetRecoilState(commonUtilsState)
   // 발전시뮬레이션 메뉴 이동
   const { objectNo, pid } = floorPlanState
 
@@ -115,7 +120,7 @@ export default function CanvasMenu(props) {
 
     const params = {
       objectNo: objectNo,
-      planNo: selectedPlan.planNo,
+      planNo: selectedPlan?.planNo ? selectedPlan.planNo : pid,
       schDownload: donwloadType,
       schDrawingFlg: drawingFlg,
       pwrGnrSimType: pwrGnrSimTypeRecoil.type,
@@ -164,6 +169,7 @@ export default function CanvasMenu(props) {
   }
 
   const onClickNav = async (menu) => {
+    resetCommonUtils()
     switch (menu.type) {
       case 'drawing':
         swalFire({
@@ -192,8 +198,17 @@ export default function CanvasMenu(props) {
             text: getMessage('module.delete.confirm'),
             type: 'confirm',
             confirmFn: () => {
+              const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+              roofs.forEach((roof) => {
+                roof.set({
+                  stroke: 'black',
+                  strokeWidth: 3,
+                })
+              })
+
               //해당 메뉴 이동시 배치면 삭제
 
+              setAllModuleSurfaceIsComplete(false)
               const moduleSurfacesArray = canvas
                 .getObjects()
                 .filter((obj) => [POLYGON_TYPE.MODULE_SETUP_SURFACE, POLYGON_TYPE.MODULE, POLYGON_TYPE.OBJECT_SURFACE].includes(obj.name))
@@ -230,11 +245,18 @@ export default function CanvasMenu(props) {
           router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
           setSelectedMenu('module')
         }
-        await reloadCanvasStatus(objectNo, pid)
+        await reloadCanvasStatus(objectNo, currentCanvasPlan?.planNo ?? pid)
         break
       case 'estimate':
+        if (selectedMenu !== 'simulation') {
+          if (!isAllComplete()) {
+            swalFire({ text: getMessage('estimate.menu.move.valid1') })
+            return
+          }
+        }
+
         setIsGlobalLoading(true)
-        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.planNo}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan?.planNo ?? pid}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.estimateDate !== null) {
@@ -242,7 +264,7 @@ export default function CanvasMenu(props) {
               setCurrentMenu(menu.title)
               setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
               setIsGlobalLoading(false)
-              router.push(`/floor-plan/estimate/5?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/estimate/5?pid=${selectedPlan?.planNo ?? pid}&objectNo=${objectNo}`)
               if (pathname === '/floor-plan/estimate/5') {
                 setIsGlobalLoading(false)
               }
@@ -255,13 +277,13 @@ export default function CanvasMenu(props) {
         break
       case 'simulation':
         setIsGlobalLoading(true)
-        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.planNo}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan?.planNo ?? pid}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.estimateDate !== null && estimateDetail.docNo) {
               setSelectedMenu(menu.type)
               setCurrentMenu(menu.title)
-              router.push(`/floor-plan/simulator/6?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/simulator/6?pid=${selectedPlan?.planNo ?? pid}&objectNo=${objectNo}`)
               if (pathname === '/floor-plan/simulator/6') {
                 setIsGlobalLoading(false)
               }
@@ -303,7 +325,6 @@ export default function CanvasMenu(props) {
   const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
 
   useEffect(() => {
-    console.log(selectedMenu)
     if (selectedMenu === 'placement') {
       onClickPlacementInitialMenu()
     }
@@ -496,7 +517,10 @@ export default function CanvasMenu(props) {
                 if (createUser === 'T01' && sessionState.storeId !== 'T01') {
                   setAllButtonStyles('none')
                 } else {
-                  setEstimateContextState({ tempFlg: estimateRecoilState.tempFlg, lockFlg: estimateRecoilState.lockFlg })
+                  setEstimateContextState({
+                    tempFlg: estimateRecoilState.tempFlg,
+                    lockFlg: estimateRecoilState.lockFlg,
+                  })
                   handleButtonStyles(estimateRecoilState.tempFlg, estimateRecoilState.lockFlg, estimateContextState.docNo)
                 }
               }
@@ -548,13 +572,26 @@ export default function CanvasMenu(props) {
               {
                 <div className={`vertical-horizontal ${verticalHorizontalMode ? 'on' : ''}`}>
                   <span>{getMessage('plan.mode.vertical.horizontal')}</span>
-                  <button onClick={() => setVerticalHorizontalMode(!verticalHorizontalMode)}>{verticalHorizontalMode ? 'ON' : 'OFF'}</button>
+                  <button
+                    title={`${getMessage('plan.mode.vertical.horizontal')} ${verticalHorizontalMode ? 'ON' : 'OFF'}`}
+                    onClick={() => setVerticalHorizontalMode(!verticalHorizontalMode)}
+                  >
+                    {verticalHorizontalMode ? 'ON' : 'OFF'}
+                  </button>
                 </div>
               }
               <div className="btn-from">
-                <button className={`btn01 ${commonUtils.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
-                <button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
-                <button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
+                <button className={`btn01 ${commonUtils.text ? 'active' : ''}`} onClick={() => commonFunctions('text')} title="文字作成"></button>
+                <button
+                  className={`btn02 ${commonUtils.dimension ? 'active' : ''} `}
+                  onClick={() => commonFunctions('dimension')}
+                  title="寸法作成"
+                ></button>
+                <button
+                  className={`btn03 ${commonUtils.distance ? 'active' : ''} `}
+                  onClick={() => commonFunctions('distance')}
+                  title="定規"
+                ></button>
               </div>
               {isObjectNotEmpty(selectedRoofMaterial) && addedRoofs.length > 0 && (
                 <div className="select-box">
@@ -580,6 +617,7 @@ export default function CanvasMenu(props) {
                       sourceKey={'index'}
                       targetKey={'index'}
                       disabled={+basicSetting.roofSizeSet === 3}
+                      tagTitle={'屋根材変更'}
                     />
                   }
                 </div>
@@ -588,9 +626,10 @@ export default function CanvasMenu(props) {
                 <button
                   className={`btn10 ${floorPlanState.refFileModalOpen && 'active'}`}
                   onClick={() => setFloorPlanState({ ...floorPlanState, refFileModalOpen: true })}
+                  title="読込"
                 ></button>
                 {/*<button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>*/}
-                <button className="btn04" onClick={handlePopup}></button>
+                <button className="btn04" onClick={handlePopup} title="設定"></button>
               </div>
               <div className="size-control">
                 <button
@@ -599,7 +638,9 @@ export default function CanvasMenu(props) {
                     handleZoom(false)
                   }}
                 ></button>
-                <span onClick={handleZoomClear}>{canvasZoom}%</span>
+                <span onClick={handleZoomClear} title="拡大・縮小">
+                  {canvasZoom}%
+                </span>
                 <button
                   className="control-btn plus"
                   onClick={() => {
@@ -608,8 +649,8 @@ export default function CanvasMenu(props) {
                 ></button>
               </div>
               <div className="btn-from">
-                <button className="btn08" onClick={handleSaveCanvas}></button>
-                <button className="btn09" onClick={handleLeaveCanvas}></button>
+                <button className="btn08" onClick={handleSaveCanvas} title="保存"></button>
+                <button className="btn09" onClick={handleLeaveCanvas} title="物件検索画面へ移動"></button>
               </div>
             </>
           )}
@@ -634,7 +675,7 @@ export default function CanvasMenu(props) {
                   onClick={() => setEstimatePopupOpen(true)}
                 >
                   <span className="ico ico01"></span>
-                  <span className="name">{getMessage('plan.menu.estimate.docDown')}</span>
+                  <span className="name">{getMessage('plan.menu.estimate.docDownload')}</span>
                 </button>
                 <button type="button" style={{ display: saveButtonStyle }} className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
                   <span className="ico ico02"></span>

src/components/floor-plan/FloorPlan.jsx

@@ -1,15 +1,19 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { usePopup } from '@/hooks/usePopup'
 import '@/styles/contents.scss'
 import { notFound, useSearchParams } from 'next/navigation'
-import { useRecoilState, useResetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { correntObjectNoState } from '@/store/settingAtom'
 import { currentMenuState } from '@/store/canvasAtom'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useAxios } from '@/hooks/useAxios'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { sessionStore } from '@/store/commonAtom'
 
 export default function FloorPlan({ children }) {
   const [correntObjectNo, setCurrentObjectNo] = useRecoilState(correntObjectNoState)
@@ -20,12 +24,46 @@ export default function FloorPlan({ children }) {
   const { selectedMenu, setSelectedMenu } = useCanvasMenu()
   const { fetchSettings } = useCanvasSetting()
   const resetCurrentMenu = useResetRecoilState(currentMenuState)
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { promiseGet } = useAxios(globalLocaleState)
+  const { setManagementState } = useContext(GlobalDataContext)
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+
   useEffect(() => {
+    getStuffDetailInfo()
+
     return () => {
       resetCurrentMenu()
     }
   }, [])
 
+  const getStuffDetailInfo = () => {
+    promiseGet({ url: `/api/object/${objectNo}/detail` }).then((res) => {
+      if (res.status === 200) {
+        const { data } = res
+        console.log(data)
+
+        let surfaceTypeValue
+        if (res.data.surfaceType === 'Ⅲ・Ⅳ') {
+          surfaceTypeValue = '3'
+        } else if (res.data.surfaceType === 'Ⅱ') {
+          surfaceTypeValue = '2'
+        }
+        //설치높이 0이면 빈값으로로 셋팅
+        if (res.data.installHeight === '0') {
+          res.data.installHeight = ''
+        }
+
+        setSessionState((prev) => ({
+          ...prev,
+          oneTwoStoreId: res.data.saleStoreId
+        }));
+
+        setManagementState({ ...res.data, surfaceTypeValue: surfaceTypeValue })
+      }
+    })
+  }
+
   /**
    * URL 파라미터에서 objectNo 설정
    */

src/components/floor-plan/MenuDepth01.jsx

@@ -5,9 +5,10 @@ import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import useMenu from '@/hooks/common/useMenu'
 import { canvasState, currentMenuState } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { subMenusState } from '@/store/menuAtom'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
 
 export default function MenuDepth01() {
   const canvas = useRecoilValue(canvasState)
@@ -16,8 +17,10 @@ export default function MenuDepth01() {
   const { selectedMenu, setSelectedMenu } = useCanvasMenu()
   const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
   const subMenus = useRecoilValue(subMenusState)
+  const resetCommonUtils = useResetRecoilState(commonUtilsState)
 
   const onClickMenu = ({ id, menu }) => {
+    resetCommonUtils()
     if (menu === currentMenu) {
       handleMenu(selectedMenu)
     } else {

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

@@ -120,7 +120,7 @@ export default function ImgLoad() {
                   value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
                   readOnly
                 />
-                {refImage && <button className="img-check" onClick={handleFileDelete}></button>}
+                {currentCanvasPlan?.bgImageName && <button className="img-check" onClick={handleFileDelete}></button>}
               </div>
             </div>
           </div>

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

@@ -4,6 +4,7 @@ import { globalPitchState, pitchSelector, pitchTextSelector } from '@/store/canv
 import { useRecoilState } from 'recoil'
 import { useRef } from 'react'
 import { usePopup } from '@/hooks/usePopup'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Slope({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
@@ -22,7 +23,19 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
               {getMessage('slope')}
             </span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
+              {/*<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                ref={inputRef}
+                value={globalPitch}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: true //(index !== 0),
+                }}
+              ></CalculatorInput>
             </div>
             <span className="thin">{pitchText}</span>
           </div>

src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -8,8 +8,12 @@ import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
 import { usePopup } from '@/hooks/usePopup'
+import { useEffect } from 'react'
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
 
 export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
+  const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
 
@@ -52,6 +56,15 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     cutAuxiliary,
   } = useAuxiliaryDrawing(id)
 
+  useEffect(() => {
+    return () => {
+      const auxiliaryLines = canvas.getObjects().filter((line) => line.name === 'auxiliaryLine' && !line.isAuxiliaryFixed) // 보조선이 그려져 있는 경우 물어본다.
+      if (auxiliaryLines.length > 0) {
+        handleFix()
+      }
+    }
+  }, [])
+
   const outerLineProps = {
     length1,
     setLength1,

src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx

@@ -7,6 +7,8 @@ import { useState } from 'react'
 import { currentObjectState } from '@/store/canvasAtom'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
 import { useSwal } from '@/hooks/useSwal'
+import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function AuxiliaryEdit(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -40,15 +42,15 @@ export default function AuxiliaryEdit(props) {
       if (currentObject) {
         copy(
           currentObject,
-          arrow2 ? (arrow2 === '←' ? Number(horizonSize) * -1 : Number(horizonSize)) : 0,
-          arrow1 ? (arrow1 === '↑' ? Number(verticalSize) * -1 : Number(verticalSize)) : 0,
+          arrow2 ? (arrow2 === '←' ? (Number(normalizeDigits(horizonSize)) / 10) * -1 : Number(normalizeDigits(horizonSize)) / 10) : 0,
+          arrow1 ? (arrow1 === '↑' ? (Number(normalizeDigits(verticalSize)) / 10) * -1 : Number(normalizeDigits(verticalSize)) / 10) : 0,
         )
       }
     } else {
       move(
         currentObject,
-        arrow2 ? (arrow2 === '←' ? Number(horizonSize) * -1 : Number(horizonSize)) : 0,
-        arrow1 ? (arrow1 === '↑' ? Number(verticalSize) * -1 : Number(verticalSize)) : 0,
+        arrow2 ? (arrow2 === '←' ? (Number(normalizeDigits(horizonSize)) / 10) * -1 : Number(normalizeDigits(horizonSize)) / 10) : 0,
+        arrow1 ? (arrow1 === '↑' ? (Number(normalizeDigits(verticalSize)) / 10) * -1 : Number(normalizeDigits(verticalSize)) / 10) : 0,
       )
     }
 
@@ -65,7 +67,19 @@ export default function AuxiliaryEdit(props) {
               <p className="mb5">{getMessage('length')}</p>
               <div className="input-move-wrap mb5">
                 <div className="input-move">
-                  <input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(e.target.value)} />
+                  {/*<input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(normalizeDigits(e.target.value))} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={verticalSize}
+                    onChange={(value) => setVerticalSize(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
                 </div>
                 <span>mm</span>
                 <div className="direction-move-wrap">
@@ -87,7 +101,19 @@ export default function AuxiliaryEdit(props) {
               </div>
               <div className="input-move-wrap">
                 <div className="input-move">
-                  <input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(e.target.value)} />
+                  {/*<input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(normalizeDigits(e.target.value))} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={horizonSize}
+                    onChange={(value) => setHorizonSize(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
                 </div>
                 <span>mm</span>
                 <div className="direction-move-wrap">

src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx

@@ -7,19 +7,22 @@ import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import Big from 'big.js'
 import { calcLineActualSize, calcLinePlaneSize } from '@/util/qpolygon-utils'
+import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function AuxiliarySize(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const [checkedRadio, setCheckedRadio] = useState(null)
-  const [value1, setValue1] = useState(null)
-  const [value2, setValue2] = useState(null)
+  const [value1, setValue1] = useState('')
+  const [value2, setValue2] = useState('')
   const [size, setSize] = useState(0)
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const currentObject = useRecoilValue(currentObjectState)
   const canvas = useRecoilValue(canvasState)
 
+
   useEffect(() => {
     return () => {
       canvas?.discardActiveObject()
@@ -36,13 +39,14 @@ export default function AuxiliarySize(props) {
   }, [currentObject])
 
   const handleInput = (e) => {
-    let value = e.target.value.replace(/^0+/, '')
+    let value = e.replace(/^0+/, '')
     if (value === '') {
       if (checkedRadio === 1) setValue1(value)
       if (checkedRadio === 2) setValue2(value)
       setSize(0)
     } else {
-      value = Big(value.replace(/[^0-9]/g, ''))
+      //value = Big(value.replace(/[^0-9]/g, ''))
+      value = Big(normalizeDigits(value))
       if (checkedRadio === 1) setValue1(value.toNumber())
       if (checkedRadio === 2) setValue2(value.toNumber())
       setSize(value.div(10).toNumber())
@@ -128,7 +132,20 @@ export default function AuxiliarySize(props) {
           <div className="outline-form">
             <span style={{ width: 'auto' }}>{getMessage('length')}</span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />
+              {/*<input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                value={value1}
+                onChange={handleInput}
+                readOnly={checkedRadio !== 1}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
+              />
             </div>
             <span className="thin">mm</span>
           </div>
@@ -147,7 +164,20 @@ export default function AuxiliarySize(props) {
           <div className="outline-form">
             <span style={{ width: 'auto' }}>{getMessage('length')}</span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />
+              {/*<input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                value={value2}
+                onChange={handleInput}
+                readOnly={checkedRadio !== 2}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
+              />
             </div>
             <span className="thin">mm</span>
           </div>

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -1,109 +1,89 @@
-import { useMessage } from '@/hooks/useMessage'
+import { MODULE_SETUP_TYPE, POLYGON_TYPE } from '@/common/common'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useContext, useEffect, useRef, useState } from 'react'
-import Module from '@/components/floor-plan/modal/basic/step/Module'
-import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
+import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
 import Placement from '@/components/floor-plan/modal/basic/step/Placement'
-import { useRecoilValue, useRecoilState } from 'recoil'
-import { canvasSettingState, canvasState, checkedModuleState, isManualModuleSetupState } from '@/store/canvasAtom'
-import { usePopup } from '@/hooks/usePopup'
-import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
-import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { useEvent } from '@/hooks/useEvent'
-import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
-import { addedRoofsState, corridorDimensionSelector, basicSettingState } from '@/store/settingAtom'
-import { isObjectNotEmpty } from '@/util/common-utils'
-import Swal from 'sweetalert2'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { useMasterController } from '@/hooks/common/useMasterController'
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
+import { useModuleSelection } from '@/hooks/module/useModuleSelection'
+import { useOrientation } from '@/hooks/module/useOrientation'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import {
+  canvasState,
+  checkedModuleState,
+  currentCanvasPlanState,
+  isManualModuleLayoutSetupState,
+  isManualModuleSetupState,
+  toggleManualSetupModeState,
+} from '@/store/canvasAtom'
 import { loginUserStore } from '@/store/commonAtom'
-import { currentCanvasPlanState } from '@/store/canvasAtom'
-import { POLYGON_TYPE } from '@/common/common'
+import { roofsState } from '@/store/roofAtom'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { addedRoofsState, basicSettingState } from '@/store/settingAtom'
+import { isObjectNotEmpty } from '@/util/common-utils'
+import { useEffect, useRef, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import Swal from 'sweetalert2'
+import Trestle from './step/Trestle'
 
 export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [tabNum, setTabNum] = useState(1)
-  const canvasSetting = useRecoilValue(canvasSettingState)
   const orientationRef = useRef(null)
-  const { initEvent } = useEvent()
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
-  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-  const addedRoofs = useRecoilValue(addedRoofsState)
+  const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
+  const trestleRef = useRef(null)
+  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
+  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
   const loginUserState = useRecoilValue(loginUserStore)
   const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   const canvas = useRecoilValue(canvasState)
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
   const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState)
+  const [roofs, setRoofs] = useState(addedRoofs)
+  const [manualSetupMode, setManualSetupMode] = useRecoilState(toggleManualSetupModeState)
+  const [layoutSetup, setLayoutSetup] = useState([{}])
+  const {
+    selectedModules,
+    roughnessCodes,
+    windSpeedCodes,
+    managementState,
+    setManagementState,
+    moduleList,
+    setSelectedModules,
+    selectedSurfaceType,
+    setSelectedSurfaceType,
+    installHeight,
+    setInstallHeight,
+    standardWindSpeed,
+    setStandardWindSpeed,
+    verticalSnowCover,
+    setVerticalSnowCover,
+    handleChangeModule,
+    handleChangeSurfaceType,
+    handleChangeWindSpeed,
+    handleChangeInstallHeight,
+    handleChangeVerticalSnowCover,
+  } = useModuleSelection({ addedRoofs })
+  const { nextStep, compasDeg, setCompasDeg } = useOrientation()
+  const { trigger: orientationTrigger } = useCanvasPopupStatusController(1)
+  const { trigger: trestleTrigger } = useCanvasPopupStatusController(2)
+  const { trigger: placementTrigger } = useCanvasPopupStatusController(3)
+  const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
+  const [isFold, setIsFold] = useState(false)
 
   // const { initEvent } = useContext(EventContext)
-  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting(tabNum)
+  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup, restoreModuleInstArea } =
+    useModuleBasicSetting(tabNum)
   const { updateObjectDate } = useMasterController()
 
-  const handleBtnNextStep = () => {
-    if (tabNum === 1) {
-      orientationRef.current.handleNextStep()
-    } else if (tabNum === 2) {
-      if (basicSetting.roofSizeSet !== '3') {
-        if (!isObjectNotEmpty(moduleSelectionData.module)) {
-          Swal.fire({
-            title: getMessage('module.not.found'),
-            icon: 'warning',
-          })
-          return
-        }
-
-        if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
-          Swal.fire({
-            title: getMessage('construction.length.difference'),
-            icon: 'warning',
-          })
-          return
-        }
-        //물건정보 갱신일 수정
-        updateObjectDataApi({
-          objectNo: currentCanvasPlan.objectNo, //오브젝트_no
-          standardWindSpeedId: moduleSelectionData.common.stdWindSpeed, //기준풍속코드
-          verticalSnowCover: moduleSelectionData.common.stdSnowLd, //적설량
-          surfaceType: moduleSelectionData.common.illuminationTpNm, //면조도구분
-          installHeight: moduleSelectionData.common.instHt, //설치높이
-          userId: loginUserState.userId, //작성자아아디
-        })
-      } else {
-        if (!isObjectNotEmpty(moduleSelectionData.module)) {
-          Swal.fire({
-            title: getMessage('module.not.found'),
-            icon: 'warning',
-          })
-          return
-        }
-      }
-    }
-
-    setTabNum(tabNum + 1)
-  }
-
-  const placementRef = {
-    isChidori: useRef('false'),
-    setupLocation: useRef('eaves'),
-    isMaxSetup: useRef('false'),
-  }
-
-  const placementFlatRef = {
-    setupLocation: useRef('south'),
-  }
-
-  const handleManualModuleSetup = () => {
-    setIsManualModuleSetup(!isManualModuleSetup)
-  }
-
-  const updateObjectDataApi = async (params) => {
-    const res = await updateObjectDate(params)
-  }
-
   useEffect(() => {
+    const moduleTabNum = basicSetting.roofSizeSet != 3 ? 3 : 2
+
     let hasModules = canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
@@ -111,23 +91,42 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
     if (hasModules) {
       orientationRef.current.handleNextStep()
-      setTabNum(3)
+      setTabNum(moduleTabNum)
     }
   }, [])
 
-  //팝업 닫기 버튼 이벤트
-  const handleClosePopup = (id) => {
-    if (tabNum == 3) {
-      if (isManualModuleSetup) {
-        setIsManualModuleSetup(false)
+  useEffect(() => {
+    if (roofsStore && addedRoofs) {
+      setRoofs(
+        addedRoofs.map((roof, index) => {
+          return {
+            ...roof,
+            ...roofsStore[index]?.addRoof,
+            construction: roofsStore[index]?.construction,
+            trestle: roofsStore[index]?.trestle,
+            trestleDetail: roofsStore[index]?.trestleDetail,
           }
+        }),
+      )
+
+      setModuleSelectionData({
+        ...moduleSelectionData,
+        roofConstructions: roofsStore.map((roof) => {
+          return {
+            roofIndex: roof.roofIndex,
+            addRoof: roof.addRoof,
+            construction: roof.construction,
+            trestle: roof.trestle,
+            trestleDetail: roof.trestleDetail,
           }
-    setIsClosePopup({ close: true, id: id })
+        }),
+      })
     }
+  }, [roofsStore, addedRoofs])
 
   useEffect(() => {
     if (basicSetting.roofSizeSet !== '3') {
-      manualModuleSetup(placementRef)
+      manualModuleSetup()
     } else {
       manualFlatroofModuleSetup(placementFlatRef)
     }
@@ -140,55 +139,231 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     setIsManualModuleSetup(false)
   }, [checkedModules])
 
+  useEffect(() => {
+    if (basicSetting.roofSizeSet !== '3') {
+      if (manualSetupMode.indexOf('manualSetup') > -1) {
+        manualModuleSetup()
+      } else if (manualSetupMode.indexOf('manualLayoutSetup') > -1) {
+        manualModuleLayoutSetup(layoutSetup)
+      } else if (manualSetupMode.indexOf('off') > -1) {
+        manualModuleSetup()
+        manualModuleLayoutSetup(layoutSetup)
+      }
+    } else {
+      manualFlatroofModuleSetup(placementFlatRef)
+    }
+
+    if (isClosePopup.close) {
+      closePopup(isClosePopup.id)
+    }
+  }, [manualSetupMode, isClosePopup])
+
+  useEffect(() => {
+    if (isManualModuleLayoutSetup) {
+      manualModuleLayoutSetup(layoutSetup)
+    }
+  }, [layoutSetup])
+
+  useEffect(() => {
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode(`off`)
+  }, [checkedModules])
+
+  const handleBtnNextStep = () => {
+    if (tabNum === 1) {
+      orientationRef.current.handleNextStep()
+      setAddedRoofs(roofs)
+      // setTabNum(tabNum + 1)
+      return
+    } else if (tabNum === 2) {
+      if (basicSetting.roofSizeSet !== '3') {
+        // if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
+        //   Swal.fire({
+        //     title: getMessage('construction.length.difference'),
+        //     icon: 'warning',
+        //   })
+        //   return
+        // }
+        trestleRef.current.isComplete().then((res) => {
+          if (!res) return
+        })
+        //물건정보 갱신일 수정
+      } else {
+        if (!isObjectNotEmpty(moduleSelectionData.module)) {
+          Swal.fire({
+            title: getMessage('module.not.found'),
+            icon: 'warning',
+          })
+          return
+        }
+
+        setTabNum(tabNum + 1)
+      }
+    }
+  }
+
+  const placementFlatRef = {
+    setupLocation: useRef('south'),
+  }
+
+  const handleManualModuleSetup = () => {
+    setManualSetupMode(`manualSetup_${!isManualModuleSetup}`)
+    setIsManualModuleSetup(!isManualModuleSetup)
+  }
+
+  const handleManualModuleLayoutSetup = () => {
+    setManualSetupMode(`manualLayoutSetup_${!isManualModuleLayoutSetup}`)
+    setIsManualModuleLayoutSetup(!isManualModuleLayoutSetup)
+  }
+
+  const updateObjectDataApi = async (params) => {
+    const res = await updateObjectDate(params)
+  }
+
+  //팝업 닫기 버튼 이벤트
+  const handleClosePopup = (id) => {
+    if (tabNum == 3) {
+      if (isManualModuleSetup) {
+        setIsManualModuleSetup(false)
+      }
+      if (isManualModuleLayoutSetup) {
+        setIsManualModuleLayoutSetup(false)
+      }
+    }
+    setIsClosePopup({ close: true, id: id })
+  }
+
+  const orientationProps = {
+    roofs,
+    setRoofs,
+    tabNum,
+    setTabNum,
+    compasDeg, // 방위각
+    setCompasDeg,
+    selectedModules,
+    moduleSelectionData,
+    setModuleSelectionData,
+    roughnessCodes, // 면조도 목록
+    windSpeedCodes, // 기준풍속 목록
+    managementState,
+    setManagementState,
+    moduleList, // 모듈 리스트
+    setSelectedModules,
+    selectedSurfaceType,
+    setSelectedSurfaceType,
+    installHeight, // 설치높이
+    setInstallHeight,
+    standardWindSpeed, // 기준풍속
+    setStandardWindSpeed,
+    verticalSnowCover, // 적설량
+    setVerticalSnowCover,
+    currentCanvasPlan,
+    loginUserState,
+    handleChangeModule,
+    handleChangeSurfaceType,
+    handleChangeWindSpeed,
+    handleChangeInstallHeight,
+    handleChangeVerticalSnowCover,
+    orientationTrigger,
+    nextStep,
+    updateObjectDataApi,
+  }
+  const trestleProps = {
+    roofs,
+    setRoofs,
+    setRoofsStore,
+    tabNum,
+    setTabNum,
+    moduleSelectionData,
+    setModuleSelectionData,
+    trestleTrigger,
+  }
+  const placementProps = {}
+
   return (
-    <WithDraggable isShow={true} pos={pos} className="lx-2">
-      <WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
+    <WithDraggable isShow={true} pos={pos} className={basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' ? 'll' : 'lx-2'}>
+      <WithDraggable.Header
+        title={getMessage('plan.menu.module.circuit.setting.default')}
+        isFold={isFold}
+        onClose={() => handleClosePopup(id)}
+        onFold={() => setIsFold(!isFold)}
+      />
       <WithDraggable.Body>
+        <div style={{ display: isFold ? 'none' : 'block' }}>
           <div className="roof-module-tab">
             <div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
             <span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
+            {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
+              <>
                 <div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
                 <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
                 <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+              </>
+            )}
+            {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
+              <>
+                <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+              </>
+            )}
           </div>
-        {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
+          {tabNum === 1 && <Orientation ref={orientationRef} {...orientationProps} />}
           {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
-
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Trestle ref={trestleRef} {...trestleProps} />}
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
+            <Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
+          )}
           {/*배치면 초기설정 - 입력방법: 육지붕*/}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
+          {/* {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && <PitchModule setTabNum={setTabNum} />} */}
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
             <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
           )}
+        </div>
 
         <div className="grid-btn-wrap">
+          {/* {tabNum === 1 && <button className="btn-frame modal mr5">{getMessage('modal.common.save')}</button>} */}
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
+            <>
               {tabNum !== 1 && (
                 <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
                   {getMessage('modal.module.basic.setting.prev')}
                 </button>
               )}
-          {/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/}
               {tabNum !== 3 && (
                 <button className="btn-frame modal" onClick={handleBtnNextStep}>
                   Next
                 </button>
               )}
-
               {tabNum === 3 && (
                 <>
-              {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
-                <>
+                  <button className={`btn-frame modal mr5 ${isManualModuleLayoutSetup ? 'act' : ''}`} onClick={handleManualModuleLayoutSetup}>
+                    {getMessage('modal.module.basic.setting.row.batch')}
+                  </button>
+                  <button className="btn-frame modal mr5" onClick={() => autoModuleSetup(MODULE_SETUP_TYPE.LAYOUT, layoutSetup)}>
+                    {getMessage('modal.module.basic.setting.auto.row.batch')}
+                  </button>
                   <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
                     {getMessage('modal.module.basic.setting.passivity.placement')}
                   </button>
-                  <button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
+                  <button className="btn-frame modal act mr5" onClick={() => autoModuleSetup(MODULE_SETUP_TYPE.AUTO)}>
                     {getMessage('modal.module.basic.setting.auto.placement')}
                   </button>
                 </>
               )}
+            </>
+          )}
           {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
             <>
+              {tabNum === 1 && (
+                <button className="btn-frame modal" onClick={handleBtnNextStep}>
+                  Next
+                </button>
+              )}
+              {tabNum === 2 && (
+                <>
+                  <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
+                    {getMessage('modal.module.basic.setting.prev')}
+                  </button>
                   <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
                     {getMessage('modal.module.basic.setting.passivity.placement')}
                   </button>

src/components/floor-plan/modal/basic/step/Module.jsx

@@ -10,6 +10,8 @@ import { useDebounceValue } from 'usehooks-ts'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { isObjectNotEmpty } from '@/util/common-utils'
+import { normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Module({ setTabNum }) {
   const { getMessage } = useMessage()
@@ -184,11 +186,23 @@ export default function Module({ setTabNum }) {
                   <div className="eaves-keraba-td">
                     <div className="outline-form">
                       <div className="grid-select mr10">
-                        <input
-                          type="text"
+                        {/*<input*/}
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputInstallHeight}*/}
+                        {/*  onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => setInputInstallHeight(e.target.value)}
+                          onChange={(value) => setInputInstallHeight(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">m</span>
@@ -221,11 +235,23 @@ export default function Module({ setTabNum }) {
                   <div className="eaves-keraba-td">
                     <div className="outline-form">
                       <div className="grid-select mr10">
-                        <input
-                          type="text"
+                        {/*<input*/}
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputVerticalSnowCover}*/}
+                        {/*  onChange={(e) => setInputVerticalSnowCover(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
                           value={inputVerticalSnowCover}
-                          onChange={(e) => setInputVerticalSnowCover(e.target.value)}
+                          onChange={(value) => setInputVerticalSnowCover(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">cm</span>

src/components/floor-plan/modal/basic/step/Orientation.jsx

@@ -1,54 +1,399 @@
-import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
+import { forwardRef, use, useContext, useEffect, useImperativeHandle, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { useOrientation } from '@/hooks/module/useOrientation'
 import { getDegreeInOrientation } from '@/util/canvas-util'
 import { numberCheck } from '@/util/common-utils'
-import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { addedRoofsState, basicSettingState } from '@/store/settingAtom'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { roofsState } from '@/store/roofAtom'
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+import Swal from 'sweetalert2'
+import { normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export const Orientation = forwardRef(({ tabNum }, ref) => {
+export const Orientation = forwardRef((props, ref) => {
   const { getMessage } = useMessage()
-
-  const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController(1)
-
-  const { nextStep, compasDeg, setCompasDeg } = useOrientation()
-
+  const { findCommonCode } = useCommonCode()
   const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
+  const basicSetting = useRecoilValue(basicSettingState)
+  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) //지붕재 선택
+  const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
+  const [roofTab, setRoofTab] = useState(0) //지붕재 탭
+  const [selectedModuleSeries, setSelectedModuleSeries] = useState(null)
+  const [moduleSeriesList, setModuleSeriesList] = useState([])
+  const [filteredModuleList, setFilteredModuleList] = useState([])
+  const {
+    roofs,
+    setRoofs,
+    tabNum,
+    setTabNum,
+    compasDeg,
+    setCompasDeg,
+    selectedModules,
+    roughnessCodes,
+    windSpeedCodes,
+    managementState,
+    setManagementState,
+    moduleList,
+    moduleSelectionData,
+    setModuleSelectionData,
+    setSelectedModules,
+    selectedSurfaceType,
+    setSelectedSurfaceType,
+    installHeight,
+    setInstallHeight,
+    standardWindSpeed,
+    setStandardWindSpeed,
+    verticalSnowCover,
+    setVerticalSnowCover,
+    orientationTrigger,
+    nextStep,
+    currentCanvasPlan,
+    loginUserState,
+    updateObjectDataApi,
+  } = props
+  const [inputCompasDeg, setInputCompasDeg] = useState(compasDeg ?? 0)
+  const [inputInstallHeight, setInputInstallHeight] = useState('0')
+  const [inputMargin, setInputMargin] = useState('0')
+  const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState('0')
+  const [inputRoughness, setInputRoughness] = useState(selectedSurfaceType)
+  const [inputStandardWindSpeed, setInputStandardWindSpeed] = useState(standardWindSpeed)
+  const { restoreModuleInstArea } = useModuleBasicSetting()
+  const moduleData = {
+    header: [
+      { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
+      {
+        name: `${getMessage('height')}  (mm)`,
+        prop: 'height',
+      },
+      { name: `${getMessage('width')} (mm)`, prop: 'width' },
+      { name: `${getMessage('output')} (W)`, prop: 'output' },
+    ],
+  }
+
+  const allOption = {
+    moduleSerCd: 'ALL',
+    moduleSerNm: getMessage("board.sub.total") || 'ALL'
+  };
+
+  useEffect(() => {
+    if (basicSetting.roofSizeSet === '3') {
+      restoreModuleInstArea()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (moduleSelectionData?.common) {
+      setInputMargin(moduleSelectionData?.common?.margin)
+    }
+  }, [moduleSelectionData])
+
+  useEffect(() => {
+    if (selectedModules) {
+      const foundModule = moduleList.find((module) => module.itemId === selectedModules.itemId)
+      if (foundModule) {
+        setSelectedModules(foundModule)
+
+        // 선택된 모듈의 시리즈로 업데이트 (시리즈 목록이 있는 경우에만)
+        if (moduleSeriesList.length > 0 && foundModule.moduleSerCd) {
+          const currentSeries = moduleSeriesList.find(series => series.moduleSerCd === foundModule.moduleSerCd)
+          if (currentSeries && (!selectedModuleSeries || selectedModuleSeries.moduleSerCd !== currentSeries.moduleSerCd)) {
+            //setSelectedModuleSeries(currentSeries)
+          }
+        }else{
+          setSelectedModuleSeries(allOption)
+        }
+      }
+    }
+  }, [selectedModules, moduleList, moduleSeriesList])
+
+  useEffect(() => {
+    if (selectedSurfaceType) {
+      setInputRoughness(roughnessCodes.find((code) => code.clCode === managementState?.surfaceTypeValue))
+    }
+  }, [selectedSurfaceType])
+
+  useEffect(() => {
+    if (standardWindSpeed) setInputStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === managementState?.standardWindSpeedId))
+  }, [standardWindSpeed])
+
+  useEffect(() => {
+    if (managementState?.installHeight && managementState?.installHeight) {
+      setSelectedSurfaceType(roughnessCodes.find((code) => code.clCode === managementState?.surfaceTypeValue))
+      setInputInstallHeight(managementState?.installHeight)
+      setStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === managementState?.standardWindSpeedId))
+      setInputVerticalSnowCover(managementState?.verticalSnowCover)
+    }
+  }, [managementState])
 
   useImperativeHandle(ref, () => ({
     handleNextStep,
   }))
 
   const handleNextStep = () => {
-    nextStep()
-    canvasPopupStatusTrigger(compasDeg)
+    if (isComplete()) {
+      const common = {
+        illuminationTp: inputRoughness.clCode,
+        illuminationTpNm: inputRoughness.clCodeNm,
+        instHt: inputInstallHeight,
+        stdWindSpeed: inputStandardWindSpeed?.clCode,
+        stdSnowLd: inputVerticalSnowCover,
+        saleStoreNorthFlg: managementState?.saleStoreNorthFlg,
+        moduleTpCd: selectedModules.itemTp,
+        moduleItemId: selectedModules.itemId,
+        margin: inputMargin,
       }
+      setCompasDeg(inputCompasDeg)
+      setInstallHeight(inputInstallHeight)
+      setVerticalSnowCover(inputVerticalSnowCover)
+      setSelectedSurfaceType(inputRoughness)
+      setStandardWindSpeed(inputStandardWindSpeed)
+      nextStep(inputCompasDeg)
+      setManagementState({
+        ...managementState,
+        installHeight: inputInstallHeight,
+        verticalSnowCover: inputVerticalSnowCover,
+        standardWindSpeedId: inputStandardWindSpeed?.clCode,
+        surfaceType: inputRoughness.clCodeNm,
+        surfaceTypeValue: inputRoughness.clCode,
+      })
+      setModuleSelectionData({
+        ...moduleSelectionData,
+        module: {
+          ...selectedModules,
+        },
+        common,
+      })
+      orientationTrigger({
+        compasDeg: inputCompasDeg,
+        common: common,
+        module: {
+          ...selectedModules,
+        },
+        margin: inputMargin,
+      })
+      updateObjectDataApi({
+        objectNo: currentCanvasPlan.objectNo, //오브젝트_no
+        standardWindSpeedId: inputStandardWindSpeed?.clCode, //기준풍속코드
+        verticalSnowCover: inputVerticalSnowCover, //적설량
+        surfaceType: inputRoughness.clCodeNm, //면조도구분
+        installHeight: inputInstallHeight, //설치높이
+        userId: loginUserState.userId, //작성자아아디
+      })
+      setTabNum(2)
+    } else {
+      if (!selectedModules || !selectedModules.itemId) {
+        Swal.fire({
+          title: getMessage('module.not.found'),
+          icon: 'warning',
+        })
 
-  useEffect(() => {
-    checkDegree(compasDeg)
-  }, [compasDeg])
+      }
+    }
+  }
 
   const checkDegree = (e) => {
     if (e === '-0' || e === '-') {
-      setCompasDeg('-')
+      setInputCompasDeg('-')
       return
     }
     if (e === '0-') {
-      setCompasDeg('-0')
+      setInputCompasDeg('-0')
       return
     }
-    if (Number(e) >= -180 && Number(e) <= 180) {
-      if (numberCheck(Number(e))) {
-        setCompasDeg(Number(e))
+    const n = Number(normalizeDecimal(e))
+    if (n >= -180 && n <= 180) {
+      if (numberCheck(n)) {
+        setInputCompasDeg(n)
       }
     } else {
-      setCompasDeg(compasDeg)
+      setInputCompasDeg(compasDeg)
     }
   }
 
+  const isComplete = () => {
+    if (!selectedModules || !selectedModules.itemId) return false
+    if (basicSetting && basicSetting.roofSizeSet !== '3') {
+      if (inputInstallHeight <= 0) {
+        return false
+      }
+
+      if (+inputVerticalSnowCover <= 0) {
+        return false
+      }
+
+      if (!inputStandardWindSpeed) return false
+      if (!inputRoughness) return false
+    }
+
+    return true
+  }
+
+  const handleChangeModuleSeries = (e) => {
+    resetRoofs()
+    setSelectedModuleSeries(e)
+
+    // 선택된 시리즈에 맞는 모듈 목록 필터링 및 첫 번째 모듈 선택
+    if (e && moduleList.length > 0) {
+      let filtered
+
+      if (e.moduleSerCd === 'ALL') {
+        // "전체" 선택 시 모든 모듈 표시
+        filtered = moduleList
+      } else {
+        // 특정 시리즈 선택 시 해당 시리즈 모듈만 표시
+        //filtered = moduleList.filter(module => module.moduleSerCd === e.moduleSerCd)
+       filtered = moduleList.filter(module => module && module.moduleSerCd && module.moduleSerCd === e.moduleSerCd)
+      }
+
+      setFilteredModuleList(filtered)
+
+      // 필터링된 목록의 첫 번째 모듈을 자동 선택
+      if (filtered.length > 0) {
+        const firstModule = filtered[0]
+        setSelectedModules(firstModule)
+        // 상위 컴포넌트의 handleChangeModule 호출
+        if (handleChangeModule) {
+          handleChangeModule(firstModule)
+        }
+      }
+    } else {
+      // 모듈 리스트가 비어있는 경우
+      setFilteredModuleList([])
+      setSelectedModules(null)
+    }
+  }
+
+  const handleChangeModule = (e) => {
+    resetRoofs()
+    setSelectedModules(e)
+  }
+
+  const handleChangeRoughness = (e) => {
+    resetRoofs()
+    setInputRoughness(e)
+  }
+
+  const handleChangeInstallHeight = (e) => {
+    resetRoofs()
+    setInputInstallHeight(e)
+  }
+
+  const handleChangeStandardWindSpeed = (e) => {
+    resetRoofs()
+    setInputStandardWindSpeed(e)
+  }
+
+  const handleChangeVerticalSnowCover = (e) => {
+    resetRoofs()
+    setInputVerticalSnowCover(e)
+  }
+
+  const resetRoofs = () => {
+    const newRoofs = addedRoofs.map((roof) => {
+      return {
+        ...roof,
+        trestle: {
+          lengthBase: null,
+          trestleMkrCd: null,
+          constMthdCd: null,
+          constTp: null,
+          roofBaseCd: null,
+          roofPchBase: null,
+        },
+        addRoof: {
+          ...roof.addRoof,
+          lengthBase: null,
+          eavesMargin: null,
+          kerabaMargin: null,
+          ridgeMargin: null,
+        },
+        construction: {
+          constTp: null,
+          cvrYn: 'N',
+          snowGdPossYn: 'N',
+          cvrChecked: false,
+          snowGdChecked: false,
+        },
+      }
+    })
+    // setRoofs(newRoofs)
+    // setAddedRoofs(newRoofs)
+    setRoofsStore(newRoofs)
+  }
+
+  // 모듈시리즈 목록 생성 및 commonCode와 매핑
+  useEffect(() => {
+    if (moduleList.length > 0 && moduleSeriesList.length === 0) {
+      const moduleSeriesCodes = findCommonCode(207100) || []
+
+      // moduleList에서 고유한 moduleSerCd 추출
+      const uniqueSeriesCd = [...new Set(moduleList.map(module => module.moduleSerCd).filter(Boolean))]
+
+      if (uniqueSeriesCd.length > 0) {
+        // moduleSerCd와 commonCode를 매핑하여 기본 moduleSeriesList 생성
+        const mappedSeries = uniqueSeriesCd.map(serCd => {
+          const matchedCode = moduleSeriesCodes.find(code => code.clCode === serCd)
+          return {
+            moduleSerCd: serCd,
+            moduleSerNm: matchedCode ? matchedCode.clCodeNm : serCd
+          }
+        })
+
+        // "전체" 옵션을 맨 앞에 추가
+        const seriesList = [allOption, ...mappedSeries]
+        setModuleSeriesList(seriesList)
+
+        // 현재 선택된 모듈이 있으면 해당 모듈의 시리즈를 찾아서 선택
+        if (selectedModules && selectedModules.moduleSerCd) {
+          const currentSeries = seriesList.find(series => series.moduleSerCd === selectedModules.moduleSerCd)
+          if (currentSeries) {
+            setSelectedModuleSeries(currentSeries)
+          } else {
+            setSelectedModuleSeries(allOption)
+            // "ALL"이 선택되면 자동으로 모듈 필터링 및 선택 실행
+            setTimeout(() => handleChangeModuleSeries(allOption), 0)
+          }
+        } else {
+          // 선택된 모듈이 없으면 "전체"를 기본 선택
+          setSelectedModuleSeries(allOption)
+          // "ALL"이 선택되면 자동으로 모듈 필터링 및 선택 실행
+          setTimeout(() => handleChangeModuleSeries(allOption), 0)
+        }
+      }
+    }
+  }, [moduleList, selectedModules])
+
+  // 초기 로딩 시에만 필터링된 모듈 목록 설정
+  useEffect(() => {
+    if (moduleList.length > 0 && filteredModuleList.length === 0 && selectedModuleSeries) {
+      let filtered
+
+      if (selectedModuleSeries.moduleSerCd === 'ALL') {
+        // "전체" 선택 시 모든 모듈 표시
+        filtered = moduleList
+      } else {
+        // 특정 시리즈 선택 시 해당 시리즈 모듈만 표시
+        filtered = moduleList.filter(module => module.moduleSerCd === selectedModuleSeries.moduleSerCd)
+      }
+
+      setFilteredModuleList(filtered)
+
+      if (filtered.length > 0 && !selectedModules) {
+        setSelectedModules(filtered[0])
+      }
+    } else if (moduleList.length === 0 && filteredModuleList.length === 0 && selectedModuleSeries) {
+      // 모듈 리스트가 비어있는 경우 빈 배열로 설정
+      setFilteredModuleList([])
+    }
+  }, [moduleList, selectedModuleSeries]);
   return (
     <>
       <div className="properties-setting-wrap">
         <div className="outline-wrap">
+          <div className="roof-module-inner">
+            <div className="compas-wrapper">
               <div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
               <div className="roof-module-compas">
                 <div className="compas-box">
@@ -56,60 +401,265 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
                     {Array.from({ length: 180 / 15 }).map((dot, index) => (
                       <div
                         key={index}
-                    className={`circle ${getDegreeInOrientation(compasDeg) === -1 * (-15 * index + 180) || (index === 0 && compasDeg >= 172 && index === 0 && compasDeg <= 180) || (compasDeg === -180 && index === 0) ? 'act' : ''}`}
+                        className={`circle ${getDegreeInOrientation(inputCompasDeg) === -15 * index + 180 || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
                         onClick={() => {
                           if (index === 0) {
-                        setCompasDeg(180)
+                            setInputCompasDeg(180)
                             return
                           }
-                      setCompasDeg(-1 * (-15 * index + 180))
+                          setInputCompasDeg(-15 * index + 180)
                         }}
                       >
                         {index === 0 && <i>180°</i>}
-                    {index === 6 && <i>-90°</i>}
+                        {index === 6 && <i>90°</i>}
                       </div>
                     ))}
                     {Array.from({ length: 180 / 15 }).map((dot, index) => (
                       <div
                         key={index}
-                    className={`circle ${compasDeg !== 180 && getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
-                    onClick={() => setCompasDeg(15 * index)}
+                        className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === -1 * 15 * index ? 'act' : ''}`}
+                        onClick={() => setInputCompasDeg(15 * index * -1)}
                       >
                         {index === 0 && <i>0°</i>}
-                    {index === 6 && <i>90°</i>}
+                        {index === 6 && <i>-90°</i>}
                       </div>
                     ))}
                     <div className="compas">
-                  <div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(compasDeg)}deg)` }}></div>
+                      <div className="compas-arr" style={{ transform: `rotate(${-1 * getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
                     </div>
                   </div>
                 </div>
               </div>
               <div className="center-wrap">
-            <div className="d-check-box pop">
-              <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
-              <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
-            </div>
                 <div className="outline-form">
-              <div className="input-grid mr10" style={{ width: '160px' }}>
-                <input
-                  type="text"
+                  <div className="d-check-box pop mr10">
+                    <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
+                    <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
+                  </div>
+                  <div className="input-grid mr10" style={{ width: '60px' }}>
+                    {/*<input*/}
+                    {/*  type="text"*/}
+                    {/*  className="input-origin block"*/}
+                    {/*  value={inputCompasDeg}*/}
+                    {/*  readOnly={!hasAnglePassivity}*/}
+                    {/*  placeholder={0}*/}
+                    {/*  onChange={(e) => checkDegree(e.target.value)}*/}
+                    {/*/>*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
                       className="input-origin block"
-                  value={compasDeg}
+                      value={inputCompasDeg}
                       readOnly={!hasAnglePassivity}
-                  placeholder={0}
-                  onChange={
-                    (e) => checkDegree(e.target.value)
-                    // setCompasDeg(
-
-                    // e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
-                    //   ? e.target.value
-                    //   : 0,
-                    // )
+                      onChange={(value) => {
+                        // Convert to number and ensure it's within -180 to 180 range
+                        const numValue = parseInt(value, 10);
+                        if (!isNaN(numValue)) {
+                          const clampedValue = Math.min(180, Math.max(-180, numValue));
+                          setInputCompasDeg(String(clampedValue));
+                        } else {
+                          setInputCompasDeg(value);
                         }
+                      }}
+                      options={{
+                        allowNegative: true,
+                        allowDecimal: false
+                      }}
                     />
                   </div>
                   <span className="thin">°</span>
+                  <span className="thin">（ -180 〜 180 ）</span>
+                </div>
+              </div>
+            </div>
+            <div className="compas-table-wrap">
+              <div className="compas-table-box mb10">
+                <div className="outline-form mb10">
+                  <span>{getMessage('modal.module.basic.setting.module.series.setting')}</span>
+                  <div className="grid-select">
+                    <div className="grid-select">
+                      <QSelectBox
+                        options={moduleSeriesList.length > 0 ? moduleSeriesList : [allOption]}
+                        value={selectedModuleSeries}
+                        targetKey={'moduleSerCd'}
+                        sourceKey={'moduleSerCd'}
+                        showKey={'moduleSerNm'}
+                        onChange={(e) => handleChangeModuleSeries(e)}
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="outline-form mb10">
+                  <span>{getMessage('modal.module.basic.setting.module.setting2')}</span>
+                  <div className="grid-select">
+                    {filteredModuleList && (
+                      <QSelectBox
+                        options={filteredModuleList}
+                        value={selectedModules}
+                        targetKey={'itemId'}
+                        sourceKey={'itemId'}
+                        showKey={'itemNm'}
+                        onChange={(e) => handleChangeModule(e)}
+                        showFirstOptionWhenEmpty = {true}
+                      />
+                    )}
+                  </div>
+                </div>
+                <div className="roof-module-table">
+                  <table>
+                    <thead>
+                      <tr>
+                        {moduleData.header.map((header) => {
+                          return (
+                            <th key={header.prop} style={{ width: header.width ? header.width + 'px' : '' }}>
+                              {header.name}
+                            </th>
+                          )
+                        })}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {Array.from({ length: 3 }).map((_, index) => {
+                        return selectedModules && selectedModules?.itemList && selectedModules?.itemList?.length >= index + 1 ? (
+                          <tr key={index}>
+                            <td>
+                              <div className="color-wrap">
+                                <span
+                                  className="color-box"
+                                  style={{
+                                    backgroundColor: selectedModules.itemList[index].color,
+                                  }}
+                                ></span>
+                                <span className="name">{selectedModules.itemList[index].itemNm}</span>
+                              </div>
+                            </td>
+                            <td className="al-r">{Number(selectedModules.itemList[index].shortAxis).toFixed(0)}</td>
+                            <td className="al-r">{Number(selectedModules.itemList[index].longAxis).toFixed(0)}</td>
+                            <td className="al-r">{Number(selectedModules.itemList[index].wpOut).toFixed(0)}</td>
+                          </tr>
+                        ) : (
+                          <tr key={index}>
+                            <td>
+                              <div className="color-wrap"></div>
+                            </td>
+                            <td className="al-r"></td>
+                            <td className="al-r"></td>
+                            <td className="al-r"></td>
+                          </tr>
+                        )
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+                {basicSetting && basicSetting.roofSizeSet === '3' && (
+                  <div className="outline-form mt15">
+                    <span>{getMessage('modal.module.basic.setting.module.placement.area')}</span>
+                    <div className="input-grid mr10" style={{ width: '60px' }}>
+                      {/*<input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={inputMargin}
+                        onChange={(value) => setInputMargin(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
+                    </div>
+                    <span className="thin">m</span>
+                  </div>
+                )}
+              </div>
+
+              {basicSetting && basicSetting.roofSizeSet !== '3' && (
+                <div className="compas-table-box">
+                  <div className="compas-grid-table">
+                    <div className="outline-form">
+                      <span>{getMessage('modal.module.basic.setting.module.surface.type')}</span>
+                      <div className="grid-select">
+                        {roughnessCodes.length > 0 && managementState && (
+                          <QSelectBox
+                            options={roughnessCodes}
+                            value={inputRoughness}
+                            targetKey={'clCode'}
+                            sourceKey={'clCode'}
+                            showKey={'clCodeNm'}
+                            onChange={(e) => handleChangeRoughness(e)}
+                          />
+                        )}
+                      </div>
+                    </div>
+                    <div className="outline-form">
+                      <span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
+                      <div className="input-grid mr10">
+                        {/*<input*/}
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputInstallHeight}*/}
+                        {/*  onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
+                          className="input-origin block"
+                          value={inputInstallHeight}
+                          onChange={(value) => handleChangeInstallHeight(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
+                        />
+                      </div>
+                      <span className="thin">m</span>
+                    </div>
+                    <div className="outline-form">
+                      <span>{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</span>
+                      <div className="grid-select">
+                        {windSpeedCodes.length > 0 && managementState && (
+                          <QSelectBox
+                            title={''}
+                            options={windSpeedCodes}
+                            value={inputStandardWindSpeed}
+                            targetKey={'clCode'}
+                            sourceKey={'clCode'}
+                            showKey={'clCodeNm'}
+                            onChange={(e) => handleChangeStandardWindSpeed(e)}
+                          />
+                        )}
+                      </div>
+                    </div>
+                    <div className="outline-form">
+                      <span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
+                      <div className="input-grid mr10">
+                        {/*<input*/}
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputVerticalSnowCover}*/}
+                        {/*  onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
+                          className="input-origin block"
+                          value={inputVerticalSnowCover}
+                          onChange={(value) => handleChangeVerticalSnowCover(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
+                        />
+                      </div>
+                      <span className="thin">cm</span>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>

src/components/floor-plan/modal/basic/step/Placement.jsx

@@ -1,29 +1,46 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { checkedModuleState, currentCanvasPlanState, isManualModuleSetupState } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import {
+  checkedModuleState,
+  isManualModuleLayoutSetupState,
+  isManualModuleSetupState,
+  moduleRowColArrayState,
+  moduleSetupOptionState,
+  toggleManualSetupModeState,
+} from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
+import { normalizeDigits } from '@/util/input-utils'
+import Image from 'next/image'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
-  const [isChidori, setIsChidori] = useState(false)
+  const [useTab, setUseTab] = useState(true)
+  const [guideType, setGuideType] = useState('batch')
+
   const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
 
-  const [setupLocation, setSetupLocation] = useState('eaves')
-  const [isMaxSetup, setIsMaxSetup] = useState('false')
   const [selectedItems, setSelectedItems] = useState({})
-
   const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-  const { makeModuleInitArea } = useModuleBasicSetting(3)
+  const { makeModuleInitArea, roofOutlineColor } = useModuleBasicSetting(3)
 
   const [isMultiModule, setIsMultiModule] = useState(false)
 
-  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  //언마운트시 버튼 초기화
+  const setIsManualModuleSetup = useSetRecoilState(isManualModuleSetupState)
+  const setIsManualModuleLayoutSetup = useSetRecoilState(isManualModuleLayoutSetupState)
+  const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
+
+  const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션
+  const resetModuleSetupOption = useResetRecoilState(moduleSetupOptionState)
+
+  const [colspan, setColspan] = useState(1)
+  const moduleRowColArray = useRecoilValue(moduleRowColArrayState)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -36,11 +53,24 @@ const Placement = forwardRef((props, refs) => {
       makeModuleInitArea(moduleSelectionData)
     }
 
+    if (moduleSelectionData.module.itemList.length > 1) {
+      setColspan(2)
+    }
+
     return () => {
+      // refs.isChidori.current = 'false'
+      // refs.setupLocation.current = 'eaves'
       setIsManualModuleSetup(false)
+      setIsManualModuleLayoutSetup(false)
+      setManualSetupMode('off')
+      resetModuleSetupOption()
     }
   }, [])
 
+  // useEffect(() => {
+  //   console.log('moduleRowColArray', moduleRowColArray)
+  // }, [moduleRowColArray])
+
   //최초 지입시 체크
   useEffect(() => {
     if (isObjectNotEmpty(moduleSelectionData)) {
@@ -54,8 +84,10 @@ const Placement = forwardRef((props, refs) => {
             initCheckedModule = { ...initCheckedModule, [obj.itemId]: true }
           }
         })
+
         setSelectedItems(initCheckedModule)
         setSelectedModules(moduleSelectionData.module)
+        props.setLayoutSetup(moduleSelectionData.module.itemList.map((item) => ({ moduleId: item.itemId, col: 0, row: 0, checked: true })))
       }
 
       //모듈 배치면 생성
@@ -80,40 +112,58 @@ const Placement = forwardRef((props, refs) => {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },
       { type: 'color-box', name: getMessage('module'), prop: 'module' },
-      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
+      { type: 'text', name: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn'), prop: 'mixAsgYn', width: 50 },
+      { type: 'text', name: `段数`, prop: 'rows', width: 60 },
+      { type: 'text', name: `列数`, prop: 'cols', width: 60 },
     ],
     rows: [],
   }
 
   const handleChangeChidori = (e) => {
     const bool = e.target.value === 'true' ? true : false
-    setIsChidori(bool)
-    refs.isChidori.current = e.target.value
+    setModuleSetupOption({ ...moduleSetupOption, isChidori: bool })
+
+    //변경하면 수동 다 꺼짐
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode('off')
   }
 
   const handleSetupLocation = (e) => {
-    setSetupLocation(e.target.value)
-    refs.setupLocation.current = e.target.value
-  }
+    setModuleSetupOption({ ...moduleSetupOption, setupLocation: e.target.value })
 
-  const handleMaxSetup = (e) => {
-    if (e.target.checked) {
-      setIsMaxSetup('true')
-      refs.isMaxSetup.current = 'true'
-    } else {
-      setIsMaxSetup('false')
-      refs.isMaxSetup.current = 'false'
-    }
+    //변경하면 수동 다 꺼짐
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode('off')
   }
 
   //체크된 모듈 아이디 추출
-  const handleSelectedItem = (e) => {
+  const handleSelectedItem = (e, itemId) => {
     setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
+
+    const newLayoutSetup = [...props.layoutSetup]
+    props.layoutSetup.forEach((item, index) => {
+      if (item.moduleId === itemId) {
+        newLayoutSetup[index] = { ...props.layoutSetup[index], checked: e.target.checked }
+      }
+    })
+    props.setLayoutSetup(newLayoutSetup)
+  }
+
+  const handleLayoutSetup = (e, itemId, index) => {
+    const newLayoutSetup = [...props.layoutSetup]
+    newLayoutSetup[index] = {
+      ...newLayoutSetup[index],
+      moduleId: itemId,
+      [e.target.name]: Number(normalizeDigits(e.target.value)),
+    }
+    props.setLayoutSetup(newLayoutSetup)
   }
 
   return (
     <>
-      <div className="module-table-flex-wrap mb10">
+      <div className="module-table-flex-wrap">
         <div className="module-table-box">
           <div className="module-table-inner">
             <div className="roof-module-table">
@@ -135,8 +185,8 @@ const Placement = forwardRef((props, refs) => {
                   </tr>
                 </thead>
                 <tbody>
-                  {selectedModules.itemList &&
-                    selectedModules.itemList.map((item, index) => (
+                  {selectedModules?.itemList &&
+                    selectedModules?.itemList?.map((item, index) => (
                       <tr key={index}>
                         <td className="al-c">
                           <div className="d-check-box no-text pop">
@@ -145,7 +195,7 @@ const Placement = forwardRef((props, refs) => {
                               id={item.itemId}
                               name={item.itemId}
                               checked={selectedItems[item.itemId]}
-                              onChange={handleSelectedItem}
+                              onChange={(e) => handleSelectedItem(e, item.itemId)}
                             />
                             <label htmlFor={item.itemId}></label>
                           </div>
@@ -156,7 +206,199 @@ const Placement = forwardRef((props, refs) => {
                             <span className="name">{item.itemNm}</span>
                           </div>
                         </td>
-                        <td className="al-r">{item.wpOut}</td>
+                        <td className="al-c">
+                          <div className="color-wrap">
+                            <span className="name">{item.mixAsgYn}</span>
+                          </div>
+                        </td>
+                        <td className="al-r">
+                          <div className="input-grid">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              name="row"
+                              value={props.layoutSetup[index]?.row ?? 1}
+                              //defaultValue={0}
+                              onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
+                            />
+                          </div>
+                        </td>
+                        <td className="al-r">
+                          <div className="input-grid">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              name="col"
+                              value={props.layoutSetup[index]?.col ?? 1}
+                              //defaultValue={0}
+                              onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
+                            />
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  <tr>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div className="module-table-box non-flex">
+          <div className="module-table-inner">
+            <div className="roof-module-table">
+              <table>
+                <thead>
+                  <tr>
+                    <th>{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</th>
+                    <th>{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <div className="hexagonal-radio-wrap">
+                        <div className="d-check-radio pop mb10">
+                          <input
+                            type="radio"
+                            name="radio02"
+                            id="ra03"
+                            checked={moduleSetupOption.isChidori}
+                            disabled={isChidoriNotAble}
+                            value={'true'}
+                            onChange={(e) => handleChangeChidori(e)}
+                          />
+                          <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
+                        </div>
+                        <div className="d-check-radio pop">
+                          <input
+                            type="radio"
+                            name="radio02"
+                            id="ra04"
+                            checked={!moduleSetupOption.isChidori}
+                            value={'false'}
+                            onChange={(e) => handleChangeChidori(e)}
+                          />
+                          <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
+                        </div>
+                      </div>
+                    </td>
+                    <td>
+                      <div className="hexagonal-radio-wrap">
+                        <div className="d-check-radio pop mb10">
+                          <input
+                            type="radio"
+                            name="radio03"
+                            id="ra05"
+                            checked={moduleSetupOption.setupLocation === 'eaves'}
+                            value={'eaves'}
+                            onChange={handleSetupLocation}
+                          />
+                          <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
+                        </div>
+                        <div className="d-check-radio pop">
+                          <input
+                            type="radio"
+                            name="radio03"
+                            id="ra06"
+                            checked={moduleSetupOption.setupLocation === 'ridge'}
+                            value={'ridge'}
+                            onChange={handleSetupLocation}
+                            disabled={isMultiModule}
+                          />
+                          <label htmlFor="ra06">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="hide-tab-wrap">
+        <div className="hide-check-guide">
+          {getMessage('modal.module.basic.setting.module.placement.info')}
+          <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
+        </div>
+        <div className={`hide-tab-contents ${!useTab ? 'hide' : ''}`}>
+          <div className="roof-content-tab-wrap">
+            <button className={`btn-frame block modal mr5 ${guideType === 'batch' ? 'act' : ''} `} onClick={() => setGuideType('batch')}>
+              {getMessage('modal.module.basic.setting.module.placement.info.batch')}
+            </button>
+            <button className={`btn-frame block modal mr5 ${guideType === 'module' ? 'act' : ''}`} onClick={() => setGuideType('module')}>
+              {getMessage('modal.module.basic.setting.module.placement.info.module')}
+            </button>
+          </div>
+          {guideType === 'batch' && (
+            <div className={`roof-warning-wrap mt10`}>
+              <div className="guide">
+                {getMessage('modal.module.basic.setting.module.placement.info.batch.content1')}
+                <br />
+                {getMessage('modal.module.basic.setting.module.placement.info.batch.content2')}
+              </div>
+              <div className="roof-warning-img-wrap">
+                <div className="roof-warning-img">
+                  <Image src={'/static/images/canvas/roof_warning_correct.png'} width={350} height={198} alt="" />
+                </div>
+                <div className="roof-warning-img">
+                  <Image src={'/static/images/canvas/roof_warning_wrong.png'} width={350} height={198} alt="" />
+                </div>
+              </div>
+            </div>
+          )}
+          {guideType === 'module' && (
+            <div className={`module-table-box mt10 ${!useTab ? 'hide' : ''}`}>
+              <div className="module-table-inner">
+                <div className="roof-module-table">
+                  <table className="">
+                    <thead>
+                      <tr>
+                        <th rowSpan={2} style={{ width: '22%' }}></th>
+                        {selectedModules &&
+                          selectedModules.itemList?.map((item) => (
+                            // <th colSpan={colspan}>
+                            <th>
+                              <div className="color-wrap">
+                                <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                                <span className="name">{item.itemNm}</span>
+                              </div>
+                            </th>
+                          ))}
+                        {colspan > 1 && <th rowSpan={2}>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>}
+                      </tr>
+                      <tr>
+                        {selectedModules &&
+                          selectedModules.itemList?.map((item) => (
+                            <>
+                              <th>{getMessage('modal.module.basic.setting.module.placement.max.row')}</th>
+                              {/* {colspan > 1 && <th>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>} */}
+                            </>
+                          ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {moduleSelectionData.roofConstructions.map((item, index) => (
+                        <tr>
+                          <td>
+                            <div className="color-wrap">
+                              <span className="color-box" style={{ backgroundColor: roofOutlineColor(item.addRoof?.index) }}></span>
+                              <span className="name">{item.addRoof?.roofMatlNmJp}</span>
+                            </div>
+                          </td>
+                          {moduleRowColArray[index]?.map((item, index2) => (
+                            <>
+                              <td className="al-c">{item.moduleMaxRows}</td>
+                              {/* {colspan > 1 && <td className="al-c">{item.mixModuleMaxRows}</td>} */}
+                              {colspan > 1 && index2 === moduleRowColArray[index].length - 1 && <td className="al-c">{item.maxRow}</td>}
+                            </>
+                          ))}
                         </tr>
                       ))}
                     </tbody>
@@ -164,83 +406,7 @@ const Placement = forwardRef((props, refs) => {
                 </div>
               </div>
             </div>
-        <div className="module-table-box">
-          <div className="module-table-inner">
-            <div className="self-table-tit">{getMessage('modal.module.basic.setting.module.placement.select.fitting.type')}</div>
-            <div className="module-self-table">
-              <div className="self-table-item">
-                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</div>
-                <div className="self-item-td">
-                  <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio01"
-                        id="ra01"
-                        checked={isChidori}
-                        disabled={isChidoriNotAble}
-                        value={'true'}
-                        onChange={(e) => handleChangeChidori(e)}
-                      />
-                      <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
-                    </div>
-                    <div className="d-check-radio pop">
-                      <input type="radio" name="radio02" id="ra02" checked={!isChidori} value={'false'} onChange={(e) => handleChangeChidori(e)} />
-                      <label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="self-table-item">
-                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div>
-                <div className="self-item-td">
-                  <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio03"
-                        id="ra03"
-                        checked={setupLocation === 'center'}
-                        value={'center'}
-                        onChange={handleSetupLocation}
-                        disabled={isMultiModule}
-                      />
-                      <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.center')}</label>
-                    </div>
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio04"
-                        id="ra04"
-                        checked={setupLocation === 'eaves'}
-                        value={'eaves'}
-                        onChange={handleSetupLocation}
-                      />
-                      <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
-                    </div>
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio05"
-                        id="ra05"
-                        checked={setupLocation === 'ridge'}
-                        value={'ridge'}
-                        onChange={handleSetupLocation}
-                        disabled={isMultiModule}
-                      />
-                      <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="self-table-flx">
-              {/* <div className="d-check-box pop">
-                <input type="checkbox" id="ch04" checked={isMaxSetup === 'true'} value={'true'} onChange={handleMaxSetup} />
-                <label htmlFor="ch04">{getMessage('modal.module.basic.setting.module.placement.maximum')}</label>
-              </div> */}
-            </div>
-          </div>
+          )}
         </div>
       </div>
     </>

src/components/floor-plan/modal/basic/step/Trestle.jsx

@@ -0,0 +1,999 @@
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
+import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
+import { useMessage } from '@/hooks/useMessage'
+import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
+import { roofsState } from '@/store/roofAtom'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import Swal from 'sweetalert2'
+import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
+
+const Trestle = forwardRef((props, ref) => {
+  const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
+  const { getMessage } = useMessage()
+  // const [selectedTrestle, setSelectedTrestle] = useState()
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const pitchText = useRecoilValue(pitchTextSelector)
+  const [selectedRoof, setSelectedRoof] = useState(null)
+  const [isAutoSelecting, setIsAutoSelecting] = useState(false) // 자동 선택 중인지 상태
+  const [autoSelectTimeout, setAutoSelectTimeout] = useState(null) // 타임아웃 참조
+  const autoSelectTimeoutRef = useRef(null)
+
+  // 공통 타임아웃 설정 (밀리초)
+  const AUTO_SELECT_TIMEOUT = 500 // API 호출 완료 대기 시간
+  const {
+    trestleState,
+    trestleDetail,
+    dispatch,
+    raftBaseList,
+    trestleList,
+    constMthdList,
+    roofBaseList,
+    constructionList,
+    eavesMargin,
+    ridgeMargin,
+    kerabaMargin,
+    setEavesMargin,
+    setRidgeMargin,
+    setKerabaMargin,
+    lengthBase,
+    setLengthBase,
+    hajebichi,
+    setHajebichi,
+    cvrYn,
+    cvrChecked,
+    snowGdPossYn,
+    snowGdChecked,
+    setCvrYn,
+    setCvrChecked,
+    setSnowGdPossYn,
+    setSnowGdChecked,
+  } = useModuleTrestle({
+    selectedRoof,
+  })
+  const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
+  // const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
+  const [selectedRaftBase, setSelectedRaftBase] = useState(null)
+  const [selectedTrestle, setSelectedTrestle] = useState(null)
+  const [selectedConstMthd, setSelectedConstMthd] = useState(null)
+  const [selectedConstruction, setSelectedConstruction] = useState(null)
+  const [selectedRoofBase, setSelectedRoofBase] = useState(null)
+  const { managementState } = useContext(GlobalDataContext)
+  const { restoreModuleInstArea } = useModuleBasicSetting()
+  const [flag, setFlag] = useState(false)
+  const tempModuleSelectionData = useRef(null)
+  const [autoSelectStep, setAutoSelectStep] = useState(null) // 'raftBase', 'trestle', 'constMthd', 'roofBase', 'construction'
+  const prevHajebichiRef = useRef();
+
+  useEffect(() => {
+    if (roofs && roofs.length > 0 && !selectedRoof) {
+      console.log("roofs:::::", roofs.length)
+      setLengthBase(roofs[0].length);
+      setSelectedRoof(roofs[0])
+    }
+    if (selectedRoof && selectedRoof.lenAuth === "C") {
+      onChangeLength(selectedRoof.length);
+    }else if (selectedRoof && ["C", "R"].includes(selectedRoof.raftAuth) && roofs && roofs.length > 0) {
+      onChangeRaftBase(roofs[0]);
+    }else if (selectedRoof && ["C", "R"].includes(selectedRoof.roofPchAuth) && roofs && roofs.length > 0 &&
+      roofs[0].hajebichi !== prevHajebichiRef.current ) {
+      prevHajebichiRef.current = roofs[0].hajebichi;
+      onChangeHajebichi(roofs[0].hajebichi);
+    }
+
+    //모듈 설치 영역 복구
+    restoreModuleInstArea()
+  }, [roofs, selectedRoof])  // selectedRoof 추가
+
+  useEffect(() => {
+    if (flag && moduleSelectionData) {
+      if (JSON.stringify(tempModuleSelectionData.current) === JSON.stringify(moduleSelectionData)) {
+        setTabNum(tabNum + 1)
+      }
+    }
+  }, [flag, moduleSelectionData])
+
+  useEffect(() => {
+    if (selectedRoof) {
+      if (moduleSelectionData?.roofConstructions?.length >= selectedRoof.index + 1) {
+        const { construction, trestle, trestleDetail } = moduleSelectionData?.roofConstructions[selectedRoof.index]
+        dispatch({
+          type: 'SET_INITIALIZE',
+          roof: { common: moduleSelectionData.common, module: moduleSelectionData.module, construction, trestle, trestleDetail, ...selectedRoof },
+        })
+      } else {
+        dispatch({ type: 'SET_INITIALIZE', roof: { ...selectedRoof, common: moduleSelectionData.common, module: moduleSelectionData.module } })
+      }
+    }
+  }, [selectedRoof])
+
+  useEffect(() => {
+    if (raftBaseList.length > 0) {
+      setSelectedRaftBase(raftBaseList.find((raft) => raft.clCode === selectedRoof?.raft) ?? null)
+    } else {
+      setSelectedRaftBase(null)
+    }
+  }, [raftBaseList])
+
+  useEffect(() => {
+    if (trestleList.length > 0) {
+      const existingTrestle = trestleList.find(
+        (trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd
+      );
+      if (existingTrestle) {
+        setSelectedTrestle(existingTrestle)
+      } else if (autoSelectStep === 'trestle') {
+        // 자동 선택: 첫 번째 가대메이커 선택
+        console.log('Auto selecting first trestle:', trestleList[0])
+        const firstTrestle = trestleList[0]
+        onChangeTrestleMaker(firstTrestle)
+        // setAutoSelectStep은 onChangeTrestleMaker 내부에서 처리됨
+      }
+    } else {
+      setSelectedTrestle(null)
+    }
+  }, [trestleList, autoSelectStep])
+
+  useEffect(() => {
+    if (constMthdList.length > 0) {
+      const existingConstMthd = constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd)
+      if (existingConstMthd) {
+        setSelectedConstMthd(existingConstMthd)
+      } else if (autoSelectStep === 'constMthd') {
+        // 자동 선택: 첫 번째 공법 선택
+        const firstConstMthd = constMthdList[0]
+        onChangeConstMthd(firstConstMthd)
+        setAutoSelectStep('roofBase') // 다음 단계로 설정
+      }
+    } else {
+      setSelectedConstMthd(null)
+    }
+  }, [constMthdList, autoSelectStep])
+
+  useEffect(() => {
+    if (roofBaseList.length > 0) {
+      const existingRoofBase = roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd)
+      if (existingRoofBase) {
+        setSelectedRoofBase(existingRoofBase)
+      } else if (autoSelectStep === 'roofBase') {
+        // 자동 선택: 첫 번째 지붕밑바탕 선택
+        const firstRoofBase = roofBaseList[0]
+        onChangeRoofBase(firstRoofBase)
+        setAutoSelectStep('construction') // 다음 단계로 설정
+      }
+    } else {
+      setSelectedRoofBase(null)
+    }
+  }, [roofBaseList, autoSelectStep])
+
+  useEffect(() => {
+    if (constructionList.length > 0) {
+      const existingConstruction = constructionList.find((construction) => construction.constTp === trestleState.constTp)
+      if (existingConstruction) {
+        setSelectedConstruction(existingConstruction)
+      } else if (autoSelectStep === 'construction') {
+        // 자동 선택: 첫 번째 가능한 construction 선택
+        const availableConstructions = constructionList.filter((construction) => construction.constPossYn === 'Y')
+        if (availableConstructions.length > 0) {
+          const firstConstruction = availableConstructions[0]
+          const firstIndex = constructionList.findIndex((construction) => construction.constTp === firstConstruction.constTp)
+          handleConstruction(firstIndex)
+          setAutoSelectStep(null) // 자동 선택 완료
+        } else {
+          Swal.fire({
+            title: getMessage('modal.module.basic.settting.module.error4', [selectedRoof?.nameJp]),
+            icon: 'warning',
+          })
+        }
+      }
+
+      if (constructionList.filter((construction) => construction.constPossYn === 'Y').length === 0) {
+        Swal.fire({
+          title: getMessage('modal.module.basic.settting.module.error4', [selectedRoof?.nameJp]),
+          icon: 'warning',
+        })
+      }
+    } else {
+      setSelectedConstruction(null)
+    }
+  }, [constructionList, autoSelectStep])
+
+  const getConstructionState = (index) => {
+    if (constructionList && constructionList.length > 0) {
+      if (constructionList[index].constPossYn === 'Y') {
+        if (trestleState && trestleState.constTp === constructionList[index].constTp) {
+          return 'blue'
+        }
+        return 'white'
+      }
+      return 'no-click'
+    }
+    return 'no-click'
+  }
+
+  const onChangeLength = (e) => {
+    setLengthBase(e)
+    // 다음 단계들 초기화
+    setSelectedRaftBase(null)
+    setSelectedTrestle(null)
+    setSelectedConstMthd(null)
+    setSelectedRoofBase(null)
+    setSelectedConstruction(null)
+
+    dispatch({
+      type: 'SET_LENGTH',
+      roof: {
+        length: e,
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raft: selectedRaftBase?.clCode,
+      },
+    })
+
+    // 자동으로 첫 번째 서까래 간격 선택
+    if (raftBaseList.length > 0) {
+
+      const inx = raftBaseList.findIndex((raft) => raft.clCode === selectedRoof?.raft) ?? 0
+      const firstRaftBase = raftBaseList[inx]
+      onChangeRaftBase(firstRaftBase)
+    }
+  }
+
+  const onChangeRaftBase = (e) => {
+    setSelectedRaftBase(e)
+    // 다음 단계들 초기화
+    setSelectedTrestle(null)
+    setSelectedConstMthd(null)
+    setSelectedRoofBase(null)
+    setSelectedConstruction(null)
+
+    dispatch({
+      type: 'SET_RAFT_BASE',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raft: e.clCode,
+      },
+    })
+
+    // 다음 단계(가대메이커) 자동 선택 설정 - 지연 실행
+    setTimeout(() => {
+      setAutoSelectStep('trestle')
+    }, AUTO_SELECT_TIMEOUT) // API 호출 완료를 위한 더 긴 지연
+  }
+
+  const onChangeHajebichi = (e) => {
+    setHajebichi(e)
+    // 다음 단계들 초기화
+    setSelectedTrestle(null)
+    setSelectedConstMthd(null)
+    setSelectedRoofBase(null)
+    setSelectedConstruction(null)
+
+    // roofs 배열에서 selectedRoof.index와 같은 인덱스의 지붕 객체 업데이트
+    if (selectedRoof && selectedRoof.index !== undefined) {
+      const updatedRoofs = roofs.map((roof, index) => (index === selectedRoof.index ? { ...roof, hajebichi: Number(e) } : roof))
+      setRoofs(updatedRoofs)
+    }
+
+    dispatch({
+      type: 'SET_HAJEBICHI',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        hajebichi: e,
+      },
+    })
+
+    // 다음 단계(가대메이커) 자동 선택 설정 - 지연 실행
+    setTimeout(() => {
+      setAutoSelectStep('trestle')
+    }, AUTO_SELECT_TIMEOUT)
+  }
+
+  const onChangeTrestleMaker = (e) => {
+    setSelectedTrestle(e)
+    // 다음 단계들 초기화
+    setSelectedConstMthd(null)
+    setSelectedRoofBase(null)
+    setSelectedConstruction(null)
+
+    dispatch({
+      type: 'SET_TRESTLE_MAKER',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
+        trestleMkrCd: e.trestleMkrCd,
+      },
+    })
+
+    // API 호출 완료 후 다음 단계(공법) 자동 선택 설정
+    setTimeout(() => {
+      setAutoSelectStep('constMthd')
+    }, AUTO_SELECT_TIMEOUT)
+  }
+
+  const onChangeConstMthd = (e) => {
+    setSelectedConstMthd(e)
+    // 다음 단계 초기화
+    setSelectedRoofBase(null)
+    setSelectedConstruction(null)
+
+    dispatch({
+      type: 'SET_CONST_MTHD',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
+        trestleMkrCd: selectedTrestle?.trestleMkrCd,
+        constMthdCd: e.constMthdCd,
+      },
+    })
+
+    // 기존 타임아웃 취소
+    if (autoSelectTimeoutRef.current) {
+      clearTimeout(autoSelectTimeoutRef.current)
+    }
+
+    // 자동 선택 중 상태 활성화
+    setIsAutoSelecting(true)
+
+    // API 호출 완료 후 다음 단계(지붕밑바탕) 자동 선택 설정
+    const timeoutId = setTimeout(() => {
+      setAutoSelectStep('roofBase')
+      setIsAutoSelecting(false)
+    }, AUTO_SELECT_TIMEOUT)
+
+    autoSelectTimeoutRef.current = timeoutId
+  }
+
+  const onChangeRoofBase = (e) => {
+    setSelectedRoofBase(e)
+    setSelectedConstruction(null)
+
+    dispatch({
+      type: 'SET_ROOF_BASE',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
+        trestleMkrCd: selectedTrestle?.trestleMkrCd,
+        constMthdCd: selectedConstMthd?.constMthdCd,
+        roofBaseCd: e.roofBaseCd,
+        illuminationTp: managementState?.surfaceTypeValue ?? '',
+        instHt: managementState?.installHeight ?? '',
+        stdWindSpeed: managementState?.standardWindSpeedId ?? '',
+        stdSnowLd: managementState?.verticalSnowCover ?? '',
+        inclCd: selectedRoof?.pitch ?? 0,
+        roofPitch: Math.round(hajebichi ?? 0),
+      },
+    })
+
+    // API 호출 완료 후 다음 단계(construction) 자동 선택 설정
+    setTimeout(() => {
+      setAutoSelectStep('construction')
+    }, AUTO_SELECT_TIMEOUT)
+  }
+
+  const handleConstruction = (index) => {
+    if (constructionList[index]?.constPossYn === 'Y') {
+      dispatch({
+        type: 'SET_CONSTRUCTION',
+        roof: {
+          moduleTpCd: selectedModules.itemTp ?? '',
+          roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+          raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+          //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
+          trestleMkrCd: selectedTrestle.trestleMkrCd,
+          constMthdCd: selectedConstMthd.constMthdCd,
+          roofBaseCd: selectedRoofBase.roofBaseCd,
+          illuminationTp: managementState?.surfaceTypeValue ?? '',
+          instHt: managementState?.installHeight ?? '',
+          stdWindSpeed: managementState?.standardWindSpeedId ?? '',
+          stdSnowLd: managementState?.verticalSnowCover ?? '',
+          inclCd: selectedRoof?.pitch ?? 0,
+          roofPitch: Math.round(hajebichi ?? 0),
+          constTp: constructionList[index].constTp,
+          snowGdPossYn: constructionList[index].snowGdPossYn,
+          cvrYn: constructionList[index].cvrYn,
+          mixMatlNo: selectedModules.mixMatlNo,
+          // workingWidth: selectedRoof?.length?.toString() ?? '',
+          workingWidth: lengthBase,
+        },
+      })
+
+      setCvrYn(constructionList[index].cvrYn)
+      setSnowGdPossYn(constructionList[index].snowGdPossYn)
+      setCvrChecked(false)
+      setSnowGdChecked(false)
+    }
+  }
+
+  const handleChangeRoofMaterial = (index) => {
+    const newAddedRoofs = roofs.map((roof, i) => {
+      if (i === selectedRoof.index) {
+        return {
+          ...selectedRoof,
+          hajebichi,
+          length: lengthBase,
+          eavesMargin,
+          ridgeMargin,
+          kerabaMargin,
+          roofIndex: selectedRoof.index,
+          raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+          trestle: {
+            hajebichi: hajebichi,
+            length: lengthBase,
+            ...selectedRaftBase,
+            ...selectedTrestle,
+            ...selectedConstMthd,
+            ...selectedRoofBase,
+          },
+          construction: {
+            ...constructionList.find((data) => data.constTp === trestleState.constTp),
+            cvrYn: cvrYn,
+            snowGdPossYn: snowGdPossYn,
+            cvrChecked: cvrChecked,
+            snowGdChecked: snowGdChecked,
+            setupCover: cvrChecked ?? false,
+            setupSnowCover: snowGdChecked ?? false,
+          },
+          trestleDetail: trestleDetail,
+        }
+      }
+      return roof
+    })
+    setRoofs(newAddedRoofs)
+    setSelectedRoof(newAddedRoofs[index])
+  }
+
+  const isComplete = async () => {
+    const newAddedRoofs = roofs.map((roof, i) => {
+      if (i === selectedRoof?.index) {
+        return {
+          ...selectedRoof,
+          length: lengthBase,
+          eavesMargin,
+          ridgeMargin,
+          kerabaMargin,
+          roofIndex: roof.index,
+          raft: selectedRaftBase?.clCode ?? selectedRoof?.raft ?? '',
+          //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi ?? 0,
+          trestle: {
+            length: lengthBase,
+            hajebichi: hajebichi,
+            ...selectedRaftBase,
+            ...selectedTrestle,
+            ...selectedConstMthd,
+            ...selectedRoofBase,
+          },
+          construction: {
+            //...constructionList.find((data) => newAddedRoofs[index].construction.constTp === data.constTp),
+            ...constructionList.find((data) => trestleState.constTp === data.constTp),
+            cvrYn,
+            snowGdPossYn,
+            cvrChecked,
+            snowGdChecked,
+            setupCover: cvrChecked ?? false,
+            setupSnowCover: snowGdChecked ?? false,
+          },
+          trestleDetail: trestleDetail,
+        }
+      }
+      return roof
+    })
+
+    let result = true
+    for (let i = 0; i < newAddedRoofs.length; i++) {
+      const roof = newAddedRoofs[i]
+
+      if (!roof.trestle?.trestleMkrCd) {
+        Swal.fire({
+          title: getMessage('modal.module.basic.settting.module.error1', [roof.nameJp]), // 가대메이커를 선택해주세요.
+          icon: 'warning',
+        })
+        result = false
+        return false
+      }
+
+      if (!roof.trestle?.constMthdCd) {
+        Swal.fire({
+          title: getMessage('modal.module.basic.settting.module.error2', [roof.nameJp]), // 공법을 선택해주세요.
+          icon: 'warning',
+        })
+        result = false
+        return false
+      }
+      if (!roof.trestle?.roofBaseCd) {
+        Swal.fire({
+          title: getMessage('modal.module.basic.settting.module.error3', [roof.nameJp]), // 지붕밑바탕을 선택해주세요.
+          icon: 'warning',
+        })
+        result = false
+        return false
+      }
+      if (!roof.construction?.constTp) {
+        Swal.fire({
+          title: getMessage('modal.module.basic.settting.module.error12', [roof.nameJp]), // 시공법법을 선택해주세요.
+          icon: 'warning',
+        })
+        result = false
+        return false
+      }
+
+      if (roof.lenAuth === 'C') {
+        if (!roof.trestle?.length) {
+          Swal.fire({
+            title: getMessage('modal.module.basic.settting.module.error5', [roof.nameJp]), // L 값을 입력해주세요.
+            icon: 'warning',
+          })
+          result = false
+          return false
+        }
+      }
+      if (['C', 'R'].includes(roof.raftAuth)) {
+        if (!roof?.raft) {
+          Swal.fire({
+            title: getMessage('modal.module.basic.settting.module.error6', [roof.nameJp]), // 서까래 간격을 입력해주세요.
+            icon: 'warning',
+          })
+          result = false
+          return false
+        }
+      }
+
+      if (['C', 'R'].includes(roof.roofPchAuth)) {
+        if (!roof?.hajebichi) {
+          Swal.fire({
+            title: getMessage('modal.module.basic.settting.module.error7', [roof.nameJp]), // 하제비치를 입력해주세요.
+            icon: 'warning',
+          })
+          result = false
+          return false
+        }
+      }
+
+      if (!roof?.eavesMargin || !roof?.ridgeMargin || !roof?.kerabaMargin) {
+        Swal.fire({
+          title: getMessage('modal.module.basic.settting.module.error8', [roof.nameJp]), // 모듈 배치 영영 값을 입력해주세요.
+          icon: 'warning',
+        })
+        result = false
+        return false
+      }
+
+      if (roof.trestle.trestleMkrCd !== 'NO_DATA') {
+        // 가매 없음이 아닐때는 가대 정보보다 작을 수 없음
+        if (roof.trestleDetail?.eaveIntvl > roof.eavesMargin) {
+          Swal.fire({
+            title: getMessage('modal.module.basic.settting.module.error9', [roof.trestleDetail?.eaveIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
+            icon: 'warning',
+          })
+          result = false
+          return false
+        }
+
+        if (roof.trestleDetail?.ridgeIntvl > roof.ridgeMargin) {
+          Swal.fire({
+            title: getMessage('modal.module.basic.settting.module.error10', [roof.trestleDetail?.ridgeIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
+            icon: 'warning',
+          })
+          result = false
+          return false
+        }
+
+        if (roof.trestleDetail?.kerabaIntvl > roof.kerabaMargin) {
+          Swal.fire({
+            title: getMessage('modal.module.basic.settting.module.error11', [roof.trestleDetail?.kerabaIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
+            icon: 'warning',
+          })
+          result = false
+          return false
+        }
+      }
+    }
+
+    if (result) {
+      const newRoofs = newAddedRoofs.map((roof) => {
+        const { addRoof, construction, trestle, trestleDetail, roofConstructions, ...rest } = roof
+        return rest
+      })
+
+      setModuleSelectionData({
+        ...moduleSelectionData,
+        roofConstructions: newAddedRoofs.map((roof, index) => ({
+          roofIndex: newRoofs[index].index,
+          trestle: roof.trestle,
+          addRoof: newRoofs[index],
+          construction: roof.construction,
+          trestleDetail: roof.trestleDetail,
+        })),
+      })
+      setFlag(true)
+      tempModuleSelectionData.current = {
+        ...moduleSelectionData,
+        roofConstructions: newAddedRoofs.map((roof, index) => ({
+          roofIndex: newRoofs[index].index,
+          trestle: roof.trestle,
+          addRoof: newRoofs[index],
+          construction: roof.construction,
+          trestleDetail: roof.trestleDetail,
+        })),
+      }
+      const updatePromises = [
+        // new Promise((resolve) => {
+        //   resolve()
+        // }),
+        new Promise((resolve) => {
+          setRoofs(newRoofs)
+          resolve()
+        }),
+
+        new Promise((resolve) => {
+          const roofConstructions = newAddedRoofs.map((roof, index) => ({
+            roofIndex: newRoofs[index].index,
+            addRoof: newRoofs[index],
+            trestle: {
+              ...roof.trestle,
+              raft: roof.raftBaseCd,
+            },
+            construction: {
+              // ...constructionList.find((construction) => newAddedRoofs[index].construction.constTp === construction.constTp),
+              ...roof.construction,
+              roofIndex: roof.index,
+              selectedIndex: roof.index,
+            },
+            trestleDetail: roof.trestleDetail,
+          }))
+          trestleTrigger({
+            roofConstructions,
+          })
+          setRoofsStore(roofConstructions)
+          resolve()
+        }),
+      ]
+
+      await Promise.all(updatePromises)
+      return true
+    }
+
+    return false
+  }
+
+  useImperativeHandle(ref, () => ({
+    isComplete,
+  }))
+
+  return (
+    <div className="roof-module-tab2-overflow">
+      <div className="module-table-box mb10">
+        <div className="module-box-tab">
+          {roofs &&
+            roofs.map((roof, index) => (
+              <button
+                key={index}
+                className={`module-btn ${selectedRoof?.index === index ? 'act' : ''}`}
+                onClick={() => (roof ? handleChangeRoofMaterial(index) : null)}
+              >
+                {roof !== undefined ? `${roof.nameJp} (${currentAngleType === 'slope' ? roof.pitch : roof.angle}${pitchText})` : '-'}
+              </button>
+            ))}
+        </div>
+        <div className="module-table-inner">
+          <div className="module-table-flex-wrap tab2">
+            <div className="module-flex-item">
+              <div className="eaves-keraba-table">
+                {selectedRoof && selectedRoof.lenAuth === 'C' && (
+                  <>
+                    <div className="eaves-keraba-item">
+                      <div className="eaves-keraba-th">L</div>
+                      <div className="eaves-keraba-td">
+                        <div className="grid-select">
+                          <input
+                            type="text"
+                            className="input-origin block"
+                            value={lengthBase}
+                            onChange={(e) => {
+                              const v = e.target.value
+                              if (v === '') {
+                                onChangeLength('')
+                                return
+                              }
+                              const n = Number(normalizeDigits(v))
+                              if (Number.isNaN(n)) {
+                                onChangeLength('')
+                              } else {
+                                onChangeLength(n)
+                              }
+                            }}
+                            disabled={selectedRoof.lenAuth === 'R'}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+                {selectedRoof && ['C', 'R'].includes(selectedRoof.raftAuth) && (
+                  <>
+                    <div className="eaves-keraba-item">
+                      <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
+                      <div className="eaves-keraba-td">
+                        <div className="grid-select">
+                          {raftBaseList.length > 0 && (
+                            <QSelectBox
+                              options={raftBaseList}
+                              value={selectedRaftBase}
+                              sourceKey={'clCode'}
+                              targetKey={'clCode'}
+                              showKey={'clCodeNm'}
+                              disabled={selectedRoof.raftAuth === 'R'}
+                              onChange={(e) => onChangeRaftBase(e)}
+                              showFirstOptionWhenEmpty={true}
+
+                            />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+                {selectedRoof && ['C', 'R'].includes(selectedRoof.roofPchAuth) && (
+                  <>
+                    <div className="eaves-keraba-item">
+                      <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.hajebichi')}</div>
+                      <div className="eaves-keraba-td">
+                        <div className="grid-select">
+                          <input
+                            type="text"
+                            className="input-origin block"
+                            disabled={selectedRoof.roofPchAuth === 'R'}
+                            onChange={(e) => {
+                              const v = e.target.value
+                              if (v === '') {
+                                onChangeHajebichi('')
+                                return
+                              }
+                              const n = Number(normalizeDigits(v))
+                              if (Number.isNaN(n)) {
+                                onChangeHajebichi('')
+                              } else {
+                                onChangeHajebichi(n)
+                              }
+                            }}
+                            value={hajebichi}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+                <div className="eaves-keraba-item">
+                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
+                  <div className="eaves-keraba-td">
+                    <div className="grid-select">
+                      {trestleList && (
+                        <QSelectBox
+                          title={getMessage('selectbox.title')}
+                          options={trestleList}
+                          value={selectedTrestle}
+                          sourceKey={'trestleMkrCd'}
+                          targetKey={'trestleMkrCd'}
+                          showKey={'trestleMkrCdJp'}
+                          onChange={(e) => onChangeTrestleMaker(e)}
+                          showFirstOptionWhenEmpty={true}
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="eaves-keraba-item">
+                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
+                  <div className="eaves-keraba-td">
+                    <div className="grid-select">
+                      {constMthdList && (
+                        <QSelectBox
+                          title={getMessage('selectbox.title')}
+                          options={constMthdList}
+                          value={selectedConstMthd}
+                          sourceKey={'constMthdCd'}
+                          targetKey={'constMthdCd'}
+                          showKey={'constMthdCdJp'}
+                          onChange={(e) => onChangeConstMthd(e)}
+                          showFirstOptionWhenEmpty={true}
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="eaves-keraba-item">
+                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
+                  <div className="eaves-keraba-td">
+                    <div className="grid-select">
+                      {roofBaseList && (
+                        <QSelectBox
+                          title={getMessage('selectbox.title')}
+                          options={roofBaseList}
+                          sourceKey={'roofBaseCd'}
+                          targetKey={'roofBaseCd'}
+                          showKey={'roofBaseCdJp'}
+                          value={selectedRoofBase}
+                          onChange={(e) => onChangeRoofBase(e)}
+                          showFirstOptionWhenEmpty={true}
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="module-flex-item non-flex">
+              <div className="flex-item-btn-wrap">
+                <button className={`btn-frame roof ${getConstructionState(0)}`} onClick={() => handleConstruction(0)}>
+                  {getMessage('modal.module.basic.setting.module.standard.construction')}(I)
+                </button>
+                <button className={`btn-frame roof ${getConstructionState(3)}`} onClick={() => handleConstruction(3)}>
+                  {getMessage('modal.module.basic.setting.module.multiple.construction')}
+                </button>
+                <button className={`btn-frame roof ${getConstructionState(1)}`} onClick={() => handleConstruction(1)}>
+                  {getMessage('modal.module.basic.setting.module.standard.construction')}
+                </button>
+                <button className={`btn-frame roof ${getConstructionState(4)}`} onClick={() => handleConstruction(4)}>
+                  {getMessage('modal.module.basic.setting.module.multiple.construction')}(II)
+                </button>
+                <button className={`btn-frame roof ${getConstructionState(2)}`} onClick={() => handleConstruction(2)}>
+                  {getMessage('modal.module.basic.setting.module.enforce.construction')}
+                </button>
+              </div>
+              <div className="grid-check-form-flex">
+                <div className="d-check-box pop">
+                  <input
+                    type="checkbox"
+                    id={`ch01`}
+                    disabled={!cvrYn || cvrYn === 'N'}
+                    checked={cvrChecked || false}
+                    // onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, cvrChecked: !trestleState.cvrChecked } })}
+                    onChange={() => setCvrChecked(!cvrChecked)}
+                  />
+                  <label htmlFor={`ch01`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
+                </div>
+                <div className="d-check-box pop">
+                  <input
+                    type="checkbox"
+                    id={`ch02`}
+                    disabled={!snowGdPossYn || snowGdPossYn === 'N'}
+                    checked={snowGdChecked || false}
+                    // onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, snowGdChecked: !trestleState.snowGdChecked } })}
+                    onChange={() => setSnowGdChecked(!snowGdChecked)}
+                  />
+                  <label htmlFor={`ch02`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="module-input-area">
+            <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.area')}</div>
+            <div className="module-input-wrap">
+              <div className="outline-form mr15">
+                <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
+                <div className="input-grid mr10">
+                  {/*<input*/}
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={eavesMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setEavesMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={eavesMargin ?? 0}
+                    onChange={(value) => setEavesMargin(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+              <div className="outline-form mr15">
+                <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
+                <div className="input-grid mr10">
+                  {/*<input*/}
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={ridgeMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setRidgeMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={ridgeMargin ?? 0}
+                    onChange={(value) => setRidgeMargin(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+              <div className="outline-form ">
+                <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
+                <div className="input-grid mr10">
+                  {/*<input*/}
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={kerabaMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setKerabaMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={kerabaMargin ?? 0}
+                    onChange={(value) => setKerabaMargin(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+          <div className="module-input-area">
+            <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.margin')}</div>
+            <div className="module-input-wrap">
+              <div className="outline-form">
+                <span>{getMessage('modal.module.basic.setting.module.placement.margin.horizontal')}</span>
+                <div className="input-grid mr10">
+                  <input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlHor} readOnly />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+              <div className="outline-form">
+                <span>{getMessage('modal.module.basic.setting.module.placement.margin.vertical')}</span>
+                <div className="input-grid mr10">
+                  <input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlVer} readOnly />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="module-bottom">
+        <div className="module-table-box ">
+          <div className="warning-guide">
+            <div className="warning">
+              {getMessage('modal.module.basic.setting.module.setting.info1')}
+              <br />
+              {getMessage('modal.module.basic.setting.module.setting.info2')}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export default Trestle

src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx

@@ -33,14 +33,6 @@ const PitchPlacement = forwardRef((props, refs) => {
     setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
   }
 
-  const moduleData = {
-    header: [
-      { type: 'check', name: '', prop: 'check', width: 70 },
-      { type: 'color-box', name: getMessage('module'), prop: 'module' },
-      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
-    ],
-  }
-
   //체크된 모듈 데이터
   useEffect(() => {
     const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
@@ -105,24 +97,20 @@ const PitchPlacement = forwardRef((props, refs) => {
 
   return (
     <>
-      <div className="module-table-box mb10">
+      <div className="hexagonal-flex-wrap">
+        <div className="module-table-box ">
           <div className="module-table-inner">
             <div className="roof-module-table">
               <table>
                 <thead>
                   <tr>
-                  {moduleData.header.map((data) => (
-                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
-                      {data.type === 'check' ? (
+                    <th style={{ width: '70px' }}>
                       <div className="d-check-box no-text pop">
                         <input type="checkbox" id="ch01" disabled />
                         <label htmlFor="ch01"></label>
                       </div>
-                      ) : (
-                        data.name
-                      )}
                     </th>
-                  ))}
+                    <th>{getMessage('module')}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -147,7 +135,6 @@ const PitchPlacement = forwardRef((props, refs) => {
                             <span className="name">{item.itemNm}</span>
                           </div>
                         </td>
-                      <td className="al-r">{item.wpOut}</td>
                       </tr>
                     ))}
                 </tbody>
@@ -155,15 +142,20 @@ const PitchPlacement = forwardRef((props, refs) => {
             </div>
           </div>
         </div>
-      <div className="module-table-box mb10">
+        <div className="module-table-box non-flex">
           <div className="module-table-inner">
-          <div className="hexagonal-wrap">
-            <div className="hexagonal-item">
-              <div className="bold-font">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</div>
-            </div>
-            <div className="hexagonal-item">
-              <div className="pop-form-radio">
-                <div className="d-check-radio pop">
+            <div className="roof-module-table">
+              <table>
+                <thead>
+                  <tr>
+                    <th>{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <div className="hexagonal-radio-wrap">
+                        <div className="d-check-radio pop mb10">
                           <input
                             type="radio"
                             name="radio01"
@@ -186,6 +178,10 @@ const PitchPlacement = forwardRef((props, refs) => {
                           <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
                         </div>
                       </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
         </div>

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -1,30 +1,28 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState, useEffect, useContext, useRef } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
 import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
+import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { correntObjectNoState } from '@/store/settingAtom'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
-import { useRecoilState } from 'recoil'
-import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, selectedModelsState, seriesState } from '@/store/circuitTrestleAtom'
-import { POLYGON_TYPE } from '@/common/common'
+import { POLYGON_TYPE, MENU } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, canvasZoomState, currentMenuState } from '@/store/canvasAtom'
 
 import { useTrestle } from '@/hooks/module/useTrestle'
-import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { v4 as uuidv4 } from 'uuid'
 
 import { useEstimate } from '@/hooks/useEstimate'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
-import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
-import { usePlan } from '@/hooks/usePlan'
 import { QcastContext } from '@/app/QcastProvider'
+import { fontSelector } from '@/store/fontAtom'
+import { fabric } from 'fabric'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -32,18 +30,22 @@ const ALLOCATION_TYPE = {
 }
 export default function CircuitTrestleSetting({ id }) {
   const { getMessage } = useMessage()
-  const { closePopup } = usePopup()
+  const { closePopup, addPopup } = usePopup()
   const { apply, setViewCircuitNumberTexts, getEstimateData, clear: clearTrestle, setAllModuleSurfaceIsComplete } = useTrestle()
   const { swalFire } = useSwal()
   const { saveEstimate } = useEstimate()
   const canvas = useRecoilValue(canvasState)
-
+  const setCurrentMenu = useSetRecoilState(currentMenuState)
+  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
   const [tabNum, setTabNum] = useState(1)
   const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
-  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const { managementState, setManagementState } = useContext(GlobalDataContext)
   const selectedModules = useRecoilValue(selectedModuleState)
   const { getPcsAutoRecommendList, getPcsVoltageChk, getPcsVoltageStepUpList, getPcsManualConfChk } = useMasterController()
+  const flowText = useRecoilValue(fontSelector('flowText'))
+  const lengthText = useRecoilValue(fontSelector('lengthText'))
+  const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
   // 회로할당(승합설정)에서 선택된 값들을 저장할 상태 추가
   const [selectedStepUpValues, setSelectedStepUpValues] = useState({})
@@ -55,10 +57,13 @@ export default function CircuitTrestleSetting({ id }) {
   const [seletedSubOption, setSeletedSubOption] = useState(null)
   const { setModuleStatisticsData } = useCircuitTrestle()
   const { handleCanvasToPng } = useImgLoader()
-
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
   const passivityCircuitAllocationRef = useRef()
   const { setIsGlobalLoading } = useContext(QcastContext)
 
+  const originCanvasViewPortTransform = useRef([])
+  const [isFold, setIsFold] = useState(false)
+
   const {
     makers,
     setMakers,
@@ -83,8 +88,8 @@ export default function CircuitTrestleSetting({ id }) {
   } = useCircuitTrestle()
   // const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
   useEffect(() => {
+    originCanvasViewPortTransform.current = [...canvas.viewportTransform]
     if (!managementState) {
-      setManagementState(managementStateLoaded)
     }
     // setCircuitData({
     //   makers,
@@ -103,6 +108,276 @@ export default function CircuitTrestleSetting({ id }) {
     }
   }, [])
 
+  // 모듈이 설치된 경우 rack설치 여부에 따라 설치 된 모듈 아래에 작은 모듈이 설치되어 있을 경우는 모듈 설치 메뉴 reopen
+  useEffect(() => {
+    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    if (modules.length === 0) {
+      return
+    }
+
+    /**
+     * 랙 설치 시 모듈 크기 검증
+     * - 남쪽: 아래쪽 모듈이 위쪽 모듈보다 커야 함
+     * - 북쪽: 위쪽 모듈이 아래쪽 모듈보다 커야 함
+     * - 동쪽: 오른쪽 모듈이 왼쪽 모듈보다 커야 함
+     * - 서쪽: 왼쪽 모듈이 오른쪽 모듈보다 커야 함
+     */
+    const validateModuleSizeForRack = (surface) => {
+      const { modules, direction, trestleDetail } = surface
+      const { rackYn, moduleIntvlHor, moduleIntvlVer } = trestleDetail
+
+      if (rackYn === 'N' || !modules || modules.length < 2) {
+        return true // 검증 통과
+      }
+
+      // 모듈 중심점 및 크기 정보 계산
+      const centerPoints = modules.map((module) => {
+        const { x, y } = module.getCenterPoint()
+        const { width, height } = module
+        return {
+          x,
+          y,
+          width: Math.floor(width),
+          height: Math.floor(height),
+          area: Math.floor(width) * Math.floor(height),
+        }
+      })
+
+      // 방향별 설정
+      const isVertical = direction === 'south' || direction === 'north'
+      const primaryInterval = isVertical ? moduleIntvlVer : moduleIntvlHor
+      const secondaryInterval = isVertical ? moduleIntvlHor : moduleIntvlVer
+
+      // 정렬 함수: 큰 모듈이 있어야 할 위치부터 시작
+      const getSortFn = () => {
+        switch (direction) {
+          case 'south': return (a, b) => b.y - a.y // 아래쪽(y 큼)부터
+          case 'north': return (a, b) => a.y - b.y // 위쪽(y 작음)부터
+          case 'east': return (a, b) => b.x - a.x  // 오른쪽(x 큼)부터
+          case 'west': return (a, b) => a.x - b.x  // 왼쪽(x 작음)부터
+          default: return () => 0
+        }
+      }
+
+      // 타겟 모듈 찾기 (현재 모듈보다 작아야 할 위치의 모듈)
+      const findTargetModules = (current, margin) => {
+        return centerPoints.filter(cp => {
+          const sameAxis = isVertical
+            ? Math.abs(cp.x - current.x) < margin
+            : Math.abs(cp.y - current.y) < margin
+          const targetDirection = direction === 'south' ? cp.y < current.y
+            : direction === 'north' ? cp.y > current.y
+            : direction === 'east' ? cp.x < current.x
+            : cp.x > current.x
+          return sameAxis && targetDirection
+        })
+      }
+
+      // 가장 가까운 타겟 모듈 찾기
+      const getClosestTarget = (filtered) => {
+        if (filtered.length === 0) return null
+        return filtered.reduce((closest, cp) => {
+          switch (direction) {
+            case 'south': return cp.y > closest.y ? cp : closest
+            case 'north': return cp.y < closest.y ? cp : closest
+            case 'east': return cp.x > closest.x ? cp : closest
+            case 'west': return cp.x < closest.x ? cp : closest
+            default: return closest
+          }
+        })
+      }
+
+      // 두 모듈 간 간격 계산
+      const getGap = (current, target) => {
+        if (isVertical) {
+          return direction === 'south'
+            ? (current.y - current.height / 2) - (target.y + target.height / 2)
+            : (target.y - target.height / 2) - (current.y + current.height / 2)
+        } else {
+          return direction === 'east'
+            ? (current.x - current.width / 2) - (target.x + target.width / 2)
+            : (target.x - target.width / 2) - (current.x + current.width / 2)
+        }
+      }
+
+      // 인접 모듈 여부 확인
+      const isAdjacent = (current, target) => {
+        const gap = getGap(current, target)
+        return gap >= 0 && gap <= primaryInterval + 1
+      }
+
+      // 정렬된 모듈 순회
+      const sortedPoints = [...centerPoints].sort(getSortFn())
+
+      for (const current of sortedPoints) {
+        // 1. 일반 배치: 같은 라인에서 인접 모듈 검사
+        const directTargets = findTargetModules(current, secondaryInterval)
+        const closestTarget = getClosestTarget(directTargets)
+
+        if (closestTarget && isAdjacent(current, closestTarget) && closestTarget.area > current.area) {
+          return false // 검증 실패
+        }
+
+        // 2. 물떼새 배치: 반 오프셋 위치의 인접 모듈 검사
+        const size = isVertical ? current.width : current.height
+        const halfOffset = (size + secondaryInterval) / 2
+
+        for (const sign of [-1, 1]) {
+          const offsetValue = sign * halfOffset
+          const findHalfTarget = centerPoints.filter((cp) => {
+            const offsetAxis = isVertical
+              ? Math.abs(cp.x - (current.x + offsetValue)) <= primaryInterval
+              : Math.abs(cp.y - (current.y + offsetValue)) <= primaryInterval
+            const targetDirection = direction === 'south' ? cp.y < current.y
+              : direction === 'north' ? cp.y > current.y
+              : direction === 'east' ? cp.x < current.x
+              : cp.x > current.x
+            return offsetAxis && targetDirection
+          })
+
+          const closestHalf = getClosestTarget(findHalfTarget)
+          if (closestHalf && isAdjacent(current, closestHalf) && closestHalf.area > current.area) {
+            return false // 검증 실패
+          }
+        }
+      }
+
+      return true // 검증 통과
+    }
+
+    // 모든 설치면에 대해 검증 수행
+    const moduleSetupSurfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    for (const surface of moduleSetupSurfaces) {
+      if (!validateModuleSizeForRack(surface)) {
+        swalFire({
+          text: getMessage('module.size.validation.rack.error'),
+          icon: 'error',
+          confirmFn: () => {
+            // 현재 팝업 닫기
+            closePopup(id)
+            // 메뉴 하이라이트 변경
+            setCurrentMenu(MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING)
+            // 모듈/가대설정 팝업 열기
+            const newPopupId = uuidv4()
+            clearTrestle()
+            setAllModuleSurfaceIsComplete(false)
+            addPopup(newPopupId, 1, <BasicSetting id={newPopupId} />)
+          },
+        })
+        return
+      }
+    }
+  }, [])
+
+  const capture = async (type) => {
+    beforeCapture(type)
+
+    await handleCanvasToPng(type)
+
+    afterCapture(type)
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 1000)
+    })
+  }
+
+  // 캡쳐 전 처리
+  const beforeCapture = (type) => {
+    setCanvasZoom(100)
+    canvas.set({ zoom: 1 })
+
+    // roof 객체들을 찾아서 중앙점 계산
+    const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof' && !obj.wall)
+
+    if (roofs.length > 0) {
+      // 모든 roof의 x, y 좌표를 수집
+      const allPoints = []
+      roofs.forEach((roof) => {
+        if (roof.getCurrentPoints()) {
+          roof.getCurrentPoints().forEach((point) => {
+            allPoints.push({ x: point.x, y: point.y })
+          })
+        }
+      })
+
+      if (allPoints.length > 0) {
+        // 모든 점들의 중앙값 계산
+        const minX = Math.min(...allPoints.map((p) => p.x))
+        const maxX = Math.max(...allPoints.map((p) => p.x))
+        const minY = Math.min(...allPoints.map((p) => p.y))
+        const maxY = Math.max(...allPoints.map((p) => p.y))
+
+        const centerX = (minX + maxX) / 2
+        const centerY = (minY + maxY) / 2
+
+        // 캔버스 중앙으로 이동하기 위한 오프셋 계산
+        const canvasWidth = canvas.getWidth()
+        const canvasHeight = canvas.getHeight()
+        const offsetX = canvasWidth / 2 - centerX
+        const offsetY = canvasHeight / 2 - centerY
+
+        canvas.viewportTransform = [1, 0, 0, 1, offsetX, offsetY]
+      } else {
+        canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+      }
+    } else {
+      canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+    }
+
+    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
+
+    if (type === 2) {
+      modules.forEach((module) => {
+        module.set({ originColor: module.fill, fill: null, strokeWidth: 2 })
+      })
+      circuitNumberTexts.forEach((text) => {
+        text.set({ visible: false })
+      })
+    }
+
+    let x, y
+    x = canvas.width / 2
+    y = canvas.height / 2
+
+    canvas.zoomToPoint(new fabric.Point(x, y), 0.4)
+
+    changeFontSize('lengthText', '28')
+    changeFontSize('circuitNumber', '28')
+    changeFontSize('flowText', '28')
+    canvas.renderAll()
+  }
+
+  // 캡쳐 후 처리
+  const afterCapture = (type) => {
+    if (originCanvasViewPortTransform.current[0] !== 1) {
+      setCanvasZoom(Number((originCanvasViewPortTransform.current[0] * 100).toFixed(0)))
+    }
+    canvas.viewportTransform = [...originCanvasViewPortTransform.current]
+    canvas.renderAll()
+
+    changeFontSize('lengthText', lengthText.fontSize.value)
+    changeFontSize('circuitNumber', circuitNumberText.fontSize.value)
+    changeFontSize('flowText', flowText.fontSize.value)
+
+    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
+    if (type === 2) {
+      modules.forEach((module) => {
+        module.set({
+          fill: module.originColor,
+          strokeWidth: 0.3,
+        })
+      })
+      circuitNumberTexts.forEach((text) => {
+        text.set({ visible: true })
+      })
+    }
+    canvas.renderAll()
+  }
+
   // 수동할당 시 모듈 삭제
 
   // 시리즈중 자동으로 추천 PCS 정보 조회
@@ -115,11 +390,33 @@ export default function CircuitTrestleSetting({ id }) {
       return
     }
 
+    const isMultiModule = selectedModules.itemList.length > 1
+
+    let isAllIndfcs = false
+
+    if (isMultiModule) {
+      //INDFCS 실내집중, OUTDMULTI 옥외멀티
+      // 1. 모듈이 혼합형일 경우 선택한 pcs가 실내집중인 경우 alert
+      if (selectedModels.length > 0) {
+        isAllIndfcs = selectedModels.every((model) => model.pcsTpCd === 'INDFCS')
+      } else {
+        isAllIndfcs = models.every((model) => model.pcsTpCd === 'INDFCS')
+      }
+    }
+
+    if (isAllIndfcs) {
+      swalFire({
+        title: getMessage('module.circuit.indoor.focused.error'),
+        type: 'alert',
+      })
+      return
+    }
+
     const params = {
       ...getOptYn(),
       useModuleItemList: getUseModuleItemList(),
       roofSurfaceList: getRoofSurfaceList(),
-      pcsItemList: getPcsItemList(),
+      pcsItemList: getPcsItemList(isMultiModule),
     }
 
     // 파워컨디셔너 추천 목록 조회
@@ -155,6 +452,7 @@ export default function CircuitTrestleSetting({ id }) {
           getPcsVoltageChk(pcsVoltageChkParams).then((res) => {
             if (res.resultCode === 'S') {
               setTabNum(2)
+              setAllModuleSurfaceIsComplete(false)
             } else {
               swalFire({
                 title: res.resultMsg,
@@ -179,15 +477,16 @@ export default function CircuitTrestleSetting({ id }) {
       })
     } else {
       // 회로 구성 가능 여부 체크
-      getPcsVoltageChk({ ...params, pcsItemList: getSelectedPcsItemList() }).then((res) => {
+      getPcsVoltageChk({ ...params, pcsItemList: getSelectedPcsItemList(isMultiModule) }).then((res) => {
         if (res.resultCode === 'S') {
           // 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회
           getPcsVoltageStepUpList({
             ...params,
-            pcsItemList: getSelectedPcsItemList(),
+            pcsItemList: getSelectedPcsItemList(isMultiModule),
           }).then((res) => {
             if (res?.result.resultCode === 'S' && res?.data) {
               setTabNum(2)
+              setAllModuleSurfaceIsComplete(false)
             } else {
               swalFire({ text: getMessage('common.message.send.error') })
             }
@@ -287,6 +586,8 @@ export default function CircuitTrestleSetting({ id }) {
           setSelectedModels(pcsItemList)
           getPcsVoltageChk(pcsVoltageChkParams).then((res) => {
             setAllocationType(ALLOCATION_TYPE.PASSIVITY)
+            setAllModuleSurfaceIsComplete(false)
+            clearTrestle()
           })
         } else {
           swalFire({
@@ -309,8 +610,15 @@ export default function CircuitTrestleSetting({ id }) {
 
       const target = pcsCheck.max ? moduleMaxQty : moduleStdQty
       const placementModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+      let moduleAmount = placementModules.reduce((acc, module) => {
+        if (moduleSelectionData.module.itemList.length === 1 || module.moduleInfo.itemId === moduleSelectionData.module.itemList[0].itemId) {
+          return acc + 1
+        } else {
+          return acc + 0.66
+        }
+      }, 0)
 
-      if (placementModules.length > target) {
+      if (moduleAmount > target) {
         swalFire({
           title: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.validation.error01'),
           type: 'alert',
@@ -319,6 +627,7 @@ export default function CircuitTrestleSetting({ id }) {
       }
 
       setAllocationType(ALLOCATION_TYPE.PASSIVITY)
+      clearTrestle()
     }
   }
 
@@ -348,13 +657,9 @@ export default function CircuitTrestleSetting({ id }) {
       .map((obj) => {
         obj.pcses = getStepUpListData()
       })
-
-    setViewCircuitNumberTexts(false)
-
-    handleCanvasToPng(1)
+    await capture(1)
 
     //회로할당 저장 시 result=null인 경우에도 회로번호 텍스트 표시 유지 처리
-    setViewCircuitNumberTexts(true)
 
     // 회로할당 저장 클릭 시
     // 가대 및 지지금구 설치
@@ -369,7 +674,7 @@ export default function CircuitTrestleSetting({ id }) {
     const result = await getEstimateData()
 
     if (result) {
-      handleCanvasToPng(2)
+      await capture(2)
       // 견적서 저장
       await saveEstimate(result)
     } else {
@@ -379,6 +684,16 @@ export default function CircuitTrestleSetting({ id }) {
     // removeNotAllocationModules()
   }
 
+  const changeFontSize = (name, size) => {
+    const textObjs = canvas?.getObjects().filter((obj) => obj.name === name)
+    textObjs.forEach((obj) => {
+      obj.set({
+        fontSize: size,
+      })
+    })
+    canvas.renderAll()
+  }
+
   // 이전 버튼 클릭 시
   const onClickPrev = () => {
     // setAllocationType(ALLOCATION_TYPE.AUTO)
@@ -393,6 +708,7 @@ export default function CircuitTrestleSetting({ id }) {
           obj.circuit = null
           obj.pcsItemId = null
           obj.circuitNumber = null
+          obj.pcs = null
         })
         setSelectedModels(
           JSON.parse(JSON.stringify(selectedModels)).map((model) => {
@@ -479,7 +795,7 @@ export default function CircuitTrestleSetting({ id }) {
     console.log(stepUpListData)
     stepUpListData[0].pcsItemList.map((item, index) => {
       return item.serQtyList
-        .filter((serQty) => serQty.selected)
+        .filter((serQty) => serQty.selected && serQty.paralQty > 0)
         .forEach((serQty) => {
           pcs.push({
             pcsMkrCd: item.pcsMkrCd,
@@ -655,14 +971,22 @@ export default function CircuitTrestleSetting({ id }) {
         return
       } else {
         setTabNum(2)
+        setAllModuleSurfaceIsComplete(false)
       }
     })
   }
 
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="l-2">
-      <WithDraggable.Header title={getMessage('modal.circuit.trestle.setting')} onClose={() => handleClose()} />
+      <WithDraggable.Header
+        title={getMessage('modal.circuit.trestle.setting')}
+        onClose={() => handleClose()}
+        isFold={isFold}
+        onFold={() => setIsFold(!isFold)}
+      />
       <WithDraggable.Body>
+        <div style={{ display: !(tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY) && isFold ? 'none' : 'block' }}>
+          <div style={{ display: tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && isFold ? 'none' : 'block' }}>
             <div className="roof-module-tab">
               <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
               <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
@@ -670,11 +994,14 @@ export default function CircuitTrestleSetting({ id }) {
                 {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
               </div>
             </div>
+          </div>
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
-          <PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} />
+            <PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} isFold={isFold} />
           )}
           {tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
+        </div>
+
         {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
           <div className="grid-btn-wrap">
             <button className="btn-frame modal mr5 act" onClick={() => onAutoRecommend()}>

src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx

@@ -5,6 +5,7 @@ import { useMasterController } from '@/hooks/common/useMasterController'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { pcsCheckState } from '@/store/circuitTrestleAtom'
+import { sessionStore } from '@/store/commonAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isNullOrUndefined } from '@/util/common-utils'
@@ -38,13 +39,14 @@ export default function PowerConditionalSelect(props) {
   } = props
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
 
+  const sessionState = useRecoilValue(sessionStore)
   const { getMessage } = useMessage()
   const [selectedRow, setSelectedRow] = useState(null)
   const globalLocale = useRecoilValue(globalLocaleStore)
   const { getPcsMakerList, getPcsModelList } = useMasterController()
   const selectedModules = useRecoilValue(selectedModuleState)
   const { swalFire } = useSwal()
-  const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
+  // const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
   const modelHeader = [
     { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.series'), width: '15%', prop: 'pcsSerNm', type: 'color-box' },
@@ -72,11 +74,9 @@ export default function PowerConditionalSelect(props) {
   ]
 
   useEffect(() => {
-    if (makers.length === 0) {
     getPcsMakerList().then((res) => {
       setMakers(res.data)
     })
-    }
   }, [])
 
   const onCheckSeries = (data) => {
@@ -110,6 +110,7 @@ export default function PowerConditionalSelect(props) {
           selected: s.pcsSerCd === data.pcsSerCd ? !s.selected : false,
         }
       })
+      setSelectedModels([])
     }
     setSeries(copySeries)
     handleSetmodels(copySeries.filter((s) => s.selected))
@@ -131,7 +132,7 @@ export default function PowerConditionalSelect(props) {
         mixMatlNo: item.mixMatlNo,
       }
     })
-    getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => {
+    getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList, storeId: sessionState.oneTwoStoreId }).then((res) => {
       if (res?.result.code === 200 && res?.data) {
         setModels(
           res.data.map((model) => {
@@ -176,7 +177,7 @@ export default function PowerConditionalSelect(props) {
 
     if (selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.MULTI) {
       setSelectedModels([...selectedModels, { ...selectedRow, id: uuidv4() }])
-    } else if (!selectedModels.find((m) => m.itemId === selectedRow.itemId)) {
+    } else if (!selectedModels.find((m) => m.itemId === selectedRow.itemId && m.pcsSerCd === selectedRow.pcsSerCd)) {
       setSelectedModels([...selectedModels, { ...selectedRow, id: uuidv4() }])
     }
     setSelectedRow(null)
@@ -199,6 +200,8 @@ export default function PowerConditionalSelect(props) {
       const param = {
         pcsMkrCd: option.pcsMkrCd,
         mixMatlNo: moduleSelectionData.module.mixMatlNo,
+        moduleMatlCds: moduleSelectionData.module.itemList.map((item) => item.itemId).join(','),
+        storeId: sessionState.oneTwoStoreId,
       }
 
       getPcsMakerList(param).then((res) => {

src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx

@@ -1,13 +1,10 @@
-import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
-import { modelState, pcsCheckState } from '@/store/circuitTrestleAtom'
+import { pcsCheckState } from '@/store/circuitTrestleAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
-import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { v4 as uuidv4 } from 'uuid'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -15,7 +12,6 @@ import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { circuitNumDisplaySelector } from '@/store/settingAtom'
 import { fontSelector } from '@/store/fontAtom'
-import { PCS_MKR_MULTI_TYPE } from './PowerConditionalSelect'
 
 export default function StepUp(props) {
   const {
@@ -42,7 +38,7 @@ export default function StepUp(props) {
   const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
   const { getPcsVoltageStepUpList, getPcsAutoRecommendList, getPcsVoltageChk, getPcsConnOptionItemList } = useMasterController()
-  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const [originPcsVoltageStepUpList, setOriginPcsVoltageStepUpList] = useState([])
   const canvas = useRecoilValue(canvasState)
   const selectedModules = useRecoilValue(selectedModuleState)
   const [optCodes, setOptCodes] = useState([])
@@ -101,6 +97,9 @@ export default function StepUp(props) {
 
           /** PCS 승압설정 정보 SET */
           setStepUpListData(stepUpListData)
+          if (originPcsVoltageStepUpList.length === 0) {
+            setOriginPcsVoltageStepUpList(stepUpListData)
+          }
 
           /** PCS 옵션 조회 */
           // const formattedOptCodes = formatOptionCodes(res.data.optionList)
@@ -109,7 +108,7 @@ export default function StepUp(props) {
 
           /** 캔버스에 회로 정보 적용 */
           // 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
-          console.log('stepUpListData', stepUpListData)
+          let mChk = 0
           stepUpListData[0].pcsItemList.forEach((pcsItem, index) => {
             const optionList = formatOptionCodes(pcsItem.optionList)
             if (isMultiOptions()) {
@@ -165,6 +164,8 @@ export default function StepUp(props) {
                     targetModule.pcsItemId = module.pcsItemId
                     targetModule.circuitNumber = module.circuit
                     canvas.add(moduleCircuitText)
+                  } else {
+                    mChk++
                   }
                 })
               })
@@ -173,6 +174,10 @@ export default function StepUp(props) {
 
           canvas.renderAll()
           setModuleStatisticsData()
+
+          if (mChk > 0) {
+            swalFire({ text: getMessage('modal.circuit.trestle.setting.step.up.allocation.module.over.count') })
+          }
         } else {
           swalFire({ text: getMessage('common.message.send.error') })
         }
@@ -393,10 +398,14 @@ export default function StepUp(props) {
     }))
   }
 
+  const handleChangeApplyParalQty = (mainIdx, subIdx, applyParalQty) => {
+    handleRowClick(mainIdx, subIdx, applyParalQty)
+  }
+
   /**
    * 행 선택 핸들러 함수 추가
    */
-  const handleRowClick = (mainIdx, subIdx) => {
+  const handleRowClick = (mainIdx, subIdx, applyParalQty = null) => {
     /** 자동 승압 설정인 경우만 실행 */
     if (allocationType !== 'auto') return
 
@@ -428,7 +437,13 @@ export default function StepUp(props) {
 
           /** 선택된 serQty 찾기 */
           const selectedSerQty = matchingPcsItem?.serQtyList.find((serQty) => serQty.selected)?.serQty || 0
-
+          if (index === 0) {
+            return {
+              ...pcsItem,
+              applySerQty: selectedSerQty,
+              applyParalQty: +applyParalQty,
+            }
+          }
           return {
             ...pcsItem,
             applySerQty: selectedSerQty,
@@ -573,7 +588,7 @@ export default function StepUp(props) {
                   value={seletedMainOption}
                   sourceKey="code"
                   targetKey="code"
-                  showKey="name"
+                  showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
                   onChange={(e) => setSeletedMainOption(e)}
                 />
               )}
@@ -586,7 +601,7 @@ export default function StepUp(props) {
                     value={seletedSubOption}
                     sourceKey="code"
                     targetKey="code"
-                    showKey="name"
+                    showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
                     onChange={(e) => setSeletedSubOption(e)}
                   />
                 )}
@@ -639,11 +654,51 @@ export default function StepUp(props) {
                                 <tr
                                   key={`row-${serQtyIdx}`}
                                   className={`${item.selected ? 'on' : ''}`}
-                                  onClick={() => handleRowClick(idx, serQtyIdx)}
                                   style={{ cursor: allocationType === 'auto' ? 'pointer' : 'default' }}
                                 >
-                                  <td className="al-r">{item.serQty}</td>
-                                  <td className="al-r">{item.paralQty}</td>
+                                  <td
+                                    className="al-r"
+                                    onClick={() => {
+                                      handleRowClick(idx, serQtyIdx, item.paralQty)
+                                    }}
+                                  >
+                                    {item.serQty}
+                                  </td>
+                                  <td className="al-r">
+                                    {/* 2025.12.04 select 추가 */}
+                                    {idx === 0 ? (
+                                      <select
+                                        className="select-light dark table-select"
+                                        defaultValue={item.paralQty}
+                                        name=""
+                                        id=""
+                                        onChange={(e) => {
+                                          handleChangeApplyParalQty(idx, serQtyIdx, e.target.value)
+                                        }}
+                                      >
+                                        {item.paralQty === 0 && (
+                                          <option key="0" value="0">
+                                            0
+                                          </option>
+                                        )}
+                                        {Array.from(
+                                          {
+                                            length: originPcsVoltageStepUpList[index]
+                                              ? originPcsVoltageStepUpList[index]?.pcsItemList[idx].serQtyList[serQtyIdx].paralQty
+                                              : item.paralQty,
+                                          },
+                                          (_, i) => i + 1,
+                                        ).map((num) => (
+                                          <option key={num} value={num}>
+                                            {num}
+                                          </option>
+                                        ))}
+                                      </select>
+                                    ) : (
+                                      <>{item.paralQty}</>
+                                    )}
+                                  </td>
+                                  {/* <td className="al-r">{item.paralQty}</td> */}
                                 </tr>
                               )
                             })}

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -1,7 +1,6 @@
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { useModule } from '@/hooks/module/useModule'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
@@ -10,8 +9,9 @@ import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { fontSelector } from '@/store/fontAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { circuitNumDisplaySelector } from '@/store/settingAtom'
-import { useContext, useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useContext, useEffect, useRef, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { normalizeDigits } from '@/util/input-utils'
 
 export default function PassivityCircuitAllocation(props) {
   const {
@@ -21,16 +21,18 @@ export default function PassivityCircuitAllocation(props) {
     getOptYn: getApiProps,
     getUseModuleItemList: getSelectedModuleList,
     getSelectModelList: getSelectModelList,
+    isFold,
   } = props
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
-  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const { managementState } = useContext(GlobalDataContext)
   const selectedModules = useRecoilValue(selectedModuleState)
   const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
   const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
   const [circuitNumber, setCircuitNumber] = useState(1)
   const [targetModules, setTargetModules] = useState([])
+  const targetModulesRef = useRef([])
   const { getPcsManualConfChk } = useMasterController()
   const isDisplayCircuitNumber = useRecoilValue(circuitNumDisplaySelector)
   const { setModuleStatisticsData } = useCircuitTrestle()
@@ -38,12 +40,12 @@ export default function PassivityCircuitAllocation(props) {
   useEffect(() => {
     setModuleStatisticsData()
     if (!managementState) {
-      setManagementState(managementStateLoaded)
     }
     canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
       .forEach((obj) => {
+        obj.set({ pcs: null })
         obj.on('mousedown', (e) => handleTargetModules(obj))
       })
 
@@ -59,6 +61,10 @@ export default function PassivityCircuitAllocation(props) {
     }
   }, [])
 
+  useEffect(() => {
+    targetModulesRef.current = targetModules
+  }, [targetModules])
+
   const handleTargetModules = (obj) => {
     if (!Array.isArray(targetModules)) {
       setTargetModules([])
@@ -79,6 +85,7 @@ export default function PassivityCircuitAllocation(props) {
   }
 
   const handleCircuitNumberFix = () => {
+    const pcsTpCd = selectedPcs.pcsTpCd // 실내집중형, 옥외멀티형
     let uniqueCircuitNumbers = [
       ...new Set(
         canvas
@@ -87,6 +94,16 @@ export default function PassivityCircuitAllocation(props) {
           .map((obj) => obj.circuitNumber),
       ),
     ]
+
+    const surfaceList = targetModules.map((module) => {
+      return canvas.getObjects().filter((obj) => obj.id === canvas.getObjects().filter((obj) => obj.id === module)[0].surfaceId)[0]
+    })
+    let surfaceType = {}
+
+    surfaceList.forEach((surface) => {
+      surfaceType[`${surface.direction}-${surface.roofMaterial.pitch}`] = surface
+    })
+
     if (!circuitNumber || circuitNumber === 0) {
       swalFire({
         text: getMessage('module.circuit.minimun.error'),
@@ -94,14 +111,69 @@ export default function PassivityCircuitAllocation(props) {
         icon: 'warning',
       })
       return
-    } else if (targetModules.length === 0) {
+    }
+
+    if (targetModules.length === 0) {
       swalFire({
         text: getMessage('module.not.found'),
         type: 'alert',
         icon: 'warning',
       })
       return
-    } else if (selectedModels.length > 1) {
+    }
+
+    // targetModule중 북면 설치 여부가 Y인 것과 N인 것이 혼합이면 안됨.
+    const targetModuleGroup = [
+      ...new Set(
+        canvas
+          .getObjects()
+          .filter((obj) => obj.name === POLYGON_TYPE.MODULE && targetModules.includes(obj.id))
+          .map((obj) => obj.moduleInfo.northModuleYn),
+      ),
+    ]
+
+    if (targetModuleGroup.length > 1) {
+      swalFire({
+        text: getMessage('module.circuit.fix.not.same.roof.error'),
+        type: 'alert',
+        icon: 'warning',
+      })
+      return
+    }
+
+    switch (pcsTpCd) {
+      case 'INDFCS': {
+        const originHaveThisPcsModules = canvas
+          .getObjects()
+          .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.pcs && obj.pcs.id === selectedPcs.id)
+        // 1. 북면모듈, 북면외모듈 혼합 여부 체크
+        const targetModuleInfos = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && targetModules.includes(obj.id))
+        debugger
+        const newTargetModuleGroup = [...new Set(targetModuleInfos.concat(originHaveThisPcsModules).map((obj) => obj.moduleInfo.northModuleYn))]
+
+        if (newTargetModuleGroup.length > 1) {
+          swalFire({
+            text: getMessage('module.circuit.fix.not.same.roof.error'),
+            type: 'alert',
+            icon: 'warning',
+          })
+          return
+        }
+
+        break
+      }
+      case 'OUTDMULTI': {
+        if (surfaceList.length > 1) {
+          if (Object.keys(surfaceType).length > 1) {
+            swalFire({
+              text: getMessage('module.circuit.fix.not.same.roof.error'),
+              type: 'alert',
+              icon: 'warning',
+            })
+            return
+          }
+        }
+        if (selectedModels.length > 1) {
           let result = false
 
           uniqueCircuitNumbers.forEach((number) => {
@@ -121,6 +193,8 @@ export default function PassivityCircuitAllocation(props) {
             return
           }
         }
+      }
+    }
 
     let tempSelectedPcs = { ...selectedPcs }
     canvas.discardActiveObject()
@@ -169,6 +243,8 @@ export default function PassivityCircuitAllocation(props) {
           roofSurfaceId: surface.id,
           roofSurface: surface.direction,
           roofSurfaceIncl: +canvas.getObjects().filter((obj) => obj.id === surface.parentId)[0].pitch,
+          roofSurfaceNorthYn: surface.direction === 'north' ? 'Y' : 'N',
+          roofSurfaceNorthModuleYn: surface.northModuleYn,
           moduleList: surface.modules.map((module) => {
             return {
               itemId: module.moduleInfo.itemId,
@@ -250,6 +326,12 @@ export default function PassivityCircuitAllocation(props) {
         return
       }
 
+      targetModules.forEach((module) => {
+        const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+        const targetModule = modules.find((obj) => obj.id === module)
+        targetModule.pcs = selectedPcs
+      })
+
       setTargetModules([])
       setCircuitNumber(+circuitNumber + 1)
       setModuleStatisticsData()
@@ -284,6 +366,7 @@ export default function PassivityCircuitAllocation(props) {
           obj.circuit = null
           obj.circuitNumber = null
           obj.pcsItemId = null
+          obj.pcs = null
         })
         setCircuitNumber(minCircuitNumber)
         setTargetModules([])
@@ -310,6 +393,7 @@ export default function PassivityCircuitAllocation(props) {
           obj.circuit = null
           obj.circuitNumber = null
           obj.pcsItemId = null
+          obj.pcs = null
         })
         canvas.renderAll()
         setCircuitNumber(1)
@@ -477,6 +561,7 @@ export default function PassivityCircuitAllocation(props) {
   return (
     <>
       <div className="properties-setting-wrap outer">
+        <div style={{ display: isFold ? 'none' : 'block' }}>
           <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
           <div className="module-table-box mb10">
             <div className="module-table-inner">
@@ -521,7 +606,9 @@ export default function PassivityCircuitAllocation(props) {
             <div className="module-table-inner">
               <div className="hexagonal-wrap">
                 <div className="hexagonal-item">
-                <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
+                  <div className="bold-font">
+                    {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}
+                  </div>
                 </div>
                 <div className="hexagonal-item">
                   {selectedModels.map((model, index) => (
@@ -548,6 +635,7 @@ export default function PassivityCircuitAllocation(props) {
               </div>
             </div>
           </div>
+        </div>
         <div className="slope-wrap">
           <div className="circuit-right-wrap mb15">
             <div className="outline-form">
@@ -561,7 +649,20 @@ export default function PassivityCircuitAllocation(props) {
                   value={circuitNumber}
                   min={1}
                   max={99}
-                  onChange={(e) => setCircuitNumber(e.target.value)}
+                  onChange={(e) => {
+                    const v = e.target.value
+                    if (v === '') {
+                      setCircuitNumber('')
+                      return
+                    }
+                    const n = Number(normalizeDigits(v))
+                    if (Number.isNaN(n)) {
+                      setCircuitNumber('')
+                    } else {
+                      const clamped = Math.max(1, Math.min(99, n))
+                      setCircuitNumber(clamped)
+                    }
+                  }}
                 />
               </div>
               <button className="btn-frame roof" onClick={() => handleCircuitNumberFix()}>

src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx

@@ -10,6 +10,7 @@ import { defaultSlope } from '@/store/commonAtom'
 import { re } from 'mathjs'
 import { basicSettingState } from '@/store/settingAtom'
 import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
+import { normalizeDigits } from '@/util/input-utils'
 
 export default function DimensionLineSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -144,8 +145,13 @@ export default function DimensionLineSetting(props) {
                     defaultValue={''}
                     value={changeLength}
                     onChange={(e) => {
-                      console.log(e.target)
-                      setChangeLength(e.target.value)
+                      const v = e.target.value
+                      if (v === '') {
+                        setChangeLength('')
+                        return
+                      }
+                      const n = Number(normalizeDigits(v))
+                      setChangeLength(Number.isNaN(n) ? '' : n)
                     }}
                   />
                 </div>

src/components/floor-plan/modal/eavesGable/type/Eaves.jsx

@@ -3,6 +3,8 @@ import Image from 'next/image'
 import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
+import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
   const { getMessage } = useMessage()
@@ -20,7 +22,32 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             {getMessage('slope')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
+            {/*<input*/}
+            {/*  type="text"*/}
+            {/*  className="input-origin block"*/}
+            {/*  defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}*/}
+            {/*  ref={pitchRef}*/}
+            {/*  onChange={(e) => {*/}
+            {/*    const v = normalizeDecimalLimit(e.target.value, 2)*/}
+            {/*    e.target.value = v*/}
+            {/*    if (pitchRef?.current) pitchRef.current.value = v*/}
+            {/*  }}*/}
+            {/*/>*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
+              className="input-origin block"
+              ref={pitchRef}
+              value={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}
+              onChange={(value) => {
+                if (pitchRef?.current) pitchRef.current.value = value
+              }}
+              options={{
+                allowNegative: false,
+                allowDecimal: true //(index !== 0),
+              }}
+            ></CalculatorInput>
           </div>
           <span className="thin">{pitchText}</span>
         </div>
@@ -29,7 +56,32 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             {getMessage('offset')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />
+            {/*<input*/}
+            {/*  type="text"*/}
+            {/*  className="input-origin block"*/}
+            {/*  defaultValue={500}*/}
+            {/*  ref={offsetRef}*/}
+            {/*  onChange={(e) => {*/}
+            {/*    const v = normalizeDigits(e.target.value)*/}
+            {/*    e.target.value = v*/}
+            {/*    if (offsetRef?.current) offsetRef.current.value = v*/}
+            {/*  }}*/}
+            {/*/>*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
+              className="input-origin block"
+              ref={offsetRef}
+              value={500}
+              onChange={(value) => {
+                if (offsetRef?.current) offsetRef.current.value = value
+              }}
+              options={{
+                allowNegative: false,
+                allowDecimal: false //(index !== 0),
+              }}
+            ></CalculatorInput>
           </div>
           <span className="thin">mm</span>
         </div>
@@ -45,7 +97,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -58,7 +112,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -66,14 +122,42 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             <div className="eaves-keraba-th">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="number" min={0} className="input-origin block" defaultValue={500} ref={widthRef} readOnly={type === '1'} />
+                  {/*<input*/}
+                  {/*  type="text"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  defaultValue={500}*/}
+                  {/*  ref={widthRef}*/}
+                  {/*  readOnly={type === '1'}*/}
+                  {/*  onChange={(e) => {*/}
+                  {/*    const v = normalizeDigits(e.target.value)*/}
+                  {/*    e.target.value = v*/}
+                  {/*    if (widthRef?.current) widthRef.current.value = v*/}
+                  {/*  }}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    ref={widthRef}
+                    value={500}
+                    onChange={(value) => {
+                      if (widthRef?.current) widthRef.current.value = value
+                    }}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false //(index !== 0),
+                    }}
+                  ></CalculatorInput>
                 </div>
                 <span className="thin">mm</span>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>

src/components/floor-plan/modal/eavesGable/type/Gable.jsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
   const { getMessage } = useMessage()
@@ -21,7 +22,19 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             {getMessage('offset')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
+            {/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
+              className="input-origin block"
+              ref={offsetRef}
+              value={300}
+              options={{
+                allowNegative: false,
+                allowDecimal: false //(index !== 0),
+              }}
+            ></CalculatorInput>
           </div>
           <span className="thin">mm</span>
         </div>
@@ -37,7 +50,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -50,7 +65,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -61,20 +78,38 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                   {getMessage('slope')}
                 </span>
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
-                    type="text"
+                  {/*<input*/}
+                  {/*  type="text"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}*/}
+                  {/*  ref={pitchRef}*/}
+                  {/*  readOnly={type === '1'}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
-                    defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
                     ref={pitchRef}
+                    value={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
                     readOnly={type === '1'}
-                  />
+                    onChange={(value) => {
+                      if (pitchRef?.current) pitchRef.current.value = value
+                    }}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: true //(index !== 0),
+                    }}
+                  ></CalculatorInput>
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -85,14 +120,29 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                   {getMessage('offset')}
                 </span>
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={800} ref={widthRef} readOnly={type === '1'} />
+                  {/*<input type="text" className="input-origin block" defaultValue={800} ref={widthRef} readOnly={type === '1'} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    ref={widthRef}
+                    value={800}
+                    readOnly={type === '1'}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false //(index !== 0),
+                    }}
+                  ></CalculatorInput>
                 </div>
                 <span className="thin">mm</span>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>

src/components/floor-plan/modal/eavesGable/type/Shed.jsx

@@ -1,4 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Shed({ offsetRef }) {
   const { getMessage } = useMessage()
@@ -10,7 +11,19 @@ export default function Shed({ offsetRef }) {
             {getMessage('offset')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input type="text" className="input-origin block" ref={offsetRef} defaultValue={300} />
+            {/*<input type="text" className="input-origin block" ref={offsetRef} defaultValue={300} />*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
+              className="input-origin block"
+              ref={offsetRef}
+              value={300}
+              options={{
+                allowNegative: false,
+                allowDecimal: false //(index !== 0),
+              }}
+            ></CalculatorInput>
           </div>
           <span className="thin">mm</span>
         </div>

src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx

@@ -1,6 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import Image from 'next/image'
 import { useState } from 'react'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function WallMerge({ offsetRef, radioTypeRef }) {
   const { getMessage } = useMessage()
@@ -18,12 +19,14 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
                 <input type="radio" name="radio01" id="ra01" value="1" checked={type === '1'} onChange={(e) => onChange(e)} />
-                <label htmlFor="ra01">{getMessage('has.sleeve')}</label>
+                <label htmlFor="ra01">{getMessage('has.not.sleeve')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -31,12 +34,14 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
                 <input type="radio" name="radio01" id="ra02" value="2" checked={type === '2'} onChange={(e) => onChange(e)} />
-                <label htmlFor="ra02">{getMessage('has.not.sleeve')}</label>
+                <label htmlFor="ra02">{getMessage('has.sleeve')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -47,14 +52,29 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
                   {getMessage('offset')}
                 </span>
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} readOnly={type === '1'} />
+                  {/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} readOnly={type === '1'} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    ref={offsetRef}
+                    value={300}
+                    readOnly={type === '1'}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false //(index !== 0),
+                    }}
+                  ></CalculatorInput>
                 </div>
                 <span className="thin">mm</span>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -7,6 +7,8 @@ import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import { canvasState } from '@/store/canvasAtom'
 import { usePolygon } from '@/hooks/usePolygon'
+import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 const FLOW_DIRECTION_TYPE = {
   EIGHT_AZIMUTH: 'eightAzimuth',
@@ -18,6 +20,9 @@ export default function FlowDirectionSetting(props) {
   const { id, pos = contextPopupPosition, target } = props
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
+  const { setSurfaceShapePattern } = useRoofFn()
+
+  const { changeSurfaceLineType } = useSurfaceShapeBatch({})
 
   useEffect(() => {
     return () => {
@@ -29,15 +34,40 @@ export default function FlowDirectionSetting(props) {
   const [flowDirection, setFlowDirection] = useState(target.direction)
   const { closePopup } = usePopup()
 
+  useEffect(() => {
+    let newCompassDeg = 0
+    if ([-15, 0, 15].includes(compasDeg)) {
+      newCompassDeg = 0
+    } else if ([30, 45, 60].includes(compasDeg)) {
+      newCompassDeg = 45
+    } else if ([75, 90, 105].includes(compasDeg)) {
+      newCompassDeg = 90
+    } else if ([120, 135, 150].includes(compasDeg)) {
+      newCompassDeg = 135
+    } else if ([165, 180, -165].includes(compasDeg)) {
+      newCompassDeg = 180
+    } else if ([-120, -135, -150].includes(compasDeg)) {
+      newCompassDeg = -135
+    } else if ([-105, -90, -75].includes(compasDeg)) {
+      newCompassDeg = -90
+    } else if ([-60, -45, -30].includes(compasDeg)) {
+      newCompassDeg = -45
+    } else {
+      newCompassDeg = ''
+    }
+    const newOrientation = orientations.find((item) => item.value === newCompassDeg)
+    setSelectedOrientation(newOrientation)
+  }, [compasDeg])
+
   const orientations = [
-    { name: `${getMessage('commons.none')}`, value: 0 },
-    { name: `${getMessage('commons.south')}`, value: 360 },
-    { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 315 },
-    { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: 45 },
-    { name: `${getMessage('commons.east')}`, value: 270 },
-    { name: `${getMessage('commons.west')}`, value: 90 },
-    { name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 225 },
-    { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 },
+    { name: `${getMessage('commons.none')}`, value: '' },
+    { name: `${getMessage('commons.south')}`, value: 0 },
+    { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 45 },
+    { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: -45 },
+    { name: `${getMessage('commons.east')}`, value: 90 },
+    { name: `${getMessage('commons.west')}`, value: -90 },
+    { name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 135 },
+    { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: -135 },
     { name: `${getMessage('commons.north')}`, value: 180 },
   ]
 
@@ -51,8 +81,10 @@ export default function FlowDirectionSetting(props) {
       surfaceCompass: orientation,
       surfaceCompassType: type,
     })
+    setSurfaceShapePattern(roof, null, null, roof.roofMaterial)
     drawDirectionArrow(roof)
     canvas?.renderAll()
+    changeSurfaceLineType(roof)
     closePopup(id)
   }
 
@@ -105,6 +137,11 @@ export default function FlowDirectionSetting(props) {
                   value={selectedOrientation}
                   options={orientations}
                   onChange={(e) => {
+                    if (e.value === '') {
+                      setCompasDeg(null)
+                      setSelectedOrientation(e)
+                      return
+                    }
                     setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
                     setSelectedOrientation(e)
                     setCompasDeg(e.value)
@@ -133,31 +170,32 @@ export default function FlowDirectionSetting(props) {
             <div className="draw-flow-wrap">
               <div className="compas-box">
                 <div className="compas-box-inner">
-                  {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
+                  {Array.from({ length: 180 / 15 }).map((dot, index) => (
                     <div
                       key={index}
-                      className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
+                      className={`circle ${compasDeg === -15 * index + 180 ? 'act' : ''}`}
                       onClick={() => {
+                        if (index === 0) {
+                          setCompasDeg(180)
+                          return
+                        }
                         setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                        setCompasDeg(15 * (12 + index))
+                        setCompasDeg(-15 * index + 180)
                       }}
                     ></div>
                   ))}
-                  {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
+                  {Array.from({ length: 180 / 15 }).map((dot, index) => (
                     <div
                       key={index}
-                      className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
+                      className={`circle ${compasDeg === -1 * 15 * index ? 'act' : ''}`}
                       onClick={() => {
                         setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                        setCompasDeg(15 * (index + 1))
+                        setCompasDeg(15 * index * -1)
                       }}
                     ></div>
                   ))}
                   <div className="compas">
-                    <div
-                      className="compas-arr"
-                      style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
-                    ></div>
+                    <div className="compas-arr" style={{ transform: `${`rotate(${-1 * compasDeg}deg)`}` }}></div>
                   </div>
                 </div>
               </div>

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -4,10 +4,10 @@ import { useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
-import { onlyNumberInputChange } from '@/util/input-utils'
 import { usePopup } from '@/hooks/usePopup'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useSwal } from '@/hooks/useSwal'
+import { normalizeDigits } from '@/util/input-utils'
 
 const TYPE = {
   DOT: 'DOT',
@@ -218,7 +218,7 @@ export default function DotLineGrid(props) {
                   className="input-origin"
                   name={`horizontalInterval`}
                   value={copyCurrentSetting.INTERVAL.horizontalInterval}
-                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}
                 />
               </div>
               <span>mm</span>
@@ -231,7 +231,7 @@ export default function DotLineGrid(props) {
                   className="input-origin"
                   name={`verticalInterval`}
                   value={copyCurrentSetting.INTERVAL.verticalInterval}
-                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}
                 />
               </div>
               <span>mm</span>
@@ -258,7 +258,7 @@ export default function DotLineGrid(props) {
                   className="input-origin"
                   name={`ratioInterval`}
                   value={copyCurrentSetting.INTERVAL.ratioInterval}
-                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}
                 />
               </div>
               <span>mm</span>

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -4,9 +4,11 @@ import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
-import { currentObjectState } from '@/store/canvasAtom'
-import { useGrid } from '@/hooks/common/useGrid'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { gridColorState } from '@/store/gridAtom'
+import { gridDisplaySelector } from '@/store/settingAtom'
 
+const GRID_PADDING = 5
 export default function GridCopy(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
@@ -15,9 +17,39 @@ export default function GridCopy(props) {
   const [length, setLength] = useState('0')
   const [arrow, setArrow] = useState(null)
   const currentObject = useRecoilValue(currentObjectState)
-  const { copy } = useGrid()
+  const canvas = useRecoilValue(canvasState)
+  const gridColor = useRecoilValue(gridColorState)
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const handleApply = () => {
-    copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length)
+    copy(currentObject, ['↑', '←'].includes(arrow) ? (+length * -1) / 10 : +length / 10)
+  }
+
+  const copy = (object, length) => {
+    const lineStartX = object.direction === 'vertical' ? object.x1 + length : object.x1
+    const lineEndX = object.direction === 'vertical' ? object.x2 + length : object.x2
+    const lineStartY = object.direction === 'vertical' ? object.y1 : object.y1 + length
+    const lineEndY = object.direction === 'vertical' ? object.y2 : object.y1 + length
+
+    const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
+      stroke: gridColor,
+      strokeWidth: 1,
+      selectable: true,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      strokeDashArray: [5, 2],
+      opacity: 0.3,
+      padding: GRID_PADDING,
+      direction: object.direction,
+      visible: isGridDisplay,
+      name: object.name,
+    })
+
+    canvas.add(line)
+    canvas.setActiveObject(line)
+    canvas.renderAll()
   }
   return (
     <WithDraggable isShow={true} pos={pos} className="xm">

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -3,12 +3,10 @@ import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
-import { useCanvas } from '@/hooks/useCanvas'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
-import { useGrid } from '@/hooks/common/useGrid'
 import { useSwal } from '@/hooks/useSwal'
-import { set } from 'react-hook-form'
+import { normalizeDigits } from '@/util/input-utils'
 
 export default function GridMove(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -17,7 +15,6 @@ export default function GridMove(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { swalFire } = useSwal()
-  const { move } = useGrid()
   const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
   const [isAll, setIsAll] = useState(false)
   const [verticalSize, setVerticalSize] = useState('0')
@@ -54,21 +51,31 @@ export default function GridMove(props) {
         .forEach((grid) => {
           move(
             grid,
-            arrow2 === '←' ? Number(horizonSize) * -1 : Number(horizonSize),
-            arrow1 === '↑' ? Number(verticalSize) * -1 : Number(verticalSize),
+            arrow2 === '←' ? (Number(normalizeDigits(horizonSize)) * -1) / 10 : Number(normalizeDigits(horizonSize)) / 10,
+            arrow1 === '↑' ? (Number(normalizeDigits(verticalSize)) * -1) / 10 : Number(normalizeDigits(verticalSize)) / 10,
           )
         })
     } else {
       move(
         currentObject,
-        arrow2 === '←' ? Number(horizonSize) * -1 : Number(horizonSize),
-        arrow1 === '↑' ? Number(verticalSize) * -1 : Number(verticalSize),
+        arrow2 === '←' ? (Number(normalizeDigits(horizonSize)) * -1) / 10 : Number(normalizeDigits(horizonSize)) / 10,
+        arrow1 === '↑' ? (Number(normalizeDigits(verticalSize)) * -1) / 10 : Number(normalizeDigits(verticalSize)) / 10,
       )
     }
     canvas.renderAll()
     handleClose()
   }
 
+  const move = (object, x, y) => {
+    object.set({
+      ...object,
+      x1: object.direction === 'vertical' ? object.x1 + x : object.x1,
+      x2: object.direction === 'vertical' ? object.x1 + x : object.x2,
+      y1: object.direction === 'vertical' ? object.y1 : object.y1 + y,
+      y2: object.direction === 'vertical' ? object.y2 : object.y1 + y,
+    })
+  }
+
   const handleClose = () => {
     closePopup(id)
   }
@@ -91,7 +98,7 @@ export default function GridMove(props) {
                     type="text"
                     className="input-origin"
                     value={verticalSize}
-                    onChange={(e) => setVerticalSize(e.target.value)}
+                    onChange={(e) => setVerticalSize(normalizeDigits(e.target.value))}
                     readOnly={!isAll && currentObject?.direction === 'vertical'}
                   />
                 </div>
@@ -119,7 +126,7 @@ export default function GridMove(props) {
                     type="text"
                     className="input-origin"
                     value={horizonSize}
-                    onChange={(e) => setHorizonSize(e.target.value)}
+                    onChange={(e) => setHorizonSize(normalizeDigits(e.target.value))}
                     readOnly={!isAll && currentObject?.direction === 'horizontal'}
                   />
                 </div>

src/components/floor-plan/modal/lineTypes/Angle.jsx

@@ -1,6 +1,8 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
-import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
+import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
+import { useEffect } from 'react'
 
 export default function Angle({ props }) {
   const { getMessage } = useMessage()
@@ -14,14 +16,39 @@ export default function Angle({ props }) {
             <div className="outline-form">
               <span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
               <div className="input-grid" style={{ width: '63px' }}>
-                <input
-                  type="text"
+                {/*<input*/}
+                {/*  type="text"*/}
+                {/*  className="input-origin block"*/}
+                {/*  value={angle1}*/}
+                {/*  ref={angle1Ref}*/}
+                {/*  onFocus={(e) => (angle1Ref.current.value = '')}*/}
+                {/*  onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}*/}
+                {/*  placeholder="45"*/}
+                {/*/>*/}
+                <CalculatorInput
+                  id=""
+                  name=""
+                  label=""
                   className="input-origin block"
                   value={angle1}
                   ref={angle1Ref}
-                  onFocus={(e) => (angle1Ref.current.value = '')}
-                  onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
+                  onChange={(value) => {
+                    // Calculate the final value first
+                    let finalValue = value;
+                    const numValue = parseInt(value, 10);
+                    if (!isNaN(numValue)) {
+                      const clampedValue = Math.min(180, Math.max(-180, numValue));
+                      finalValue = String(clampedValue);
+                    }
+                    // Set state once with the final value
+                    setAngle1(finalValue);
+                  }}
                   placeholder="45"
+                  onFocus={() => (angle1Ref.current.value = '')}
+                  options={{
+                    allowNegative: true,
+                    allowDecimal: true
+                  }}
                 />
               </div>
               <button
@@ -34,14 +61,29 @@ export default function Angle({ props }) {
             <div className="outline-form">
               <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
               <div className="input-grid" style={{ width: '63px' }}>
-                <input
-                  type="text"
+                {/*<input*/}
+                {/*  type="text"*/}
+                {/*  className="input-origin block"*/}
+                {/*  value={length1}*/}
+                {/*  ref={length1Ref}*/}
+                {/*  onFocus={(e) => (length1Ref.current.value = '')}*/}
+                {/*  onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
+                {/*  placeholder="3000"*/}
+                {/*/>*/}
+                <CalculatorInput
+                  id=""
+                  name=""
+                  label=""
                   className="input-origin block"
                   value={length1}
                   ref={length1Ref}
-                  onFocus={(e) => (length1Ref.current.value = '')}
-                  onChange={(e) => onlyNumberInputChange(e, setLength1)}
+                  onChange={(value) => setLength1(value)}
                   placeholder="3000"
+                  onFocus={() => (length1Ref.current.value = '')}
+                  options={{
+                    allowNegative: false,
+                    allowDecimal: false
+                  }}
                 />
               </div>
               <button

src/components/floor-plan/modal/lineTypes/Diagonal.jsx

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
-import { onlyNumberInputChange } from '@/util/input-utils'
+import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Diagonal({ props }) {
   const { getMessage } = useMessage()
@@ -30,14 +31,29 @@ export default function Diagonal({ props }) {
               {getMessage('modal.cover.outline.length')}
             </span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input
-                type="text"
+              {/*<input*/}
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={outerLineDiagonalLength}*/}
+              {/*  ref={outerLineDiagonalLengthRef}*/}
+              {/*  onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}*/}
+              {/*  onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}*/}
+              {/*  placeholder="3000"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={outerLineDiagonalLength}
                 ref={outerLineDiagonalLengthRef}
-                onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
-                onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
+                onChange={(value) => setOuterLineDiagonalLength(value)}
                 placeholder="3000"
+                onFocus={() => (outerLineDiagonalLengthRef.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
             <button
@@ -52,14 +68,29 @@ export default function Diagonal({ props }) {
           <div className="outline-form">
             <span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input
-                type="text"
+              {/*<input*/}
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={length1}*/}
+              {/*  ref={length1Ref}*/}
+              {/*  onFocus={(e) => (length1Ref.current.value = '')}*/}
+              {/*  onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
+              {/*  placeholder="3000"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={length1}
                 ref={length1Ref}
-                onFocus={(e) => (length1Ref.current.value = '')}
-                onChange={(e) => onlyNumberInputChange(e, setLength1)}
+                onChange={(value) => setLength1(value)}
                 placeholder="3000"
+                onFocus={() => (length1Ref.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
             <button
@@ -110,14 +141,29 @@ export default function Diagonal({ props }) {
           <div className="outline-form">
             <span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '98px' }}>
-              <input
-                type="text"
+              {/*<input*/}
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={length2}*/}
+              {/*  ref={length2Ref}*/}
+              {/*  onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
+              {/*  readOnly={true}*/}
+              {/*  placeholder="3000"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={length2}
                 ref={length2Ref}
-                onChange={(e) => onlyNumberInputChange(e, setLength2)}
-                readOnly={true}
+                onChange={(value) => setLength2(value)}
                 placeholder="3000"
+                onFocus={() => (length2Ref.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
           </div>