.env.development

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

.env.production

@@ -1,8 +1,6 @@
 NEXT_PUBLIC_API_SERVER_PATH="https://api.hanasys.jp/"
 
-NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"
+NEXT_PUBLIC_HOST_URL="http://1.248.227.176:4000"
-
-NEXT_PUBLIC_API_HOST_URL="https://www.hanasys.jp/"
 
 SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
 
@@ -13,9 +11,3 @@ NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secr
 # 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"
-
-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"

.gitmessage.txt

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

README.md

@@ -34,5 +34,3 @@ 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

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

ecosystem.config.js

@@ -1,13 +0,0 @@
-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

@@ -5,14 +5,12 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start:cluster1": "next start -p 5000",
+    "start": "next start -p 5000",
-    "start:cluster2": "next start -p 5001",
     "start:dev": "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",
@@ -25,7 +23,7 @@
     "js-cookie": "^3.0.5",
     "mathjs": "^13.0.2",
     "mssql": "^11.0.1",
-    "next": "14.2.28",
+    "next": "14.2.21",
     "next-international": "^1.2.4",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
@@ -39,7 +37,6 @@
     "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",

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

@@ -1,3 +0,0 @@
-<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

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

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

@@ -1,69 +0,0 @@
-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 = `cads/${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)
-
-    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

@@ -1,133 +0,0 @@
-import { NextResponse } from 'next/server'
-import { S3Client, PutObjectCommand, DeleteObjectCommand, 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,
-  },
-})
-
-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 {
-    const checkResult = checkArea({ width, height, left, top })
-
-    // Get the image from S3
-    const { Body } = await s3.send(
-      new GetObjectCommand({
-        Bucket,
-        Key,
-      }),
-    )
-
-    // Convert stream to buffer
-    const chunks = []
-    for await (const chunk of Body) {
-      chunks.push(chunk)
-    }
-    const imageBuffer = Buffer.concat(chunks)
-
-    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
-  }
-}
-
-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/${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/map/route.js

@@ -1,78 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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/layout.js

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

src/common/common.js

@@ -125,11 +125,6 @@ export const TRESTLE_MATERIAL = {
   BRACKET: 'bracket',
 }
 
-export const MODULE_SETUP_TYPE = {
-  LAYOUT: 'layout',
-  AUTO: 'auto',
-}
-
 export const SAVE_KEY = [
   'selectable',
   'name',
@@ -208,7 +203,6 @@ export const SAVE_KEY = [
   'fontWeight',
   'dormerAttributes',
   'toFixed',
-  'isSortedPoints',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]

src/components/auth/AutoLogin.jsx

@@ -2,51 +2,15 @@
 
 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({ autoLoginParam }) {
+export default function AutoLoginPage() {
-  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(true)
-
-  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>
@@ -59,54 +23,5 @@ export default function AutoLoginPage({ autoLoginParam }) {
         </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,10 +25,8 @@ export default function Login() {
 
   useEffect(() => {
     if (autoLoginParam) {
-      if (autoLoginParam !== 'Y') {
       autoLoginProcess(autoLoginParam)
     }
-    }
 
     // console.log('🚀 ~ checkSession ~ checkSession():', checkSession())
     // checkSession().then((res) => {
@@ -336,7 +334,7 @@ export default function Login() {
               </div>
             </>
           )}
-          {autoLoginParam && <AutoLogin autoLoginParam={autoLoginParam} />}
+          {autoLoginParam && <AutoLogin />}
         </div>
         <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
       </div>

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

@@ -6,19 +6,29 @@ import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useEvent } from '@/hooks/useEvent'
-import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { canvasState } 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 currentObject = useRecoilValue(currentObjectState)
+  const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
   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
@@ -26,13 +36,11 @@ 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,
@@ -40,7 +48,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) => {
@@ -56,9 +64,6 @@ export default function QContextMenu(props) {
       }
     }
 
-  useEffect(() => {
-    if (!contextRef.current) return
-
     canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
     document.addEventListener('click', handleClick)
     document.addEventListener('click', handleOutsideClick)
@@ -67,9 +72,43 @@ export default function QContextMenu(props) {
       removeDocumentEvent('keyup')
       document.removeEventListener('click', handleClick)
       document.removeEventListener('click', handleOutsideClick)
-      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
-  }, [contextRef, contextMenuList, currentObject])
+  }, [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)
+    })
+  }
 
   return (
     <>

src/components/common/select/QSelectBox.jsx

@@ -26,7 +26,6 @@ export default function QSelectBox({
   targetKey = '',
   showKey = '',
   params = {},
-  tagTitle = '',
 }) {
   const { getMessage } = useMessage()
 
@@ -40,7 +39,7 @@ export default function QSelectBox({
     if (showKey !== '' && !value) {
       //value가 없으면 showKey가 있으면 우선 보여준다
       // return options[0][showKey]
-      return title !== '' ? title : getMessage('selectbox.title')
+      return title
     } else if (showKey !== '' && value) {
       //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
 
@@ -83,13 +82,12 @@ 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">
         {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/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, { components } from 'react-select'
+import Select from 'react-select'
 import { convertNumberToPriceDecimal, convertNumberToPriceDecimalToFixed } from '@/util/common-utils'
 import ProductFeaturesPop from './popup/ProductFeaturesPop'
 import { v4 as uuidv4 } from 'uuid'
@@ -60,7 +60,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 +98,7 @@ export default function Estimate({}) {
   }
 
   const initEstimate = (currPid = currentPid) => {
-    // console.log('🚀 ~ initEstimate ~ currPid:', currPid)
+    console.log('🚀 ~ initEstimate ~ currPid:', currPid)
     closeAll()
     setObjectNo(objectRecoil.floorPlanObjectNo)
 
@@ -117,7 +117,6 @@ export default function Estimate({}) {
         item.value = item.clRefChr1
         item.label = item.clRefChr2
       })
-      // console.log(code2)
       setCableItemList(code2)
     }
 
@@ -153,7 +152,7 @@ export default function Estimate({}) {
   }
 
   useEffect(() => {
-    // console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
+    console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
     if (selectedPlan) initEstimate(selectedPlan.planNo)
   }, [selectedPlan])
 
@@ -176,10 +175,7 @@ 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 {
@@ -221,10 +217,7 @@ 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 {
@@ -247,6 +240,7 @@ export default function Estimate({}) {
                 }
               }
             })
+
             setSpecialNoteList(res)
 
             setSpecialNoteFirstFlg(true)
@@ -383,8 +377,8 @@ export default function Estimate({}) {
   useEffect(() => {
     if (estimateContextState.estimateType !== '') {
       const param = {
-        saleStoreId: estimateContextState.sapSaleStoreId,
+        saleStoreId: session.storeId,
-        sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
+        sapSalesStoreCd: session.custCd,
         docTpCd: estimateContextState?.estimateType,
       }
 
@@ -393,8 +387,6 @@ export default function Estimate({}) {
         if (isNotEmptyArray(res?.data)) {
           setStorePriceList(res.data)
         }
-
-        setItemChangeYn(true)
       })
 
       if (estimateContextState.estimateType === 'YJSS') {
@@ -424,6 +416,8 @@ export default function Estimate({}) {
           handlePricing('UNIT_PRICE')
         }
       }
+
+      setItemChangeYn(true)
     }
   }, [estimateContextState?.estimateType])
 
@@ -475,21 +469,6 @@ 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
-          }
-        }
       }
     })
 
@@ -499,26 +478,12 @@ export default function Estimate({}) {
     })
   }
 
- //Pricing 버튼클릭시  confirm 노출
-  const handlePricingBtn = (showPriceCd) => {
-   swalFire({
-     text: getMessage('estimate.detail.showPrice.pricingBtn.confirm'),
-     type: 'confirm',
-     icon: 'warning',
-     confirmFn: () => {
-       handlePricing(showPriceCd)
-     },
-   })
- }
-
   //Pricing 버튼
   const handlePricing = async (showPriceCd) => {
     const param = {
-      saleStoreId: estimateContextState.sapSaleStoreId,
+      saleStoreId: session.storeId,
-      sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
+      sapSalesStoreCd: session.custCd,
       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),
     }
@@ -541,6 +506,7 @@ export default function Estimate({}) {
         })
       }
     }
+
     setIsGlobalLoading(true)
     await promisePost({ url: '/api/estimate/price/item-price-list', data: param }).then((res) => {
       let updateList = []
@@ -565,7 +531,6 @@ 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(),
                       })
@@ -731,7 +696,7 @@ export default function Estimate({}) {
   /* 케이블 select 변경시  */
   const onChangeDisplayCableItem = (value, itemList) => {
     itemList.map((item, index) => {
-      if (item.dispCableFlg === '1' && item.itemTpCd !== 'M12') {
+      if (item.dispCableFlg === '1') {
         if (value !== '') {
           onChangeDisplayItem(value, item.dispOrder, index, true)
         }
@@ -740,18 +705,6 @@ export default function Estimate({}) {
     setCableItem(value)
   }
 
-  /* 케이블 select 변경시  */
-  const onChangeDisplayDoubleCableItem = (value, itemList) => {
-    itemList.map((item, index) => {
-      if (item.dispCableFlg === '1' && item.itemTpCd === 'M12') {
-        if (value !== '') {
-          onChangeDisplayItem(value, item.dispOrder, index, true)
-        }
-      }
-    })
-    setCableDbItem(value)
-  }
-
   // 아이템 자동완성 검색시 아이템 추가/변경시
   const onChangeDisplayItem = (itemId, dispOrder, index, flag) => {
     const param = {
@@ -1103,18 +1056,13 @@ export default function Estimate({}) {
 
             if (item.dispCableFlg === '1') {
               dispCableFlgCnt++
-              if(item.itemTpCd === 'M12') {
-                setCableDbItem(item.itemId)
-              }else{
               setCableItem(item.itemId)
             }
           }
-          }
         })
 
         if (dispCableFlgCnt === 0) {
           setCableItem('100038')
-          setCableDbItem('100037')
         }
 
         let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
@@ -1178,19 +1126,13 @@ export default function Estimate({}) {
             }
 
             if (item.dispCableFlg === '1') {
-
-              if(item.itemTpCd === 'M12') {
-                setCableDbItem(item.itemId)
-              }else{
               setCableItem(item.itemId)
             }
           }
-          }
         })
 
         if (dispCableFlgCnt === 0) {
           setCableItem('100038')
-          setCableDbItem('100037')
         }
 
         totals.vatPrice = totals.supplyPrice * 0.1
@@ -1251,26 +1193,10 @@ 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">
@@ -1415,19 +1341,8 @@ 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">
-                          {/*pkgRank is null, empty 인 경우 : 사용불가, 이전에 등록된 경우 사용가능, style로 제어*/}
+                        <div className="d-check-radio light mr10">
-                          <div
-                            className="d-check-radio light mr10"
-                            style={{
-                              display:
-                                (isNotEmptyArray(storePriceList) > 0 && storePriceList[0].pkgRank !== null && storePriceList[0].pkgRank !== '') ||
-                                estimateContextState?.estimateType === 'YJSS'
-                                  ? ''
-                                  : 'none',
-                            }}
-                          >
                           <input
                             type="radio"
                             name="estimateType"
@@ -1457,38 +1372,6 @@ export default function Estimate({}) {
                           <label htmlFor="YJOD">{getMessage('estimate.detail.estimateType.yjod')}</label>
                         </div>
                       </div>
-                        {session?.storeLvl === '1' && agencyCustList.length > 0 ? (
-                          <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>
@@ -1846,17 +1729,15 @@ export default function Estimate({}) {
                 <button
                   type="button"
                   className="btn-origin grey ml5"
-                  onClick={(event) => {
+                  onClick={() => {
-
                     setHandlePricingFlag(true)
-                    handlePricingBtn(showPriceCd)
+                    handlePricing(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"
@@ -1866,34 +1747,11 @@ export default function Estimate({}) {
                     value={cableItem}
                   >
                     {cableItemList.length > 0 &&
-                      cableItemList.map((row) => {
+                      cableItemList.map((row) => (
-                        if(!row.clRefChr2.includes('S')){
+                        <option key={row.clRefChr1} value={row.clRefChr1}>
-                          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>
@@ -1976,7 +1834,7 @@ export default function Estimate({}) {
                                 <input
                                   type="checkbox"
                                   id={item?.dispOrder}
-                                  disabled={!!item?.paDispOrder || item.dispCableFlg === '1X'}
+                                  disabled={!!item?.paDispOrder || item.dispCableFlg === '1'}
                                   onChange={() => onChangeSelect(item.dispOrder)}
                                   checked={!!selection.has(item.dispOrder)}
                                 />
@@ -2001,13 +1859,8 @@ export default function Estimate({}) {
                                         }
                                       }}
                                       menuPlacement={'auto'}
-                                      getOptionLabel={(x) => x.itemName + ' (' + x.itemNo + ')'}
+                                      getOptionLabel={(x) => x.itemName}
                                       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) {
@@ -2027,17 +1880,12 @@ export default function Estimate({}) {
                                       placeholder="Select"
                                       options={cableItemList}
                                       menuPlacement={'auto'}
-                                      getOptionLabel={(x) => x.clRefChr3 + ' (' + x.clRefChr1 + ')'}
+                                      getOptionLabel={(x) => x.clRefChr3}
                                       getOptionValue={(x) => x.clRefChr1}
-                                      components={{
-                                        SingleValue: ({ children, ...props }) => {
-                                          return <components.SingleValue {...props}>{(item.itemTpCd === 'M12')? item.itemName : props.data.clRefChr3}</components.SingleValue>
-                                        },
-                                      }}
                                       isClearable={false}
                                       isDisabled={true}
                                       value={cableItemList.filter(function (option) {
-                                        return (item.itemTpCd === 'M12')? item.itemId : option.clRefChr1 === item.itemId
+                                        return option.clRefChr1 === item.itemId
                                       })}
                                     />
                                   )}
@@ -2088,11 +1936,7 @@ export default function Estimate({}) {
                                   <input
                                     type="text"
                                     className="input-light al-r"
-                                    value={
+                                    value={convertNumberToPriceDecimal(item?.showSalePrice === '0' ? null : item?.salePrice?.replaceAll(',', ''))}
-                                      item.openFlg === '1'
-                                        ? 'OPEN'
-                                        : convertNumberToPriceDecimal(item?.showSalePrice === '0' ? null : item?.salePrice?.replaceAll(',', ''))
-                                    }
                                     disabled={
                                       item.openFlg === '1'
                                         ? true
@@ -2120,9 +1964,7 @@ export default function Estimate({}) {
                               </div>
                             </td>
                             <td className="al-r">
-                              {item?.openFlg === '1'
+                              {convertNumberToPriceDecimal(
-                                ? 'OPEN'
-                                : convertNumberToPriceDecimal(
                                 item?.showSaleTotPrice === '0'
                                   ? null
                                   : item?.amount === ''

src/components/fabric/QPolygon.js

@@ -45,11 +45,8 @@ 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) => {
@@ -65,7 +62,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
       if (!isDiagonal) {
         points = sortedPoints(points)
-        this.isSortedPoints = true
       }
     }
 
@@ -123,12 +119,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.addLengthText()
 
     this.on('moving', () => {
-      this.initLines()
       this.addLengthText()
     })
 
     this.on('modified', (e) => {
-      this.initLines()
       this.addLengthText()
     })
 
@@ -189,8 +183,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.lines = []
 
-    this.getCurrentPoints().forEach((point, i) => {
+    this.points.forEach((point, i) => {
-      const nextPoint = this.getCurrentPoints()[(i + 1) % this.points.length]
+      const nextPoint = this.points[(i + 1) % this.points.length]
       const line = new QLine([point.x, point.y, nextPoint.x, nextPoint.y], {
         stroke: this.stroke,
         strokeWidth: this.strokeWidth,

src/components/floor-plan/CanvasFrame.jsx

@@ -30,14 +30,11 @@ 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'
 
 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()
@@ -95,8 +92,6 @@ export default function CanvasFrame() {
 
   useEffect(() => {
     setIsGlobalLoading(false)
-    // 혹시 모를 팝업이 떠있는 경우 닫고 시작한다.
-    closeAll()
 
     return () => {
       canvas?.clear()
@@ -115,38 +110,6 @@ 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,13 +31,12 @@ 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={() => (plan.isCurrent ? '' : handleCurrentPlan(plan.id))}
+              onClick={() => handleCurrentPlan(plan.id)}
             >
               <span>{`Plan ${plan.planNo}`}</span>
               {plans.length > 1 && !pathname.includes('/estimate') && !pathname.includes('/simulator') && (

src/components/floor-plan/CanvasMenu.jsx

@@ -548,26 +548,13 @@ export default function CanvasMenu(props) {
               {
                 <div className={`vertical-horizontal ${verticalHorizontalMode ? 'on' : ''}`}>
                   <span>{getMessage('plan.mode.vertical.horizontal')}</span>
-                  <button
+                  <button onClick={() => setVerticalHorizontalMode(!verticalHorizontalMode)}>{verticalHorizontalMode ? 'ON' : 'OFF'}</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')} title="文字作成"></button>
+                <button className={`btn01 ${commonUtils.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
-                <button
+                <button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
-                  className={`btn02 ${commonUtils.dimension ? 'active' : ''} `}
+                <button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
-                  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">
@@ -593,7 +580,6 @@ export default function CanvasMenu(props) {
                       sourceKey={'index'}
                       targetKey={'index'}
                       disabled={+basicSetting.roofSizeSet === 3}
-                      tagTitle={'屋根材変更'}
                     />
                   }
                 </div>
@@ -602,10 +588,9 @@ 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} title="設定"></button>
+                <button className="btn04" onClick={handlePopup}></button>
               </div>
               <div className="size-control">
                 <button
@@ -614,9 +599,7 @@ export default function CanvasMenu(props) {
                     handleZoom(false)
                   }}
                 ></button>
-                <span onClick={handleZoomClear} title="拡大・縮小">
+                <span onClick={handleZoomClear}>{canvasZoom}%</span>
-                  {canvasZoom}%
-                </span>
                 <button
                   className="control-btn plus"
                   onClick={() => {
@@ -625,8 +608,8 @@ export default function CanvasMenu(props) {
                 ></button>
               </div>
               <div className="btn-from">
-                <button className="btn08" onClick={handleSaveCanvas} title="保存"></button>
+                <button className="btn08" onClick={handleSaveCanvas}></button>
-                <button className="btn09" onClick={handleLeaveCanvas} title="物件検索画面へ移動"></button>
+                <button className="btn09" onClick={handleLeaveCanvas}></button>
               </div>
             </>
           )}
@@ -651,7 +634,7 @@ export default function CanvasMenu(props) {
                   onClick={() => setEstimatePopupOpen(true)}
                 >
                   <span className="ico ico01"></span>
-                  <span className="name">{getMessage('plan.menu.estimate.docDownload')}</span>
+                  <span className="name">{getMessage('plan.menu.estimate.docDown')}</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,18 +1,15 @@
 'use client'
 
-import { useContext, useEffect } from 'react'
+import { 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, useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilState, 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'
 
 export default function FloorPlan({ children }) {
   const [correntObjectNo, setCurrentObjectNo] = useRecoilState(correntObjectNoState)
@@ -23,39 +20,12 @@ 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)
-
   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 = ''
-        }
-        setManagementState({ ...res.data, surfaceTypeValue: surfaceTypeValue })
-      }
-    })
-  }
-
   /**
    * URL 파라미터에서 objectNo 설정
    */

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

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

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

@@ -40,15 +40,15 @@ export default function AuxiliaryEdit(props) {
       if (currentObject) {
         copy(
           currentObject,
-          arrow2 ? (arrow2 === '←' ? Number(+horizonSize / 10) * -1 : Number(+horizonSize / 10)) : 0,
+          arrow2 ? (arrow2 === '←' ? Number(horizonSize) * -1 : Number(horizonSize)) : 0,
-          arrow1 ? (arrow1 === '↑' ? Number(+verticalSize / 10) * -1 : Number(+verticalSize / 10)) : 0,
+          arrow1 ? (arrow1 === '↑' ? Number(verticalSize) * -1 : Number(verticalSize)) : 0,
         )
       }
     } else {
       move(
         currentObject,
-        arrow2 ? (arrow2 === '←' ? Number(+horizonSize / 10) * -1 : Number(+horizonSize / 10)) : 0,
+        arrow2 ? (arrow2 === '←' ? Number(horizonSize) * -1 : Number(horizonSize)) : 0,
-        arrow1 ? (arrow1 === '↑' ? Number(+verticalSize / 10) * -1 : Number(+verticalSize / 10)) : 0,
+        arrow1 ? (arrow1 === '↑' ? Number(verticalSize) * -1 : Number(verticalSize)) : 0,
       )
     }
 

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

@@ -1,88 +1,109 @@
-import { POLYGON_TYPE, MODULE_SETUP_TYPE } from '@/common/common'
+import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
+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 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 { roofsState } from '@/store/roofAtom'
+import { currentCanvasPlanState } from '@/store/canvasAtom'
-import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { POLYGON_TYPE } from '@/common/common'
-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 [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-  const trestleRef = useRef(null)
+  const addedRoofs = useRecoilValue(addedRoofsState)
-  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 { initEvent } = useContext(EventContext)
-  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup, restoreModuleInstArea } =
+  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting(tabNum)
-    useModuleBasicSetting(tabNum)
   const { updateObjectDate } = useMasterController()
 
-  useEffect(() => {
+  const handleBtnNextStep = () => {
-    const moduleTabNum = basicSetting.roofSizeSet != 3 ? 3 : 2
+    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(() => {
     let hasModules = canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
@@ -90,42 +111,23 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
     if (hasModules) {
       orientationRef.current.handleNextStep()
-      setTabNum(moduleTabNum)
+      setTabNum(3)
     }
   }, [])
 
-  useEffect(() => {
+  //팝업 닫기 버튼 이벤트
-    if (roofsStore && addedRoofs) {
+  const handleClosePopup = (id) => {
-      setRoofs(
+    if (tabNum == 3) {
-        addedRoofs.map((roof, index) => {
+      if (isManualModuleSetup) {
-          return {
+        setIsManualModuleSetup(false)
-            ...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()
+      manualModuleSetup(placementRef)
     } else {
       manualFlatroofModuleSetup(placementFlatRef)
     }
@@ -138,224 +140,55 @@ 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={basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' ? 'll' : 'lx-2'}>
+    <WithDraggable isShow={true} pos={pos} className="lx-2">
       <WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
       <WithDraggable.Body>
         <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} {...orientationProps} />}
+        {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
         {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Trestle ref={trestleRef} {...trestleProps} />}
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
-          <Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
+
-        )}
         {/*배치면 초기설정 - 입력방법: 육지붕*/}
-        {/* {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && <PitchModule setTabNum={setTabNum} />} */}
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
           <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
         )}
 
         <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 && (
             <>
-                  <button className={`btn-frame modal mr5 ${isManualModuleLayoutSetup ? 'act' : ''}`} onClick={handleManualModuleLayoutSetup}>
+              {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
-                    {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 mr5" onClick={() => autoModuleSetup(MODULE_SETUP_TYPE.AUTO)}>
+                  <button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
                     {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/Orientation.jsx

@@ -1,273 +1,54 @@
-import { forwardRef, use, useContext, useEffect, useImperativeHandle, useState } from 'react'
+import { forwardRef, 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 { addedRoofsState, basicSettingState } from '@/store/settingAtom'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
-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 Swal from 'sweetalert2'
 
-export const Orientation = forwardRef((props, ref) => {
+export const Orientation = forwardRef(({ tabNum }, ref) => {
   const { getMessage } = useMessage()
+
+  const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController(1)
+
+  const { nextStep, compasDeg, setCompasDeg } = useOrientation()
+
   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 {
-    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' },
-    ],
-  }
-
-  useEffect(() => {
-    if (basicSetting.roofSizeSet == '3') {
-      restoreModuleInstArea()
-    }
-  }, [])
-
-  useEffect(() => {
-    if (moduleSelectionData?.common) {
-      setInputMargin(moduleSelectionData?.common?.margin)
-    }
-  }, [moduleSelectionData])
-
-  useEffect(() => {
-    if (selectedModules) {
-      setSelectedModules(moduleList.find((module) => module.itemId === selectedModules.itemId))
-    }
-  }, [selectedModules])
-
-  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 = () => {
-    if (isComplete()) {
+    nextStep()
-      const common = {
+    canvasPopupStatusTrigger(compasDeg)
-        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',
-        })
-        return
-      }
-    }
   }
 
+  useEffect(() => {
+    checkDegree(compasDeg)
+  }, [compasDeg])
+
   const checkDegree = (e) => {
     if (e === '-0' || e === '-') {
-      setInputCompasDeg('-')
+      setCompasDeg('-')
       return
     }
     if (e === '0-') {
-      setInputCompasDeg('-0')
+      setCompasDeg('-0')
       return
     }
     if (Number(e) >= -180 && Number(e) <= 180) {
       if (numberCheck(Number(e))) {
-        setInputCompasDeg(Number(e))
+        setCompasDeg(Number(e))
       }
     } else {
-      setInputCompasDeg(compasDeg)
+      setCompasDeg(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 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)
-  }
-
   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">
@@ -275,13 +56,13 @@ export const Orientation = forwardRef((props, ref) => {
                 {Array.from({ length: 180 / 15 }).map((dot, index) => (
                   <div
                     key={index}
-                        className={`circle ${getDegreeInOrientation(inputCompasDeg) === -1 * (-15 * index + 180) || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
+                    className={`circle ${getDegreeInOrientation(compasDeg) === -1 * (-15 * index + 180) || (index === 0 && compasDeg >= 172 && index === 0 && compasDeg <= 180) || (compasDeg === -180 && index === 0) ? 'act' : ''}`}
                     onClick={() => {
                       if (index === 0) {
-                            setInputCompasDeg(180)
+                        setCompasDeg(180)
                         return
                       }
-                          setInputCompasDeg(-1 * (-15 * index + 180))
+                      setCompasDeg(-1 * (-15 * index + 180))
                     }}
                   >
                     {index === 0 && <i>180°</i>}
@@ -291,175 +72,44 @@ export const Orientation = forwardRef((props, ref) => {
                 {Array.from({ length: 180 / 15 }).map((dot, index) => (
                   <div
                     key={index}
-                        className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === 15 * index ? 'act' : ''}`}
+                    className={`circle ${compasDeg !== 180 && getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
-                        onClick={() => setInputCompasDeg(15 * index)}
+                    onClick={() => setCompasDeg(15 * index)}
                   >
                     {index === 0 && <i>0°</i>}
                     {index === 6 && <i>90°</i>}
                   </div>
                 ))}
                 <div className="compas">
-                      <div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
+                  <div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(compasDeg)}deg)` }}></div>
                 </div>
               </div>
             </div>
           </div>
           <div className="center-wrap">
-                <div className="outline-form">
+            <div className="d-check-box pop">
-                  <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>
+              <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
             </div>
-                  <div className="input-grid mr10" style={{ width: '60px' }}>
+            <div className="outline-form">
+              <div className="input-grid mr10" style={{ width: '160px' }}>
                 <input
                   type="text"
                   className="input-origin block"
-                      value={inputCompasDeg}
+                  value={compasDeg}
                   readOnly={!hasAnglePassivity}
                   placeholder={0}
-                      onChange={(e) => checkDegree(e.target.value)}
+                  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,
+                    // )
+                  }
                 />
               </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.setting')}</span>
-                  <div className="grid-select">
-                    {moduleList && (
-                      <QSelectBox
-                        options={moduleList}
-                        value={selectedModules}
-                        targetKey={'itemId'}
-                        sourceKey={'itemId'}
-                        showKey={'itemNm'}
-                        onChange={(e) => handleChangeModule(e)}
-                      />
-                    )}
-                  </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="number" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(e.target.value)} />
-                    </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="number"
-                          className="input-origin block"
-                          value={inputInstallHeight}
-                          onChange={(e) => handleChangeInstallHeight(e.target.value)}
-                        />
-                      </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="number"
-                          className="input-origin block"
-                          value={inputVerticalSnowCover}
-                          onChange={(e) => handleChangeVerticalSnowCover(e.target.value)}
-                        />
-                      </div>
-                      <span className="thin">cm</span>
-                    </div>
-                  </div>
-                </div>
-              )}
             </div>
           </div>
         </div>

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

@@ -1,43 +1,29 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import {
+import { checkedModuleState, currentCanvasPlanState, isManualModuleSetupState } from '@/store/canvasAtom'
-  checkedModuleState,
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-  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'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
-  const [useTab, setUseTab] = useState(true)
+  const [isChidori, setIsChidori] = useState(false)
-
   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, roofOutlineColor } = useModuleBasicSetting(3)
+  const { makeModuleInitArea } = 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(() => {
@@ -50,24 +36,11 @@ 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)) {
@@ -81,10 +54,8 @@ 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 })))
       }
 
       //모듈 배치면 생성
@@ -109,63 +80,46 @@ 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('modal.module.basic.setting.module.placement.mix.asg.yn'), prop: 'mixAsgYn', width: 50 },
+      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
-      { 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
-    setModuleSetupOption({ ...moduleSetupOption, isChidori: bool })
+    setIsChidori(bool)
-
+    refs.isChidori.current = e.target.value
-    //변경하면 수동 다 꺼짐
-    setIsManualModuleSetup(false)
-    setIsManualModuleLayoutSetup(false)
-    setManualSetupMode('off')
   }
 
   const handleSetupLocation = (e) => {
-    setModuleSetupOption({ ...moduleSetupOption, setupLocation: e.target.value })
+    setSetupLocation(e.target.value)
+    refs.setupLocation.current = e.target.value
+  }
 
-    //변경하면 수동 다 꺼짐
+  const handleMaxSetup = (e) => {
-    setIsManualModuleSetup(false)
+    if (e.target.checked) {
-    setIsManualModuleLayoutSetup(false)
+      setIsMaxSetup('true')
-    setManualSetupMode('off')
+      refs.isMaxSetup.current = 'true'
+    } else {
+      setIsMaxSetup('false')
+      refs.isMaxSetup.current = 'false'
+    }
   }
 
   //체크된 모듈 아이디 추출
-  const handleSelectedItem = (e, itemId) => {
+  const handleSelectedItem = (e) => {
     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(e.target.value),
-    }
-    props.setLayoutSetup(newLayoutSetup)
   }
 
   return (
     <>
-      <div className="module-table-flex-wrap">
+      <div className="module-table-flex-wrap mb10">
         <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' ? (
@@ -178,10 +132,11 @@ const Placement = forwardRef((props, refs) => {
                         )}
                       </th>
                     ))}
+                  </tr>
                 </thead>
                 <tbody>
-                  {selectedModules?.itemList &&
+                  {selectedModules.itemList &&
-                    selectedModules?.itemList?.map((item, index) => (
+                    selectedModules.itemList.map((item, index) => (
                       <tr key={index}>
                         <td className="al-c">
                           <div className="d-check-box no-text pop">
@@ -190,7 +145,7 @@ const Placement = forwardRef((props, refs) => {
                               id={item.itemId}
                               name={item.itemId}
                               checked={selectedItems[item.itemId]}
-                              onChange={(e) => handleSelectedItem(e, item.itemId)}
+                              onChange={handleSelectedItem}
                             />
                             <label htmlFor={item.itemId}></label>
                           </div>
@@ -201,175 +156,90 @@ const Placement = forwardRef((props, refs) => {
                             <span className="name">{item.itemNm}</span>
                           </div>
                         </td>
-                        <td className="al-c">
+                        <td className="al-r">{item.wpOut}</td>
-                          <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-box">
           <div className="module-table-inner">
-            <div className="roof-module-table">
+            <div className="self-table-tit">{getMessage('modal.module.basic.setting.module.placement.select.fitting.type')}</div>
-              <table>
+            <div className="module-self-table">
-                <thead>
+              <div className="self-table-item">
-                  <tr>
+                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</div>
-                    <th>{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</th>
+                <div className="self-item-td">
-                    <th>{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</th>
+                  <div className="pop-form-radio">
-                  </tr>
+                    <div className="d-check-radio pop">
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>
-                      <div className="hexagonal-radio-wrap">
-                        <div className="d-check-radio pop mb10">
                       <input
                         type="radio"
-                            name="radio02"
+                        name="radio01"
-                            id="ra03"
+                        id="ra01"
-                            checked={moduleSetupOption.isChidori}
+                        checked={isChidori}
                         disabled={isChidoriNotAble}
                         value={'true'}
                         onChange={(e) => handleChangeChidori(e)}
                       />
-                          <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
+                      <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="radio02"
+                        name="radio04"
                         id="ra04"
-                            checked={!moduleSetupOption.isChidori}
+                        checked={setupLocation === 'eaves'}
-                            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>
+                      <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="radio03"
+                        name="radio05"
-                            id="ra06"
+                        id="ra05"
-                            checked={moduleSetupOption.setupLocation === 'ridge'}
+                        checked={setupLocation === 'ridge'}
                         value={'ridge'}
                         onChange={handleSetupLocation}
                         disabled={isMultiModule}
                       />
-                          <label htmlFor="ra06">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
+                      <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
                     </div>
                   </div>
                 </div>
               </div>
-      <div className="hide-check-guide">
-        {getMessage('modal.module.basic.setting.module.placement.max.size.check')}
-        <button className={`arr ${!useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
             </div>
-      <div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
+            <div className="self-table-flx">
-        <div className="module-table-inner">
+              {/* <div className="d-check-box pop">
-          <div className="roof-module-table">
+                <input type="checkbox" id="ch04" checked={isMaxSetup === 'true'} value={'true'} onChange={handleMaxSetup} />
-            <table className="">
+                <label htmlFor="ch04">{getMessage('modal.module.basic.setting.module.placement.maximum')}</label>
-              <thead>
+              </div> */}
-                <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>
-            </table>
           </div>
         </div>
       </div>

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

@@ -1,769 +0,0 @@
-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'
-
-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 {
-    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)
-
-  useEffect(() => {
-    if (roofs && !selectedRoof) {
-      setSelectedRoof(roofs[0])
-    }
-
-    //모듈 설치 영역 복구
-    restoreModuleInstArea()
-  }, [roofs])
-
-  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) {
-      setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
-    } else {
-      setSelectedTrestle(null)
-    }
-  }, [trestleList])
-
-  useEffect(() => {
-    if (roofBaseList.length > 0) {
-      setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
-    } else {
-      setSelectedRoofBase(null)
-    }
-  }, [roofBaseList])
-
-  useEffect(() => {
-    if (constMthdList.length > 0) {
-      setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
-    } else {
-      setSelectedConstMthd(null)
-    }
-  }, [constMthdList])
-
-  useEffect(() => {
-    if (constructionList.length > 0) {
-      setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.construction?.constTp) ?? null)
-      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])
-
-  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)
-    dispatch({
-      type: 'SET_LENGTH',
-      roof: {
-        length: e,
-        moduleTpCd: selectedModules.itemTp ?? '',
-        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode,
-      },
-    })
-  }
-
-  const onChangeRaftBase = (e) => {
-    setSelectedRaftBase(e)
-    dispatch({
-      type: 'SET_RAFT_BASE',
-      roof: {
-        moduleTpCd: selectedModules.itemTp ?? '',
-        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: e.clCode,
-      },
-    })
-  }
-
-  const onChangeTrestleMaker = (e) => {
-    setSelectedTrestle(e)
-    dispatch({
-      type: 'SET_TRESTLE_MAKER',
-      roof: {
-        moduleTpCd: selectedModules.itemTp ?? '',
-        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode,
-        trestleMkrCd: e.trestleMkrCd,
-      },
-    })
-  }
-
-  const onChangeConstMthd = (e) => {
-    setSelectedConstMthd(e)
-    dispatch({
-      type: 'SET_CONST_MTHD',
-      roof: {
-        moduleTpCd: selectedModules.itemTp ?? '',
-        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode,
-        trestleMkrCd: selectedTrestle.trestleMkrCd,
-        constMthdCd: e.constMthdCd,
-      },
-    })
-  }
-
-  const onChangeRoofBase = (e) => {
-    setSelectedRoofBase(e)
-    dispatch({
-      type: 'SET_ROOF_BASE',
-      roof: {
-        moduleTpCd: selectedModules.itemTp ?? '',
-        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode,
-        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(selectedRoof?.roofPchBase ?? 0),
-      },
-    })
-  }
-
-  const handleConstruction = (index) => {
-    if (constructionList[index]?.constPossYn === 'Y') {
-      dispatch({
-        type: 'SET_CONSTRUCTION',
-        roof: {
-          moduleTpCd: selectedModules.itemTp ?? '',
-          roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-          raft: selectedRaftBase?.clCode,
-          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(selectedRoof?.roofPchBase ?? 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,
-          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,
-          trestle: {
-            length: lengthBase,
-            hajebichi: hajebichi,
-            ...selectedRaftBase,
-            ...selectedTrestle,
-            ...selectedConstMthd,
-            ...selectedRoofBase,
-          },
-          construction: {
-            ...constructionList.find((data) => data.constTp === trestleState.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?.roofPchBase) {
-          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) => onChangeLength(e.target.value)}
-                            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)}
-                            />
-                          )}
-                        </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) => setHajebichi(e.target.value)}
-                            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)}
-                        />
-                      )}
-                    </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)}
-                        />
-                      )}
-                    </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)}
-                        />
-                      )}
-                    </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)}
-                  />
-                </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)}
-                  />
-                </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)}
-                  />
-                </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,6 +33,14 @@ 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])
@@ -97,20 +105,24 @@ const PitchPlacement = forwardRef((props, refs) => {
 
   return (
     <>
-      <div className="hexagonal-flex-wrap">
+      <div className="module-table-box mb10">
-        <div className="module-table-box ">
         <div className="module-table-inner">
           <div className="roof-module-table">
             <table>
               <thead>
                 <tr>
-                    <th style={{ width: '70px' }}>
+                  {moduleData.header.map((data) => (
+                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
+                      {data.type === 'check' ? (
                         <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>
@@ -135,6 +147,7 @@ const PitchPlacement = forwardRef((props, refs) => {
                           <span className="name">{item.itemNm}</span>
                         </div>
                       </td>
+                      <td className="al-r">{item.wpOut}</td>
                     </tr>
                   ))}
               </tbody>
@@ -142,20 +155,15 @@ const PitchPlacement = forwardRef((props, refs) => {
           </div>
         </div>
       </div>
-        <div className="module-table-box non-flex">
+      <div className="module-table-box mb10">
         <div className="module-table-inner">
-            <div className="roof-module-table">
+          <div className="hexagonal-wrap">
-              <table>
+            <div className="hexagonal-item">
-                <thead>
+              <div className="bold-font">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</div>
-                  <tr>
+            </div>
-                    <th>{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</th>
+            <div className="hexagonal-item">
-                  </tr>
+              <div className="pop-form-radio">
-                </thead>
+                <div className="d-check-radio pop">
-                <tbody>
-                  <tr>
-                    <td>
-                      <div className="hexagonal-radio-wrap">
-                        <div className="d-check-radio pop mb10">
                   <input
                     type="radio"
                     name="radio01"
@@ -178,10 +186,6 @@ 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

@@ -41,7 +41,7 @@ export default function CircuitTrestleSetting({ id }) {
   const [tabNum, setTabNum] = useState(1)
   const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
-  const { managementState, setManagementState } = useContext(GlobalDataContext)
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const selectedModules = useRecoilValue(selectedModuleState)
   const { getPcsAutoRecommendList, getPcsVoltageChk, getPcsVoltageStepUpList, getPcsManualConfChk } = useMasterController()
 
@@ -84,6 +84,7 @@ export default function CircuitTrestleSetting({ id }) {
   // const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
   useEffect(() => {
     if (!managementState) {
+      setManagementState(managementStateLoaded)
     }
     // setCircuitData({
     //   makers,
@@ -478,7 +479,7 @@ export default function CircuitTrestleSetting({ id }) {
     console.log(stepUpListData)
     stepUpListData[0].pcsItemList.map((item, index) => {
       return item.serQtyList
-        .filter((serQty) => serQty.selected && serQty.paralQty > 0)
+        .filter((serQty) => serQty.selected)
         .forEach((serQty) => {
           pcs.push({
             pcsMkrCd: item.pcsMkrCd,

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

@@ -44,7 +44,7 @@ export default function PowerConditionalSelect(props) {
   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' },
@@ -110,7 +110,6 @@ export default function PowerConditionalSelect(props) {
           selected: s.pcsSerCd === data.pcsSerCd ? !s.selected : false,
         }
       })
-      setSelectedModels([])
     }
     setSeries(copySeries)
     handleSetmodels(copySeries.filter((s) => s.selected))

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

@@ -42,6 +42,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 canvas = useRecoilValue(canvasState)
   const selectedModules = useRecoilValue(selectedModuleState)
   const [optCodes, setOptCodes] = useState([])
@@ -572,7 +573,7 @@ export default function StepUp(props) {
                   value={seletedMainOption}
                   sourceKey="code"
                   targetKey="code"
-                  showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
+                  showKey="name"
                   onChange={(e) => setSeletedMainOption(e)}
                 />
               )}
@@ -585,7 +586,7 @@ export default function StepUp(props) {
                     value={seletedSubOption}
                     sourceKey="code"
                     targetKey="code"
-                    showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
+                    showKey="name"
                     onChange={(e) => setSeletedSubOption(e)}
                   />
                 )}

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

@@ -25,7 +25,7 @@ export default function PassivityCircuitAllocation(props) {
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
-  const { managementState } = useContext(GlobalDataContext)
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const selectedModules = useRecoilValue(selectedModuleState)
   const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
   const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
@@ -38,6 +38,7 @@ export default function PassivityCircuitAllocation(props) {
   useEffect(() => {
     setModuleStatisticsData()
     if (!managementState) {
+      setManagementState(managementStateLoaded)
     }
     canvas
       .getObjects()
@@ -86,26 +87,6 @@ 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]
-    })
-
-    if (surfaceList.length > 1) {
-      let surfaceType = {}
-
-      surfaceList.forEach((surface) => {
-        surfaceType[`${surface.direction}-${surface.roofMaterial.pitch}`] = surface
-      })
-      if (Object.keys(surfaceType).length > 1) {
-        swalFire({
-          text: getMessage('module.circuit.fix.not.same.roof.error'),
-          type: 'alert',
-          icon: 'warning',
-        })
-        return
-      }
-    }
     if (!circuitNumber || circuitNumber === 0) {
       swalFire({
         text: getMessage('module.circuit.minimun.error'),

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

@@ -7,7 +7,6 @@ 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'
 
 const FLOW_DIRECTION_TYPE = {
   EIGHT_AZIMUTH: 'eightAzimuth',
@@ -20,8 +19,6 @@ export default function FlowDirectionSetting(props) {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
 
-  const { changeSurfaceLineType } = useSurfaceShapeBatch({})
-
   useEffect(() => {
     return () => {
       canvas?.discardActiveObject()
@@ -56,7 +53,6 @@ export default function FlowDirectionSetting(props) {
     })
     drawDirectionArrow(roof)
     canvas?.renderAll()
-    changeSurfaceLineType(roof)
     closePopup(id)
   }
 

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

@@ -4,11 +4,9 @@ import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
-import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { currentObjectState } from '@/store/canvasAtom'
 import { useGrid } from '@/hooks/common/useGrid'
-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
@@ -17,39 +15,9 @@ export default function GridCopy(props) {
   const [length, setLength] = useState('0')
   const [arrow, setArrow] = useState(null)
   const currentObject = useRecoilValue(currentObjectState)
-  const canvas = useRecoilValue(canvasState)
+  const { copy } = useGrid()
-  const gridColor = useRecoilValue(gridColorState)
-  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const handleApply = () => {
-    copy(currentObject, ['↑', '←'].includes(arrow) ? (+length * -1) / 10 : +length / 10)
+    copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length)
-  }
-
-  const copy = (object, length) => {
-    const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
-    const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
-    const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
-    const lineEndY = object.direction === 'vertical' ? canvas.width : 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

@@ -6,6 +6,7 @@ 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'
 
@@ -16,6 +17,7 @@ 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')
@@ -52,31 +54,21 @@ export default function GridMove(props) {
         .forEach((grid) => {
           move(
             grid,
-            arrow2 === '←' ? (Number(horizonSize) * -1) / 10 : Number(horizonSize) / 10,
+            arrow2 === '←' ? Number(horizonSize) * -1 : Number(horizonSize),
-            arrow1 === '↑' ? (Number(verticalSize) * -1) / 10 : Number(verticalSize) / 10,
+            arrow1 === '↑' ? Number(verticalSize) * -1 : Number(verticalSize),
           )
         })
     } else {
       move(
         currentObject,
-        arrow2 === '←' ? (Number(horizonSize) * -1) / 10 : Number(horizonSize) / 10,
+        arrow2 === '←' ? Number(horizonSize) * -1 : Number(horizonSize),
-        arrow1 === '↑' ? (Number(verticalSize) * -1) / 10 : Number(verticalSize) / 10,
+        arrow1 === '↑' ? Number(verticalSize) * -1 : Number(verticalSize),
       )
     }
     canvas.renderAll()
     handleClose()
   }
 
-  const move = (object, x, y) => {
-    object.set({
-      ...object,
-      x1: object.direction === 'vertical' ? object.x1 + x : 0,
-      x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
-      y1: object.direction === 'vertical' ? 0 : object.y1 + y,
-      y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
-    })
-  }
-
   const handleClose = () => {
     closePopup(id)
   }

src/components/floor-plan/modal/module/PanelEdit.jsx

@@ -38,11 +38,6 @@ export default function PanelEdit(props) {
       const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module') // selectedObj에 없는 객체만 필터링
       isSetupModules.forEach((obj) => obj.set({ lockMovementX: false, lockMovementY: false }))
     }
-
-    //팝업 닫을때 선택 해제
-    return () => {
-      canvas?.discardActiveObject() //선택해제
-    }
   }, [])
 
   //모듈 이동 적용
@@ -92,7 +87,7 @@ export default function PanelEdit(props) {
         moduleMultiCopy('row', length, direction)
         break
     }
-    // closePopup(id)
+    closePopup(id)
   }
 
   return (

src/components/floor-plan/modal/object/ObjectSetting.jsx

@@ -100,7 +100,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   ]
 
   return (
-    <WithDraggable isShow={true} pos={pos} className="lrr" isHidden={isHidden}>
+    <WithDraggable isShow={true} pos={pos} className="lrr" style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
       <WithDraggable.Header title={getMessage('plan.menu.placement.surface.object')} onClose={() => closePopup(id)} />
       <WithDraggable.Body>
         <div className="modal-btn-wrap">

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -19,7 +19,6 @@ import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 import { usePolygon } from '@/hooks/usePolygon'
 import { canvasState } from '@/store/canvasAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
-import { usePlan } from '@/hooks/usePlan'
 
 /**
  * 지붕 레이아웃
@@ -54,7 +53,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     rafter: useRef(null),
     hajebichi: useRef(null),
   }
-  const { saveCanvas } = usePlan()
+
   /**
    * 치수 입력방법(복시도입력/실측값입력/육지붕)
    */
@@ -206,7 +205,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   /**
    * 배치면초기설정 저장 버튼 클릭
    */
-  const handleSaveBtn = async () => {
+  const handleSaveBtn = () => {
     const roofInfo = {
       ...currentRoof,
       planNo: basicSetting.planNo,
@@ -255,13 +254,14 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
 
     /* 저장 후 화면 닫기 */
     closePopup(id)
-    await saveCanvas(false)
   }
 
   return (
     <WithDraggable isShow={true} pos={pos} className="ll">
       <WithDraggable.Header title={getMessage('plan.menu.placement.surface.initial.setting')} />
       <WithDraggable.Body>
+        <div className="left-bar modal-handle"></div>
+        <div className="right-bar modal-handle"></div>
         <div className="placement-table">
           <table>
             <colgroup>
@@ -271,11 +271,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
             <tbody>
               <tr>
                 <th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
-                <td>
+                <td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
-                  {getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}
-                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                  {getMessage('modal.placement.initial.setting.plan.drawing.only.number')}
-                </td>
               </tr>
               <tr>
                 <th>

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -105,16 +105,6 @@ export default function GridOption(props) {
     initEvent()
   }, [gridOptions])
 
-  useEffect(() => {
-    return () => {
-      setAdsorptionPointAddMode(false)
-      setTempGridMode(false)
-      setTimeout(() => {
-        initEvent()
-      }, 100)
-    }
-  }, [])
-
   const dotLineGridProps = {
     id: dotLineId,
     setIsShow: setShowDotLineGridModal,

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -185,7 +185,7 @@ export default function SecondOption(props) {
 
   const onClickOption = async (item) => {
     let option4Data = settingModalSecondOptions?.option4
-    let adsorpPointData = adsorptionPointMode
+    let adsorpPointData = adsorptionPointMode.adsorptionPoint
 
     //흡착범위 설정(단 건 선택)
     if (
@@ -203,9 +203,11 @@ export default function SecondOption(props) {
 
       //흡착점 범위
       setAdsorptionRange(item.range)
-      setAdsorptionPointMode(adsorpPointData)
+
+      setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: adsorpPointData })
     } else if (item === 'adsorpPoint') {
-      setAdsorptionPointMode(!adsorpPointData)
+      setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: !adsorpPointData })
+      adsorpPointData = !adsorpPointData
     }
 
     setSettingsData({ ...settingsData, option4: [...option4Data], adsorptionPoint: adsorpPointData })
@@ -255,7 +257,7 @@ export default function SecondOption(props) {
             }}
           >
             <span>{getMessage('modal.canvas.setting.font.plan.absorption.point')}</span>
-            <i>{adsorptionPointMode ? 'ON' : 'OFF'}</i>
+            <i>{adsorptionPointMode.adsorptionPoint ? 'ON' : 'OFF'}</i>
           </button>
         </div>
       </div>

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -6,22 +6,16 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
 import { useMessage } from '@/hooks/useMessage'
 import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
-import { adsorptionPointAddModeState, canGridOptionSeletor, tempGridModeState } from '@/store/canvasAtom'
+import { canGridOptionSeletor } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { usePopup } from '@/hooks/usePopup'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
-import { useTempGrid } from '@/hooks/useTempGrid'
-import { settingModalGridOptionsState } from '@/store/settingAtom'
-import { useEvent } from '@/hooks/useEvent'
 
 export default function SettingModal01(props) {
   const { id } = props
   const [buttonAct, setButtonAct] = useState(1)
   const { getMessage } = useMessage()
   const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
-  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
-  const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
-  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
   const { closePopup } = usePopup()
 
   const {
@@ -77,22 +71,9 @@ export default function SettingModal01(props) {
     setButtonAct(num)
   }
 
-  const onClose = () => {
-    setTempGridMode(false)
-    setAdsorptionPointAddMode(false)
-    setGridOptions((prev) => {
-      const newSettingOptions = [...prev]
-      newSettingOptions[0].selected = false
-      newSettingOptions[2].selected = false
-      return [...newSettingOptions]
-    })
-
-    closePopup(id, true)
-  }
-
   return (
     <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
-      <WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={onClose} />
+      <WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={() => closePopup(id, true)} />
       <WithDraggable.Body>
         <div className="modal-btn-wrap">
           <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>

src/components/header/Header.jsx

@@ -20,8 +20,6 @@ import { stuffSearchState } from '@/store/stuffAtom'
 import { QcastContext } from '@/app/QcastProvider'
 
 import { usePopup } from '@/hooks/usePopup'
-import { commonCodeState } from '@/store/commonCodeAtom'
-import { isObjectNotEmpty } from '@/util/common-utils'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -69,21 +67,6 @@ export default function Header(props) {
 
   const [SelectOptions, setSelectOptions] = useState([])
 
-  const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
-  const { promiseGet } = useAxios()
-
-  useEffect(() => {
-    const getCommonCode = async () => {
-      await promiseGet({ url: '/api/commcode/qc-comm-code' }).then((res) => {
-        setCommonCode(Object.groupBy(res.data, ({ clHeadCd }) => clHeadCd))
-      })
-    }
-
-    if (!isObjectNotEmpty(commonCode)) {
-      getCommonCode()
-    }
-  }, [])
-
   const getAutoLoginParam = async () => {
     await promisePost({ url: '/api/login/v1.0/user/login/autoLoginEncryptData', data: { loginId: userSession.userId } })
       .then((res) => {
@@ -92,19 +75,19 @@ export default function Header(props) {
             userSession.storeId === 'T01'
               ? [
                   { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
-                  { id: 1, name: 'HANASYS ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
+                  { id: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
-                  { id: 2, name: 'HANASYS Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
+                  { id: 2, name: 'Q.Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                   { id: 3, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                 ]
               : userSession.groupId === '60000'
                 ? [
                     { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
-                    { id: 1, name: 'HANASYS ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
+                    { id: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                     { id: 2, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                   ]
                 : [
                     { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
-                    { id: 1, name: 'HANASYS Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
+                    { id: 1, name: 'Q.Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                     { id: 2, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                   ],
           )

src/components/management/Stuff.jsx

@@ -203,7 +203,7 @@ export default function Stuff() {
     if (event.column.colId === 'objectNo') {
       return
     } else {
-      //T 면 임시 S는 진짜
+      //T 면 임시 R은 진짜
       if (event.data.objectNo) {
         setIsGlobalLoading(true)
         if (event.data.tempFlg === '0') {
@@ -238,8 +238,6 @@ export default function Stuff() {
         schSortType: stuffSearchParams.schSortType,
         pageNo: stuffSearchParams?.pageNo ? stuffSearchParams.pageNo : 1,
         pageSize: stuffSearchParams?.pageSize ? stuffSearchParams.pageSize : 100,
-        builderNo: session.builderNo,
-        userId: session.userId
       }
 
       if (!params.saleStoreId) {

src/components/management/StuffDetail.jsx

@@ -54,7 +54,7 @@ export default function StuffDetail() {
   const { get, promiseGet, del, promisePost, promisePut } = useAxios(globalLocaleState)
   //form
   const formInitValue = {
-    // 물건번호 T...(임시) S...(진짜)
+    // 물건번호 T...(임시) R...(진짜)
     planReqNo: '', //설계의뢰No
     receiveUser: session?.userNm, //담당자 로그인사용자명 디폴트
     objectStatusId: '0', //물건구분(신축:0 기축 : 1)
@@ -1033,7 +1033,8 @@ export default function StuffDetail() {
   const _saleStoreId = watch('saleStoreId')
   // 2차 판매점명
   const _otherSaleStoreId = watch('otherSaleStoreId')
-  // zipNo: '', //우편번호 필수값제거 #947
+  // zipNo: '', //우편번호
+  const _zipNo = watch('zipNo')
   // prefId: '', //도도부현
   const _prefId = watch('prefId')
   // address: '', //주소
@@ -1070,6 +1071,10 @@ export default function StuffDetail() {
         }
       }
 
+      if (!formData.zipNo) {
+        errors.zipNo = true
+      }
+
       if (!formData.prefId) {
         errors.prefId = true
       }
@@ -1110,6 +1115,10 @@ export default function StuffDetail() {
         }
       }
 
+      if (!formData.zipNo) {
+        errors.zipNo = true
+      }
+
       if (!formData.prefId || formData.prefId === '0') {
         errors.prefId = true
       }
@@ -1135,6 +1144,7 @@ export default function StuffDetail() {
     _objectName,
     _saleStoreId,
     _otherSaleStoreId,
+    _zipNo,
     _prefId,
     _address,
     _areaId,
@@ -1179,14 +1189,6 @@ export default function StuffDetail() {
     }
   }, [prefValue])
 
-  // 도도부현 /주소 disabled제거 변경
-  const onChangePrefCode = (e) => {
-    setPrefValue(e.prefId)
-
-    form.setValue('prefId', e.prefId)
-    form.setValue('prefName', e.prefName)
-  }
-
   // 발전량 시뮬레이션 변경
   const handleAreaIdOnChange = (e) => {
     form.setValue('areaId', e.areaId)
@@ -1241,6 +1243,12 @@ export default function StuffDetail() {
       errors = fieldNm
     }
 
+    //우편번호
+    if (!formData.zipNo) {
+      fieldNm = getMessage('stuff.detail.zipNo')
+      errors = fieldNm
+    }
+
     //1차판매점명
     if (!formData.saleStoreId) {
       fieldNm = getMessage('stuff.detail.saleStoreId')
@@ -1362,11 +1370,10 @@ export default function StuffDetail() {
     }
 
     if (params?.receiveUser !== '') {
-      if (checkLength(params?.receiveUser.trim()) > 40) {
+      if (checkLength(params?.receiveUser.trim()) > 10) {
         return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
       }
     }
-
     //로그인이 2차점인데 otherSaleStoreId가 없으면 알럿
     if (session.storeLvl !== '1') {
       if (params.saleStoreLevel === '1') {
@@ -1436,15 +1443,20 @@ export default function StuffDetail() {
     }
   }
 
-  /**
-   * 전각20자 (반각40자)
-   */
   const checkLength = (value) => {
-    let fullWidthLength = value.replace(/[^\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
+    let str = new String(value)
-    let halfWidthLength = value.replace(/[\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
+    let _byte = 0
-
+    if (str.length !== 0) {
-    let totalLength = fullWidthLength * 2 + halfWidthLength
+      for (let i = 0; i < str.length; i++) {
-    return totalLength
+        let str2 = str.charAt(i)
+        if (encodeURIComponent(str2).length > 4) {
+          _byte += 2
+        } else {
+          _byte++
+        }
+      }
+    }
+    return _byte
   }
   // 임시저장
   const onTempSave = async () => {
@@ -1494,7 +1506,7 @@ export default function StuffDetail() {
 
     // 담당자 자리수 체크
     if (params?.receiveUser !== '') {
-      if (checkLength(params?.receiveUser.trim()) > 40) {
+      if (checkLength(params?.receiveUser.trim()) > 10) {
         return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
       }
     }
@@ -1546,7 +1558,7 @@ export default function StuffDetail() {
             type: 'alert',
             icon: 'error',
           })
-          console.error('error::::::', error)
+          console.log('error::::::', error)
         })
     }
   }
@@ -1992,7 +2004,9 @@ export default function StuffDetail() {
                     </td>
                   </tr>
                   <tr>
-                    <th>{getMessage('stuff.detail.zipNo')}</th>
+                    <th>
+                      {getMessage('stuff.detail.zipNo')} <span className="important">*</span>
+                    </th>
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr5" style={{ width: '200px' }}>
@@ -2024,10 +2038,10 @@ export default function StuffDetail() {
                               getOptionLabel={(x) => x.prefName}
                               getOptionValue={(x) => x.prefId}
                               isSearchable={false}
-                              onChange={onChangePrefCode}
                               value={prefCodeList.filter(function (option) {
                                 return option.prefId === prefValue
                               })}
+                              isDisabled={true}
                             />
                           )}
                         </div>
@@ -2557,7 +2571,9 @@ export default function StuffDetail() {
                         </td>
                       </tr>
                       <tr>
-                        <th>{getMessage('stuff.detail.zipNo')}</th>
+                        <th>
+                          {getMessage('stuff.detail.zipNo')} <span className="important">*</span>
+                        </th>
                         <td>
                           <div className="flx-box">
                             <div className="input-wrap mr5" style={{ width: '200px' }}>
@@ -2590,10 +2606,10 @@ export default function StuffDetail() {
                                   getOptionLabel={(x) => x.prefName}
                                   getOptionValue={(x) => x.prefId}
                                   isSearchable={false}
-                                  onChange={onChangePrefCode}
                                   value={prefCodeList.filter(function (option) {
                                     return option.prefId === prefValue
                                   })}
+                                  isDisabled={true}
                                 />
                               )}
                             </div>

src/components/management/popup/FindAddressPop.jsx

@@ -66,11 +66,6 @@ export default function FindAddressPop(props) {
       zipcode: watch('zipNo'),
     }
 
-    if (params.zipcode.length < 7) {
-      swalFire({ text: getMessage('stuff.addressPopup.error.message1'), type: 'alert', icon: 'warning' })
-      return
-    }
-
     setIsGlobalLoading(true)
     get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
       if (res.status === 200) {
@@ -90,20 +85,15 @@ export default function FindAddressPop(props) {
   }
   // 주소적용 클릭
   const applyAddress = () => {
-    if (!isNotEmptyArray(gridProps.gridData)) {
+    if (prefId == null) {
-      swalFire({ text: getMessage('stuff.addressPopup.error.message2'), type: 'alert', icon: 'warning' })
-      return
-    }
-    if (gridProps.gridData[0].zipcode == '') {
       swalFire({ text: getMessage('stuff.addressPopup.error.message2'), type: 'alert', icon: 'warning' })
     } else {
-      //검색결과 무조건 1:1
       props.zipInfo({
-        zipNo: gridProps.gridData[0].zipcode,
+        zipNo: zipNo,
-        address1: gridProps.gridData[0].address1,
+        address1: address1,
-        address2: gridProps.gridData[0].address2,
+        address2: address2,
-        address3: gridProps.gridData[0].address3,
+        address3: address3,
-        prefId: gridProps.gridData[0].prefcode,
+        prefId: prefId,
       })
 
       //팝업닫기

src/hooks/common/useCanvasMenu.js

@@ -7,6 +7,8 @@ import { POLYGON_TYPE } from '@/common/common'
 
 export const useCanvasMenu = () => {
   const [selectedMenu, setSelectedMenu] = useRecoilState(selectedMenuState)
+  const canvas = useRecoilValue(canvasState)
+  const { drawDirectionArrow } = usePolygon()
 
   return {
     selectedMenu,

src/hooks/common/useCanvasPopupStatusController.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import useSWRMutation from 'swr/mutation'
 import { useAxios } from '../useAxios'
 import { unescapeString } from '@/util/common-utils'
@@ -9,10 +9,7 @@ import { compasDegAtom } from '@/store/orientationAtom'
 import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useCircuitTrestle } from '../useCirCuitTrestle'
-import { useContext } from 'react'
+import { useEffect } from 'react'
-import { addedRoofsState } from '@/store/settingAtom'
-import { roofsState } from '@/store/roofAtom'
-import { GlobalDataContext } from '@/app/GlobalDataProvider'
 
 /**
  * 캔버스 팝업 상태 관리
@@ -22,22 +19,19 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider'
 export function useCanvasPopupStatusController(param = 1) {
   const popupType = parseInt(param)
 
-  const setCompasDeg = useSetRecoilState(compasDegAtom)
+  const [compasDeg, setCompasDeg] = useRecoilState(compasDegAtom)
   const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
-  const setSelectedModules = useSetRecoilState(selectedModuleState)
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
   const { get, promiseGet, getFetcher, postFetcher } = useAxios()
   const canvas = useRecoilValue(canvasState)
   const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
-  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
+
-  const [roofs, setRoofs] = useRecoilState(roofsState)
-  const { managementState, setManagementState } = useContext(GlobalDataContext)
   /**
    * 팝업 상태 조회
    * @param {number} popupTypeParam
    * @returns
    */
   const getModuleSelection = async (popupTypeParam) => {
-    if (!currentCanvasPlan.objectNo || !currentCanvasPlan.planNo) return
     const result = await promiseGet({
       url: `/api/v1/canvas-popup-status?objectNo=${currentCanvasPlan.objectNo}&planNo=${currentCanvasPlan.planNo}&popupType=${popupTypeParam}`,
     })
@@ -49,7 +43,7 @@ export function useCanvasPopupStatusController(param = 1) {
         return null
       })
 
-    return result?.data
+    return result.data
   }
 
   /**
@@ -57,36 +51,23 @@ export function useCanvasPopupStatusController(param = 1) {
    * 조회 후 전체 데이터 recoil에 저장
    */
   const handleModuleSelectionTotal = async () => {
-    let resultData = {}
     for (let i = 1; i < 3; i++) {
       const result = await getModuleSelection(i)
-      if (!result?.objectNo) return
+      console.log('🚀 ~ handleModuleSelectionTotal ~ result:', result)
+      if (!result.objectNo) return
       if (i === 1) {
-        if (result.popupStatus && unescapeString(result.popupStatus)) {
+        setCompasDeg(result.popupStatus)
-          const data = JSON.parse(unescapeString(result.popupStatus))
-
-          if (data?.compasDeg) setCompasDeg(data.compasDeg)
-          if (data?.module) setSelectedModules(data.module)
-          // setModuleSelectionDataStore(data)
-          resultData = { ...data }
-        }
       } else if (i === 2) {
         const data = JSON.parse(unescapeString(result.popupStatus))
+        setModuleSelectionDataStore(data)
         const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
         const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
         roofSurfaceList.forEach((surface) => {
           surface.modules = modules.filter((module) => module.surfaceId === surface.id)
         })
-        if (data.roofConstructions) {
+        if (data.module) setSelectedModules(data.module)
-          setRoofs(data.roofConstructions)
-          // setManagementState({ ...managementState, roofs: data.roofConstructions.map((roof) => roof.construction.managementState) })
-          // setModuleSelectionDataStore({ ...moduleSelectionDataStore, roofConstructions: data.roofConstruction })
-          resultData = { ...resultData, roofConstructions: data.roofConstructions }
-        }
-        // if (data?.module) setManagementState(data.common.managementState)
       }
     }
-    setModuleSelectionDataStore(resultData)
   }
 
   /**
@@ -99,8 +80,7 @@ export function useCanvasPopupStatusController(param = 1) {
         objectNo: currentCanvasPlan.objectNo,
         planNo: parseInt(currentCanvasPlan.planNo),
         popupType: popupType.toString(),
-        // popupStatus: popupType === 1 ? arg : JSON.stringify(arg).replace(/"/g, '\"'),
+        popupStatus: popupType === 1 ? arg : JSON.stringify(arg).replace(/"/g, '\"'),
-        popupStatus: JSON.stringify(arg).replace(/"/g, '\"'),
       }
       postFetcher(`/api/v1/canvas-popup-status`, params)
     },

src/hooks/common/useCommonCode.js

@@ -22,8 +22,9 @@ import { useAxios } from '../useAxios'
  * const honorificCodes = findCommonCode(200800);
  */
 export const useCommonCode = () => {
-  const globalLocale = useRecoilValue(globalLocaleStore)
   const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const { promiseGet } = useAxios()
 
   const findCommonCode = (key) => {
     const resultCodes = commonCode[key]?.map((code) => {
@@ -40,6 +41,18 @@ export const useCommonCode = () => {
     return resultCodes
   }
 
+  useEffect(() => {
+    const getCommonCode = async () => {
+      await promiseGet({ url: '/api/commcode/qc-comm-code' }).then((res) => {
+        setCommonCode(Object.groupBy(res.data, ({ clHeadCd }) => clHeadCd))
+      })
+    }
+
+    if (!isObjectNotEmpty(commonCode)) {
+      getCommonCode()
+    }
+  }, [])
+
   return {
     commonCode,
     findCommonCode,

src/hooks/common/useGrid.js

@@ -153,18 +153,18 @@ export function useGrid() {
   const move = (object, x, y) => {
     object.set({
       ...object,
-      x1: object.direction === 'vertical' ? object.x1 + x : -1500,
+      x1: object.direction === 'vertical' ? object.x1 + x : 0,
-      x2: object.direction === 'vertical' ? object.x1 + x : 2500,
+      x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
-      y1: object.direction === 'vertical' ? -1500 : object.y1 + y,
+      y1: object.direction === 'vertical' ? 0 : object.y1 + y,
-      y2: object.direction === 'vertical' ? 2500 : object.y1 + y,
+      y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
     })
   }
 
   const copy = (object, length) => {
-    const lineStartX = object.direction === 'vertical' ? object.x1 + length : -1500
+    const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
-    const lineEndX = object.direction === 'vertical' ? object.x2 + length : 2500
+    const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
-    const lineStartY = object.direction === 'vertical' ? -1500 : object.y1 + length
+    const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
-    const lineEndY = object.direction === 'vertical' ? 2500 : object.y1 + length
+    const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
 
     const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
       stroke: gridColor,

src/hooks/common/useMasterController.js

@@ -18,7 +18,7 @@ export function useMasterController() {
    */
   const getRoofMaterialList = async () => {
     return await get({ url: '/api/v1/master/getRoofMaterialList' }).then((res) => {
-      // console.log('🚀🚀 ~ getRoofMaterialList ~ res:', res)
+      console.log('🚀🚀 ~ getRoofMaterialList ~ res:', res)
       return res
     })
   }

src/hooks/common/useMenu.js

@@ -16,13 +16,12 @@ import { usePopup } from '@/hooks/usePopup'
 import { useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { canvasState, currentMenuState } from '@/store/canvasAtom'
 import { MENU } from '@/common/common'
 import { useTrestle } from '@/hooks/module/useTrestle'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useOrientation } from '@/hooks/module/useOrientation'
-import { corridorDimensionSelector, settingModalFirstOptionsState } from '@/store/settingAtom'
 
 /**
  * 메뉴 처리 훅
@@ -37,11 +36,8 @@ export default function useMenu() {
   const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch({})
   const { clear: trestleClear, setAllModuleSurfaceIsComplete } = useTrestle()
   const { nextStep } = useOrientation()
-  const [corridorDimension, setCorridorDimension] = useRecoilState(corridorDimensionSelector)
   const handleMenu = (type) => {
     if (type === 'outline') {
-      // 지붕 덮개 메뉴의 경우는 복도치수로 적용한다.
-      setCorridorDimension(0)
       switch (currentMenu) {
         case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
           addPopup(popupId, 1, <WallLineSetting id={popupId} />)
@@ -71,8 +67,6 @@ export default function useMenu() {
     }
 
     if (type === 'surface') {
-      // 배치면 메뉴의 경우는 실치수로 적용한다.
-      setCorridorDimension(1)
       switch (currentMenu) {
         // case MENU.BATCH_CANVAS.SLOPE_SETTING:
         //   addPopup(popupId, 1, <Slope id={popupId} />)
@@ -93,8 +87,6 @@ export default function useMenu() {
     }
 
     if (type === 'module') {
-      // 모듈,회로 구성 메뉴의 경우는 실치수로 적용한다.
-      setCorridorDimension(1)
       switch (currentMenu) {
         case MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING:
           trestleClear()

src/hooks/common/useRefFiles.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { useRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilState } from 'recoil'
 
 import { useSwal } from '@/hooks/useSwal'
 import { useAxios } from '../useAxios'
@@ -7,7 +7,6 @@ import { currentCanvasPlanState } from '@/store/canvasAtom'
 import { useCanvas } from '@/hooks/useCanvas'
 import { deleteBackGroundImage, setBackGroundImage } from '@/lib/imageActions'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
-import { popSpinnerState } from '@/store/popupAtom'
 
 /**
  * 배경 이미지 관리
@@ -16,9 +15,6 @@ import { popSpinnerState } from '@/store/popupAtom'
  * 이미지 -> 캔버스 배경에 이미지 로드
  * 주소 -> 구글 맵에서 주소 검색 후 이미지로 다운로드 받아서 캔버스 배경에 이미지 로드
  * .dwg -> api를 통해서 .png로 변환 후 캔버스 배경에 이미지 로드
- *
- * setCurrentBgImage 에 이미지를 세팅하면 도면에 배경으로 로딩된다.
- * 다만 S3 Response에 aws 고유 주소가 나오는데 여기서는 cloudfront 사용을 위해서 NEXT_PUBLIC_AWS_S3_BASE_URL 도메인을 사용한다.
  * @returns {object}
  */
 export function useRefFiles() {
@@ -32,8 +28,7 @@ export function useRefFiles() {
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const { handleBackImageLoadToCanvas } = useCanvas()
   const { swalFire } = useSwal()
-  const { get, post, del } = useAxios()
+  const { get, post } = useAxios()
-  const setPopSpinnerStore = useSetRecoilState(popSpinnerState)
 
   useEffect(() => {
     if (refFileMethod === '1') {
@@ -44,7 +39,6 @@ export function useRefFiles() {
   }, [refFileMethod])
 
   /**
-   * 최초 input type="file" 에 대한 이벤트
    * 파일 불러오기 버튼 컨트롤
    * @param {*} file
    */
@@ -65,10 +59,6 @@ export function useRefFiles() {
     }
   }
 
-  /**
-   * 허용하는 파일인지 체크한다
-   * @param {File} file
-   */
   const refFileSetting = (file) => {
     console.log('🚀 ~ refFileSetting ~ file:', file)
     if (file.name.split('.').pop() === 'dwg') {
@@ -87,40 +77,34 @@ export function useRefFiles() {
   }
 
   /**
-   * 이미지 파일 삭제
+   * 파일 삭제
    */
   const handleFileDelete = async () => {
     swalFire({
       text: '삭제하시겠습니까?',
       type: 'confirm',
       confirmFn: async () => {
-        setPopSpinnerStore(true)
+        setRefImage(null)
-        console.log('🚀 ~ handleFileDelete ~ handleFileDelete:', refImage)
+        setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: null }))
-        console.log('🚀 ~ handleFileDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
-        await del({ url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/upload?fileName=${currentCanvasPlan.bgImageName}` })
-        setCurrentBgImage(null)
         await deleteBackGroundImage({
           objectId: currentCanvasPlan.id,
           planNo: currentCanvasPlan.planNo,
         })
-        setPopSpinnerStore(false)
       },
     })
   }
 
   /**
-   * 주소 맵 이미지 삭제
+   * 주소 삭제
    */
   const handleAddressDelete = async () => {
     swalFire({
       text: '삭제하시겠습니까?',
       type: 'confirm',
       confirmFn: async () => {
-        console.log('🚀 ~ handleAddressDelete ~ handleAddressDelete:', refImage)
-        console.log('🚀 ~ handleAddressDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
-        await del({ url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/map?fileName=${currentCanvasPlan.bgImageName}` })
         setMapPositionAddress('')
         setCurrentBgImage(null)
+        setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
         await deleteBackGroundImage({
           objectId: currentCanvasPlan.id,
           planNo: currentCanvasPlan.planNo,
@@ -130,7 +114,7 @@ export function useRefFiles() {
   }
 
   /**
-   * 주소로 구글 맵 이미지 다운로드하여 캔버스 배경으로 로드
+   * 주소로 구글 맵 이미지 다운로드
    */
   const handleMapImageDown = async () => {
     console.log('🚀 ~ handleMapImageDown ~ handleMapImageDown:')
@@ -149,16 +133,15 @@ export function useRefFiles() {
     }))
 
     const res = await get({
-      url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/map?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
+      url: `${process.env.NEXT_PUBLIC_HOST_URL}/map/convert?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
     })
     console.log('🚀 ~ handleMapImageDown ~ res:', res)
-    setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
+    setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
 
     await setBackGroundImage({
       objectId: currentCanvasPlan.id,
       planNo: currentCanvasPlan.planNo,
-      // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
+      imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
-      imagePath: `${res.filePath}`,
     })
   }
 
@@ -166,26 +149,16 @@ export function useRefFiles() {
    * 배경 이미지 로드를 위한 세팅
    */
   useEffect(() => {
-    // if (!currentBgImage) {
+    if (!currentBgImage) {
-    //   return
+      return
-    // }
+    }
     console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
-    if (currentBgImage) {
     handleBackImageLoadToCanvas(currentBgImage)
     setCurrentCanvasPlan((prev) => ({
       ...prev,
-        // bgImageName: refImage?.name ?? null,
+      bgImageName: refImage?.name ?? null,
-        bgImageName: currentBgImage.split('/').pop(),
       mapPositionAddress: queryRef.current.value,
     }))
-    } else {
-      setRefImage(null)
-      setCurrentCanvasPlan((prev) => ({
-        ...prev,
-        bgImageName: null,
-        mapPositionAddress: null,
-      }))
-    }
   }, [currentBgImage])
 
   /**
@@ -193,7 +166,6 @@ export function useRefFiles() {
    * @param {*} file
    */
   const handleUploadImageRefFile = async (file) => {
-    setPopSpinnerStore(true)
     const newOption1 = settingModalFirstOptions.option1.map((option) => ({
       ...option,
       selected: option.column === 'imageDisplay' ? true : option.selected,
@@ -208,22 +180,20 @@ export function useRefFiles() {
     formData.append('file', file)
 
     const res = await post({
-      url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/upload`,
+      url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`,
       data: formData,
     })
     console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
-    setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
+    setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
     setRefImage(file)
 
     const params = {
       objectId: currentCanvasPlan.id,
       planNo: currentCanvasPlan.planNo,
-      // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
+      imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
-      imagePath: `${res.filePath}`,
     }
     console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
     await setBackGroundImage(params)
-    setPopSpinnerStore(false)
   }
 
   /**
@@ -234,28 +204,15 @@ export function useRefFiles() {
     const formData = new FormData()
     formData.append('file', file)
 
-    /** 캐드 도면 파일 변환 */
     const res = await post({ url: converterUrl, data: formData })
     console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
-
-    /** 캐드 도면 파일 업로드 */
     const result = await post({
-      url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/cad`,
+      url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`,
       data: res,
     })
     console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
-
+    setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${result.filePath}`)
-    setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
+    setRefImage(res.Files[0].FileData)
-    setRefImage(file)
-
-    const params = {
-      objectId: currentCanvasPlan.id,
-      planNo: currentCanvasPlan.planNo,
-      // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
-      imagePath: `${result.filePath}`,
-    }
-    console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
-    await setBackGroundImage(params)
   }
 
   /**

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -130,14 +130,13 @@ export const useEstimateController = (planNo, flag) => {
           addFlg: true,
           paDispOrder: null,
           dispCableFlg: '0',
-          itemTpCd: '',
         },
       ],
     })
   }
 
   useEffect(() => {
-    setEstimateData({ ...estimateContextState, userId: session.userId })
+    setEstimateData({ ...estimateContextState, userId: session.userId, sapSalesStoreCd: session.custCd })
   }, [estimateContextState])
 
   // 첨부파일 다운로드
@@ -310,7 +309,6 @@ export const useEstimateController = (planNo, flag) => {
 
             //봄 컴포넌트 제품은 0으로
             item.openFlg = '0'
-            item.unitOpenFlg = '0'
           }
         }
       })
@@ -323,7 +321,6 @@ export const useEstimateController = (planNo, flag) => {
         }
       })
       if (delCnt === estimateData.itemList.length) {
-        itemFlg = false
         setIsGlobalLoading(false)
         return swalFire({ text: getMessage('estimate.detail.save.requiredItem'), type: 'alert', icon: 'warning' })
       }
@@ -449,12 +446,14 @@ export const useEstimateController = (planNo, flag) => {
         icon: 'warning',
       })
     } else {
-      if (checkLength(copyReceiveUser.trim()) > 40) {
+      if (checkLength(copyReceiveUser.trim()) > 10) {
         return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
       }
     }
 
     const params = {
+      saleStoreId: session.storeId,
+      sapSalesStoreCd: session.custCd,
       objectNo: estimateData.objectNo,
       planNo: sendPlanNo,
       copySaleStoreId: otherSaleStoreId ? otherSaleStoreId : saleStoreId,
@@ -463,8 +462,7 @@ export const useEstimateController = (planNo, flag) => {
     }
 
     setIsGlobalLoading(true)
-    await promisePost({ url: '/api/estimate/save-estimate-copy', data: params })
+    await promisePost({ url: '/api/estimate/save-estimate-copy', data: params }).then((res) => {
-      .then((res) => {
       setIsGlobalLoading(false)
       if (res.status === 201) {
         if (isObjectNotEmpty(res.data)) {
@@ -482,22 +480,22 @@ export const useEstimateController = (planNo, flag) => {
         setIsGlobalLoading(false)
       }
     })
-      .catch((e) => {
-        console.error('캔버스 복사 중 오류 발생')
-        swalFire({ text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessageError'), type: 'alert', icon: 'error' })
-        setIsGlobalLoading(false)
-      })
   }
 
-  /**
-   * 전각20자 (반각40자)
-   */
   const checkLength = (value) => {
-    let fullWidthLength = value.replace(/[^\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
+    let str = new String(value)
-    let halfWidthLength = value.replace(/[\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
+    let _byte = 0
-
+    if (str.length !== 0) {
-    let totalLength = fullWidthLength * 2 + halfWidthLength
+      for (let i = 0; i < str.length; i++) {
-    return totalLength
+        let str2 = str.charAt(i)
+        if (encodeURIComponent(str2).length > 4) {
+          _byte += 2
+        } else {
+          _byte++
+        }
+      }
+    }
+    return _byte
   }
 
   return {

src/hooks/floorPlan/useImgLoader.js

@@ -79,8 +79,7 @@ export function useImgLoader() {
 
       /** 이미지 크롭 요청 */
       const result = await post({
-        // url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/image/canvas`,
+        url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
-        url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/canvas`,
         data: formData,
       })
       console.log('🚀 ~ handleCanvasToPng ~ result:', result)

src/hooks/main/useMainContentsController.js

@@ -27,7 +27,7 @@ export const useMainContentsController = () => {
    */
   const fetchObjectList = async () => {
     try {
-      const apiUrl = `/api/main-page/object/${session?.storeId}/${session?.userId}/${session?.builderNo}/list`
+      const apiUrl = `/api/main-page/object/${session?.storeId}/list`
       await promiseGet({
         url: apiUrl,
       }).then((res) => {

src/hooks/module/useModule.js

@@ -54,7 +54,7 @@ export function useModule() {
       })
       return
     }
-    // canvas.discardActiveObject() //선택해제
+    canvas.discardActiveObject() //선택해제
 
     const isSetupModules = getOtherModules(selectedObj)
     const selectedModules = canvas.getObjects().filter((obj) => selectedIds.includes(obj.id) && obj.name === 'module') //선택했던 객체들만 가져옴
@@ -991,14 +991,14 @@ export function useModule() {
   const getRowModules = (target) => {
     return canvas
       .getObjects()
-      .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && Math.abs(obj.top - target.top) < 1)
+      .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.top === target.top)
       .sort((a, b) => a.left - b.left)
   }
 
   const getColumnModules = (target) => {
     return canvas
       .getObjects()
-      .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && Math.abs(obj.left - target.left) < 1)
+      .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.left === target.left)
       .sort((a, b) => a.top - b.top)
   }
 

src/hooks/module/useModulePlace.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { canvasSettingState, canvasState, currentCanvasPlanState, moduleSetupSurfaceState } from '@/store/canvasAtom'
+import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { roofDisplaySelector } from '@/store/settingAtom'
+import offsetPolygon from '@/util/qpolygon-utils'
+import { v4 as uuidv4 } from 'uuid'
+import { QPolygon } from '@/components/fabric/QPolygon'
+import { useEvent } from '@/hooks/useEvent'
+import { useSwal } from '@/hooks/useSwal'
+import { useMessage } from '@/hooks/useMessage'
+
+export function useModulePlace() {
+  const canvas = useRecoilValue(canvasState)
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
+  const [trestleDetailParams, setTrestleDetailParams] = useState([])
+  const [trestleDetailList, setTrestleDetailList] = useState([])
+  const selectedModules = useRecoilValue(selectedModuleState)
+  const { getTrestleDetailList } = useMasterController()
+  const canvasSetting = useRecoilValue(canvasSettingState)
+  const { setSurfaceShapePattern } = useRoofFn()
+  const roofDisplay = useRecoilValue(roofDisplaySelector)
+  const { addTargetMouseEventListener } = useEvent()
+  const setModuleSetupSurface = useSetRecoilState(moduleSetupSurfaceState)
+  const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false)
+  const { swalFire } = useSwal()
+  const { getMessage } = useMessage()
+
+  return {
+    selectedModules,
+  }
+}

src/hooks/module/useModuleSelection.js

@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from 'react'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
-import { selectedModuleState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { selectedModuleState, moduleSelectionInitParamsState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { canvasState } from '@/store/canvasAtom'
 import { POLYGON_TYPE } from '@/common/common'
@@ -12,20 +12,23 @@ import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 
 export function useModuleSelection(props) {
   const canvas = useRecoilValue(canvasState)
-  const { managementState, setManagementState } = useContext(GlobalDataContext)
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+
   const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
   const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
   const [moduleList, setModuleList] = useState([{}]) //모듈 목록
-  const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
-  const [installHeight, setInstallHeight] = useState(managementState?.installHeight) //설치 높이
-  const [standardWindSpeed, setStandardWindSpeed] = useState() //기준풍속
-  const [verticalSnowCover, setVerticalSnowCover] = useState(managementState?.verticalSnowCover) //수직적설량
-  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
 
-  // const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
+  const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
+  const [installHeight, setInstallHeight] = useState() //설치 높이
+  const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
+  const [verticalSnowCover, setVerticalSnowCover] = useState() //수직적설량
+
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
+  const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
   const { getModuleTypeItemList } = useMasterController()
   const { findCommonCode } = useCommonCode()
   const resetStatisticsData = useResetRecoilState(moduleStatisticsState)
+
   const { restoreModuleInstArea } = useModuleBasicSetting()
 
   const bindInitData = () => {
@@ -40,21 +43,21 @@ export function useModuleSelection(props) {
   //탭별 파라메터 초기화
   useEffect(() => {
     bindInitData()
-    // const initParams = {
+    const initParams = {
-    //   illuminationTp: managementState?.surfaceTypeValue, //면조도
+      illuminationTp: managementState?.surfaceTypeValue, //면조도
-    //   illuminationTpNm: managementState?.surfaceType, //면조도명
+      illuminationTpNm: managementState?.surfaceType, //면조도명
-    //   instHt: managementState?.installHeight, //설치높이
+      instHt: managementState?.installHeight, //설치높이
-    //   stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
+      stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
-    //   stdSnowLd: managementState?.verticalSnowCover, //기준적설량
+      stdSnowLd: managementState?.verticalSnowCover, //기준적설량
-    //   saleStoreNorthFlg: managementState?.saleStoreNorthFlg, //북쪽 설치 여부
+      saleStoreNorthFlg: managementState?.saleStoreNorthFlg, //북쪽 설치 여부
-    // }
+    }
 
-    // if (selectedModules) {
+    if (selectedModules) {
-    //   initParams.moduleTpCd = selectedModules.itemTp
+      initParams.moduleTpCd = selectedModules.itemTp
-    //   initParams.moduleItemId = selectedModules.itemId
+      initParams.moduleItemId = selectedModules.itemId
-    // }
+    }
 
-    // setModuleSelectionInitParams(initParams)
+    setModuleSelectionInitParams(initParams)
   }, [managementState])
 
   useEffect(() => {
@@ -84,7 +87,7 @@ export function useModuleSelection(props) {
 
     //새로고침시 데이터 날아가는거 방지
     if (managementState === null) {
-      setManagementState(managementState)
+      setManagementState(managementStateLoaded)
     } else {
       bindInitData()
     }
@@ -92,7 +95,7 @@ export function useModuleSelection(props) {
     getModuleData(roofsIds)
 
     //모듈설치면 초기화
-    // restoreModuleInstArea()
+    restoreModuleInstArea()
     resetStatisticsData()
   }, [])
 
@@ -122,19 +125,19 @@ export function useModuleSelection(props) {
     setSelectedModules(option) //선택값 저장
 
     //init 데이터에 선택된 모듈 추가
-    // setModuleSelectionInitParams({
+    setModuleSelectionInitParams({
-    //   ...moduleSelectionInitParams,
+      ...moduleSelectionInitParams,
-    //   moduleTpCd: option.itemTp,
+      moduleTpCd: option.itemTp,
-    //   moduleItemId: option.itemId,
+      moduleItemId: option.itemId,
-    // })
+    })
   }
 
   const handleChangeSurfaceType = (option) => {
-    // setModuleSelectionInitParams({
+    setModuleSelectionInitParams({
-    //   ...moduleSelectionInitParams,
+      ...moduleSelectionInitParams,
-    //   illuminationTp: option.clCode,
+      illuminationTp: option.clCode,
-    //   illuminationTpNm: option.clCodeNm,
+      illuminationTpNm: option.clCodeNm,
-    // })
+    })
 
     setManagementState({
       ...managementState,
@@ -144,10 +147,10 @@ export function useModuleSelection(props) {
   }
 
   const handleChangeWindSpeed = (option) => {
-    // setModuleSelectionInitParams({
+    setModuleSelectionInitParams({
-    //   ...moduleSelectionInitParams,
+      ...moduleSelectionInitParams,
-    //   stdWindSpeed: option.clCode,
+      stdWindSpeed: option.clCode,
-    // })
+    })
 
     setManagementState({
       ...managementState,
@@ -157,10 +160,10 @@ export function useModuleSelection(props) {
 
   const handleChangeInstallHeight = (option) => {
     setInstallHeight(option)
-    // setModuleSelectionInitParams({
+    setModuleSelectionInitParams({
-    //   ...moduleSelectionInitParams,
+      ...moduleSelectionInitParams,
-    //   instHt: option,
+      instHt: option,
-    // })
+    })
 
     setManagementState({
       ...managementState,
@@ -170,10 +173,10 @@ export function useModuleSelection(props) {
 
   const handleChangeVerticalSnowCover = (option) => {
     setVerticalSnowCover(option)
-    // setModuleSelectionInitParams({
+    setModuleSelectionInitParams({
-    //   ...moduleSelectionInitParams,
+      ...moduleSelectionInitParams,
-    //   stdSnowLd: option,
+      stdSnowLd: option,
-    // })
+    })
 
     setManagementState({
       ...managementState,
@@ -181,23 +184,53 @@ export function useModuleSelection(props) {
     })
   }
 
+  useEffect(() => {
+    // console.log('installHeight', installHeight)
+  }, [installHeight])
+
+  useEffect(() => {
+    // console.log('verticalSnowCover', verticalSnowCover)
+  }, [verticalSnowCover])
+
+  //TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
+
+  // useEffect(() => {
+  //   getConstructionListData(constructionListParams)
+  // }, [constructionListParams])
+
+  // const getConstructionListData = async (params) => {
+  //   if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
+  //     const optionsList = await getConstructionList(params)
+  //     console.log('optionsList', optionsList)
+  //     setConstructionList(optionsList.data)
+  //   }
+  // }
+
+  //state 배열에 데이터 추가 함수
+  // const addRoofTabParams = (key, value, excludeArray = []) => {
+  //   const index = roofTabParams.findIndex((obj) => obj.roofTab === roofTab)
+  //   if (index !== -1) {
+  //     roofTabParams[index][key] = value
+  //     if (excludeArray.length > 0) {
+  //       excludeArray.forEach((exclude) => {
+  //         roofTabParams[index][exclude] = ''
+  //       })
+  //     }
+  //     setRoofTabParams((prev) => [...prev.slice(0, index), roofTabParams[index], ...prev.slice(index + 1)])
+  //   }
+  // }
+
   return {
-    // moduleSelectionInitParams,
+    moduleSelectionInitParams,
     selectedModules,
     roughnessCodes,
     windSpeedCodes,
     managementState,
-    setManagementState,
     moduleList,
-    setSelectedModules,
     selectedSurfaceType,
-    setSelectedSurfaceType,
     installHeight,
-    setInstallHeight,
     standardWindSpeed,
-    setStandardWindSpeed,
     verticalSnowCover,
-    setVerticalSnowCover,
     handleChangeModule,
     handleChangeSurfaceType,
     handleChangeWindSpeed,

src/hooks/module/useModuleTrestle.js

@@ -1,302 +0,0 @@
-import { use, useContext, useEffect, useReducer, useState } from 'react'
-import { useCommonCode } from '../common/useCommonCode'
-import { useMasterController } from '../common/useMasterController'
-import { selectedModuleState } from '@/store/selectedModuleOptions'
-import { useRecoilState, useRecoilValue } from 'recoil'
-import { GlobalDataContext } from '@/app/GlobalDataProvider'
-import { popSpinnerState } from '@/store/popupAtom'
-
-const RAFT_BASE_CODE = '203800'
-
-const trestleReducer = (state, action) => {
-  switch (action.type) {
-    case 'SET_LENGTH':
-    case 'SET_RAFT_BASE':
-    case 'SET_TRESTLE_MAKER':
-    case 'SET_CONST_MTHD':
-    case 'SET_ROOF_BASE':
-    case 'SET_CONSTRUCTION':
-    case 'SET_TRESTLE_DETAIL':
-      return {
-        ...action.roof,
-      }
-    case 'SET_INITIALIZE':
-      return {
-        moduleTpCd: action.roof.module?.itemTp ?? '',
-        roofMatlCd: action.roof?.roofMatlCd ?? '',
-        hajebichi: action.roof?.hajebichi ?? 0,
-        raft: action.roof?.raft ?? null,
-        trestleMkrCd: action.roof.trestle?.trestleMkrCd ?? null,
-        constMthdCd: action.roof.trestle?.constMthdCd ?? null,
-        constTp: action.roof.construction?.constTp ?? null,
-        roofBaseCd: action.roof.trestle?.roofBaseCd ?? null,
-        workingWidth: action.roof.workingWidth ?? 0,
-        lengthBase: action.roof?.length ?? 0,
-        illuminationTp: action.roof.common?.illuminationTp ?? null,
-        instHt: action.roof.common?.instHt ?? null,
-        stdWindSpeed: action.roof.common?.stdWindSpeed ?? null,
-        stdSnowLd: action.roof.common?.stdSnowLd ?? null,
-        inclCd: action.roof?.pitch ?? null,
-        roofPitch: action.roof?.roofPchBase ?? 0,
-        eavesMargin: action.roof?.eavesMargin ?? null,
-        ridgeMargin: action.roof?.ridgeMargin ?? null,
-        kerabaMargin: action.roof?.kerabaMargin ?? null,
-      }
-    default:
-      return state
-  }
-}
-
-export function useModuleTrestle(props) {
-  const { selectedRoof } = props
-  const { findCommonCode } = useCommonCode()
-  const [raftBaseList, setRaftBaseList] = useState([])
-  const [trestleList, setTrestleList] = useState([])
-  const [constMthdList, setConstMthdList] = useState([])
-  const [roofBaseList, setRoofBaseList] = useState([])
-  const [constructionList, setConstructionList] = useState([])
-  const { getTrestleList, getConstructionList, getTrestleDetailList } = useMasterController()
-
-  const [lengthBase, setLengthBase] = useState(0)
-  const [hajebichi, setHajebichi] = useState(0)
-  const [cvrYn, setCvrYn] = useState('N')
-  const [cvrChecked, setCvrChecked] = useState(false)
-  const [snowGdPossYn, setSnowGdPossYn] = useState('N')
-  const [snowGdChecked, setSnowGdChecked] = useState(false)
-  const [eavesMargin, setEavesMargin] = useState(0)
-  const [ridgeMargin, setRidgeMargin] = useState(0)
-  const [kerabaMargin, setKerabaMargin] = useState(0)
-  const [trestleState, dispatch] = useReducer(trestleReducer, null)
-  const [trestleDetail, setTrestleDetail] = useState(null)
-  const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
-
-  useEffect(() => {
-    const raftCodeList = findCommonCode(RAFT_BASE_CODE)
-    setRaftBaseList(raftCodeList)
-    setTrestleList([])
-    setConstMthdList([])
-    setRoofBaseList([])
-    setConstructionList([])
-    // setEavesMargin(selectedRoof?.addRoof?.eavesMargin ?? 0)
-    // setRidgeMargin(selectedRoof?.addRoof?.ridgeMargin ?? 0)
-    // setKerabaMargin(selectedRoof?.addRoof?.kerabaMargin ?? 0)
-
-    setHajebichi(selectedRoof?.hajebichi ?? 0)
-    setEavesMargin(selectedRoof?.eavesMargin ?? 0)
-    setRidgeMargin(selectedRoof?.ridgeMargin ?? 0)
-    setKerabaMargin(selectedRoof?.kerabaMargin ?? 0)
-    setLengthBase(Math.round(selectedRoof?.length ?? 0))
-    setCvrYn(selectedRoof?.construction?.cvrYn ?? 'N')
-    setCvrChecked(selectedRoof?.construction?.cvrChecked ?? false)
-    setSnowGdPossYn(selectedRoof?.construction?.snowGdPossYn ?? 'N')
-    setSnowGdChecked(selectedRoof?.construction?.snowGdChecked ?? false)
-    setTrestleDetail(selectedRoof?.trestleDetail)
-  }, [selectedRoof])
-
-  useEffect(() => {
-    if (trestleState) {
-      handleSetTrestleList()
-
-      if (!trestleState?.trestleMkrCd) {
-        setConstMthdList([])
-        setRoofBaseList([])
-        setConstructionList([])
-        setTrestleDetail(null)
-        setEavesMargin(0)
-        setRidgeMargin(0)
-        setKerabaMargin(0)
-        return
-      }
-
-      handleSetConstMthdList()
-      if (!trestleState?.constMthdCd) {
-        setRoofBaseList([])
-        setConstructionList([])
-        setTrestleDetail(null)
-        setEavesMargin(0)
-        setRidgeMargin(0)
-        setKerabaMargin(0)
-        return
-      }
-
-      handleSetRoofBaseList()
-      if (!trestleState?.roofBaseCd) {
-        setConstructionList([])
-        setTrestleDetail(null)
-        setEavesMargin(0)
-        setRidgeMargin(0)
-        setKerabaMargin(0)
-        return
-      }
-
-      handleSetConstructionList()
-      if (!trestleState?.constTp) {
-        setTrestleDetail(null)
-        setEavesMargin(0)
-        setRidgeMargin(0)
-        setKerabaMargin(0)
-        return
-      }
-
-      if (!trestleState?.eavesMargin) {
-        handleSetTrestleDetailData()
-      }
-    }
-  }, [trestleState])
-
-  const handleSetTrestleList = () => {
-    setPopSpinnerStore(true)
-    getTrestleList({
-      moduleTpCd: trestleState?.moduleTpCd ?? '',
-      roofMatlCd: trestleState?.roofMatlCd ?? '',
-      raftBaseCd: trestleState?.raft ?? '',
-    })
-      .then((res) => {
-        if (res?.data) setTrestleList(res.data)
-        setPopSpinnerStore(false)
-      })
-      .catch((e) => {
-        setPopSpinnerStore(false)
-      })
-  }
-
-  const handleSetConstMthdList = () => {
-    setPopSpinnerStore(true)
-    getTrestleList({
-      moduleTpCd: trestleState?.moduleTpCd ?? '',
-      roofMatlCd: trestleState?.roofMatlCd ?? '',
-      raftBaseCd: trestleState?.raft ?? '',
-      trestleMkrCd: trestleState?.trestleMkrCd ?? '',
-    })
-      .then((res) => {
-        if (res?.data) setConstMthdList(res.data)
-        setPopSpinnerStore(false)
-      })
-      .catch((e) => {
-        setPopSpinnerStore(false)
-      })
-  }
-
-  const handleSetRoofBaseList = () => {
-    setPopSpinnerStore(true)
-    getTrestleList({
-      moduleTpCd: trestleState?.moduleTpCd ?? '',
-      roofMatlCd: trestleState?.roofMatlCd ?? '',
-      raftBaseCd: trestleState?.raft ?? '',
-      trestleMkrCd: trestleState?.trestleMkrCd ?? '',
-      constMthdCd: trestleState?.constMthdCd ?? '',
-    })
-      .then((res) => {
-        if (res?.data) setRoofBaseList(res.data)
-        setPopSpinnerStore(false)
-      })
-      .catch((e) => {
-        setPopSpinnerStore(false)
-      })
-  }
-
-  const handleSetConstructionList = () => {
-    setPopSpinnerStore(true)
-    getConstructionList({
-      moduleTpCd: trestleState?.moduleTpCd ?? '',
-      roofMatlCd: trestleState?.roofMatlCd ?? '',
-      trestleMkrCd: trestleState?.trestleMkrCd ?? '',
-      constMthdCd: trestleState?.constMthdCd ?? '',
-      roofBaseCd: trestleState?.roofBaseCd ?? '',
-      illuminationTp: trestleState.illuminationTp ?? '',
-      instHt: trestleState.instHt ?? '',
-      stdWindSpeed: trestleState.stdWindSpeed ?? '',
-      stdSnowLd: trestleState.stdSnowLd ?? '',
-      inclCd: trestleState.inclCd ?? '',
-      raftBaseCd: trestleState.raft ?? '',
-      roofPitch: Math.round(trestleState.roofPitch) ?? '',
-    })
-      .then((res) => {
-        if (res?.data) setConstructionList(res.data)
-        setPopSpinnerStore(false)
-      })
-      .catch((e) => {
-        setPopSpinnerStore(false)
-      })
-  }
-
-  const handleSetTrestleDetailData = () => {
-    setPopSpinnerStore(true)
-    getTrestleDetailList([
-      {
-        moduleTpCd: trestleState.moduleTpCd ?? '',
-        roofMatlCd: trestleState.roofMatlCd ?? '',
-        trestleMkrCd: trestleState.trestleMkrCd ?? '',
-        constMthdCd: trestleState.constMthdCd ?? '',
-        roofBaseCd: trestleState.roofBaseCd ?? '',
-        illuminationTp: trestleState.illuminationTp ?? '',
-        instHt: trestleState.instHt ?? '',
-        stdWindSpeed: trestleState.stdWindSpeed ?? '',
-        stdSnowLd: trestleState.stdSnowLd ?? '',
-        inclCd: trestleState.inclCd ?? '',
-        constTp: trestleState.constTp ?? '',
-        mixMatlNo: trestleState.mixMatlNo ?? '',
-        roofPitch: trestleState.roofPitch ?? '',
-        // workingWidth: trestleState.length ?? '',
-        workingWidth: lengthBase ?? '',
-      },
-    ])
-      .then((res) => {
-        if (res.length > 0) {
-          if (!res[0].data) return
-          setEavesMargin(res[0].data.eaveIntvl)
-          setRidgeMargin(res[0].data.ridgeIntvl)
-          setKerabaMargin(res[0].data.kerabaIntvl)
-          setTrestleDetail(res[0].data)
-
-          // dispatch({
-          //   type: 'SET_TRESTLE_DETAIL',
-          //   roof: {
-          //     ...trestleState,
-          //     eavesMargin: res[0].data.eaveIntvl,
-          //     ridgeMargin: res[0].data.ridgeIntvl,
-          //     kerabaMargin: res[0].data.kerabaIntvl,
-          //   },
-          // })
-        }
-        setPopSpinnerStore(false)
-      })
-      .catch((e) => {
-        setPopSpinnerStore(false)
-      })
-  }
-
-  return {
-    trestleState,
-    trestleDetail,
-    dispatch,
-    raftBaseList,
-    trestleList,
-    constMthdList,
-    roofBaseList,
-    constructionList,
-    handleSetTrestleList,
-    handleSetConstMthdList,
-    handleSetRoofBaseList,
-    handleSetConstructionList,
-    handleSetTrestleDetailData,
-    lengthBase,
-    setLengthBase,
-    hajebichi,
-    setHajebichi,
-    cvrYn,
-    cvrChecked,
-    snowGdPossYn,
-    snowGdChecked,
-    eavesMargin,
-    ridgeMargin,
-    kerabaMargin,
-    setEavesMargin,
-    setRidgeMargin,
-    setKerabaMargin,
-    setCvrYn,
-    setCvrChecked,
-    setSnowGdPossYn,
-    setSnowGdChecked,
-  }
-}

src/hooks/module/useOrientation.js

@@ -22,8 +22,8 @@ export function useOrientation() {
     })
   }, [])*/
 
-  const nextStep = (compas = compasDeg) => {
+  const nextStep = () => {
-    if (isNaN(compas)) {
+    if (isNaN(compasDeg)) {
       setCompasDeg(0)
     }
     const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@@ -36,7 +36,7 @@ export function useOrientation() {
 
     roofs.forEach((roof) => {
       roof.set({
-        moduleCompass: isNaN(compas) ? 0 : compas,
+        moduleCompass: isNaN(compasDeg) ? 0 : compasDeg,
       })
       drawDirectionArrow(roof)
     })

src/hooks/module/useTrestle.js

@@ -10,7 +10,6 @@ import { useSwal } from '@/hooks/useSwal'
 import { useContext } from 'react'
 import { QcastContext } from '@/app/QcastProvider'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
-import { useMessage } from '@/hooks/useMessage'
 
 // 모듈간 같은 행, 열의 마진이 10 이하인 경우는 같은 행, 열로 간주
 const MODULE_MARGIN = 10
@@ -27,7 +26,6 @@ export const useTrestle = () => {
 
   const { getSelectedPcsItemList } = useCircuitTrestle()
   const { resetCircuits } = useCircuitTrestle()
-  const { getMessage } = useMessage()
 
   const apply = () => {
     const notAllocationModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && !obj.circuit)
@@ -60,6 +58,7 @@ export const useTrestle = () => {
         }
         const construction = moduleSelectionData?.roofConstructions?.find((construction) => construction.roofIndex === roofMaterialIndex).construction
         if (!construction) {
+          swalFire({ text: 'construction 존재안함', icon: 'error' })
           return
         }
 
@@ -132,9 +131,9 @@ export const useTrestle = () => {
         surface.isChidory = isChidory
 
         if (plvrYn === 'N' && isChidory) {
-          swalFire({ text: getMessage('chidory.can.not.install'), icon: 'error' })
+          swalFire({ text: '치조불가공법입니다.', icon: 'error' })
           clear()
-          throw new Error(getMessage('chidory.can.not.install'))
+          throw new Error('치조불가공법입니다.')
         }
 
         surface.set({ isChidory: isChidory })
@@ -371,16 +370,11 @@ export const useTrestle = () => {
                 rack.value.moduleRows === leftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
             } else {
-              //C1C2C3인 경우
-              let newLeftRowsInfo = normalizeModules(rack.value.moduleTpCd, leftRowsInfo)
-
               return (
-                rack.value.moduleTpCd === newLeftRowsInfo.moduleTotalTp &&
+                rack.value.moduleTpCd === leftRowsInfo.moduleTotalTp &&
-                rack.value.moduleRows === newLeftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                rack.value.moduleRows === leftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
-                newLeftRowsInfo.rowsInfo.every((row, index) => {
+                Number(rack.value.moduleTpRows1) === leftRowsInfo.rowsInfo[0].count &&
-                  const rackRowCount = Number(rack.value[`moduleTpRows${index + 1}`]) // 동적으로 접근
+                Number(rack.value.moduleTpRows2) === leftRowsInfo.rowsInfo[1].count
-                  return rackRowCount === row.count
-                })
               )
             }
           })?.value.racks
@@ -393,15 +387,11 @@ export const useTrestle = () => {
                 rack.value.moduleRows === rightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
             } else {
-              let newRightRowsInfo = normalizeModules(rack.value.moduleTpCd, rightRowsInfo)
-
               return (
-                rack.value.moduleTpCd === newRightRowsInfo.moduleTotalTp &&
+                rack.value.moduleTpCd === rightRowsInfo.moduleTotalTp &&
-                rack.value.moduleRows === newRightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                rack.value.moduleRows === rightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
-                newRightRowsInfo.rowsInfo.every((row, index) => {
+                Number(rack.value.moduleTpRows1) === rightRowsInfo.rowsInfo[0].count &&
-                  const rackRowCount = Number(rack.value[`moduleTpRows${index + 1}`]) // 동적으로 접근
+                Number(rack.value.moduleTpRows2) === rightRowsInfo.rowsInfo[1].count
-                  return rackRowCount === row.count
-                })
               )
             }
           })?.value.racks
@@ -414,15 +404,11 @@ export const useTrestle = () => {
                 rack.value.moduleRows === centerRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
             } else {
-              let newCenterRowsInfo = normalizeModules(rack.value.moduleTpCd, centerRowsInfo)
-
               return (
-                rack.value.moduleTpCd === newCenterRowsInfo.moduleTotalTp &&
+                rack.value.moduleTpCd === centerRowsInfo.moduleTotalTp &&
-                rack.value.moduleRows === newCenterRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                rack.value.moduleRows === centerRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
-                newCenterRowsInfo.rowsInfo.every((row, index) => {
+                Number(rack.value.moduleTpRows1) === centerRowsInfo.rowsInfo[0].count &&
-                  const rackRowCount = Number(rack.value[`moduleTpRows${index + 1}`]) // 동적으로 접근
+                Number(rack.value.moduleTpRows2) === centerRowsInfo.rowsInfo[1].count
-                  return rackRowCount === row.count
-                })
               )
             }
           })?.value.racks
@@ -513,15 +499,11 @@ export const useTrestle = () => {
                 rack.value.moduleRows === leftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
             } else {
-              let newLeftRowsInfo = normalizeModules(rack.value.moduleTpCd, leftRowsInfo)
-
               return (
-                rack.value.moduleTpCd === newLeftRowsInfo.moduleTotalTp &&
+                rack.value.moduleTpCd === leftRowsInfo.moduleTotalTp &&
-                rack.value.moduleRows === newLeftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                rack.value.moduleRows === leftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
-                newLeftRowsInfo.rowsInfo.every((row, index) => {
+                Number(rack.value.moduleTpRows1) === leftRowsInfo.rowsInfo[0].count &&
-                  const rackRowCount = Number(rack.value[`moduleTpRows${index + 1}`]) // 동적으로 접근
+                Number(rack.value.moduleTpRows2) === leftRowsInfo.rowsInfo[1].count
-                  return rackRowCount === row.count
-                })
               )
             }
           })?.value.racks
@@ -593,16 +575,11 @@ export const useTrestle = () => {
                 rack.value.moduleRows === rightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
             } else {
-              // 변환 C1C2만 있는경우 C3 0개로 추가해준다.
-              let newRightRowsInfo = normalizeModules(rack.value.moduleTpCd, rightRowsInfo)
-
               return (
-                rack.value.moduleTpCd === newRightRowsInfo.moduleTotalTp &&
+                rack.value.moduleTpCd === rightRowsInfo.moduleTotalTp &&
-                rack.value.moduleRows === newRightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                rack.value.moduleRows === rightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
-                newRightRowsInfo.rowsInfo.every((row, index) => {
+                Number(rack.value.moduleTpRows1) === rightRowsInfo.rowsInfo[0].count &&
-                  const rackRowCount = Number(rack.value[`moduleTpRows${index + 1}`]) // 동적으로 접근
+                Number(rack.value.moduleTpRows2) === rightRowsInfo.rowsInfo[1].count
-                  return rackRowCount === row.count
-                })
               )
             }
           })?.value.racks
@@ -657,31 +634,6 @@ export const useTrestle = () => {
     return { moduleTotalTp, rowsInfo }
   }
 
-  function normalizeModules(rackTpCd, data) {
-    // rackTpCd를 숫자를 기준으로 자른다.
-    const allModules = rackTpCd.match(/[A-Za-z]+\d+/g) || [] // 모든 모듈 유형
-
-    // 현재 존재하는 모듈 유형을 추출
-    const existingModules = data.rowsInfo.map((row) => row.moduleTpCd)
-
-    const result = { ...data, rowsInfo: [...data.rowsInfo] }
-
-    // 없는 모듈을 추가 (count: 0)
-    allModules.forEach((module) => {
-      if (!existingModules.includes(module)) {
-        result.rowsInfo.push({ moduleTpCd: module, count: 0 })
-      }
-    })
-
-    // rowsInfo를 C1, C2, C3 순서로 정렬
-    result.rowsInfo.sort((a, b) => allModules.indexOf(a.moduleTpCd) - allModules.indexOf(b.moduleTpCd))
-
-    // moduleTotalTp를 C1C2C3로 설정
-    result.moduleTotalTp = allModules.join('')
-
-    return result
-  }
-
   // itemList 조회 후 estimateParam에 저장
   const getEstimateData = async () => {
     const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
@@ -708,18 +660,13 @@ export const useTrestle = () => {
     })
 
     // trestles 배열에서 null인 경우 제거
-
+    const params = { trestles, pcses, modules }
-    const dblCblTotCnt = getTotalConnectCableCnt()
-    const params = { trestles, pcses, modules, dblCblTotCnt }
 
     //견적서 itemList 조회
     const { data, data2, result } = await getQuotationItem(params)
 
     if (result.resultCode === 'E') {
       swalFire({ text: result.resultMsg, icon: 'error' })
-      clear()
-      setViewCircuitNumberTexts(true)
-      setIsGlobalLoading(false)
       return
     }
 
@@ -1052,7 +999,9 @@ export const useTrestle = () => {
     if (!rackInfos) {
       const maxRows = surface.trestleDetail.moduleMaxRows
       const maxCols = surface.trestleDetail.moduleMaxCols
-      const msg = `段数の上限は${maxRows}段です。 上限より上の段には設置できません`
+      const msg = `選択した家で設置可能
+モジュールの最大段数は${maxRows}、最大列数は${maxCols}です。
+上限より上部に取り付けたモジュールを削除してください。`
       swalFire({ title: msg, type: 'alert' })
       throw new Error('rackInfos is null')
     }
@@ -2181,13 +2130,12 @@ export const useTrestle = () => {
     const visited = new Set()
     const width = Math.floor(moduleExample.width)
     const height = Math.floor(moduleExample.height)
-    const horizonPadding = 3 // 가로 패딩
+    const horizonPadding = 0 // 가로 패딩
-    const verticalPadding = 7 // 세로 패딩
+    const verticalPadding = 0 // 세로 패딩
 
     function isAdjacent(p1, p2) {
       const dx = Math.abs(p1.x - p2.x)
       const dy = Math.abs(p1.y - p2.y)
-
       return (
         (Math.abs(width + horizonPadding - dx) < 2 && dy < 2) ||
         (dx < 2 && Math.abs(dy - height + verticalPadding)) < 2 ||
@@ -2219,136 +2167,6 @@ export const useTrestle = () => {
     return groups
   }
 
-  function areConnected(m1, m2, surface) {
-    /*const m1Fill = m1.fill
-    const m2Fill = m2.fill
-    m1.set({ fill: 'red' })
-    m2.set({ fill: 'blue' })
-    canvas.renderAll()*/
-
-    let sizes = []
-
-    const { width: currentWidth, height: currentHeight, moduleInfo: currentModuleInfo } = m1
-    const { width: neighborWidth, height: neighborHeight, moduleInfo: neighborModuleInfo } = m2
-
-    const { moduleTpCd: currentModuleTpCd } = currentModuleInfo
-    const { moduleTpCd: neighborModuleTpCd } = neighborModuleInfo
-    const { x: m1X, y: m1Y } = m1.getCenterPoint()
-    const { x: m2X, y: m2Y } = m2.getCenterPoint()
-    sizes.push({ width: currentWidth, height: currentHeight })
-
-    if (currentModuleTpCd !== neighborModuleTpCd) {
-      sizes.push({ width: neighborWidth, height: neighborHeight })
-    }
-
-    /*m1.set({ fill: m1Fill })
-    m2.set({ fill: m2Fill })
-    canvas.renderAll()*/
-
-    return sizes.some(({ width, height }) => {
-      let maxX
-      let maxY
-      let halfMaxX
-      let halfMaxY
-      const { direction, trestleDetail } = surface
-      let moduleIntvlHor, moduleIntvlVer
-      if (+roofSizeSet === 3) {
-        //육지붕의 경우 값 고정
-        moduleIntvlHor = 300
-        moduleIntvlVer = 100
-      } else {
-        moduleIntvlHor = trestleDetail.moduleIntvlHor
-        moduleIntvlVer = trestleDetail.moduleIntvlVer
-      }
-
-      if (direction === 'south' || direction === 'north') {
-        maxX = width + moduleIntvlHor / 10
-        maxY = height + moduleIntvlVer / 10
-        halfMaxX = moduleIntvlHor / 10
-        halfMaxY = moduleIntvlVer / 10
-
-        if (currentModuleTpCd !== neighborModuleTpCd) {
-          maxX = currentWidth / 2 + neighborWidth / 2 + moduleIntvlHor / 10
-          maxY = currentHeight / 2 + neighborHeight / 2 + moduleIntvlVer / 10
-        }
-
-        // console.log(maxX, maxY, halfMaxX, halfMaxY)
-
-        if (Math.abs(m1X - m2X) < 1) {
-          return Math.abs(Math.abs(m1Y - m2Y) - maxY) < 1
-        } else if (Math.abs(m1Y - m2Y) < 1) {
-          return Math.abs(Math.abs(m1X - m2X) - maxX) < 1
-        }
-
-        return (
-          (Math.abs(m1X - m2X) < maxX - moduleIntvlHor / 10 && Math.abs(m1Y - m2Y) < maxY - moduleIntvlVer / 10) ||
-          (Math.abs(Math.abs(m1X - m2X) - maxX / 2) < halfMaxX + 1 && Math.abs(Math.abs(m1Y - m2Y) - maxY) < halfMaxY + 1) ||
-          (Math.abs(Math.abs(m1X - m2X) - maxX) < halfMaxX + 1 && Math.abs(Math.abs(m1Y - m2Y) - maxY / 2) < halfMaxY + 1)
-        )
-      } else if (direction === 'east' || direction === 'west') {
-        maxX = height + moduleIntvlHor / 10
-        maxY = width + moduleIntvlVer / 10
-        halfMaxX = moduleIntvlVer / 10
-        halfMaxY = moduleIntvlHor / 10
-
-        if (currentModuleTpCd !== neighborModuleTpCd) {
-          maxX = currentHeight / 2 + neighborHeight / 2 + moduleIntvlVer / 10
-          maxY = currentWidth / 2 + neighborWidth / 2 + moduleIntvlHor / 10
-        }
-
-        if (Math.abs(m1X - m2X) < 1) {
-          return Math.abs(Math.abs(m1Y - m2Y) - maxX) < 1
-        } else if (Math.abs(m1Y - m2Y) < 1) {
-          return Math.abs(Math.abs(m1X - m2X) - maxY) < 1
-        }
-
-        return (
-          (Math.abs(m1X - m2X) <= maxY - moduleIntvlVer / 10 && Math.abs(m1Y - m2Y) <= maxX - moduleIntvlHor / 10) ||
-          (Math.abs(Math.abs(m1X - m2X) - maxY / 2) < halfMaxY + 1 && Math.abs(Math.abs(m1Y - m2Y) - maxX) < halfMaxX + 1) ||
-          (Math.abs(Math.abs(m1X - m2X) - maxY) < halfMaxY + 1 && Math.abs(Math.abs(m1Y - m2Y) - maxX / 2) < halfMaxX + 1)
-        )
-      }
-    })
-  }
-
-  // 25-04-02 추가
-  // 그룹화
-  function groupPoints(modules, surface) {
-    const groups = []
-    const visited = new Set()
-
-    for (const point of modules) {
-      const { x: pointX, y: pointY } = point.getCenterPoint()
-      const key = `${pointX},${pointY}`
-      if (visited.has(key)) continue
-
-      const queue = [point]
-      const group = []
-
-      while (queue.length > 0) {
-        const current = queue.shift()
-        const { x: currentX, y: currentY } = current.getCenterPoint()
-        const currentKey = `${currentX},${currentY}`
-        if (visited.has(currentKey)) continue
-
-        visited.add(currentKey)
-        group.push(current)
-
-        for (const neighbor of modules) {
-          const { x: neighborX, y: neighborY } = neighbor.getCenterPoint()
-          const neighborKey = `${neighborX},${neighborY}`
-          if (!visited.has(neighborKey) && areConnected(current, neighbor, surface)) {
-            queue.push(neighbor)
-          }
-        }
-      }
-
-      groups.push(group)
-    }
-
-    return groups
-  }
-
   // 각도에 따른 길이 반환
   function getTrestleLength(length, degree) {
     if (roofSizeSet !== 1) {
@@ -3046,82 +2864,5 @@ export const useTrestle = () => {
     return surfaces.every((surface) => surface.isComplete)
   }
 
-  const groupByType = (originArr = []) => {
+  return { apply, getTrestleParams, clear, setViewCircuitNumberTexts, getEstimateData, setAllModuleSurfaceIsComplete, isAllComplete }
-    const grouped = {}
-    const newArr = [...originArr]
-
-    // 타입별로 객체들을 분류
-    for (const item of newArr) {
-      if (!grouped[item.circuitNumber]) {
-        grouped[item.circuitNumber] = []
-      }
-      grouped[item.circuitNumber].push(item)
-    }
-
-    // 객체를 배열로 변환
-    return Object.values(grouped)
-  }
-
-  function groupByCircuitAndSurface(arr) {
-    const circuitGroups = {}
-
-    for (const item of arr) {
-      const { circuitNumber, surfaceId } = item
-      if (!circuitGroups[circuitNumber]) {
-        circuitGroups[circuitNumber] = new Map()
-      }
-
-      const surfaceMap = circuitGroups[circuitNumber]
-      const key = surfaceId
-
-      if (!surfaceMap.has(key)) {
-        surfaceMap.set(key, [])
-      }
-
-      surfaceMap.get(key).push(item)
-    }
-
-    // 결과: circuitNumber별 surface 그룹 수
-    const result = {}
-    for (const [circuit, surfaceMap] of Object.entries(circuitGroups)) {
-      result[circuit] = surfaceMap.size
-    }
-
-    return result
-  }
-
-  // 양단 케이블 구하는 공식
-  const getTotalConnectCableCnt = () => {
-    let cnt = 0
-    const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-    surfaces.forEach((surface) => {
-      const modules = surface.modules
-      const groups = groupByType(modules)
-      groups.forEach((group) => {
-        const result = groupPoints(group, surface)
-        cnt += result.length - 1
-      })
-    })
-
-    const groupByCircuitAndSurfaceCnt = groupByCircuitAndSurface(modules)
-
-    Object.keys(groupByCircuitAndSurfaceCnt).forEach((key) => {
-      cnt += groupByCircuitAndSurfaceCnt[key] - 1
-    })
-
-    return cnt
-  }
-
-  return {
-    apply,
-    getTrestleParams,
-    clear,
-    setViewCircuitNumberTexts,
-    getEstimateData,
-    setAllModuleSurfaceIsComplete,
-    isAllComplete,
-    groupCoordinates,
-    groupPoints,
-  }
 }

src/hooks/option/useCanvasSetting.js

@@ -123,7 +123,6 @@ export function useCanvasSetting(executeEffect = true) {
   const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) /* 다음으로 넘어가는 최종 데이터 */
   const resetSelectedModules = useResetRecoilState(selectedModuleState) /* 선택된 모듈 */
 
-  const { trigger: orientationTrigger } = useCanvasPopupStatusController(1)
   const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
 
   const [raftCodes, setRaftCodes] = useState([]) /* 서까래 정보 */
@@ -527,10 +526,7 @@ export function useCanvasSetting(executeEffect = true) {
 
       /** 모듈 선택 데이터 초기화 */
       resetModuleSelectionData()
-      //1번 초기화
+      moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] })
-      orientationTrigger({ compasDeg: 0, common: {}, module: {} })
-      //2번 초기화
-      moduleSelectedDataTrigger({ roofConstructions: [] })
       const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE)
       if (!isModuleExist) {
         resetSelectedModules()
@@ -609,7 +605,7 @@ export function useCanvasSetting(executeEffect = true) {
         const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
 
         /** 흡착점 ON/OFF */
-        setAdsorptionPointMode(res.adsorpPoint)
+        setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint })
 
         /** 치수선 설정 */
         setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor })
@@ -695,7 +691,7 @@ export function useCanvasSetting(executeEffect = true) {
         /** 조회된 글꼴 데이터가 없는 경우 (데이터 초기화) */
 
         /** 흡착점 ON/OFF */
-        setAdsorptionPointMode(false)
+        setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false })
 
         /** 치수선 설정 */
         resetDimensionLineSettings()
@@ -775,7 +771,7 @@ export function useCanvasSetting(executeEffect = true) {
       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
       /** 흡착점 ON/OFF */
-      adsorpPoint: adsorptionPointMode,
+      adsorpPoint: adsorptionPointMode.adsorptionPoint,
       //??: adsorptionRange, 사용여부 확인 필요
 
       /** 문자 글꼴 설정 */

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -5,6 +5,16 @@ import { useEvent } from '@/hooks/useEvent'
 import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
+import {
+  outerLineAngle1State,
+  outerLineAngle2State,
+  outerLineArrow1State,
+  outerLineArrow2State,
+  outerLineDiagonalState,
+  outerLineLength1State,
+  outerLineLength2State,
+  outerLineTypeState,
+} from '@/store/outerLineAtom'
 import { calculateIntersection, distanceBetweenPoints, findClosestPoint, isPointOnLine } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
@@ -13,16 +23,6 @@ import { usePopup } from '@/hooks/usePopup'
 import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMessage } from '../useMessage'
-import {
-  auxiliaryLineAngle1State,
-  auxiliaryLineAngle2State,
-  auxiliaryLineArrow1State,
-  auxiliaryLineArrow2State,
-  auxiliaryLineDiagonalState,
-  auxiliaryLineLength1State,
-  auxiliaryLineLength2State,
-  auxiliaryLineTypeState,
-} from '@/store/auxiliaryLineAtom'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id, isUseEffect = true) {
@@ -49,20 +49,20 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   const length2Ref = useRef(0)
   const angle1Ref = useRef('')
   const angle2Ref = useRef('')
-  const [length1, setLength1] = useRecoilState(auxiliaryLineLength1State)
+  const [length1, setLength1] = useRecoilState(outerLineLength1State)
-  const [length2, setLength2] = useRecoilState(auxiliaryLineLength2State)
+  const [length2, setLength2] = useRecoilState(outerLineLength2State)
-  const [arrow1, setArrow1] = useRecoilState(auxiliaryLineArrow1State)
+  const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State)
-  const [arrow2, setArrow2] = useRecoilState(auxiliaryLineArrow2State)
+  const [arrow2, setArrow2] = useRecoilState(outerLineArrow2State)
-  const [type, setType] = useRecoilState(auxiliaryLineTypeState)
+  const [type, setType] = useRecoilState(outerLineTypeState)
-  const [angle1, setAngle1] = useRecoilState(auxiliaryLineAngle1State)
+  const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
-  const [angle2, setAngle2] = useRecoilState(auxiliaryLineAngle2State)
+  const [angle2, setAngle2] = useRecoilState(outerLineAngle2State)
-  const [auxiliaryLineDiagonalLength, setAuxiliaryLineDiagonalLength] = useRecoilState(auxiliaryLineDiagonalState)
+  const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState)
   const arrow1Ref = useRef(arrow1)
   const arrow2Ref = useRef(arrow2)
 
   const typeRef = useRef(type)
 
-  const auxiliaryLineDiagonalLengthRef = useRef(0)
+  const outerLineDiagonalLengthRef = useRef(0)
   const intersectionPoints = useRef([])
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
 
@@ -84,7 +84,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
     // innerLines가 있을경우 삭제
     const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     if (roofs.length === 0) {
-      swalFire({ text: getMessage('roof.line.not.found') })
+      swalFire({ text: '지붕형상이 없습니다.' })
       closePopup(id)
       return
     }
@@ -124,7 +124,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
     setAngle1(0)
     setAngle2(0)
 
-    setAuxiliaryLineDiagonalLength(0)
+    setOuterLineDiagonalLength(0)
   }
 
   const move = (object, x, y) => {
@@ -408,7 +408,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   //대각선 완료될 경우 확인
   const checkDiagonal = (direction) => {
     const activeElem = document.activeElement
-    const diagonalLength = auxiliaryLineDiagonalLengthRef.current.value // 대각선 길이
+    const diagonalLength = outerLineDiagonalLengthRef.current.value // 대각선 길이
 
     const length1Value = length1Ref.current.value
 
@@ -913,9 +913,9 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
     angle2,
     setAngle2,
     angle2Ref,
-    auxiliaryLineDiagonalLength,
+    outerLineDiagonalLength,
-    setAuxiliaryLineDiagonalLength,
+    setOuterLineDiagonalLength,
-    auxiliaryLineDiagonalLengthRef,
+    outerLineDiagonalLengthRef,
     type,
     setType,
     handleFix,

src/hooks/roofcover/useEavesGableEdit.js

@@ -52,7 +52,7 @@ export function useEavesGableEdit(id) {
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     if (!outerLineFix || outerLines.length === 0) {
-      swalFire({ text: getMessage('wall.line.not.found') })
+      swalFire({ text: '외벽선이 없습니다.' })
       closePopup(id)
     }
   }, [])

src/hooks/roofcover/useOuterLineWall.js

@@ -32,8 +32,6 @@ import { outlineDisplaySelector } from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
 import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
 import Big from 'big.js'
-import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
-import { useObject } from '@/hooks/useObject'
 
 //외벽선 그리기
 export function useOuterLineWall(id, propertiesId) {
@@ -58,7 +56,6 @@ export function useOuterLineWall(id, propertiesId) {
   const { addLine, removeLine } = useLine()
   const { tempGridMode } = useTempGrid()
   const { addPolygonByLines } = usePolygon()
-  const { handleSelectableObjects } = useObject()
 
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
   const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
@@ -93,16 +90,14 @@ export function useOuterLineWall(id, propertiesId) {
   const isFix = useRef(false)
 
   useEffect(() => {
-    addCanvasMouseEventListener('mouse:down', mouseDown)
+    if (adsorptionPointAddMode || tempGridMode) {
-    addDocumentEventListener('contextmenu', document, (e) => {
+      return
-      handleRollback()
+    }
-    })
-    handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], false)
 
+    addCanvasMouseEventListener('mouse:down', mouseDown)
     clear()
     return () => {
       initEvent()
-      handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], true)
 
       canvas
         .getObjects()
@@ -261,7 +256,7 @@ export function useOuterLineWall(id, propertiesId) {
         canvas?.renderAll()
         setOuterLineFix(true)
         closePopup(id)
-        addPopup(propertiesId, 1, <RoofShapeSetting id={propertiesId} pos={{ x: 50, y: 230 }} />)
+        addPopup(propertiesId, 1, <PropertiesSetting id={propertiesId} pos={{ x: 50, y: 230 }} />)
       }
 
       if (points.length < 3) {
@@ -694,7 +689,6 @@ export function useOuterLineWall(id, propertiesId) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
       // 포커스가 length1에 있지 않으면 length1에 포커스를 줌
       const activeElem = document.activeElement
       if (activeElem !== length1Ref.current) {
@@ -759,7 +753,6 @@ export function useOuterLineWall(id, propertiesId) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
       const key = e.key
 
       const activeElem = document.activeElement
@@ -793,7 +786,6 @@ export function useOuterLineWall(id, propertiesId) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
       const key = e.key
       switch (key) {
         case 'Down': // IE/Edge에서 사용되는 값
@@ -819,7 +811,6 @@ export function useOuterLineWall(id, propertiesId) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
       const key = e.key
       switch (key) {
         case 'Enter': {
@@ -844,7 +835,7 @@ export function useOuterLineWall(id, propertiesId) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
+
       const key = e.key
       switch (key) {
         case 'Down': // IE/Edge에서 사용되는 값
@@ -910,12 +901,6 @@ export function useOuterLineWall(id, propertiesId) {
     isFix.current = true
   }
 
-  const enterCheck = (e) => {
-    if (e.key === 'Enter') {
-      handleFix()
-    }
-  }
-
   return {
     points,
     setPoints,

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -1,6 +1,6 @@
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState } from '@/store/canvasAtom'
-import { useContext, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
@@ -11,8 +11,6 @@ import {
   roofDisplaySelector,
   roofMaterialsSelector,
   selectedRoofMaterialSelector,
-  settingModalFirstOptionsState,
-  corridorDimensionSelector,
 } from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { POLYGON_TYPE } from '@/common/common'
@@ -28,9 +26,6 @@ import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { outerLinePointsState } from '@/store/outerLineAtom'
-import { QcastContext } from '@/app/QcastProvider'
-import { usePlan } from '@/hooks/usePlan'
-import { roofsState } from '@/store/roofAtom'
 
 export function useRoofAllocationSetting(id) {
   const canvas = useRecoilValue(canvasState)
@@ -54,13 +49,11 @@ export function useRoofAllocationSetting(id) {
   const { get, post } = useAxios(globalLocaleState)
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { setIsGlobalLoading } = useContext(QcastContext)
+
   const { setSurfaceShapePattern } = useRoofFn()
-  const { saveCanvas } = usePlan()
+
-  const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
   const resetPoints = useResetRecoilState(outerLinePointsState)
-  const [corridorDimension, setCorridorDimension] = useRecoilState(corridorDimensionSelector)
 
   useEffect(() => {
     /** 배치면 초기설정에서 선택한 지붕재 배열 설정 */
@@ -75,19 +68,30 @@ export function useRoofAllocationSetting(id) {
       roof.innerLines.forEach((line) => {
         /** 실측값이 없는 경우 라인 두께 4로 설정 */
         if (!line.attributes.actualSize || line.attributes?.actualSize === 0) {
-          line.set({ strokeWidth: 4, stroke: 'black', selectable: true })
+          line.set({
+            strokeWidth: 4,
+            stroke: 'black',
+            selectable: true,
+          })
         }
 
         /** 현재 선택된 라인인 경우 라인 두께 2로 설정 */
         if (editingLines.includes(line)) {
-          line.set({ strokeWidth: 2, stroke: 'black', selectable: true })
+          line.set({
+            strokeWidth: 2,
+            stroke: 'black',
+            selectable: true,
+          })
         }
       })
     })
 
     /** 현재 선택된 객체가 보조라인, 피라미드, 힙인 경우 두께 4로 설정 */
     if (currentObject && currentObject.name && ['auxiliaryLine', 'ridge', 'hip'].includes(currentObject.name)) {
-      currentObject.set({ strokeWidth: 4, stroke: '#EA10AC' })
+      currentObject.set({
+        strokeWidth: 4,
+        stroke: '#EA10AC',
+      })
     }
   }, [currentObject])
 
@@ -95,7 +99,7 @@ export function useRoofAllocationSetting(id) {
     /** 현재 선택된 객체가 보조라인, 피라미드, 힙인 경우 두께 4로 설정 */
     const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     if (roofBases.length === 0) {
-      swalFire({ text: getMessage('roofAllocation.not.found'), icon: 'warning' })
+      swalFire({ text: '할당할 지붕이 없습니다.' })
       closePopup(id)
     }
 
@@ -108,7 +112,9 @@ export function useRoofAllocationSetting(id) {
    */
   const fetchBasicSettings = async (planNo) => {
     try {
-      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}` }).then((res) => {
+      await get({
+        url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
+      }).then((res) => {
         let roofsArray = {}
 
         if (res.length > 0) {
@@ -178,7 +184,11 @@ export function useRoofAllocationSetting(id) {
           selectedRoofMaterial: selectRoofs.find((roof) => roof.selected),
         })
 
-        setBasicInfo({ planNo: '' + res[0].planNo, roofSizeSet: '' + res[0].roofSizeSet, roofAngleSet: '' + res[0].roofAngleSet })
+        setBasicInfo({
+          planNo: '' + res[0].planNo,
+          roofSizeSet: '' + res[0].roofSizeSet,
+          roofAngleSet: '' + res[0].roofAngleSet,
+        })
       })
     } catch (error) {
       console.error('Data fetching error:', error)
@@ -190,7 +200,6 @@ export function useRoofAllocationSetting(id) {
    */
   const basicSettingSave = async () => {
     try {
-      setIsGlobalLoading(true)
       const patternData = {
         objectNo: correntObjectNo,
         planNo: Number(basicSetting.planNo),
@@ -213,8 +222,6 @@ export function useRoofAllocationSetting(id) {
 
       await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
         swalFire({ text: getMessage(res.returnMessage) })
-        setIsGlobalLoading(false)
-        saveCanvas(false)
       })
 
       //Recoil 설정
@@ -235,48 +242,36 @@ export function useRoofAllocationSetting(id) {
       swalFire({ type: 'alert', icon: 'error', text: getMessage('roof.exceed.count') })
       return
     }
-
+    setCurrentRoofList([
-    const originCurrentRoofList = currentRoofList.map((roof) => {
+      ...currentRoofList,
-      return { ...roof, selected: false }
+      {
-    })
-    originCurrentRoofList.push({
         ...currentRoofMaterial,
-      selected: true,
+        selected: false,
         id: currentRoofMaterial.roofMatlCd,
         name: currentRoofMaterial.roofMatlNm,
         index: currentRoofList.length,
-    })
+      },
-
+    ])
-    setCurrentRoofList(originCurrentRoofList)
   }
 
   /**
    * 지붕재 삭제
    */
   const onDeleteRoofMaterial = (idx) => {
-    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-
-    for (let i = 0; i < roofs.length; i++) {
-      if (roofs[i].roofMaterial?.index === idx) {
-        swalFire({ type: 'alert', icon: 'error', text: getMessage('roof.material.can.not.delete') })
-        return
-      }
-    }
-
     const isSelected = currentRoofList[idx].selected
     const newRoofList = JSON.parse(JSON.stringify(currentRoofList)).filter((_, index) => index !== idx)
     if (isSelected) {
       newRoofList[0].selected = true
     }
     setCurrentRoofList(newRoofList)
-    setRoofsStore(newRoofList)
-    setModuleSelectionData({ ...moduleSelectionData, roofConstructions: newRoofList })
   }
 
   /**
    * 선택한 지붕재로 할당
    */
   const handleSave = () => {
+    basicSettingSave()
+
     /**
      * 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
      */
@@ -285,7 +280,6 @@ export function useRoofAllocationSetting(id) {
     } else {
       apply()
       resetPoints()
-      basicSettingSave()
     }
   }
 
@@ -293,47 +287,23 @@ export function useRoofAllocationSetting(id) {
    * 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
    */
   const handleSaveContext = () => {
+    basicSettingSave()
     const newRoofList = currentRoofList.map((roof, idx) => {
-      if (roof.index !== idx) {
-        // 기존 저장된 지붕재의 index 수정
-        const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && obj.roofMaterial?.index === roof.index)
-        roofs.forEach((roof) => {
-          setSurfaceShapePattern(roof, roofDisplay.column, false, { ...roof, index: idx }, true)
-        })
-      }
-
       return { ...roof, index: idx, raft: roof.raft ? roof.raft : roof.raftBaseCd }
     })
-
     setBasicSetting((prev) => {
-      return { ...prev, selectedRoofMaterial: newRoofList.find((roof) => roof.selected) }
+      return {
+        ...prev,
+        selectedRoofMaterial: newRoofList.find((roof) => roof.selected),
+      }
     })
 
     setRoofList(newRoofList)
-    setRoofMaterials(newRoofList)
-    setRoofsStore(newRoofList)
     const selectedRoofMaterial = newRoofList.find((roof) => roof.selected)
     setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial, true)
     drawDirectionArrow(currentObject)
     modifyModuleSelectionData()
     closeAll()
-    basicSettingSave()
-    setModuleSelectionData({ ...moduleSelectionData, roofConstructions: newRoofList })
-  }
-
-  /**
-   * 기존 세팅된 지붕에 지붕재 내용을 바뀐 내용으로 수정
-   * @param newRoofMaterials
-   */
-  const setRoofMaterials = (newRoofMaterials) => {
-    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-    newRoofMaterials.forEach((roofMaterial) => {
-      const index = roofMaterial.index
-      const tempRoofs = roofs.filter((roof) => roof.roofMaterial?.index === index)
-      tempRoofs.forEach((roof) => {
-        setSurfaceShapePattern(roof, roofDisplay.column, false, roofMaterial)
-      })
-    })
   }
 
   /**
@@ -343,7 +313,11 @@ export function useRoofAllocationSetting(id) {
     if (!checkInnerLines()) {
       apply()
     } else {
-      swalFire({ type: 'alert', icon: 'error', text: getMessage('실제치수를 입력해 주세요.') })
+      swalFire({
+        type: 'alert',
+        icon: 'error',
+        text: getMessage('실제치수를 입력해 주세요.'),
+      })
     }
   }
 
@@ -358,7 +332,11 @@ export function useRoofAllocationSetting(id) {
       if (roof.separatePolygon.length === 0) {
         roof.innerLines.forEach((line) => {
           if (!line.attributes.actualSize || line.attributes?.actualSize === 0) {
-            line.set({ strokeWidth: 4, stroke: 'black', selectable: true })
+            line.set({
+              strokeWidth: 4,
+              stroke: 'black',
+              selectable: true,
+            })
             result = true
           }
         })
@@ -383,7 +361,6 @@ export function useRoofAllocationSetting(id) {
           splitPolygonWithLines(roofBase)
         }
       } catch (e) {
-        console.log(e)
         return
       }
 
@@ -406,7 +383,10 @@ export function useRoofAllocationSetting(id) {
     })
 
     setBasicSetting((prev) => {
-      return { ...prev, selectedRoofMaterial: newRoofList.find((roof) => roof.selected) }
+      return {
+        ...prev,
+        selectedRoofMaterial: newRoofList.find((roof) => roof.selected),
+      }
     })
     setRoofList(newRoofList)
 
@@ -414,7 +394,9 @@ export function useRoofAllocationSetting(id) {
 
     roofs.forEach((roof) => {
       if (roof.isFixed) return
-      roof.set({ isFixed: true })
+      roof.set({
+        isFixed: true,
+      })
 
       /** 모양 패턴 설정 */
       setSurfaceShapePattern(
@@ -426,8 +408,6 @@ export function useRoofAllocationSetting(id) {
       drawDirectionArrow(roof)
     })
 
-    setRoofMaterials(newRoofList)
-    setRoofsStore(newRoofList)
     /** 외곽선 삭제 */
     const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' || obj.name === 'outerLine')
     removeTargets.forEach((obj) => {
@@ -436,12 +416,9 @@ export function useRoofAllocationSetting(id) {
     setEditingLines([])
     closeAll()
     setSelectedMenu('surface')
-    //지붕면 완성 후 실측치 로 보이도록 수정
-    setCorridorDimension(1)
 
     /** 모듈 선택 데이터 초기화 */
-    // modifyModuleSelectionData()
+    modifyModuleSelectionData()
-    setModuleSelectionData({ ...moduleSelectionData, roofConstructions: newRoofList })
   }
 
   /**
@@ -454,7 +431,10 @@ export function useRoofAllocationSetting(id) {
         if (id === line.id) {
           setEditingLines([...editingLines.filter((editLine) => editLine.id !== line.id), line])
           line.attributes.actualSize = size
-          line.set({ strokeWidth: 2, stroke: 'black' })
+          line.set({
+            strokeWidth: 2,
+            stroke: 'black',
+          })
         }
       })
     })
@@ -469,7 +449,7 @@ export function useRoofAllocationSetting(id) {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
     const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
-        return { ...selectedRoofMaterial, selected: roof.selected, index }
+        return { ...selectedRoofMaterial, selected: roof.selected }
       }
       return roof
     })
@@ -559,7 +539,7 @@ export function useRoofAllocationSetting(id) {
    * 모듈 선택에서 선택한 데이터 초기화
    */
   const modifyModuleSelectionData = () => {
-    if (moduleSelectionData.roofConstructions?.length > 0) {
+    if (moduleSelectionData.roofConstructions.length > 0) {
       setModuleSelectionData({ ...moduleSelectionData, roofConstructions: [] })
       moduleSelectedDataTrigger({ ...moduleSelectionData, roofConstructions: [] })
     }

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -28,7 +28,7 @@ export function useRoofShapePassivitySetting(id) {
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   // const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { drawRoofPolygon } = useMode()
-  const { addPolygonByLines, addLengthText } = usePolygon()
+  const { addPolygonByLines } = usePolygon()
   const currentObject = useRecoilValue(currentObjectState)
   const offsetRef = useRef(null)
   const pitchRef = useRef(null)
@@ -51,7 +51,7 @@ export function useRoofShapePassivitySetting(id) {
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     if (!outerLineFix || outerLines.length === 0) {
-      swalFire({ text: getMessage('wall.line.not.found') })
+      swalFire({ text: '외벽선이 없습니다.' })
       closePopup(id)
       return
     }
@@ -248,7 +248,6 @@ export function useRoofShapePassivitySetting(id) {
       // 완료 한 경우에는 지붕까지 그려줌
       addPitchTextsByOuterLines()
       const roof = drawRoofPolygon(wall)
-      addLengthText(roof)
     }
 
     canvas.renderAll()

src/hooks/roofcover/useRoofShapeSetting.js

@@ -191,7 +191,7 @@ export function useRoofShapeSetting(id) {
     let direction
 
     if (outerLines.length < 2) {
-      swalFire({ text: getMessage('wall.line.not.found') })
+      swalFire({ text: '외벽선이 없습니다.', icon: 'error' })
       return
     }
 
@@ -231,21 +231,6 @@ export function useRoofShapeSetting(id) {
                 pitch: pitchRef.current,
                 onlyOffset: true,
               }
-
-              switch (line.direction) {
-                case 'bottom':
-                  direction = 'east'
-                  break
-                case 'top':
-                  direction = 'west'
-                  break
-                case 'left':
-                  direction = 'south'
-                  break
-                case 'right':
-                  direction = 'north'
-                  break
-              }
             }
           })
         }
@@ -731,7 +716,6 @@ export function useRoofShapeSetting(id) {
           type: LINE_TYPE.WALLLINE.SHED,
           pitch: shedPitchRef.current,
           width: shedWidth / 10,
-          offset: shedWidth / 10,
         }
         selectedLine.attributes = { ...attributes, isFixed: true }
         addPitchText(currentObject)

src/hooks/roofcover/useWallLineOffsetSetting.js

@@ -60,7 +60,7 @@ export function useWallLineOffsetSetting(id) {
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     if (outerLines.length === 0) {
-      swalFire({ text: getMessage('wall.line.not.found') })
+      swalFire({ text: '외벽선이 없습니다.' })
       closePopup(id)
       return
     }

src/hooks/surface/usePlacementShapeDrawing.js

@@ -14,7 +14,7 @@ import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useEffect, useRef } from 'react'
-import { calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import { distanceBetweenPoints } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { calculateAngle } from '@/util/qpolygon-utils'
 import {
@@ -32,38 +32,30 @@ import {
 import { usePolygon } from '@/hooks/usePolygon'
 import { POLYGON_TYPE } from '@/common/common'
 import { usePopup } from '@/hooks/usePopup'
-import { useSurfaceShapeBatch } from './useSurfaceShapeBatch'
 
 import { roofDisplaySelector } from '@/store/settingAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
-import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
-import { useObject } from '@/hooks/useObject'
 
 // 배치면 그리기
 export function usePlacementShapeDrawing(id) {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
-  const {
+  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
-    initEvent,
+    useEvent()
-    addCanvasMouseEventListener,
-    addDocumentEventListener,
-    removeAllMouseEventListeners,
-    removeAllDocumentEventListeners,
-    removeMouseLine,
-  } = useEvent()
   // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
   //   useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
+  const { tempGridMode } = useTempGrid()
   const { setSurfaceShapePattern } = useRoofFn()
-  const { changeSurfaceLineType } = useSurfaceShapeBatch({})
+  const canvasSetting = useRecoilValue(canvasSettingState)
-  const { handleSelectableObjects } = useObject()
-
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
-  const adsorptionRange = useRecoilValue(adsorptionRangeState)
+  const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
   const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
+  const adsorptionRange = useRecoilValue(adsorptionRangeState)
+  const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격
 
   const length1Ref = useRef(null)
   const length2Ref = useRef(null)
@@ -91,17 +83,13 @@ export function usePlacementShapeDrawing(id) {
   const globalPitch = useRecoilValue(globalPitchState)
 
   useEffect(() => {
-    addCanvasMouseEventListener('mouse:down', mouseDown)
+    if (adsorptionPointAddMode || tempGridMode) {
-    addDocumentEventListener('contextmenu', document, (e) => {
+      return
-      handleRollback()
-    })
-    handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], false)
-    clear()
-    return () => {
-      initEvent()
-      handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], true)
     }
-  }, [verticalHorizontalMode, points, adsorptionRange, adsorptionPointMode])
+
+    addCanvasMouseEventListener('mouse:down', mouseDown)
+    clear()
+  }, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
 
   useEffect(() => {
     setPoints([])
@@ -265,14 +253,11 @@ export function usePlacementShapeDrawing(id) {
         setPoints([])
         canvas?.renderAll()
 
-        // if (+canvasSetting?.roofSizeSet === 3) {
+        if (+canvasSetting?.roofSizeSet === 3) {
-        //   closePopup(id)
-        //   return
-        // }
-        // addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
-
-        changeSurfaceLineType(roof)
           closePopup(id)
+          return
+        }
+        addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
       }
 
       if (points.length < 3) {
@@ -701,7 +686,6 @@ export function usePlacementShapeDrawing(id) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
       // 포커스가 length1에 있지 않으면 length1에 포커스를 줌
       const activeElem = document.activeElement
 
@@ -767,7 +751,6 @@ export function usePlacementShapeDrawing(id) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
       const key = e.key
 
       const activeElem = document.activeElement
@@ -801,7 +784,6 @@ export function usePlacementShapeDrawing(id) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
       const key = e.key
       switch (key) {
         case 'Down': // IE/Edge에서 사용되는 값
@@ -827,7 +809,6 @@ export function usePlacementShapeDrawing(id) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
       const key = e.key
       switch (key) {
         case 'Enter': {
@@ -852,7 +833,6 @@ export function usePlacementShapeDrawing(id) {
       if (points.length === 0) {
         return
       }
-      enterCheck(e)
 
       const key = e.key
       switch (key) {
@@ -917,12 +897,6 @@ export function usePlacementShapeDrawing(id) {
     isFix.current = true
   }
 
-  const enterCheck = (e) => {
-    if (e.key === 'Enter') {
-      handleFix()
-    }
-  }
-
   return {
     points,
     setPoints,

src/hooks/surface/useSurfaceShapeBatch.js

@@ -3,7 +3,7 @@
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { canvasSettingState, canvasState, currentCanvasPlanState, globalPitchState } from '@/store/canvasAtom'
-import { MENU, POLYGON_TYPE, LINE_TYPE } from '@/common/common'
+import { MENU, POLYGON_TYPE } from '@/common/common'
 import { getIntersectionPoint, toFixedWithoutRounding } from '@/util/canvas-util'
 import { degreesToRadians } from '@turf/turf'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -72,12 +72,16 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       length5 = surfaceRefs.length5.current.value
     }
 
+    console.log(' before length : ', length1, length2, length3, length4, length5)
+
     length1 = parseFloat(length1 === undefined ? 0 : Number(length1 / 10).toFixed(1))
     length2 = parseFloat(length2 === undefined ? 0 : Number(length2 / 10).toFixed(1))
     length3 = parseFloat(length3 === undefined ? 0 : Number(length3 / 10).toFixed(1))
     length4 = parseFloat(length4 === undefined ? 0 : Number(length4 / 10).toFixed(1))
     length5 = parseFloat(length5 === undefined ? 0 : Number(length5 / 10).toFixed(1))
 
+    console.log(' after length : ', length1, length2, length3, length4, length5)
+
     let isDrawing = true
     let obj = null
     let points = []
@@ -107,7 +111,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           lockScalingX: true, // X 축 크기 조정 잠금
           lockScalingY: true, // Y 축 크기 조정 잠금
           name: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP,
-          // flipX: xInversion !== yInversion,
+          flipX: xInversion !== yInversion,
           // angle: xInversion && yInversion ? Math.abs((rotate + 180) % 360) : Math.abs(rotate),
           // angle: rotate,
           originX: 'center',
@@ -116,7 +120,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         }
 
         obj = new QPolygon(points, options)
-
         let imageRotate = 0
         if (xInversion && !yInversion) {
           if (rotate % 180 === 0 || rotate < 0) {
@@ -145,7 +148,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         } else {
           imageRotate = (rotate + 360) % 360
         }
-        obj.set({ angle: imageRotate, flipX: xInversion !== yInversion })
+        obj.set({ angle: imageRotate })
         obj.setCoords() //좌표 변경 적용
 
         canvas?.add(obj)
@@ -155,7 +158,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       addCanvasMouseEventListener('mouse:down', (e) => {
         isDrawing = false
 
-        const { xInversion, yInversion } = surfaceRefs
         canvas?.remove(obj)
 
         //각도 추가
@@ -176,7 +178,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         }
 
         //회전, flip등이 먹은 기준으로 새로생성
-        // const batchSurface = addPolygon(reorderedPoints, {
         const batchSurface = addPolygon(obj.getCurrentPoints(), {
           fill: 'transparent',
           stroke: 'red',
@@ -195,25 +196,18 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           pitch: globalPitch,
           surfaceId: surfaceId,
           direction: direction,
-          isXInversion: xInversion,
-          isYInversion: yInversion,
         })
         canvas.setActiveObject(batchSurface)
         setSurfaceShapePattern(batchSurface, roofDisplay.column)
         drawDirectionArrow(batchSurface)
 
+        // if (setIsHidden) setIsHidden(false)
+
         // closePopup(id)
         initEvent()
-        // if (+canvasSetting?.roofSizeSet === 3) return
+        if (+canvasSetting?.roofSizeSet === 3) return
-        // const popupId = uuidv4()
+        const popupId = uuidv4()
-        // addPopup(popupId, 2, <PlacementSurfaceLineProperty roof={batchSurface} id={popupId} setIsHidden={setIsHidden} />)
+        addPopup(popupId, 2, <PlacementSurfaceLineProperty roof={batchSurface} id={popupId} setIsHidden={setIsHidden} />)
-
-        // console.log('xInversion', xInversion) //상하반전
-        // console.log('yInversion', yInversion) //좌우반전
-
-        changeSurfaceLineType(batchSurface)
-
-        if (setIsHidden) setIsHidden(false)
       })
     } else {
       if (setIsHidden) setIsHidden(false)
@@ -494,18 +488,18 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       }
       case 10: {
         points = [
-          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
           { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
-          {
+          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
-            x: pointer.x + length1 / 2 - length1 + length2 + length3,
+          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
-            y: pointer.y + length4 / 2 - length5 - (length4 - length5),
+          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
-          },
           {
             x: pointer.x + length1 / 2 - length1 + length2,
             y: pointer.y + length4 / 2 - length5 - (length4 - length5),
           },
-          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
+          {
+            x: pointer.x + length1 / 2 - length1 + length2 + length3,
+            y: pointer.y + length4 / 2 - length5 - (length4 - length5),
+          },
         ]
         break
       }
@@ -619,27 +613,27 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       }
       case 14: {
         points = [
-          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
           { x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
+          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
           {
             x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2,
             y: pointer.y + length4 / 2 - length4 + length5,
           },
-          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
         ]
         break
       }
 
       case 15: {
         points = [
-          { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
           { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 },
-          { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
+          { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
-          { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
           { x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
+          { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
         ]
         break
       }
@@ -647,28 +641,28 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       case 16: {
         points = [
           {
-            x: pointer.x - length1 / 2 + (length1 - length2) / 2,
+            x: pointer.x - length1 / 2,
-            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
+            y: pointer.y + length3 / 2,
           },
           {
             x: pointer.x - length1 / 2 + (length1 - length2) / 2,
             y: pointer.y + length3 / 2 - (length3 - length4),
           },
           {
-            x: pointer.x - length1 / 2,
+            x: pointer.x - length1 / 2 + (length1 - length2) / 2,
-            y: pointer.y + length3 / 2,
+            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
           },
           {
-            x: pointer.x - length1 / 2 + length1,
+            x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
-            y: pointer.y + length3 / 2,
+            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
           },
           {
             x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
             y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
           },
           {
-            x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
+            x: pointer.x - length1 / 2 + length1,
-            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
+            y: pointer.y + length3 / 2,
           },
         ]
         break
@@ -679,25 +673,25 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
 
         points = [
-          {
-            x: pointer.x - length1 / 2,
-            y: pointer.y + length3 / 2,
-          },
           {
             x: pointer.x - length1 / 2 + length1,
             y: pointer.y + length3 / 2,
           },
           {
-            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
+            x: pointer.x - length1 / 2,
-            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
           },
           {
             x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2,
             y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
           },
           {
-            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
+            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
-            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
           },
         ]
         break
@@ -1072,294 +1066,45 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
     canvas?.renderAll()
   }
 
-  /**
+  const updateFlippedPoints = (polygon) => {
-   * 면형상 작도시 라인 속성 넣는 로직
+    if (!(polygon instanceof fabric.Polygon)) {
-   * 폴리곤으로 보면 직선방향에 따라 아래쪽인지 윗쪽인지 판단이 가능하다고 생각하여
+      console.error('The object is not a Polygon.')
-   * south -> 밑면은 무조건 right direction이라 가정하고 작업함 좌우반전시 반대로 그려지는 경우도 생기지만 그럴땐 흐름방향에 따라 최대값(최소값)을 찾아
+      return
-   * 해당 하는 흐름에 맞게 변경함
+    }
-   * @param { } polygon
-   */
 
-  //폴리곤, 상하반전, 좌우반전
+    const { flipX, flipY, width, height, points, left, top, scaleX, scaleY } = polygon
-  const changeSurfaceLineType = (polygon) => {
-    const { isXInversion, isYInversion } = polygon //상하반전, 좌우반전
 
-    polygon.lines.forEach((line) => {
+    // 현재 points의 사본 가져오기
-      line.attributes.type = LINE_TYPE.WALLLINE.GABLE
+    const newPoints = points.map((point) => {
+      let x = point.x
+      let y = point.y
+
+      // flipX 적용
+      if (flipX) {
+        x = width - x
+      }
+
+      // flipY 적용
+      if (flipY) {
+        y = height - y
+      }
+
+      // 스케일 및 전역 좌표 고려
+      x = (x - width / 2) * scaleX + width / 2
+      y = (y - height / 2) * scaleY + height / 2
+
+      return { x, y }
     })
 
-    const directionConfig = {
+    // flipX, flipY를 초기화
-      south: { evaesDirection: 'right', ridgeDirection: 'left', coord1: 'y1', coord2: 'y2' },
+    polygon.flipX = false
-      north: { evaesDirection: 'left', ridgeDirection: 'right', coord1: 'y1', coord2: 'y2' },
+    polygon.flipY = false
-      east: { evaesDirection: 'top', ridgeDirection: 'bottom', coord1: 'x1', coord2: 'x2' },
-      west: { evaesDirection: 'bottom', ridgeDirection: 'top', coord1: 'x1', coord2: 'x2' },
-    }
 
-    const { evaesDirection, ridgeDirection, coord1, coord2 } = directionConfig[polygon.direction] || directionConfig.west
+    // points 업데이트
+    polygon.set({ points: newPoints })
+    polygon.setCoords()
 
-    polygon.lines.forEach((line) => {
+    return polygon
-      if (line[coord1] === line[coord2]) {
-        if (line.direction === evaesDirection) {
-          line.attributes.type = LINE_TYPE.WALLLINE.EAVES
-        } else if (line.direction === ridgeDirection) {
-          line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
-        }
-      }
-    })
-
-    /**
-     * 진짜 처마 라인인지 확인하는 로직 -> 특정 모양에 따라 처마가 없는 경우가 있는데 위에 로직으로는
-     * 용마루도 처마로 만들어서 재보정
-     */
-    //직선 찾는 로직
-    const maxLine = polygon.lines.filter((line) => line[coord1] === line[coord2])
-
-    if (maxLine.length > 0) {
-      const maxLineSorted = maxLine.reduce((a, b) => {
-        return (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] >
-          (polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1]
-          ? b
-          : a
-      })
-
-      //정렬된 폴리곤이 아니면(대각선이 존재하는 폴리곤일때)
-      if (!polygon.isSortedPoints) {
-        //좌우 반전을 했으면 반대로 정의함
-        if (isYInversion || isXInversion) {
-          polygon.lines.forEach((line) => {
-            if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
-              line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
-            } else if (line.attributes.type === LINE_TYPE.SUBLINE.RIDGE) {
-              line.attributes.type = LINE_TYPE.WALLLINE.EAVES
-            }
-          })
-        }
-      }
-
-      if (maxLine.length === 1) {
-        const maxLineCoord = polygon.lines.reduce((a, b) => {
-          return (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] >
-            (polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1]
-            ? b
-            : a
-        })
-
-        const isRealEavesLine = polygon.lines.filter((line) => line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
-        if (isRealEavesLine.length > 0) {
-          isRealEavesLine.forEach((line) => {
-            if (polygon.direction === 'south' || polygon.direction === 'north') {
-              const targetCoord =
-                polygon.direction === 'south' ? Math.max(maxLineCoord.y1, maxLineCoord.y2) : Math.min(maxLineCoord.y1, maxLineCoord.y2)
-              const realLineCoord = polygon.direction === 'south' ? Math.max(line.y1, line.y2) : Math.min(line.y1, line.y2)
-
-              if (targetCoord !== realLineCoord) {
-                line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
-              }
-            } else if (polygon.direction === 'east' || polygon.direction === 'west') {
-              const targetCoord =
-                polygon.direction === 'east' ? Math.max(maxLineCoord.x1, maxLineCoord.x2) : Math.min(maxLineCoord.x1, maxLineCoord.x2)
-              const realLineCoord = polygon.direction === 'east' ? Math.max(line.x1, line.x2) : Math.min(line.x1, line.x2)
-
-              if (targetCoord !== realLineCoord) {
-                line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
-              }
-            }
-          })
-        }
-      }
-    }
-  }
-
-  function findCentroid(points) {
-    let sumX = 0,
-      sumY = 0
-    for (let i = 0; i < points.length; i++) {
-      sumX += points[i].x
-      sumY += points[i].y
-    }
-    return { x: sumX / points.length, y: sumY / points.length }
-  }
-
-  // 도형의 포인트를 왼쪽부터 반시계 방향으로 정렬하는 함수
-  /**
-   * 다각형의 점들을 시계 반대 방향으로 정렬하는 함수
-   * @param {Array} points - {x, y} 좌표 객체 배열
-   * @param {Object} startPoint - 시작점 (제공되지 않으면 가장 왼쪽 아래 점을 사용)
-   * @returns {Array} 시계 반대 방향으로 정렬된 점들의 배열
-   */
-  function orderPointsCounterClockwise(points, startPoint = null) {
-    if (points.length <= 3) {
-      return points // 점이 3개 이하면 이미 다각형의 모든 점이므로 그대로 반환
-    }
-
-    // 시작점이 제공되지 않았다면 가장 왼쪽 아래 점을 찾음
-    let start = startPoint
-    if (!start) {
-      start = points[0]
-      for (let i = 1; i < points.length; i++) {
-        if (points[i].x < start.x || (points[i].x === start.x && points[i].y < start.y)) {
-          start = points[i]
-        }
-      }
-    }
-
-    // 다각형의 중심점 계산
-    let centerX = 0,
-      centerY = 0
-    for (let i = 0; i < points.length; i++) {
-      centerX += points[i].x
-      centerY += points[i].y
-    }
-    centerX /= points.length
-    centerY /= points.length
-
-    // 시작점에서 시계 반대 방향으로 각도 계산
-    let angles = []
-    for (let i = 0; i < points.length; i++) {
-      // 시작점은 제외
-      if (points[i] === start) continue
-
-      // 시작점을 기준으로 각 점의 각도 계산
-      let angle = Math.atan2(points[i].y - start.y, points[i].x - start.x)
-
-      // 각도가 음수면 2π를 더해 0~2π 범위로 변환
-      if (angle < 0) angle += 2 * Math.PI
-
-      angles.push({
-        point: points[i],
-        angle: angle,
-      })
-    }
-
-    // 각도에 따라 정렬 (시계 반대 방향)
-    angles.sort((a, b) => a.angle - b.angle)
-
-    // 정렬된 배열 생성 (시작점을 첫 번째로)
-    let orderedPoints = [start]
-    for (let i = 0; i < angles.length; i++) {
-      orderedPoints.push(angles[i].point)
-    }
-
-    return orderedPoints
-  }
-
-  /**
-   * 특정 점에서 시작하여 시계 반대 방향으로 다음 점을 찾는 함수
-   * @param {Object} currentPoint - 현재 점 {x, y}
-   * @param {Array} points - 모든 점들의 배열
-   * @param {Array} visited - 방문한 점들의 인덱스 배열
-   * @param {Object} prevVector - 이전 벡터 방향 (첫 호출에서는 null)
-   * @returns {Object} 다음 점의 인덱스와 객체
-   */
-  function findNextCounterClockwisePoint(currentPoint, points, visited, prevVector = null) {
-    let minAngle = Infinity
-    let nextIndex = -1
-
-    // 이전 벡터가 없으면 (첫 점인 경우) 아래쪽을 향하는 벡터 사용
-    if (!prevVector) {
-      prevVector = { x: 0, y: -1 }
-    }
-
-    for (let i = 0; i < points.length; i++) {
-      // 이미 방문했거나 현재 점이면 건너뜀
-      if (visited.includes(i) || (points[i].x === currentPoint.x && points[i].y === currentPoint.y)) {
-        continue
-      }
-
-      // 현재 점에서 다음 후보 점으로의 벡터
-      let vector = {
-        x: points[i].x - currentPoint.x,
-        y: points[i].y - currentPoint.y,
-      }
-
-      // 벡터의 크기
-      let magnitude = Math.sqrt(vector.x * vector.x + vector.y * vector.y)
-
-      // 단위 벡터로 정규화
-      vector.x /= magnitude
-      vector.y /= magnitude
-
-      // 이전 벡터와 현재 벡터 사이의 각도 계산 (내적 사용)
-      let dotProduct = prevVector.x * vector.x + prevVector.y * vector.y
-      let crossProduct = prevVector.x * vector.y - prevVector.y * vector.x
-
-      // 각도 계산 (atan2 사용)
-      let angle = Math.atan2(crossProduct, dotProduct)
-
-      // 시계 반대 방향으로 가장 작은 각도를 가진 점 찾기
-      // 각도가 음수면 2π를 더해 0~2π 범위로 변환
-      if (angle < 0) angle += 2 * Math.PI
-
-      if (angle < minAngle) {
-        minAngle = angle
-        nextIndex = i
-      }
-    }
-
-    return nextIndex !== -1 ? { index: nextIndex, point: points[nextIndex] } : null
-  }
-
-  /**
-   * 다각형의 점들을 시계 반대 방향으로 추적하는 함수
-   * @param {Array} points - {x, y} 좌표 객체 배열
-   * @param {Object} startPoint - 시작점 (제공되지 않으면 가장 왼쪽 아래 점을 사용)
-   * @returns {Array} 시계 반대 방향으로 정렬된 점들의 배열
-   */
-  function tracePolygonCounterClockwise(points, startPoint = null) {
-    if (points.length <= 3) {
-      return orderPointsCounterClockwise(points, startPoint)
-    }
-
-    // 시작점이 제공되지 않았다면 가장 왼쪽 아래 점을 찾음
-    let startIndex = 0
-    if (!startPoint) {
-      for (let i = 1; i < points.length; i++) {
-        if (points[i].x < points[startIndex].x || (points[i].x === points[startIndex].x && points[i].y < points[startIndex].y)) {
-          startIndex = i
-        }
-      }
-      startPoint = points[startIndex]
-    } else {
-      // 시작점이 제공된 경우 해당 점의 인덱스 찾기
-      for (let i = 0; i < points.length; i++) {
-        if (points[i].x === startPoint.x && points[i].y === startPoint.y) {
-          startIndex = i
-          break
-        }
-      }
-    }
-
-    // 결과 배열 초기화
-    let orderedPoints = [startPoint]
-    let visited = [startIndex]
-
-    let currentPoint = startPoint
-    let prevVector = null
-
-    // 모든 점을 방문할 때까지 반복
-    while (visited.length < points.length) {
-      let next = findNextCounterClockwisePoint(currentPoint, points, visited, prevVector)
-
-      if (!next) break // 더 이상 찾을 점이 없으면 종료
-
-      orderedPoints.push(next.point)
-      visited.push(next.index)
-
-      // 이전 벡터 업데이트 (현재 점에서 다음 점으로의 벡터)
-      prevVector = {
-        x: next.point.x - currentPoint.x,
-        y: next.point.y - currentPoint.y,
-      }
-
-      // 벡터 정규화
-      let magnitude = Math.sqrt(prevVector.x * prevVector.x + prevVector.y * prevVector.y)
-      prevVector.x /= magnitude
-      prevVector.y /= magnitude
-
-      currentPoint = next.point
-    }
-
-    return orderedPoints
   }
 
   return {
@@ -1370,6 +1115,5 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
     changeSurfaceLinePropertyEvent,
     changeSurfaceLineProperty,
     changeSurfaceLinePropertyReset,
-    changeSurfaceLineType,
   }
 }

src/hooks/useCanvasEvent.js

@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
-import { canvasSizeState, canvasState, canvasZoomState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
+import { canvasSizeState, canvasState, canvasZoomState, currentObjectState } from '@/store/canvasAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { fontSelector } from '@/store/fontAtom'
-import { MENU, POLYGON_TYPE } from '@/common/common'
 
 // 캔버스에 필요한 이벤트
 export function useCanvasEvent() {
@@ -14,16 +13,11 @@ export function useCanvasEvent() {
   const canvasSize = useRecoilValue(canvasSizeState)
   const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
   const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
-  const currentMenu = useRecoilValue(currentMenuState)
 
   useEffect(() => {
     canvas?.setZoom(canvasZoom / 100)
   }, [canvasZoom])
 
-  useEffect(() => {
-    attachDefaultEventOnCanvas()
-  }, [currentMenu])
-
   // 기본적인 이벤트 필요시 추가
   const attachDefaultEventOnCanvas = () => {
     removeEventOnCanvas()
@@ -204,20 +198,8 @@ export function useCanvasEvent() {
 
       if (selected?.length > 0) {
         selected.forEach((obj) => {
-          // if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
+          if (obj.type === 'QPolygon' && obj.name !== 'module') {
-          if (obj.type === 'QPolygon') {
-            const originStroke = obj.stroke
             obj.set({ stroke: 'red' })
-
-            if (currentMenu === MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
-              if (obj.name === POLYGON_TYPE.MODULE) {
-                obj.set({ strokeWidth: 3 })
-              }
-              if (obj.name === POLYGON_TYPE.ROOF) {
-                canvas.discardActiveObject()
-                obj.set({ stroke: originStroke })
-              }
-            }
           }
         })
         canvas.renderAll()
@@ -233,9 +215,6 @@ export function useCanvasEvent() {
             if (obj.name !== 'moduleSetupSurface') {
               obj.set({ stroke: 'black' })
             }
-            if (obj.name === POLYGON_TYPE.MODULE && currentMenu === MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
-              obj.set({ strokeWidth: 0.3 })
-            }
           }
         })
       }
@@ -250,22 +229,14 @@ export function useCanvasEvent() {
         deselected.forEach((obj) => {
           if (obj.type === 'QPolygon') {
             obj.set({ stroke: 'black' })
-            if (obj.name === POLYGON_TYPE.MODULE && currentMenu === MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
-              //모듈 미선택시 라인 두께 변경
-              obj.set({ strokeWidth: 0.3 })
-            }
           }
         })
       }
 
       if (selected?.length > 0) {
         selected.forEach((obj) => {
-          if (obj.type === 'QPolygon') {
+          if (obj.type === 'QPolygon' && obj.name !== 'module') {
             obj.set({ stroke: 'red' })
-            if (obj.name === POLYGON_TYPE.MODULE && currentMenu === MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
-              //모듈 선택시 라인 두께 변경
-              obj.set({ strokeWidth: 3 })
-            }
           }
         })
       }

src/hooks/useCirCuitTrestle.js

@@ -24,14 +24,14 @@ export function useCircuitTrestle(executeEffect = false) {
   const [selectedModels, setSelectedModels] = useRecoilState(selectedModelsState)
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
   const selectedModules = useRecoilValue(selectedModuleState)
-  const { managementState } = useContext(GlobalDataContext)
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const canvas = useRecoilValue(canvasState)
   const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
   const resetModuleStatistics = useResetRecoilState(moduleStatisticsState)
   const { getMessage } = useMessage()
 
   useEffect(() => {
-    if (selectedModules && Object.keys(selectedModules).length > 0 && executeEffect) setModuleStatisticsData()
+    if (Object.keys(selectedModules).length > 0 && executeEffect) setModuleStatisticsData()
   }, [selectedModules])
 
   const getOptYn = () => {

src/hooks/useContextMenu.js

@@ -81,9 +81,9 @@ export function useContextMenu() {
     switch (selectedMenu) {
       case 'outline':
         break
-      // default:
+      default:
-      //   setContextMenu([])
+        setContextMenu([])
-      //   break
+        break
     }
   }
 

src/hooks/useEstimate.js

@@ -13,7 +13,7 @@ import { useTrestle } from '@/hooks/module/useTrestle'
 import { usePlan } from '@/hooks/usePlan'
 
 export function useEstimate() {
-  const { managementState } = useContext(GlobalDataContext)
+  const { managementStateLoaded } = useContext(GlobalDataContext)
   const { setIsGlobalLoading } = useContext(QcastContext)
   const router = useRouter()
   const loginUserState = useRecoilValue(loginUserStore)
@@ -31,18 +31,16 @@ export function useEstimate() {
    * @param {Object} estimateParam - 견적서 저장 데이터
    */
   const saveEstimate = async (estimateParam) => {
-    console.log('managementState', managementState)
-
     const userId = loginUserState.userId
-    const saleStoreId = managementState.saleStoreId
+    const saleStoreId = managementStateLoaded.saleStoreId
     const objectNo = currentCanvasPlan.objectNo
     const planNo = currentCanvasPlan.planNo
     const slope = estimateParam.roofSurfaceList[0].slope
     const angle = estimateParam.roofSurfaceList[0].angle
-    const surfaceType = managementState.surfaceType
+    const surfaceType = managementStateLoaded.surfaceType
-    const setupHeight = managementState.installHeight
+    const setupHeight = managementStateLoaded.installHeight
-    const standardWindSpeedId = managementState.standardWindSpeedId
+    const standardWindSpeedId = managementStateLoaded.standardWindSpeedId
-    const snowfall = managementState.verticalSnowCover
+    const snowfall = managementStateLoaded.verticalSnowCover
     const drawingFlg = '1'
 
     const saveEstimateData = {

src/hooks/useEvent.js

@@ -6,9 +6,6 @@ import { calculateDistance, calculateDistancePoint, calculateIntersection, dista
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
-import { gridColorState } from '@/store/gridAtom'
-import { gridDisplaySelector } from '@/store/settingAtom'
-import { POLYGON_TYPE } from '@/common/common'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)
@@ -16,14 +13,10 @@ export function useEvent() {
   const documentEventListeners = useRef([])
   const mouseEventListeners = useRef([])
   const setCanvasZoom = useSetRecoilState(canvasZoomState)
-  const gridColor = useRecoilValue(gridColorState)
-  const isGridDisplay = useRecoilValue(gridDisplaySelector)
 
   const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
   const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
-  const { tempGridModeStateLeftClickEvent, tempGridMode } = useTempGrid()
+  const { tempGridModeStateLeftClickEvent, tempGridMode, tempGridRightClickEvent } = useTempGrid()
-  const roofAdsorptionPoints = useRef([])
-  const intersectionPoints = useRef([])
 
   const textMode = useRecoilValue(textModeState)
 
@@ -84,10 +77,7 @@ export function useEvent() {
     setCanvasZoom(Number((zoom * 100).toFixed(0)))
 
     // 마우스 위치 기준으로 확대/축소
-    canvas.zoomToPoint(new fabric.Point(opt.e.offsetX, opt.e.offsetY), zoom)
+    canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom)
-    canvas.calcOffset()
-    canvas.setViewportTransform(canvas.viewportTransform)
-    canvas.requestRenderAll()
 
     // 이벤트의 기본 동작 방지 (스크롤 방지)
     opt.e.preventDefault()
@@ -100,84 +90,31 @@ export function useEvent() {
 
   const defaultMouseMoveEvent = (e) => {
     removeMouseLine()
-    const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     // 가로선
     const pointer = canvas.getPointer(e.e)
 
+    const adsorptionPoints = getAdsorptionPoints()
+
     let arrivalPoint = { x: pointer.x, y: pointer.y }
 
     if (adsorptionPointMode) {
-      const roofsPoints = roofs.map((roof) => roof.points).flat()
-      roofAdsorptionPoints.current = [...roofsPoints]
-
-      const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
-      const otherAdsorptionPoints = []
-
-      auxiliaryLines.forEach((line1) => {
-        auxiliaryLines.forEach((line2) => {
-          if (line1 === line2) {
-            return
-          }
-
-          const intersectionPoint = calculateIntersection(line1, line2)
-          if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
-            return
-          }
-          otherAdsorptionPoints.push(intersectionPoint)
-        })
-      })
-
-      let innerLinePoints = []
-      canvas
-        .getObjects()
-        .filter((obj) => obj.innerLines)
-        .forEach((polygon) => {
-          polygon.innerLines.forEach((line) => {
-            innerLinePoints.push({ x: line.x1, y: line.y1 })
-            innerLinePoints.push({ x: line.x2, y: line.y2 })
-          })
-        })
-
-      const adsorptionPoints = [
-        ...getAdsorptionPoints(),
-        ...roofAdsorptionPoints.current,
-        ...otherAdsorptionPoints,
-        ...intersectionPoints.current,
-        ...innerLinePoints,
-      ]
-
       if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) {
         const closestLine = getClosestLineGrid(pointer)
 
-        const horizonLines = canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name) && obj.direction === 'horizontal')
+        const horizonLines = canvas.getObjects().filter((obj) => obj.name === 'lineGrid' && obj.direction === 'horizontal')
-        const verticalLines = canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name) && obj.direction === 'vertical')
+        const verticalLines = canvas.getObjects().filter((obj) => obj.name === 'lineGrid' && obj.direction === 'vertical')
 
-        if (!horizonLines || !verticalLines) {
+        const closestHorizontalLine = horizonLines.reduce((prev, curr) => {
-          return
-        }
-
-        let closestHorizontalLine = null
-        let closestVerticalLine = null
-
-        if (horizonLines && horizonLines.length > 0) {
-          closestHorizontalLine = horizonLines.reduce((prev, curr) => {
           const prevDistance = calculateDistance(pointer, prev)
           const currDistance = calculateDistance(pointer, curr)
           return prevDistance < currDistance ? prev : curr
         })
-        }
 
-        if (verticalLines && verticalLines.length > 0) {
+        const closestVerticalLine = verticalLines.reduce((prev, curr) => {
-          closestVerticalLine = verticalLines.reduce((prev, curr) => {
           const prevDistance = calculateDistance(pointer, prev)
           const currDistance = calculateDistance(pointer, curr)
           return prevDistance < currDistance ? prev : curr
         })
-        }
-
-        if (!closestVerticalLine || !closestHorizontalLine) {
-          return
-        }
 
         const closestIntersectionPoint = calculateIntersection(closestHorizontalLine, closestVerticalLine)
 
@@ -294,34 +231,6 @@ export function useEvent() {
       })
   }
 
-  const tempGridRightClickEvent = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    //임의 그리드 모드일 경우
-    let pointer = { x: e.offsetX, y: e.offsetY }
-
-    const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], {
-      stroke: gridColor,
-      strokeWidth: 1,
-      selectable: true,
-      lockMovementX: true,
-      lockMovementY: true,
-      lockRotation: true,
-      lockScalingX: true,
-      lockScalingY: true,
-      strokeDashArray: [5, 2],
-      opacity: 0.3,
-      padding: 5,
-      name: 'tempGrid',
-      visible: isGridDisplay,
-      direction: 'horizontal',
-    })
-
-    canvas.add(tempGrid)
-
-    canvas.renderAll()
-  }
-
   const defaultKeyboardEvent = (e) => {
     if (e.key === 'Escape') {
       console.log('defaultKeyboardEvent')
@@ -398,7 +307,6 @@ export function useEvent() {
     removeDocumentEvent,
     removeMouseEvent,
     removeMouseLine,
-    defaultMouseMoveEvent,
     initEvent,
   }
 }

src/hooks/useLine.js

@@ -53,8 +53,8 @@ export const useLine = () => {
     })
     canvas
       ?.getObjects()
-      ?.find((obj) => obj.parentId === line.id)
+      .find((obj) => obj.parentId === line.id)
-      ?.set({
+      .set({
         visible: true,
       })
     canvas?.renderAll()

src/hooks/useObject.js

@@ -12,17 +12,5 @@ export function useObject() {
         canvas.remove(item)
       })
   }
-
+  return { deleteObject }
-  const handleSelectableObjects = (targetNames = [], bool) => {
-    if (!canvas) {
-      return
-    }
-    const selectableObjects = canvas.getObjects().filter((obj) => targetNames.includes(obj.name))
-    selectableObjects.forEach((obj) => {
-      obj.selectable = bool
-    })
-    canvas.renderAll()
-  }
-
-  return { deleteObject, handleSelectableObjects }
 }

src/hooks/usePlan.js

@@ -20,8 +20,6 @@ import { compasDegAtom } from '@/store/orientationAtom'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useCanvasPopupStatusController } from './common/useCanvasPopupStatusController'
 import { useCanvasMenu } from './common/useCanvasMenu'
-import { QcastContext } from '@/app/QcastProvider'
-import { unescapeString } from '@/util/common-utils'
 
 /**
  * 플랜 처리 훅
@@ -54,9 +52,6 @@ export function usePlan(params = {}) {
   const { fetchBasicSettings, basicSettingCopySave } = useCanvasSetting()
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
 
-  /** 전역 로딩바 컨텍스트 */
-  const { setIsGlobalLoading } = useContext(QcastContext)
-
   /**
    * 플랜 복사 시 모듈이 있을경우 모듈 데이터 복사하기 위한 처리
    */
@@ -265,7 +260,7 @@ export function usePlan(params = {}) {
           objectNo,
           planNo: parseInt(newPlan.planNo),
           popupType: 1,
-          popupStatus: unescapeString(sourceDegree.popupStatus),
+          popupStatus: sourceDegree.popupStatus,
         }
         console.log('🚀 ~ postObjectPlan ~ degreeData:', degreeData)
         await post({ url: `/api/v1/canvas-popup-status`, data: degreeData })
@@ -407,28 +402,19 @@ export function usePlan(params = {}) {
           }
         })
     } else {
-      swalFire({
+      if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
-        text: getMessage('plan.message.confirm.save'),
-        type: 'confirm',
-        confirmFn: async () => {
-          //저장 전에 플랜이 이동되어 state가 변경되는 이슈가 있음
         await saveCanvas(true)
         clearRecoilState()
+      }
       setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
       setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
-        },
-        denyFn: async () => {
-          setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
-          setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
-        },
-      })
     }
   }
 
   useEffect(() => {
     setSelectedPlan(currentCanvasPlan)
     handleCurrentPlanUrl()
-    // resetCurrentObject()
+    resetCurrentObject()
     resetModuleSetupSurface()
   }, [currentCanvasPlan])
 
@@ -456,46 +442,23 @@ export function usePlan(params = {}) {
    * @param {string} objectNo - 물건번호
    */
   const handleAddPlan = async (userId, objectNo) => {
-    let isSelected = false
-
     if (currentCanvasPlan?.id) {
-      swalFire({
+      await saveCanvas(false)
-        text: getMessage('plan.message.confirm.save'),
-        type: 'confirm',
-        confirmFn: async () => {
-          //저장 전에 플랜이 이동되어 state가 변경되는 이슈가 있음
-          await saveCanvas(true)
-          handleAddPlanCopyConfirm(userId, objectNo)
-        },
-        denyFn: async () => {
-          handleAddPlanCopyConfirm(userId, objectNo)
-        },
-      })
     }
-  }
+    JSON.parse(currentCanvasData()).objects.length > 0
-
+      ? swalFire({
-  const handleAddPlanCopyConfirm = async (userId, objectNo) => {
-    if (JSON.parse(currentCanvasData()).objects.length > 0) {
-      swalFire({
           text: `Plan ${currentCanvasPlan.planNo} ` + getMessage('plan.message.confirm.copy'),
           type: 'confirm',
           confirmFn: async () => {
-          setIsGlobalLoading(true)
             await postObjectPlan(userId, objectNo, true, false)
-          setIsGlobalLoading(false)
           },
           denyFn: async () => {
-          setIsGlobalLoading(true)
             await postObjectPlan(userId, objectNo, false, false)
-          setIsGlobalLoading(false)
           },
         })
-    } else {
+      : await postObjectPlan(userId, objectNo, false, false)
-      setIsGlobalLoading(true)
-      await postObjectPlan(userId, objectNo, false, false)
-      setIsGlobalLoading(false)
-    }
   }
+
   /**
    * 물건번호(object) plan 삭제 (canvas 삭제 전 planNo 삭제)
    *

src/hooks/usePolygon.js

@@ -176,10 +176,6 @@ export const usePolygon = () => {
    * @param showDirectionText
    */
   const drawDirectionArrow = (polygon, showDirectionText = true) => {
-    if (!polygon) {
-      return
-    }
-
     if (polygon.points.length < 3) {
       return
     }
@@ -771,7 +767,7 @@ export const usePolygon = () => {
             obj.type === 'QLine' &&
             obj.attributes?.type !== 'pitchSizeLine' &&
             obj.attributes?.roofId === polygon.id &&
-            innerLineTypes.includes(obj.name),
+            (innerLineTypes.includes(obj.name) || !obj.name),
         )
 
       innerLines = [...polygon.innerLines]

src/hooks/useTempGrid.js

@@ -7,9 +7,8 @@ const GRID_PADDING = 5
 export function useTempGrid() {
   const canvas = useRecoilValue(canvasState)
   const gridColor = useRecoilValue(gridColorState)
-  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
-
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const tempGridModeStateLeftClickEvent = (e) => {
     //임의 그리드 모드일 경우
     let pointer = canvas.getPointer(e.e)
@@ -36,8 +35,37 @@ export function useTempGrid() {
     canvas.renderAll()
   }
 
+  const tempGridRightClickEvent = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    //임의 그리드 모드일 경우
+    let pointer = { x: e.offsetX, y: e.offsetY }
+
+    const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], {
+      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,
+      name: 'tempGrid',
+      visible: isGridDisplay,
+      direction: 'horizontal',
+    })
+
+    canvas.add(tempGrid)
+
+    canvas.renderAll()
+  }
+
   return {
     tempGridModeStateLeftClickEvent,
+    tempGridRightClickEvent,
     tempGridMode,
     setTempGridMode,
   }

src/lib/authActions.js

@@ -48,7 +48,6 @@ export async function setSession(data) {
   session.pwdInitYn = data.pwdInitYn
   session.custCd = data.custCd
   session.isLoggedIn = true
-  session.builderNo = data.builderNo
 
   await session.save()
 }

src/locales/ja.json

@@ -3,7 +3,7 @@
   "welcome": "ようこそ。 {0}さん",
   "header.menus.home": "ホーム",
   "header.menus.management": "見積書管理画面",
-  "header.menus.management.newStuff": "新規物件登録",
+  "header.menus.management.newStuff": "新規見積登録",
   "header.menus.management.detail": "物件詳細",
   "header.menus.management.stuffList": "物件検索",
   "header.menus.community": "コミュニティ",
@@ -18,7 +18,6 @@
   "plan.menu.placement.surface.initial.setting": "配置面初期設定",
   "modal.placement.initial.setting.plan.drawing": "図面の作成方法",
   "modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物件作成",
-  "modal.placement.initial.setting.plan.drawing.size.info": "※数字は[半角]入力のみ可能です。",
   "modal.placement.initial.setting.size": "寸法入力方法",
   "modal.placement.initial.setting.size.info": "寸法入力方法案内",
   "modal.placement.initial.setting.size.roof": "伏図入力",
@@ -37,8 +36,8 @@
   "modal.roof.shape.setting.ridge": "棟",
   "modal.roof.shape.setting.patten.a": "Aパターン",
   "modal.roof.shape.setting.patten.b": "Bパターン",
-  "modal.roof.shape.setting.side": "個別に設定",
+  "modal.roof.shape.setting.side": "別に設定",
-  "plan.menu.roof.cover": "伏せ図入力",
+  "plan.menu.roof.cover": "屋根作図",
   "plan.menu.roof.cover.outline.drawing": "外壁線を描く",
   "plan.menu.roof.cover.roof.shape.setting": "屋根形状の設定",
   "plan.menu.roof.cover.roof.shape.passivity.setting": "屋根形状の手動設定",
@@ -73,7 +72,7 @@
   "common.setting.rollback": "前に戻る",
   "modal.cover.outline.remove": "外壁の取り外し",
   "modal.cover.outline.select.move": "外壁選択の移動",
-  "plan.menu.placement.surface": "実測値入力",
+  "plan.menu.placement.surface": "配置面",
   "plan.menu.placement.surface.slope.setting": "傾斜設定",
   "plan.menu.placement.surface.drawing": "配置面の描画",
   "modal.placement.surface.drawing.straight.line": "直線",
@@ -89,20 +88,13 @@
   "plan.menu.module.circuit.setting.default": "モジュール/架台設定",
   "modal.module.basic.setting.orientation.setting": "方位設定",
   "modal.module.basic.setting.orientation.setting.info": "※シミュレーション計算用方位を指定します。南の方位を設定してください。",
-  "modal.module.basic.setting.orientation.setting.angle.passivity": "角度変更",
+  "modal.module.basic.setting.orientation.setting.angle.passivity": "勾配を直接入力",
   "modal.module.basic.setting.module.roof.material": "屋根材",
   "modal.module.basic.setting.module.trestle.maker": "架台メーカー",
   "modal.module.basic.setting.module.rafter.margin": "垂木の間隔",
   "modal.module.basic.setting.module.construction.method": "工法",
-  "modal.module.basic.setting.module.under.roof": "屋根下地",
+  "modal.module.basic.setting.module.under.roof": "屋根の下",
   "modal.module.basic.setting.module.setting": "モジュールの選択",
-  "modal.module.basic.setting.module.placement.area": "モジュール配置領域",
-  "modal.module.basic.setting.module.placement.margin": "モジュール間の間隙",
-  "modal.module.basic.setting.module.placement.area.eaves": "軒側",
-  "modal.module.basic.setting.module.placement.area.ridge": "棟側",
-  "modal.module.basic.setting.module.placement.area.keraba": "けらぱ",
-  "modal.module.basic.setting.module.placement.margin.horizontal": "左右",
-  "modal.module.basic.setting.module.placement.margin.vertical": "上下",
   "modal.module.basic.setting.module.hajebichi": "ハゼピッチ",
   "modal.module.basic.setting.module.setting.info1": "※勾配の範囲には制限があります。屋根傾斜が2.5値未満10値を超える場合は、施工が可能かどうか施工マニュアルを確認してください。",
   "modal.module.basic.setting.module.setting.info2": "※モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ずご確認ください。",
@@ -113,50 +105,32 @@
   "modal.module.basic.setting.module.standard.snowfall.amount": "積雪量",
   "modal.module.basic.setting.module.standard.construction": "標準施工",
   "modal.module.basic.setting.module.enforce.construction": "強化施工",
-  "modal.module.basic.setting.module.multiple.construction": "多雪施工",
+  "modal.module.basic.setting.module.multiple.construction": "多設施工",
   "modal.module.basic.setting.module.eaves.bar.fitting": "軒カバーの設置",
   "modal.module.basic.setting.module.blind.metal.fitting": "落雪防止金具設置",
   "modal.module.basic.setting.module.select": "モジュール/架台選択",
-  "modal.module.basic.settting.module.error1": "架台メーカーを選択してください。\n(屋根材: {0})",
-  "modal.module.basic.settting.module.error2": "工法を選択してください。\n(屋根材: {0})",
-  "modal.module.basic.settting.module.error3": "屋根の下を選択してください。\n(屋根材: {0})",
-  "modal.module.basic.settting.module.error4": "設置可能な施工条件がないので設置条件を変更してください。\n(屋根材: {0})",
-  "modal.module.basic.settting.module.error5": "L を選択してください。\n(屋根材: {0})",
-  "modal.module.basic.settting.module.error6": "垂木の間隔を入力してください。\n(屋根材: {0})",
-  "modal.module.basic.settting.module.error7": "下在ビーチを入力してください。\n(屋根材: {0})",
-  "modal.module.basic.settting.module.error8": "モジュール配置領域の値を入力してください。\n(屋根材: {0})",
-  "modal.module.basic.settting.module.error9": "軒側の配置領域の値を{0} mm以上に変更してください。\n(屋根材: {1})",
-  "modal.module.basic.settting.module.error10": "棟側の配置領域の値を{0} mm以上に変更してください。\n(屋根材: {1})",
-  "modal.module.basic.settting.module.error11": "ケラバ側の配置領域の値を{0} mm以上に変更してください。\n(屋根材: {1})",
-  "modal.module.basic.settting.module.error12": "施工方法を選択してください。\n(屋根材: {0})",
   "modal.module.basic.setting.module.placement": "モジュールの配置",
   "modal.module.basic.setting.module.placement.select.fitting.type": "設置形態を選択してください。",
   "modal.module.basic.setting.module.placement.waterfowl.arrangement": "千鳥配置",
-  "modal.module.basic.setting.module.placement.max.row.amount": "Max段数",
-  "modal.module.basic.setting.module.placement.mix.max.row.amount": "混合Max段数",
-  "modal.module.basic.setting.module.placement.row.amount": "段数",
-  "modal.module.basic.setting.module.placement.column.amount": "列数",
   "modal.module.basic.setting.module.placement.do": "する",
   "modal.module.basic.setting.module.placement.do.not": "しない",
   "modal.module.basic.setting.module.placement.arrangement.standard": "配置基準",
   "modal.module.basic.setting.module.placement.arrangement.standard.center": "中央",
-  "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒側",
+  "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒",
-  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟側",
+  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟",
   "modal.module.basic.setting.module.placement.maximum": "最大配置",
-  "modal.module.basic.setting.pitch.module.placement.standard.setting": "配置基準の設定",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting": "配置基準設定",
-  "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向きに設置す",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向き設置",
-  "modal.module.basic.setting.pitch.module.placement.standard.setting.select": "指定した辺を基準に設置する",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting.select": "指定した辺を基準に設置",
   "modal.module.basic.setting.pitch.module.allocation.setting": "割り当て設定",
   "modal.module.basic.setting.pitch.module.allocation.setting.info": "※配置パネルの種類が1種類の場合のみ使用できます。",
   "modal.module.basic.setting.pitch.module.row.amount": "単数",
   "modal.module.basic.setting.pitch.module.row.margin": "上下間隔",
   "modal.module.basic.setting.pitch.module.column.amount": "列数",
   "modal.module.basic.setting.pitch.module.column.margin": "左右間隔",
-  "modal.module.basic.setting.prev": "前に戻る",
+  "modal.module.basic.setting.prev": "移転",
-  "modal.module.basic.setting.row.batch": "レイアウト指定",
   "modal.module.basic.setting.passivity.placement": "手動配置",
-  "modal.module.basic.setting.auto.placement": "自動配置",
+  "modal.module.basic.setting.auto.placement": "設定値に自動配置",
-  "modal.module.basic.setting.auto.row.batch": "自動レイアウト指定",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "回路設定",
   "modal.circuit.trestle.setting": "回路設定",
   "modal.circuit.trestle.setting.alloc.trestle": "架台配置",
@@ -168,7 +142,7 @@
   "modal.circuit.trestle.setting.power.conditional.select.max.connection": "標準枚数",
   "modal.circuit.trestle.setting.power.conditional.select.max.overload": "最大枚数",
   "modal.circuit.trestle.setting.power.conditional.select.output.current": "出力電流",
-  "modal.circuit.trestle.setting.power.conditional.select.check1": "同一勾配・同一方面の面である場合、同じ面として回路分けを行う",
+  "modal.circuit.trestle.setting.power.conditional.select.check1": "同じ傾斜同じ方向の面積ケース同じ面として回路分ける。",
   "modal.circuit.trestle.setting.power.conditional.select.check2": "MAX接続（過積）で回路を分ける。",
   "modal.circuit.trestle.setting.circuit.allocation": "回路割り当て",
   "modal.circuit.trestle.setting.circuit.allocation.auto": "自動回路割り当て",
@@ -179,7 +153,7 @@
   "modal.circuit.trestle.setting.circuit.allocation.passivity.info": "同じ回路のモジュールを選択状態にした後、[番号確定]ボタンを押すと番号が割り当てられます。",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional": "選択したパワーコンディショナー",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num": "設定する回路番号（1～）",
-  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info": "標準回路{0}～{1}直",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info": "標準回路{0}章～{1}章",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset": "選択したパワーコンディショナーの回路番号の初期化",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset.info": "選択したパワーコンディショナーの回路割り当てを初期化します。",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset": "すべての回路番号の初期化",
@@ -188,7 +162,7 @@
   "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.validation.error02": "シリーズを選択してください。",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "番号確定",
   "modal.circuit.trestle.setting.step.up.allocation": "昇圧設定",
-  "modal.circuit.trestle.setting.step.up.allocation.serial.amount": "直列枚数",
+  "modal.circuit.trestle.setting.step.up.allocation.serial.amount": "シリアル枚数",
   "modal.circuit.trestle.setting.step.up.allocation.total.amount": "総回路数",
   "modal.circuit.trestle.setting.step.up.allocation.connected": "接続する",
   "modal.circuit.trestle.setting.step.up.allocation.circuit.amount": "昇圧回路数",
@@ -204,7 +178,7 @@
   "modal.roof.alloc.select.parallel": "筋配置",
   "modal.roof.alloc.select.stairs": "千鳥配置",
   "modal.roof.alloc.apply": "選択した屋根材として割り当て",
-  "plan.menu.estimate.docDownload": "見積書出力",
+  "plan.menu.estimate.docDown": "各種資料ダウンロード",
   "plan.menu.estimate.save": "保存",
   "plan.menu.estimate.reset": "初期化",
   "plan.menu.estimate.copy": "見積書のコピー",
@@ -325,7 +299,7 @@
   "modal.object.setting.offset.width": "幅の出幅",
   "modal.object.setting.offset.slope": "勾配",
   "modal.object.setting.direction.select": "方向の選択",
-  "modal.placement.surface.setting.info": "①の長さを入力後、③の長さを入力すると②の長さを自動計算します。",
+  "modal.placement.surface.setting.info": "ⓘ①の長さ入力後、対角線長を入力すると②の長さを自動計算します。",
   "modal.placement.surface.setting.diagonal.length": "斜めの長さ",
   "modal.color.picker.title": "色設定",
   "modal.color.picker.default.color": "基本色",
@@ -575,7 +549,7 @@
   "color.pink": "ピンク",
   "color.gold": "黄金色",
   "color.darkblue": "藍色",
-  "site.name": "HANASYS DESIGN",
+  "site.name": "HANASYS設計",
   "site.sub_name": "太陽光発電システム図面管理サイト",
   "site.header.link1": "選択してください。",
   "site.header.link2": "オンライン保証システム",
@@ -584,7 +558,7 @@
   "board.faq.title": "FAQ",
   "board.faq.sub.title": "FAQリスト",
   "board.archive.title": "各種資料ダウンロード",
-  "board.archive.sub.title": "掲載資料一覧",
+  "board.archive.sub.title": "見積書一覧",
   "board.list.header.rownum": "番号",
   "board.list.header.title": "タイトル",
   "board.list.header.regDt": "登録日",
@@ -620,7 +594,6 @@
   "myinfo.message.password.error": "パスワードが間違っています。",
   "login": "ログイン",
   "login.auto.page.text": "自動ログイン中です。",
-  "login.fail": "계정이 없거나 비밀번호가 잘못되었습니다.",
   "login.id.save": "ID保存",
   "login.id.placeholder": "IDを入力してください。",
   "login.password.placeholder": "パスワードを入力してください。",
@@ -732,7 +705,7 @@
   "stuff.detail.tooltip.surfaceType": "塩害地域の定義は各メーカーの設置マニュアルをご確認ください",
   "stuff.detail.tempSave.message0": "一時保存されました。 物件番号を取得するには、保存ボタンを押して下さい。,",
   "stuff.detail.tempSave.message1": "一時保存されました。物件番号を取得するには、必須項目をすべて入力してください。",
-  "stuff.detail.tempSave.message2": "担当者名は全角20文字（半角40文字）以下で入力してください.",
+  "stuff.detail.tempSave.message2": "担当者名は10桁以下で入力してください。",
   "stuff.detail.tempSave.message3": "二次販売店を選択してください。",
   "stuff.detail.confirm.message1": "販売店情報を変更すると、設計依頼文書番号が削除されます。変更しますか？",
   "stuff.detail.delete.message1": "仕様が確定したものは削除できません。",
@@ -786,7 +759,7 @@
   "stuff.search.schObjectNo": "物件番号",
   "stuff.search.schSaleStoreName": "販売代理店名",
   "stuff.search.schAddress": "商品アドレス",
-  "stuff.search.schObjectName": "物件名",
+  "stuff.search.schObjectName": "商品名",
   "stuff.search.schDispCompanyName": "見積先",
   "stuff.search.schSelSaleStoreId": "販売代理店選択",
   "stuff.search.schReceiveUser": "担当者",
@@ -868,7 +841,7 @@
   "has.not.sleeve": "袖なし",
   "jerkinhead.width": "半切妻幅",
   "jerkinhead.slope": "半切妻傾斜",
-  "shed.width": "片流れの出幅",
+  "shed.width": "片流幅",
   "windage": "片流れ",
   "windage.width": "片流れの出幅",
   "write": "作成",
@@ -913,7 +886,7 @@
   "estimate.detail.drawingEstimateCreateDate": "登録日",
   "estimate.detail.lastEditDatetime": "変更日時",
   "estimate.detail.saleStoreId": "一次販売店名",
-  "estimate.detail.estimateDate": "見積作成日",
+  "estimate.detail.estimateDate": "見積日",
   "estimate.detail.otherSaleStoreId": "二次販売店名",
   "estimate.detail.noOtherSaleStoreId": "二次店なし",
   "estimate.detail.receiveUser": "担当者",
@@ -922,7 +895,6 @@
   "estimate.detail.estimateType": "注文分類",
   "estimate.detail.estimateType.yjss": "住宅PKG",
   "estimate.detail.estimateType.yjod": "積上げ（YJOD）",
-  "estimate.detail.agency": "2次店名",
   "estimate.detail.roofCns": "屋根材・施工区分",
   "estimate.detail.remarks": "備考",
   "estimate.detail.fileFlg": "後日資料提出",
@@ -944,11 +916,8 @@
   "estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG金額",
   "estimate.detail.header.showPrice": "価格表示",
   "estimate.detail.header.unitPrice": "定価",
-  "estimate.detail.header.singleCable": "片端ケーブル長さ",
-  "estimate.detail.header.doubleCable": "両端ケーブル長さ",
   "estimate.detail.showPrice.pricingBtn": "Pricing",
   "estimate.detail.showPrice.pricingBtn.noItemId": "Pricingが欠落しているアイテムがあります。 Pricingを進めてください。",
-  "estimate.detail.showPrice.pricingBtn.confirm": "価格登録初期化されますがよろしいですか？",
   "estimate.detail.showPrice.description1": "製品価格OPEN",
   "estimate.detail.showPrice.description2": "追加の変更品目",
   "estimate.detail.showPrice.description3": "添付必須",
@@ -988,7 +957,6 @@
   "estimate.detail.estimateCopyPopup.close": "閉じる",
   "estimate.detail.estimateCopyPopup.copyBtn": "見積コピー",
   "estimate.detail.estimateCopyPopup.copy.alertMessage": "見積書がコピーされました。コピーした見積情報に移動します。",
-  "estimate.detail.estimateCopyPopup.copy.alertMessageError": "キャンバスのコピー中にエラーが発生しました.",
   "estimate.detail.productFeaturesPopup.title": "製品特異事項",
   "estimate.detail.productFeaturesPopup.close": "閉じる",
   "estimate.detail.productFeaturesPopup.requiredStoreId": "一次販売店は必須です。",
@@ -1029,7 +997,7 @@
   "simulator.table.sub5": "枚数",
   "simulator.table.sub6": "合計",
   "simulator.table.sub7": "パワーコンディショナー",
-  "simulator.table.sub8": "台",
+  "simulator.table.sub8": "ティーン",
   "simulator.table.sub9": "予測発電量（kWh）",
   "simulator.notice.sub1": "ハンファジャパン年間発電量",
   "simulator.notice.sub2": "シミュレーションガイド",
@@ -1066,20 +1034,5 @@
   "roof.exceed.count": "屋根材は4つまで選択可能です。",
   "outerLine.property.fix": "外壁線の属性設定 を完了しますか？",
   "outerLine.property.close": "外壁線の属性設定 を終了しますか？",
-  "want.to.complete.auxiliary.creation": "補助線の作成を完了しますか?",
+  "want.to.complete.auxiliary.creation": "보補助線の作成を完了しますか?"
-  "module.layout.setup.has.zero.value": "モジュールの列数、段数を入力して下さい。",
-  "modal.placement.initial.setting.plan.drawing.only.number": "(※数字は[半角]入力のみ可能です。)",
-  "wall.line.not.found": "外壁がありません",
-  "roof.line.not.found": "屋根形状がありません",
-  "roof.material.can.not.delete": "割り当てられた配置面があります。",
-  "chidory.can.not.install": "千鳥配置できない工法です。",
-  "module.layout.setup.max.count": "モジュールの単体での最大段数は{0}、最大列数は{1}です。 (JA)",
-  "module.layout.setup.max.count.multiple": "モジュール{0}の単体での最大段数は{1}、最大列数は{2}です。 (JA)",
-  "roofAllocation.not.found": "割り当てる屋根がありません。 (JA)",
-  "modal.module.basic.setting.module.placement.max.size.check": "屋根材別モジュールの単体の単体での最大段数、2種混合の段数を確認して下さい",
-  "modal.module.basic.setting.module.placement.max.row": "単体で\rの最大段数",
-  "modal.module.basic.setting.module.placement.max.rows.multiple": "2種混合時\rの最大段数",
-  "modal.module.basic.setting.module.placement.mix.asg.yn.error": "混合インストール不可能なモジュールです。 (JA)",
-  "modal.module.basic.setting.module.placement.mix.asg.yn": "混合",
-  "modal.module.basic.setting.module.placement.over.max.row": "{0} 最大段数超過しました。最大段数表を参考にしてください。"
 }

src/locales/ko.json

@@ -18,7 +18,6 @@
   "plan.menu.placement.surface.initial.setting": "배치면 초기설정",
   "modal.placement.initial.setting.plan.drawing": "도면 작성방법",
   "modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
-  "modal.placement.initial.setting.plan.drawing.size.info": "※숫자는 [반각] 입력만 가능합니다.",
   "modal.placement.initial.setting.size": "치수 입력방법",
   "modal.placement.initial.setting.size.info": "치수 입력방법 안내",
   "modal.placement.initial.setting.size.roof": "복시도 입력",
@@ -89,20 +88,13 @@
   "plan.menu.module.circuit.setting.default": "모듈/가대설정",
   "modal.module.basic.setting.orientation.setting": "방위 설정",
   "modal.module.basic.setting.orientation.setting.info": "※시뮬레이션 계산용 방위를 지정합니다. 남쪽의 방위를 설정해주세요.",
-  "modal.module.basic.setting.orientation.setting.angle.passivity": "각도 입력",
+  "modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력",
   "modal.module.basic.setting.module.roof.material": "지붕재",
   "modal.module.basic.setting.module.trestle.maker": "가대메이커",
   "modal.module.basic.setting.module.rafter.margin": "서까래 간격",
   "modal.module.basic.setting.module.construction.method": "공법",
   "modal.module.basic.setting.module.under.roof": "지붕밑바탕",
   "modal.module.basic.setting.module.setting": "모듈 선택",
-  "modal.module.basic.setting.module.placement.area": "모듈 배치 영역",
-  "modal.module.basic.setting.module.placement.margin": "모듈 배치 간격",
-  "modal.module.basic.setting.module.placement.area.eaves": "처마쪽",
-  "modal.module.basic.setting.module.placement.area.ridge": "용마루쪽",
-  "modal.module.basic.setting.module.placement.area.keraba": "케라바쪽",
-  "modal.module.basic.setting.module.placement.margin.horizontal": "좌우",
-  "modal.module.basic.setting.module.placement.margin.vertical": "상하",
   "modal.module.basic.setting.module.hajebichi": "망둥어 피치",
   "modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.",
   "modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.",
@@ -117,33 +109,16 @@
   "modal.module.basic.setting.module.eaves.bar.fitting": "처마커버설치",
   "modal.module.basic.setting.module.blind.metal.fitting": "적설방지금구설치",
   "modal.module.basic.setting.module.select": "모듈/가대 선택",
-  "modal.module.basic.settting.module.error1": "가대메이커를 선택해주세요.\n(지붕재: {0})",
-  "modal.module.basic.settting.module.error2": "공법를 선택해주세요.\n(지붕재: {0})",
-  "modal.module.basic.settting.module.error3": "지붕밑바탕을 선택해주세요.\n(지붕재: {0})",
-  "modal.module.basic.settting.module.error4": "설치 조건이 없으므로 설치 조건을 변경하십시오.\n(지붕재: {0})",
-  "modal.module.basic.settting.module.error5": "L 을 입력해주세요.\n(지붕재: {0})",
-  "modal.module.basic.settting.module.error6": "서까래 간격을 입력해주세요.\n(지붕재: {0})",
-  "modal.module.basic.settting.module.error7": "하제비치를 입력해주세요.\n(지붕재: {0})",
-  "modal.module.basic.settting.module.error8": "모듈 배치 영역 값을 입력해주세요.\n(지붕재: {0})",
-  "modal.module.basic.settting.module.error9": "처마쪽 값은 {0}mm 이상이어야 합니다.\n(지붕재: {1})",
-  "modal.module.basic.settting.module.error10": "용마루쪽 값은 {0}mm 이상이어야 합니다.\n(지붕재: {1})",
-  "modal.module.basic.settting.module.error11": "케라바쪽 값은 {0}mm 이상이어야 합니다.\n(지붕재: {1})",
-  "modal.module.basic.settting.module.error12": "시공법을 선택해주세요.\n(지붕재: {0})",
   "modal.module.basic.setting.module.placement": "모듈 배치",
   "modal.module.basic.setting.module.placement.select.fitting.type": "설치형태를 선택합니다.",
   "modal.module.basic.setting.module.placement.waterfowl.arrangement": "물떼새 배치",
-  "modal.module.basic.setting.module.placement.max.row.amount": "Max 단수",
-  "modal.module.basic.setting.module.placement.mix.max.row.amount": "혼합Max 단수",
-  "modal.module.basic.setting.module.placement.row.amount": "단수",
-  "modal.module.basic.setting.module.placement.column.amount": "열수",
   "modal.module.basic.setting.module.placement.do": "한다",
   "modal.module.basic.setting.module.placement.do.not": "하지 않는다",
   "modal.module.basic.setting.module.placement.arrangement.standard": "배치 기준",
   "modal.module.basic.setting.module.placement.arrangement.standard.center": "중앙",
-  "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "처마쪽",
+  "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "처마",
-  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "용마루쪽",
+  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "용마루",
   "modal.module.basic.setting.module.placement.maximum": "최대배치",
-  "modal.module.basic.setting.module.placement.margin.check1": "가대메이커를 선택해주세요.",
   "modal.module.basic.setting.pitch.module.placement.standard.setting": "배치기준 설정",
   "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "남향설치",
   "modal.module.basic.setting.pitch.module.placement.standard.setting.select": "지정한 변을 기준으로 설치",
@@ -154,10 +129,8 @@
   "modal.module.basic.setting.pitch.module.column.amount": "열수",
   "modal.module.basic.setting.pitch.module.column.margin": "좌우간격",
   "modal.module.basic.setting.prev": "이전",
-  "modal.module.basic.setting.row.batch": "단·열수 지정 배치",
   "modal.module.basic.setting.passivity.placement": "수동 배치",
-  "modal.module.basic.setting.auto.placement": "자동 배치",
+  "modal.module.basic.setting.auto.placement": "설정값으로 자동 배치",
-  "modal.module.basic.setting.auto.row.batch": "자동 단·열수 지정 배치 ",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로설정",
   "modal.circuit.trestle.setting": "회로설정",
   "modal.circuit.trestle.setting.alloc.trestle": "가대할당",
@@ -169,7 +142,7 @@
   "modal.circuit.trestle.setting.power.conditional.select.max.connection": "표준매수",
   "modal.circuit.trestle.setting.power.conditional.select.max.overload": "최대매수",
   "modal.circuit.trestle.setting.power.conditional.select.output.current": "출력전류",
-  "modal.circuit.trestle.setting.power.conditional.select.check1": "동일 구배·동일 방면의 면인 경우, 같은 면으로서 회로를 나눈다",
+  "modal.circuit.trestle.setting.power.conditional.select.check1": "동일경사 동일방면의 면적인 경우 같은 면으로서 회로를 나눈다.",
   "modal.circuit.trestle.setting.power.conditional.select.check2": "MAX 접속(과적)으로 회로를 나눈다.",
   "modal.circuit.trestle.setting.circuit.allocation": "회로 할당",
   "modal.circuit.trestle.setting.circuit.allocation.auto": "자동회로 할당",
@@ -180,7 +153,7 @@
   "modal.circuit.trestle.setting.circuit.allocation.passivity.info": "동일한 회로의 모듈을 선택 상태로 만든 후 [번호 확정] 버튼을 누르면 번호가 할당됩니다.",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional": "선택된 파워컨디셔너",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num": "설정할 회로번호(1~)",
-  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info": "표준회로{0}～{1}직",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info": "표준회로{0}장～{1}장",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset": "선택된 파워컨디셔너의 회로번호 초기화",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset.info": "선택된 파워 컨디셔너의 회로할당을 초기화합니다.",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset": "모든 회로번호 초기화",
@@ -205,7 +178,7 @@
   "modal.roof.alloc.select.parallel": "병렬식",
   "modal.roof.alloc.select.stairs": "계단식",
   "modal.roof.alloc.apply": "선택한 지붕재로 할당",
-  "plan.menu.estimate.docDownload": "문서 다운로드",
+  "plan.menu.estimate.docDown": "문서 다운로드",
   "plan.menu.estimate.save": "저장",
   "plan.menu.estimate.reset": "초기화",
   "plan.menu.estimate.copy": "견적서 복사",
@@ -621,7 +594,6 @@
   "myinfo.message.password.error": "비밀번호가 틀렸습니다.",
   "login": "로그인",
   "login.auto.page.text": "자동로그인 중 입니다.",
-  "login.fail": "계정이 없거나 비밀번호가 잘못되었습니다.",
   "login.id.save": "ID Save",
   "login.id.placeholder": "아이디를 입력해주세요.",
   "login.password.placeholder": "비밀번호를 입력해주세요.",
@@ -733,7 +705,7 @@
   "stuff.detail.tooltip.surfaceType": "염해지역 정의는 각 메이커의 설치 매뉴얼을 확인해주십시오",
   "stuff.detail.tempSave.message0": "임시저장 되었습니다. 물건번호를 획득하려면 저장버튼을 눌러주십시오.",
   "stuff.detail.tempSave.message1": "임시저장 되었습니다. 물건번호를 획득하려면 필수 항목을 모두 입력해 주십시오.",
-  "stuff.detail.tempSave.message2": "담당자이름은 전각20자(반각40자) 이하로 입력해 주십시오.",
+  "stuff.detail.tempSave.message2": "담당자이름은 10자리 이하로 입력해 주십시오.",
   "stuff.detail.tempSave.message3": "2차 판매점을 선택해주세요.",
   "stuff.detail.confirm.message1": "판매점 정보를 변경하면 설계의뢰 문서번호가 삭제됩니다. 변경하시겠습니까?",
   "stuff.detail.delete.message1": "사양이 확정된 물건은 삭제할 수 없습니다.",
@@ -914,7 +886,7 @@
   "estimate.detail.drawingEstimateCreateDate": "등록일",
   "estimate.detail.lastEditDatetime": "변경일시",
   "estimate.detail.saleStoreId": "1차 판매점명",
-  "estimate.detail.estimateDate": "견적작성일",
+  "estimate.detail.estimateDate": "견적일",
   "estimate.detail.otherSaleStoreId": "2차 판매점명",
   "estimate.detail.noOtherSaleStoreId": "2차점 없음",
   "estimate.detail.receiveUser": "담당자",
@@ -923,7 +895,6 @@
   "estimate.detail.estimateType": "주문분류",
   "estimate.detail.estimateType.yjss": "住宅PKG",
   "estimate.detail.estimateType.yjod": "積上げ( YJOD )",
-  "estimate.detail.agency": "2차점명",
   "estimate.detail.roofCns": "지붕재・사양시공",
   "estimate.detail.remarks": "비고",
   "estimate.detail.fileFlg": "후일자료제출",
@@ -945,11 +916,8 @@
   "estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG 금액",
   "estimate.detail.header.showPrice": "가격표시",
   "estimate.detail.header.unitPrice": "정가",
-  "estimate.detail.header.singleCable": "편당케이블 길이",
-  "estimate.detail.header.doubleCable": "양단케이블 길이",
   "estimate.detail.showPrice.pricingBtn": "Pricing",
   "estimate.detail.showPrice.pricingBtn.noItemId": "Pricing이 누락된 아이템이 있습니다. 제품 선택 후 Pricing을 진행해주세요.",
-  "estimate.detail.showPrice.pricingBtn.confirm": "가격등록을 초기화 하시겠습니까？",
   "estimate.detail.showPrice.description1": "제품 가격 OPEN",
   "estimate.detail.showPrice.description2": "추가 변경 자재",
   "estimate.detail.showPrice.description3": "첨부필수",
@@ -989,7 +957,6 @@
   "estimate.detail.estimateCopyPopup.close": "닫기",
   "estimate.detail.estimateCopyPopup.copyBtn": "견적복사",
   "estimate.detail.estimateCopyPopup.copy.alertMessage": "견적서가 복사되었습니다. 복사된 물건정보로 이동합니다.",
-  "estimate.detail.estimateCopyPopup.copy.alertMessageError": "캔버스 복사 중 오류 발생.",
   "estimate.detail.productFeaturesPopup.title": "제품특이사항",
   "estimate.detail.productFeaturesPopup.close": "닫기",
   "estimate.detail.productFeaturesPopup.requiredStoreId": "1차 판매점은 필수값 입니다.",
@@ -1052,7 +1019,6 @@
   "module.not.found": "모듈을 선택하세요.",
   "module.circuit.minimun.error": "회로번호는 1 이상입력해주세요.",
   "module.already.exist.error": "회로번호가 같은 다른 파워 컨디셔너 모듈이 있습니다. 다른 회로번호를 설정하십시오.",
-  "module.circuit.fix.not.same.roof.error": "다른 지붕면의 모듈이 선택되어 있습니다. 모듈 선택을 다시 하세요.",
   "construction.length.difference": "지붕면 공법을 모두 선택하십시오.",
   "menu.validation.canvas.roof": "패널을 배치하려면 지붕면을 입력해야 합니다.",
   "batch.object.outside.roof": "오브젝트는 지붕내에 설치해야 합니다.",
@@ -1068,20 +1034,5 @@
   "roof.exceed.count": "지붕재는 4개까지 선택 가능합니다.",
   "outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?",
   "outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?",
-  "want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?",
+  "want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?"
-  "module.layout.setup.has.zero.value": "모듈의 열수, 단수를 입력해 주세요.",
-  "modal.placement.initial.setting.plan.drawing.only.number": "(※ 숫자는 [반각]입력만 가능합니다.)",
-  "wall.line.not.found": "외벽선이 없습니다.",
-  "roof.line.not.found": "지붕형상이 없습니다.",
-  "roof.material.can.not.delete": "할당된 배치면이 있습니다.",
-  "chidory.can.not.install": "치조 불가 공법입니다.",
-  "module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다.",
-  "module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다.",
-  "roofAllocation.not.found": "할당할 지붕이 없습니다.",
-  "modal.module.basic.setting.module.placement.max.size.check": "지붕재별 모듈 단체의 최대 단수, 2종 혼합 단수를 확인하십시오.",
-  "modal.module.basic.setting.module.placement.max.row": "최대 단수",
-  "modal.module.basic.setting.module.placement.max.rows.multiple": "2종 혼합 최대단수",
-  "modal.module.basic.setting.module.placement.mix.asg.yn.error": "혼합 설치 불가능한 모듈입니다.",
-  "modal.module.basic.setting.module.placement.mix.asg.yn": "혼합",
-  "modal.module.basic.setting.module.placement.over.max.row": "{0}의 최대단수를 초과했습니다. 최대단수표를 참고해 주세요."
 }

src/store/auxiliaryLineAtom.js

@@ -1,71 +0,0 @@
-import { atom } from 'recoil'
-
-// 보조선 타입
-export const AUXILIARY_LINE_TYPE = {
-  OUTER_LINE: 'outerLine', // 외벽선
-  RIGHT_ANGLE: 'rightAngle', // 직각
-  DOUBLE_PITCH: 'doublePitch',
-  ANGLE: 'angle', // 각도
-  DIAGONAL_LINE: 'diagonalLine', // 대각선
-}
-
-/**
- * 보조선 작성에서 사용하는 recoilState
- */
-
-export const auxiliaryLineLength1State = atom({
-  //길이1
-  key: 'auxiliaryLineLength1State',
-  default: 0,
-})
-
-export const auxiliaryLineLength2State = atom({
-  // 길이2
-  key: 'auxiliaryLineLength2State',
-  default: 0,
-})
-
-export const auxiliaryLineArrow1State = atom({
-  // 방향1
-  key: 'auxiliaryLineArrow1State',
-  default: '',
-})
-
-export const auxiliaryLineArrow2State = atom({
-  // 방향2
-  key: 'auxiliaryLineArrow2State',
-  default: '',
-})
-
-export const auxiliaryLineAngle1State = atom({
-  // 각도1
-  key: 'auxiliaryLineAngle1State',
-  default: 0,
-})
-
-export const auxiliaryLineAngle2State = atom({
-  // 각도2
-  key: 'auxiliaryLineAngle2State',
-  default: 0,
-})
-
-export const auxiliaryLineDiagonalState = atom({
-  // 대각선
-  key: 'auxiliaryLineDiagonalState',
-  default: 0,
-})
-
-export const auxiliaryLineTypeState = atom({
-  key: 'auxiliaryLineTypeState',
-  default: AUXILIARY_LINE_TYPE.OUTER_LINE,
-})
-
-export const auxiliaryLinePointsState = atom({
-  key: 'auxiliaryLinePointsState',
-  default: [],
-})
-
-export const auxiliaryLineFixState = atom({
-  key: 'auxiliaryLineFixState',
-  default: false,
-})

src/store/canvasAtom.js

@@ -384,27 +384,3 @@ export const isManualModuleSetupState = atom({
   key: 'isManualModuleSetupState',
   default: false,
 })
-
-export const isManualModuleLayoutSetupState = atom({
-  key: 'isManualModuleLayoutSetupState',
-  default: false,
-})
-
-export const moduleSetupOptionState = atom({
-  key: 'moduleSetupOptionState',
-  default: {
-    isChidori: false, //치조 안함
-    setupLocation: 'eaves', //처마
-  },
-})
-
-export const toggleManualSetupModeState = atom({
-  key: 'toggleManualSetupModeState',
-  default: '',
-})
-
-export const moduleRowColArrayState = atom({
-  key: 'moduleRowColArrayState',
-  default: [],
-  dangerouslyAllowMutability: true,
-})

src/store/hotkeyAtom.js

@@ -1,6 +0,0 @@
-import { atom } from 'recoil'
-
-export const hotkeyStore = atom({
-  key: 'hotkeyState',
-  default: [],
-})

src/store/roofAtom.js

@@ -1,7 +0,0 @@
-import { atom } from 'recoil'
-
-export const roofsState = atom({
-  key: 'roofs',
-  default: null,
-  dangerouslyAllowMutability: true,
-})

src/store/selectedModuleOptions.js

@@ -2,7 +2,7 @@ import { atom } from 'recoil'
 
 export const selectedModuleState = atom({
   key: 'selectedModuleState',
-  default: null,
+  default: [],
   dangerouslyAllowMutability: true,
 })
 

src/store/settingAtom.js

@@ -221,22 +221,6 @@ export const corridorDimensionSelector = selector({
     const settingModalFirstOptions = get(settingModalFirstOptionsState)
     return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
   },
-  set: ({ set }, newValue) => {
-    //0 : 복도치수 , 1 : 실제치수
-
-    set(settingModalFirstOptionsState, (prev) => {
-      return {
-        ...prev,
-        dimensionDisplay: prev.dimensionDisplay.map((item, index) => {
-          if (index === newValue) {
-            return { ...item, selected: true }
-          } else {
-            return { ...item, selected: false }
-          }
-        }),
-      }
-    })
-  },
   dangerouslyAllowMutability: true,
 })
 

src/styles/_contents.scss

@@ -340,14 +340,6 @@
         &.active{
             top: calc(92.8px + 50px);
         }
-        .canvas-id{
-            display: flex;
-            align-items: center;
-            padding: 9.6px 20px;
-            font-size: 12px;
-            color: #fff;
-            background-color: #1083E3;
-        }
         .canvas-plane-wrap{
             display: flex;
             align-items: center;
@@ -806,6 +798,8 @@
     color: #45576F;
     margin-left: 5px;
 }
+.drag-file-box{
+    padding: 10px;
     .btn-area{
         padding-bottom: 15px;
         border-bottom: 1px solid #ECF0F4;
@@ -826,8 +820,6 @@
             }
         }
     }
-.drag-file-box{
-    padding: 10px;
     .drag-file-area{
         position: relative;
         margin-top: 15px;

src/styles/_grid-detail.scss

@@ -24,10 +24,6 @@
         .ag-header-cell{
             font-size: 13px;
             color: #fff;
-            border-right: 1px solid #738596;
-            &:last-child{
-                border: none;
-            }
         }
         .ag-header-cell-label{
             justify-content: center;