Merge branch 'feature/yj-layoutSetup' of https://git.hanasys.jp/qcast3/qcast-front into feature/module-grouping

# Conflicts:
#	src/locales/ja.json

README.md

@@ -34,3 +34,5 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+deploy test

ecosystem.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  apps: [
+    {
+      name: 'qcast-front-production',
+      script: 'npm run start:dev',
+      instance: 2,
+      exec_mode: 'cluster',
+    },
+  ],
+}

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start -p 5000",
+    "start:cluster1": "next start -p 5000",
+    "start:cluster2": "next start -p 5001",
     "start:dev": "next start -p 5010",
     "lint": "next lint",
     "serve": "node server.js"
@@ -23,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "mathjs": "^13.0.2",
     "mssql": "^11.0.1",
-    "next": "14.2.21",
+    "next": "14.2.26",
     "next-international": "^1.2.4",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",

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

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

src/common/common.js

@@ -203,6 +203,7 @@ 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,26 +2,111 @@
 
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
+import { setSession, login } from '@/lib/authActions'
+import { sessionStore } from '@/store/commonAtom'
+import { useRecoilState } from 'recoil'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useRouter } from 'next/navigation'
+
 import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
 
-export default function AutoLoginPage() {
-  const [isLoading, setIsLoading] = useState(true)
+export default function AutoLoginPage({ autoLoginParam }) {
+  const router = useRouter()
+
+  const [isLoading, setIsLoading] = useState(autoLoginParam === 'Y' ? false : true)
+  const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore)
+
+  const { promisePost } = useAxios(globalLocaleState)
   const { getMessage } = useMessage()
 
+  const [userId, setUserId] = useState('')
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+
+  const [idFocus, setIdFocus] = useState(false)
+
+  const loginProcess = async () => {
+    setIsLoading(true)
+    await promisePost({ url: '/api/login/v1.0/user', data: { loginId: userId } }).then((response) => {
+      setIsLoading(false)
+      if (response.data) {
+        const res = response.data
+        const result = { ...res, storeLvl: res.groupId === '60000' ? '1' : '2', pwdInitYn: 'Y' }
+        setSession(result)
+        setSessionState(result)
+        login()
+      } else {
+        alert(getMessage('login.fail'))
+        router.push('/login?autoLoginParam1=Y')
+      }
+    })
+  }
+
   return (
     <>
       {isLoading && <GlobalSpinner />}
-      <div className="login-input-frame">
-        <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" style={{ fontWeight: 'bolder' }}>
-            {getMessage('login.auto.page.text')}
+      {autoLoginParam !== 'Y' ? (
+        <>
+          <div className="login-input-frame">
+            <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" style={{ fontWeight: 'bolder' }}>
+                {getMessage('login.auto.page.text')}
+              </div>
+            </div>
           </div>
-        </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,7 +25,9 @@ export default function Login() {
 
   useEffect(() => {
     if (autoLoginParam) {
-      autoLoginProcess(autoLoginParam)
+      if (autoLoginParam !== 'Y') {
+        autoLoginProcess(autoLoginParam)
+      }
     }
 
     // console.log('🚀 ~ checkSession ~ checkSession():', checkSession())
@@ -334,7 +336,7 @@ export default function Login() {
               </div>
             </>
           )}
-          {autoLoginParam && <AutoLogin />}
+          {autoLoginParam && <AutoLogin autoLoginParam={autoLoginParam} />}
         </div>
         <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
       </div>

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

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

src/components/common/select/QSelectBox.jsx

@@ -39,7 +39,7 @@ export default function QSelectBox({
     if (showKey !== '' && !value) {
       //value가 없으면 showKey가 있으면 우선 보여준다
       // return options[0][showKey]
-      return title
+      return title !== '' ? title : getMessage('selectbox.title')
     } else if (showKey !== '' && value) {
       //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
 
@@ -87,7 +87,7 @@ export default function QSelectBox({
       <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 from 'react-select'
+import Select, {components} from 'react-select'
 import { convertNumberToPriceDecimal, convertNumberToPriceDecimalToFixed } from '@/util/common-utils'
 import ProductFeaturesPop from './popup/ProductFeaturesPop'
 import { v4 as uuidv4 } from 'uuid'
@@ -175,7 +175,10 @@ export default function Estimate({}) {
               row.check = false
               estimateOption.map((row2) => {
                 if (row.pkgYn === '0') {
-                  if (row2 === row.code) {
+                  // if (row2 === row.code) {
+                  //   row.check = true
+                  // }
+                  if (row.code.split('、').includes(row2)) {
                     row.check = true
                   }
                 } else {
@@ -217,7 +220,10 @@ export default function Estimate({}) {
               row.check = false
               estimateOption.map((row2) => {
                 if (row.pkgYn === '0') {
-                  if (row2 === row.code) {
+                  // if (row2 === row.code) {
+                  //   row.check = true
+                  // }
+                  if (row.code.split('、').includes(row2)) {
                     row.check = true
                   }
                 } else {
@@ -240,7 +246,6 @@ export default function Estimate({}) {
                 }
               }
             })
-
             setSpecialNoteList(res)
 
             setSpecialNoteFirstFlg(true)
@@ -377,8 +382,8 @@ export default function Estimate({}) {
   useEffect(() => {
     if (estimateContextState.estimateType !== '') {
       const param = {
-        saleStoreId: session.storeId,
-        sapSalesStoreCd: session.custCd,
+        saleStoreId: estimateContextState.sapSaleStoreId,
+        sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
         docTpCd: estimateContextState?.estimateType,
       }
 
@@ -387,6 +392,8 @@ export default function Estimate({}) {
         if (isNotEmptyArray(res?.data)) {
           setStorePriceList(res.data)
         }
+
+        setItemChangeYn(true)
       })
 
       if (estimateContextState.estimateType === 'YJSS') {
@@ -416,8 +423,6 @@ export default function Estimate({}) {
           handlePricing('UNIT_PRICE')
         }
       }
-
-      setItemChangeYn(true)
     }
   }, [estimateContextState?.estimateType])
 
@@ -469,6 +474,21 @@ export default function Estimate({}) {
         } else {
           item.check = false
         }
+      } else {
+        let codes = item.code.split('、')
+        let flg = '0'
+        if (codes.length > 1) {
+          for (let i = 0; i < pushData.length; i++) {
+            if (codes.indexOf(pushData[i]) > -1) {
+              flg = '1'
+            }
+          }
+          if (flg === '1') {
+            item.check = true
+          } else {
+            item.check = false
+          }
+        }
       }
     })
 
@@ -481,8 +501,8 @@ export default function Estimate({}) {
   //Pricing 버튼
   const handlePricing = async (showPriceCd) => {
     const param = {
-      saleStoreId: session.storeId,
-      sapSalesStoreCd: session.custCd,
+      saleStoreId: estimateContextState.sapSaleStoreId,
+      sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
       docTpCd: estimateContextState.estimateType,
       priceCd: showPriceCd,
       itemIdList: estimateContextState.itemList.filter((item) => item.delFlg === '0' && item.paDispOrder === null),
@@ -506,7 +526,6 @@ export default function Estimate({}) {
         })
       }
     }
-
     setIsGlobalLoading(true)
     await promisePost({ url: '/api/estimate/price/item-price-list', data: param }).then((res) => {
       let updateList = []
@@ -1342,7 +1361,12 @@ export default function Estimate({}) {
                     </th>
                     <td colSpan={3}>
                       <div className="radio-wrap">
-                        <div className="d-check-radio light mr10">
+                        {/*pkgRank is null, empty 인 경우 : 사용불가, 이전에 등록된 경우 사용가능, style로 제어*/}
+                        <div className="d-check-radio light mr10"    style={{display:
+                            (isNotEmptyArray(storePriceList) > 0
+                              && storePriceList[0].pkgRank !== null
+                              && storePriceList[0].pkgRank !== ''
+                              || estimateContextState?.estimateType === 'YJSS') ? "" : "none"}}>
                           <input
                             type="radio"
                             name="estimateType"
@@ -1859,8 +1883,17 @@ export default function Estimate({}) {
                                         }
                                       }}
                                       menuPlacement={'auto'}
-                                      getOptionLabel={(x) => x.itemName}
+                                      getOptionLabel={(x) => x.itemName + " (" + x.itemNo + ")"}
                                       getOptionValue={(x) => x.itemNo}
+                                      components={{
+                                        SingleValue:({children, ...props}) =>{
+                                          return (
+                                            <components.SingleValue{...props}>
+                                              {props.data.itemName}
+                                            </components.SingleValue>
+                                          )
+                                        }
+                                      }}
                                       isClearable={false}
                                       isDisabled={!!item?.paDispOrder}
                                       value={displayItemList.filter(function (option) {
@@ -1880,8 +1913,17 @@ export default function Estimate({}) {
                                       placeholder="Select"
                                       options={cableItemList}
                                       menuPlacement={'auto'}
-                                      getOptionLabel={(x) => x.clRefChr3}
+                                      getOptionLabel={(x) => x.clRefChr3 + " (" + x.clRefChr1 + ")"}
                                       getOptionValue={(x) => x.clRefChr1}
+                                      components={{
+                                        SingleValue:({children, ...props}) =>{
+                                          return (
+                                            <components.SingleValue{...props}>
+                                              {props.data.clRefChr3}
+                                            </components.SingleValue>
+                                          )
+                                        }
+                                      }}
                                       isClearable={false}
                                       isDisabled={true}
                                       value={cableItemList.filter(function (option) {

src/components/fabric/QPolygon.js

@@ -45,8 +45,11 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     options.sort = options.sort ?? true
     options.parentId = options.parentId ?? null
 
+    this.isSortedPoints = false
+
     if (!options.sort && points.length <= 8) {
       points = sortedPointLessEightPoint(points)
+      this.isSortedPoints = true
     } else {
       let isDiagonal = false
       points.forEach((point, i) => {
@@ -62,6 +65,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
       if (!isDiagonal) {
         points = sortedPoints(points)
+        this.isSortedPoints = true
       }
     }
 
@@ -119,10 +123,12 @@ 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()
     })
 
@@ -183,8 +189,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.lines = []
 
-    this.points.forEach((point, i) => {
-      const nextPoint = this.points[(i + 1) % this.points.length]
+    this.getCurrentPoints().forEach((point, i) => {
+      const nextPoint = this.getCurrentPoints()[(i + 1) % this.points.length]
       const line = new QLine([point.x, point.y, nextPoint.x, nextPoint.y], {
         stroke: this.stroke,
         strokeWidth: this.strokeWidth,

src/components/floor-plan/CanvasFrame.jsx

@@ -30,11 +30,14 @@ 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()
@@ -92,6 +95,8 @@ export default function CanvasFrame() {
 
   useEffect(() => {
     setIsGlobalLoading(false)
+    // 혹시 모를 팝업이 떠있는 경우 닫고 시작한다.
+    closeAll()
 
     return () => {
       canvas?.clear()
@@ -110,6 +115,38 @@ export default function CanvasFrame() {
     resetPcsCheckState()
   }
 
+  /**
+   * 캔버스가 있을 경우 핫키 이벤트 처리
+   * hotkeyStore에 핫키 이벤트 리스너 추가
+   * 
+   * const hotkeys = [
+      { key: 'c', fn: () => asdf() },
+      { key: 'v', fn: () => qwer() },
+    ]
+    setHotkeyStore(hotkeys)
+   */
+  const hotkeyState = useRecoilValue(hotkeyStore)
+  const hotkeyHandlerRef = useRef(null)
+
+  useEffect(() => {
+    hotkeyHandlerRef.current = (e) => {
+      hotkeyState.forEach((hotkey) => {
+        if (e.key === hotkey.key) {
+          hotkey.fn()
+        }
+      })
+    }
+
+    document.addEventListener('keyup', hotkeyHandlerRef.current)
+
+    return () => {
+      if (hotkeyHandlerRef.current) {
+        document.removeEventListener('keyup', hotkeyHandlerRef.current)
+      }
+    }
+  }, [hotkeyState])
+  /** 핫키 이벤트 처리 끝 */
+
   return (
     <div className="canvas-frame">
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>

src/components/floor-plan/CanvasLayout.jsx

@@ -31,6 +31,7 @@ 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

src/components/floor-plan/CanvasMenu.jsx

@@ -634,7 +634,7 @@ export default function CanvasMenu(props) {
                   onClick={() => setEstimatePopupOpen(true)}
                 >
                   <span className="ico ico01"></span>
-                  <span className="name">{getMessage('plan.menu.estimate.docDown')}</span>
+                  <span className="name">{getMessage('plan.menu.estimate.docDownload')}</span>
                 </button>
                 <button type="button" style={{ display: saveButtonStyle }} className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
                   <span className="ico ico02"></span>

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

@@ -1,12 +1,17 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useContext, useEffect, useRef, useState } from 'react'
-import Module from '@/components/floor-plan/modal/basic/step/Module'
-import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
 import 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 {
+  canvasSettingState,
+  canvasState,
+  checkedModuleState,
+  isManualModuleLayoutSetupState,
+  isManualModuleSetupState,
+  toggleManualSetupModeState,
+} from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
@@ -20,31 +25,133 @@ import { useMasterController } from '@/hooks/common/useMasterController'
 import { loginUserStore } from '@/store/commonAtom'
 import { currentCanvasPlanState } from '@/store/canvasAtom'
 import { POLYGON_TYPE } from '@/common/common'
+import { useModuleSelection } from '@/hooks/module/useModuleSelection'
+import { useOrientation } from '@/hooks/module/useOrientation'
+import Trestle from './step/Trestle'
+import { roofsState } from '@/store/roofAtom'
 
 export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [tabNum, setTabNum] = useState(1)
-  const canvasSetting = useRecoilValue(canvasSettingState)
   const orientationRef = useRef(null)
-  const { initEvent } = useEvent()
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
-  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-  const addedRoofs = useRecoilValue(addedRoofsState)
+  const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
+  const trestleRef = useRef(null)
+  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
+  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
   const loginUserState = useRecoilValue(loginUserStore)
   const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   const canvas = useRecoilValue(canvasState)
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
   const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState)
+  const [roofs, setRoofs] = useState(addedRoofs)
+  const [manualSetupMode, setManualSetupMode] = useRecoilState(toggleManualSetupModeState)
+  const [layoutSetup, setLayoutSetup] = useState([{}])
+
+  const {
+    moduleSelectionInitParams,
+    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 = useRecoilValue(roofsState)
 
   // const { initEvent } = useContext(EventContext)
-  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting(tabNum)
+  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup } =
+    useModuleBasicSetting(tabNum)
   const { updateObjectDate } = useMasterController()
 
+  useEffect(() => {
+    if (managementState) console.log('managementState', managementState)
+  }, [managementState])
+
+  useEffect(() => {
+    if (roofsStore && addedRoofs) {
+      console.log('🚀 ~ useEffect ~ roofsStore, addedRoofs:', roofsStore, addedRoofs)
+      setRoofs(
+        addedRoofs.map((roof, index) => {
+          return {
+            ...roof,
+            ...roofsStore[index]?.addRoof,
+          }
+        }),
+      )
+
+      setModuleSelectionData({
+        ...moduleSelectionData,
+        roofConstructions: roofsStore.map((roof) => {
+          return {
+            addRoof: {
+              ...roof.addRoof,
+            },
+            construction: {
+              ...roof.construction,
+            },
+            trestle: {
+              ...roof.trestle,
+            },
+          }
+        }),
+      })
+    }
+  }, [roofsStore, addedRoofs])
+
+  useEffect(() => {
+    let hasModules = canvas
+      .getObjects()
+      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+      .some((obj) => obj.modules?.length > 0)
+
+    if (hasModules) {
+      orientationRef.current.handleNextStep()
+      setTabNum(3)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (basicSetting.roofSizeSet !== '3') {
+      manualModuleSetup()
+    } else {
+      manualFlatroofModuleSetup(placementFlatRef)
+    }
+    if (isClosePopup.close) {
+      closePopup(isClosePopup.id)
+    }
+  }, [isManualModuleSetup, isClosePopup])
+
+  useEffect(() => {
+    setIsManualModuleSetup(false)
+  }, [checkedModules])
+
   const handleBtnNextStep = () => {
     if (tabNum === 1) {
+      console.log('moduleSelectionData', moduleSelectionData)
       orientationRef.current.handleNextStep()
+      setAddedRoofs(roofs)
+      return
     } else if (tabNum === 2) {
       if (basicSetting.roofSizeSet !== '3') {
         if (!isObjectNotEmpty(moduleSelectionData.module)) {
@@ -55,7 +162,15 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
           return
         }
 
-        if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
+        // if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
+        //   Swal.fire({
+        //     title: getMessage('construction.length.difference'),
+        //     icon: 'warning',
+        //   })
+        //   return
+        // }
+
+        if (!trestleRef.current.isComplete()) {
           Swal.fire({
             title: getMessage('construction.length.difference'),
             icon: 'warning',
@@ -63,14 +178,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
           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({
@@ -85,84 +192,149 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     setTabNum(tabNum + 1)
   }
 
-  const placementRef = {
-    isChidori: useRef('false'),
-    setupLocation: useRef('eaves'),
-    isMaxSetup: useRef('false'),
-  }
-
   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)
   }
 
-  useEffect(() => {
-    let hasModules = canvas
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-      .some((obj) => obj.modules?.length > 0)
-
-    if (hasModules) {
-      orientationRef.current.handleNextStep()
-      setTabNum(3)
-    }
-  }, [])
-
   //팝업 닫기 버튼 이벤트
   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,
+    moduleSelectionInitParams,
+    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,
+    setTabNum,
+    moduleSelectionData,
+    setModuleSelectionData,
+    trestleTrigger,
+  }
+  const placementProps = {}
+
   useEffect(() => {
     if (basicSetting.roofSizeSet !== '3') {
-      manualModuleSetup(placementRef)
+      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)
     }
-  }, [isManualModuleSetup, isClosePopup])
+  }, [manualSetupMode, isClosePopup])
+
+  useEffect(() => {
+    if (isManualModuleLayoutSetup) {
+      manualModuleLayoutSetup(layoutSetup)
+    }
+  }, [layoutSetup])
 
   useEffect(() => {
     setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode(`off`)
   }, [checkedModules])
 
   return (
-    <WithDraggable isShow={true} pos={pos} className="lx-2">
+    <WithDraggable isShow={true} pos={pos} className={basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' ? 'll' : '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>
-          <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 !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
+              <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
+              <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+            </>
+          )}
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
+            <>
+              <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+            </>
+          )}
         </div>
-        {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
+        {tabNum === 1 && <Orientation ref={orientationRef} {...orientationProps} />}
         {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
-
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Trestle ref={trestleRef} {...trestleProps} />}
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
+          <Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
+        )}
         {/*배치면 초기설정 - 입력방법: 육지붕*/}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
+        {/* {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && <PitchModule setTabNum={setTabNum} />} */}
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
           <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
         )}
 
         <div className="grid-btn-wrap">
+          {/* {tabNum === 1 && <button className="btn-frame modal mr5">{getMessage('modal.common.save')}</button>} */}
+
           {tabNum !== 1 && (
             <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
               {getMessage('modal.module.basic.setting.prev')}
@@ -179,16 +351,20 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
             <>
               {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
                 <>
+                  <button className={`btn-frame modal mr5 ${isManualModuleLayoutSetup ? 'act' : ''}`} onClick={handleManualModuleLayoutSetup}>
+                    {getMessage('modal.module.basic.setting.row.batch')}
+                  </button>
                   <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
                     {getMessage('modal.module.basic.setting.passivity.placement')}
                   </button>
-                  <button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
+                  <button className="btn-frame modal act" onClick={() => autoModuleSetup()}>
                     {getMessage('modal.module.basic.setting.auto.placement')}
                   </button>
                 </>
               )}
               {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
                 <>
+                  <button className="btn-frame modal mr5">{getMessage('modal.module.basic.setting.row.batch')}</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,35 +1,153 @@
-import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
+import { forwardRef, use, useContext, useEffect, useImperativeHandle, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useOrientation } from '@/hooks/module/useOrientation'
 import { getDegreeInOrientation } from '@/util/canvas-util'
 import { numberCheck } from '@/util/common-utils'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { addedRoofsState, basicSettingState } from '@/store/settingAtom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 
-export const Orientation = forwardRef(({ tabNum }, ref) => {
+export const Orientation = forwardRef((props, ref) => {
   const { getMessage } = useMessage()
-
-  const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController(1)
-
-  const { nextStep, compasDeg, setCompasDeg } = useOrientation()
-
   const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
+  const basicSetting = useRecoilValue(basicSettingState)
+  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) //지붕재 선택
+  const [roofTab, setRoofTab] = useState(0) //지붕재 탭
+  const {
+    roofs,
+    setRoofs,
+    tabNum,
+    setTabNum,
+    compasDeg,
+    setCompasDeg,
+    moduleSelectionInitParams,
+    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 [inputVerticalSnowCover, setInputVerticalSnowCover] = useState('0')
+  const [inputRoughness, setInputRoughness] = useState(selectedSurfaceType)
+  const [inputStandardWindSpeed, setInputStandardWindSpeed] = useState(standardWindSpeed)
+  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 (selectedSurfaceType) {
+      console.log(roughnessCodes, 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) {
+      console.log('🚀 ~ useEffect ~ managementState:', managementState)
+      setSelectedSurfaceType(roughnessCodes.find((code) => code.clCode === managementState?.surfaceTypeValue))
+      setInputInstallHeight(managementState?.installHeight)
+      setStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === managementState?.standardWindSpeedId))
+      setInputVerticalSnowCover(managementState?.verticalSnowCover)
+    }
+  }, [managementState])
+
+  useEffect(() => {
+    if (moduleSelectionData) {
+      console.log('moduleSelectionData', moduleSelectionData)
+    }
+  }, [moduleSelectionData])
 
   useImperativeHandle(ref, () => ({
     handleNextStep,
   }))
 
   const handleNextStep = () => {
-    nextStep()
-    canvasPopupStatusTrigger(compasDeg)
+    if (isComplete()) {
+      const common = {
+        illuminationTp: inputRoughness.clCode,
+        illuminationTpNm: inputRoughness.clCodeNm,
+        instHt: inputInstallHeight,
+        stdWindSpeed: inputStandardWindSpeed.clCode,
+        stdSnowLd: inputVerticalSnowCover,
+        saleStoreNorthFlg: managementState?.saleStoreNorthFlg,
+        moduleTpCd: selectedModules.itemTp,
+        moduleItemId: selectedModules.itemId,
+      }
+      setCompasDeg(inputCompasDeg)
+      setInstallHeight(inputInstallHeight)
+      setVerticalSnowCover(inputVerticalSnowCover)
+      setSelectedSurfaceType(inputRoughness)
+      setStandardWindSpeed(inputStandardWindSpeed)
+      nextStep()
+      setManagementState({
+        ...managementState,
+        installHeight: inputInstallHeight,
+        verticalSnowCover: inputVerticalSnowCover,
+        standardWindSpeedId: inputStandardWindSpeed.clCode,
+        surfaceType: inputRoughness.clCodeNm,
+        surfaceTypeValue: inputRoughness.clCode,
+      })
+      setModuleSelectionData({
+        ...moduleSelectionData,
+        module: {
+          ...selectedModules,
+        },
+      })
+      orientationTrigger({
+        compasDeg: inputCompasDeg,
+        common: common,
+        module: {
+          ...selectedModules,
+        },
+      })
+      updateObjectDataApi({
+        objectNo: currentCanvasPlan.objectNo, //오브젝트_no
+        standardWindSpeedId: inputStandardWindSpeed.clCode, //기준풍속코드
+        verticalSnowCover: inputVerticalSnowCover, //적설량
+        surfaceType: inputRoughness.clCodeNm, //면조도구분
+        installHeight: inputInstallHeight, //설치높이
+        userId: loginUserState.userId, //작성자아아디
+      })
+      setTabNum(2)
+    }
   }
 
-  useEffect(() => {
-    checkDegree(compasDeg)
-  }, [compasDeg])
-
   const checkDegree = (e) => {
     if (e === '-0' || e === '-') {
-      setCompasDeg('-')
+      setInputCompasDeg('-')
       return
     }
     if (e === '0-') {
@@ -45,71 +163,273 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
     }
   }
 
+  const isComplete = () => {
+    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,
+        lengthBase: null,
+        trestleMkrCd: null,
+        constMthdCd: null,
+        constTp: null,
+        roofBaseCd: null,
+        ridgeMargin: null,
+        kerabaMargin: null,
+        eavesMargin: null,
+        roofPchBase: null,
+        cvrYn: 'N',
+        snowGdPossYn: 'N',
+        cvrChecked: false,
+        snowGdChecked: false,
+      }
+    })
+    setRoofs(newRoofs)
+  }
+
   return (
     <>
       <div className="properties-setting-wrap">
         <div className="outline-wrap">
-          <div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
-          <div className="roof-module-compas">
-            <div className="compas-box">
-              <div className="compas-box-inner">
-                {Array.from({ length: 180 / 15 }).map((dot, index) => (
-                  <div
-                    key={index}
-                    className={`circle ${getDegreeInOrientation(compasDeg) === -1 * (-15 * index + 180) || (index === 0 && compasDeg >= 172 && index === 0 && compasDeg <= 180) || (compasDeg === -180 && index === 0) ? 'act' : ''}`}
-                    onClick={() => {
-                      if (index === 0) {
-                        setCompasDeg(180)
-                        return
-                      }
-                      setCompasDeg(-1 * (-15 * index + 180))
-                    }}
-                  >
-                    {index === 0 && <i>180°</i>}
-                    {index === 6 && <i>-90°</i>}
+          <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">
+                  <div className="compas-box-inner">
+                    {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' : ''}`}
+                        onClick={() => {
+                          if (index === 0) {
+                            setInputCompasDeg(180)
+                            return
+                          }
+                          setInputCompasDeg(-1 * (-15 * index + 180))
+                        }}
+                      >
+                        {index === 0 && <i>180°</i>}
+                        {index === 6 && <i>-90°</i>}
+                      </div>
+                    ))}
+                    {Array.from({ length: 180 / 15 }).map((dot, index) => (
+                      <div
+                        key={index}
+                        className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === 15 * index ? 'act' : ''}`}
+                        onClick={() => setInputCompasDeg(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>
                   </div>
-                ))}
-                {Array.from({ length: 180 / 15 }).map((dot, index) => (
-                  <div
-                    key={index}
-                    className={`circle ${compasDeg !== 180 && getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
-                    onClick={() => setCompasDeg(15 * index)}
-                  >
-                    {index === 0 && <i>0°</i>}
-                    {index === 6 && <i>90°</i>}
+                </div>
+              </div>
+              <div className="center-wrap">
+                <div className="outline-form">
+                  <div className="d-check-box pop mr10">
+                    <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
+                    <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
                   </div>
-                ))}
-                <div className="compas">
-                  <div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(compasDeg)}deg)` }}></div>
+                  <div className="input-grid mr10" style={{ width: '60px' }}>
+                    <input
+                      type="text"
+                      className="input-origin block"
+                      value={inputCompasDeg}
+                      readOnly={!hasAnglePassivity}
+                      placeholder={0}
+                      onChange={(e) => checkDegree(e.target.value)}
+                    />
+                  </div>
+                  <span className="thin">°</span>
+                  <span className="thin">（ -180 〜 180 ）</span>
                 </div>
               </div>
             </div>
-          </div>
-          <div className="center-wrap">
-            <div className="d-check-box pop">
-              <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
-              <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
-            </div>
-            <div className="outline-form">
-              <div className="input-grid mr10" style={{ width: '160px' }}>
-                <input
-                  type="text"
-                  className="input-origin block"
-                  value={compasDeg}
-                  readOnly={!hasAnglePassivity}
-                  placeholder={0}
-                  onChange={
-                    (e) => checkDegree(e.target.value)
-                    // setCompasDeg(
-
-                    // e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
-                    //   ? e.target.value
-                    //   : 0,
-                    // )
-                  }
-                />
+            <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={moduleSelectionInitParams}
+                        targetKey={'moduleItemId'}
+                        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="text"
+                        className="input-origin block"
+                        value={inputInstallHeight}
+                        onChange={(e) => setInputInstallHeight(e.target.value)}
+                      />
+                    </div>
+                    <span className="thin">m</span>
+                  </div>
+                )}
               </div>
-              <span className="thin">°</span>
+
+              {basicSetting && basicSetting.roofSizeSet !== '3' && (
+                <div className="compas-table-box">
+                  <div className="compas-grid-table">
+                    <div className="outline-form">
+                      <span>{getMessage('modal.module.basic.setting.module.surface.type')}</span>
+                      <div className="grid-select">
+                        {roughnessCodes.length > 0 && managementState && (
+                          <QSelectBox
+                            options={roughnessCodes}
+                            value={inputRoughness}
+                            targetKey={'clCode'}
+                            sourceKey={'clCode'}
+                            showKey={'clCodeNm'}
+                            onChange={(e) => handleChangeRoughness(e)}
+                          />
+                        )}
+                      </div>
+                    </div>
+                    <div className="outline-form">
+                      <span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
+                      <div className="input-grid mr10">
+                        <input
+                          type="text"
+                          className="input-origin block"
+                          value={inputInstallHeight}
+                          onChange={(e) => handleChangeInstallHeight(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="text"
+                          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,29 +1,43 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { checkedModuleState, currentCanvasPlanState, isManualModuleSetupState } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import {
+  checkedModuleState,
+  isManualModuleLayoutSetupState,
+  isManualModuleSetupState,
+  moduleRowColArrayState,
+  moduleSetupOptionState,
+  toggleManualSetupModeState,
+} from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
-  const [isChidori, setIsChidori] = useState(false)
+  const [useTab, setUseTab] = useState(true)
+
   const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
 
-  const [setupLocation, setSetupLocation] = useState('eaves')
-  const [isMaxSetup, setIsMaxSetup] = useState('false')
   const [selectedItems, setSelectedItems] = useState({})
-
   const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-  const { makeModuleInitArea } = useModuleBasicSetting(3)
+  const { makeModuleInitArea, roofOutlineColor } = useModuleBasicSetting(3)
 
   const [isMultiModule, setIsMultiModule] = useState(false)
 
-  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  //언마운트시 버튼 초기화
+  const setIsManualModuleSetup = useSetRecoilState(isManualModuleSetupState)
+  const setIsManualModuleLayoutSetup = useSetRecoilState(isManualModuleLayoutSetupState)
+  const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
+
+  const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션
+  const resetModuleSetupOption = useResetRecoilState(moduleSetupOptionState)
+
+  const [colspan, setColspan] = useState(1)
+  const [moduleRowColArray, setModuleRowColArray] = useRecoilState(moduleRowColArrayState)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -36,11 +50,24 @@ const Placement = forwardRef((props, refs) => {
       makeModuleInitArea(moduleSelectionData)
     }
 
+    if (moduleSelectionData.module.itemList.length > 1) {
+      setColspan(2)
+    }
+
     return () => {
+      // refs.isChidori.current = 'false'
+      // refs.setupLocation.current = 'eaves'
       setIsManualModuleSetup(false)
+      setIsManualModuleLayoutSetup(false)
+      setManualSetupMode('off')
+      resetModuleSetupOption()
     }
   }, [])
 
+  useEffect(() => {
+    console.log('moduleRowColArray', moduleRowColArray)
+  }, [moduleRowColArray])
+
   //최초 지입시 체크
   useEffect(() => {
     if (isObjectNotEmpty(moduleSelectionData)) {
@@ -54,8 +81,10 @@ const Placement = forwardRef((props, refs) => {
             initCheckedModule = { ...initCheckedModule, [obj.itemId]: true }
           }
         })
+
         setSelectedItems(initCheckedModule)
         setSelectedModules(moduleSelectionData.module)
+        props.setLayoutSetup(moduleSelectionData.module.itemList.map((item) => ({ moduleId: item.itemId, col: 0, row: 0, checked: true })))
       }
 
       //모듈 배치면 생성
@@ -80,59 +109,75 @@ const Placement = forwardRef((props, refs) => {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },
       { type: 'color-box', name: getMessage('module'), prop: 'module' },
-      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
+      { type: 'text', name: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn'), prop: 'mixAsgYn', width: 50 },
+      { type: 'text', name: `単数`, prop: 'rows', width: 60 },
+      { type: 'text', name: `熱水`, prop: 'cols', width: 60 },
     ],
     rows: [],
   }
 
   const handleChangeChidori = (e) => {
     const bool = e.target.value === 'true' ? true : false
-    setIsChidori(bool)
-    refs.isChidori.current = e.target.value
+    setModuleSetupOption({ ...moduleSetupOption, isChidori: bool })
+
+    //변경하면 수동 다 꺼짐
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode('off')
   }
 
   const handleSetupLocation = (e) => {
-    setSetupLocation(e.target.value)
-    refs.setupLocation.current = e.target.value
-  }
+    setModuleSetupOption({ ...moduleSetupOption, setupLocation: e.target.value })
 
-  const handleMaxSetup = (e) => {
-    if (e.target.checked) {
-      setIsMaxSetup('true')
-      refs.isMaxSetup.current = 'true'
-    } else {
-      setIsMaxSetup('false')
-      refs.isMaxSetup.current = 'false'
-    }
+    //변경하면 수동 다 꺼짐
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode('off')
   }
 
   //체크된 모듈 아이디 추출
-  const handleSelectedItem = (e) => {
+  const handleSelectedItem = (e, itemId) => {
     setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
+
+    const newLayoutSetup = [...props.layoutSetup]
+    props.layoutSetup.forEach((item, index) => {
+      if (item.moduleId === itemId) {
+        newLayoutSetup[index] = { ...props.layoutSetup[index], checked: e.target.checked }
+      }
+    })
+    props.setLayoutSetup(newLayoutSetup)
+  }
+
+  const handleLayoutSetup = (e, itemId, index) => {
+    const newLayoutSetup = [...props.layoutSetup]
+    newLayoutSetup[index] = {
+      ...newLayoutSetup[index],
+      moduleId: itemId,
+      [e.target.name]: Number(e.target.value),
+    }
+    props.setLayoutSetup(newLayoutSetup)
   }
 
   return (
     <>
-      <div className="module-table-flex-wrap mb10">
+      <div className="module-table-flex-wrap">
         <div className="module-table-box">
           <div className="module-table-inner">
             <div className="roof-module-table">
               <table>
                 <thead>
-                  <tr>
-                    {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>
-                    ))}
-                  </tr>
+                  {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>
+                  ))}
                 </thead>
                 <tbody>
                   {selectedModules.itemList &&
@@ -145,7 +190,7 @@ const Placement = forwardRef((props, refs) => {
                               id={item.itemId}
                               name={item.itemId}
                               checked={selectedItems[item.itemId]}
-                              onChange={handleSelectedItem}
+                              onChange={(e) => handleSelectedItem(e, item.itemId)}
                             />
                             <label htmlFor={item.itemId}></label>
                           </div>
@@ -156,93 +201,174 @@ const Placement = forwardRef((props, refs) => {
                             <span className="name">{item.itemNm}</span>
                           </div>
                         </td>
-                        <td className="al-r">{item.wpOut}</td>
+                        <td className="al-c">
+                          <div className="color-wrap">
+                            <span className="name">{item.mixAsgYn}</span>
+                          </div>
+                        </td>
+                        <td className="al-r">
+                          <div className="input-grid">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              name="row"
+                              value={props.layoutSetup[index]?.row ?? 1}
+                              defaultValue={0}
+                              onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
+                            />
+                          </div>
+                        </td>
+                        <td className="al-r">
+                          <div className="input-grid">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              name="col"
+                              value={props.layoutSetup[index]?.col ?? 1}
+                              defaultValue={0}
+                              onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
+                            />
+                          </div>
+                        </td>
                       </tr>
                     ))}
+                  <tr>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
                 </tbody>
               </table>
             </div>
           </div>
         </div>
-        <div className="module-table-box">
+        <div className="module-table-box non-flex">
           <div className="module-table-inner">
-            <div className="self-table-tit">{getMessage('modal.module.basic.setting.module.placement.select.fitting.type')}</div>
-            <div className="module-self-table">
-              <div className="self-table-item">
-                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</div>
-                <div className="self-item-td">
-                  <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio01"
-                        id="ra01"
-                        checked={isChidori}
-                        disabled={isChidoriNotAble}
-                        value={'true'}
-                        onChange={(e) => handleChangeChidori(e)}
-                      />
-                      <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
-                    </div>
-                    <div className="d-check-radio pop">
-                      <input type="radio" name="radio02" id="ra02" checked={!isChidori} value={'false'} onChange={(e) => handleChangeChidori(e)} />
-                      <label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="self-table-item">
-                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div>
-                <div className="self-item-td">
-                  <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio03"
-                        id="ra03"
-                        checked={setupLocation === 'center'}
-                        value={'center'}
-                        onChange={handleSetupLocation}
-                        disabled={isMultiModule}
-                      />
-                      <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.center')}</label>
-                    </div>
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio04"
-                        id="ra04"
-                        checked={setupLocation === 'eaves'}
-                        value={'eaves'}
-                        onChange={handleSetupLocation}
-                      />
-                      <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
-                    </div>
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio05"
-                        id="ra05"
-                        checked={setupLocation === 'ridge'}
-                        value={'ridge'}
-                        onChange={handleSetupLocation}
-                        disabled={isMultiModule}
-                      />
-                      <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="self-table-flx">
-              {/* <div className="d-check-box pop">
-                <input type="checkbox" id="ch04" checked={isMaxSetup === 'true'} value={'true'} onChange={handleMaxSetup} />
-                <label htmlFor="ch04">{getMessage('modal.module.basic.setting.module.placement.maximum')}</label>
-              </div> */}
+            <div className="roof-module-table">
+              <table>
+                <thead>
+                  <tr>
+                    <th>{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</th>
+                    <th>{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <div className="hexagonal-radio-wrap">
+                        <div className="d-check-radio pop mb10">
+                          <input
+                            type="radio"
+                            name="radio02"
+                            id="ra03"
+                            checked={moduleSetupOption.isChidori}
+                            disabled={isChidoriNotAble}
+                            value={'true'}
+                            onChange={(e) => handleChangeChidori(e)}
+                          />
+                          <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
+                        </div>
+                        <div className="d-check-radio pop">
+                          <input
+                            type="radio"
+                            name="radio02"
+                            id="ra04"
+                            checked={!moduleSetupOption.isChidori}
+                            value={'false'}
+                            onChange={(e) => handleChangeChidori(e)}
+                          />
+                          <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
+                        </div>
+                      </div>
+                    </td>
+                    <td>
+                      <div className="hexagonal-radio-wrap">
+                        <div className="d-check-radio pop mb10">
+                          <input
+                            type="radio"
+                            name="radio03"
+                            id="ra05"
+                            checked={moduleSetupOption.setupLocation === 'eaves'}
+                            value={'eaves'}
+                            onChange={handleSetupLocation}
+                          />
+                          <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
+                        </div>
+                        <div className="d-check-radio pop">
+                          <input
+                            type="radio"
+                            name="radio03"
+                            id="ra06"
+                            checked={moduleSetupOption.setupLocation === 'ridge'}
+                            value={'ridge'}
+                            onChange={handleSetupLocation}
+                            disabled={isMultiModule}
+                          />
+                          <label htmlFor="ra06">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
         </div>
       </div>
+      <div className="hide-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="module-table-inner">
+          <div className="roof-module-table">
+            <table className="">
+              <thead>
+                <tr>
+                  <th rowSpan={2} style={{ width: '22%' }}></th>
+                  {selectedModules &&
+                    selectedModules.itemList.map((item) => (
+                      <th colSpan={colspan}>
+                        <div className="color-wrap">
+                          <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                          <span className="name">{item.itemNm}</span>
+                        </div>
+                      </th>
+                    ))}
+                </tr>
+                <tr>
+                  {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) => (
+                      <>
+                        <td className="al-c">{item.moduleMaxRows}</td>
+                        {colspan > 1 && <td className="al-c">{item.mixModuleMaxRows}</td>}
+                      </>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </>
   )
 })

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

@@ -0,0 +1,555 @@
+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 { isObjectNotEmpty } from '@/util/common-utils'
+import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+const Trestle = forwardRef((props, ref) => {
+  const { setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData } = props
+  const { getMessage } = useMessage()
+  // const [selectedTrestle, setSelectedTrestle] = useState()
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const pitchText = useRecoilValue(pitchTextSelector)
+  const [selectedRoof, setSelectedRoof] = useState()
+  const {
+    trestleState,
+    trestleDetail,
+    dispatch,
+    raftBaseList,
+    trestleList,
+    constMthdList,
+    roofBaseList,
+    constructionList,
+    eavesMargin,
+    ridgeMargin,
+    kerabaMargin,
+    setEavesMargin,
+    setRidgeMargin,
+    setKerabaMargin,
+    cvrYn,
+    cvrChecked,
+    snowGdPossYn,
+    snowGdChecked,
+    setCvrYn,
+    setCvrChecked,
+    setSnowGdPossYn,
+    setSnowGdChecked,
+  } = useModuleTrestle({
+    selectedRoof,
+  })
+  const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
+  // const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
+  const [lengthBase, setLengthBase] = useState(0)
+  const [hajebichi, setHajebichi] = useState(0)
+  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()
+
+  useEffect(() => {
+    if (roofs && !selectedRoof) {
+      setSelectedRoof(roofs[0])
+    }
+
+    //모듈 설치 영역 복구
+    restoreModuleInstArea()
+  }, [roofs])
+
+  useEffect(() => {
+    if (selectedRoof) {
+      dispatch({ type: 'SET_INITIALIZE', roof: { ...selectedRoof, moduleTpCd: selectedModules.itemTp } })
+    }
+  }, [selectedRoof])
+
+  useEffect(() => {
+    if (raftBaseList.length > 0) setSelectedRaftBase(raftBaseList.find((raft) => raft.clCode === trestleState?.raftBaseCd) ?? null)
+  }, [raftBaseList])
+
+  useEffect(() => {
+    if (trestleList.length > 0) setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
+  }, [trestleList])
+
+  useEffect(() => {
+    if (roofBaseList.length > 0) setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
+  }, [roofBaseList])
+
+  useEffect(() => {
+    if (constMthdList.length > 0) setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
+  }, [constMthdList])
+
+  useEffect(() => {
+    if (constructionList.length > 0) {
+      setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.constTp) ?? 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 onChangeRaftBase = (e) => {
+    setSelectedRaftBase(e)
+    dispatch({
+      type: 'SET_RAFT_BASE',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raftBaseCd: e.clCode,
+      },
+    })
+  }
+
+  const onChangeTrestleMaker = (e) => {
+    setSelectedTrestle(e)
+    dispatch({
+      type: 'SET_TRESTLE_MAKER',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raftBaseCd: trestleState.raftBaseCd ?? '',
+        trestleMkrCd: e.trestleMkrCd,
+      },
+    })
+  }
+
+  const onChangeConstMthd = (e) => {
+    setSelectedConstMthd(e)
+    dispatch({
+      type: 'SET_CONST_MTHD',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raftBaseCd: trestleState.raftBaseCd ?? '',
+        trestleMkrCd: trestleState.trestleMkrCd,
+        constMthdCd: e.constMthdCd,
+      },
+    })
+  }
+
+  const onChangeRoofBase = (e) => {
+    setSelectedRoofBase(e)
+    dispatch({
+      type: 'SET_ROOF_BASE',
+      roof: {
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raftBaseCd: trestleState.raftBaseCd ?? '',
+        trestleMkrCd: trestleState.trestleMkrCd,
+        constMthdCd: trestleState.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 handleChangeRoofMaterial = (index) => {
+    const newAddedRoofs = roofs.map((roof, i) => {
+      if (i === selectedRoof.index) {
+        return {
+          ...selectedRoof,
+          ...trestleState,
+          eavesMargin,
+          ridgeMargin,
+          kerabaMargin,
+          cvrYn,
+          snowGdPossYn,
+          cvrChecked,
+          snowGdChecked,
+        }
+      }
+      return { ...roof }
+    })
+    setRoofs(newAddedRoofs)
+    setSelectedRoof(newAddedRoofs[index])
+  }
+
+  const handleConstruction = (index) => {
+    if (constructionList[index]?.constPossYn === 'Y') {
+      dispatch({
+        type: 'SET_CONSTRUCTION',
+        roof: {
+          moduleTpCd: selectedModules.itemTp ?? '',
+          roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+          raftBaseCd: trestleState.raftBaseCd ?? '',
+          trestleMkrCd: trestleState.trestleMkrCd,
+          constMthdCd: trestleState.constMthdCd,
+          roofBaseCd: trestleState.roofBaseCd,
+          illuminationTp: managementState?.surfaceTypeValue ?? '',
+          instHt: managementState?.installHeight ?? '',
+          stdWindSpeed: managementState?.standardWindSpeedId ?? '',
+          stdSnowLd: +managementState?.verticalSnowCover ?? '',
+          inclCd: selectedRoof?.pitch.toString() ?? 0,
+          roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
+          constTp: constructionList[index].constTp,
+          mixMatlNo: selectedModules.mixMatlNo,
+          workingWidth: selectedRoof?.length.toString() ?? '',
+          // snowGdPossYn: constructionList[index].snowGdPossYn,
+          // cvrYn: constructionList[index].cvrYn,
+        },
+      })
+
+      setCvrYn(constructionList[index].cvrYn)
+      setSnowGdPossYn(constructionList[index].snowGdPossYn)
+      setCvrChecked(false)
+      setSnowGdChecked(false)
+    }
+  }
+
+  const isComplete = () => {
+    const newAddedRoofs = roofs.map((roof, i) => {
+      if (i === selectedRoof?.index) {
+        return {
+          ...selectedRoof,
+          ...trestleState,
+          eavesMargin,
+          ridgeMargin,
+          kerabaMargin,
+          cvrYn,
+          snowGdPossYn,
+          cvrChecked,
+          snowGdChecked,
+          trestleDetail,
+        }
+      }
+      return { ...roof }
+    })
+
+    let result = true
+    newAddedRoofs.forEach((roof) => {
+      if (roof.eavesMargin && roof.ridgeMargin && roof.kerabaMargin) {
+        return true
+      }
+
+      if (!roof.trestleMkrCd) result = false
+      if (!roof.constMthdCd) result = false
+      if (!roof.roofBaseCd) result = false
+      if (!roof.constTp) result = false
+
+      if (selectedRoof.lenAuth === 'C') {
+        if (!trestleState?.lengthBase) result = false
+      }
+      if (['C', 'R'].includes(selectedRoof.raftAuth)) {
+        if (!roof.raftBaseCd) result = false
+      }
+
+      if (['C', 'R'].includes(selectedRoof.roofPchAuth)) {
+        if (!roof.roofPchBase) result = false
+      }
+    })
+
+    console.log('newAddedRoofs', newAddedRoofs)
+
+    if (result) {
+      setRoofs(newAddedRoofs)
+      setModuleSelectionData({
+        ...moduleSelectionData,
+        roofConstructions: newAddedRoofs.map((roof, index) => {
+          return {
+            addRoof: {
+              ...moduleSelectionData.roofConstructions[index]?.addRoof,
+              ...roof.addRoof,
+            },
+            trestle: {
+              ...roof.trestle,
+              ...moduleSelectionData.roofConstructions[index]?.trestle,
+            },
+            construction: {
+              ...roof.construction,
+              ...moduleSelectionData.roofConstructions[index]?.construction,
+            },
+            trestleDetail: {
+              ...roof.trestleDetail,
+            },
+          }
+        }),
+      })
+      trestleTrigger({
+        roofConstruction: newAddedRoofs.map((roof) => {
+          return {
+            roofIndex: roof.index,
+            addRoof: {
+              ...roof,
+            },
+            trestle: {
+              ...selectedTrestle,
+              raftBaseCd: roof.raftBaseCd,
+            },
+            construction: {
+              ...constructionList.find((construction) => trestleState.constTp === construction.constTp),
+              roofIndex: roof.index,
+              setupCover: roof.cvrYn === 'Y',
+              setupSnowCover: roof.snowGdYn === 'Y',
+              selectedIndex: roof.index,
+            },
+          }
+        }),
+      })
+    }
+
+    return result
+  }
+
+  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={trestleState?.lengthBase}
+                            onChange={(e) => setLengthBase(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) => handleHajebichiAndLength(e, 'hajebichi')}
+                            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={!trestleState?.snowGdPossYn || trestleState?.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-area mt10">
+            <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.area')}</div>
+            <div className="outline-form mr15">
+              <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
+              <div className="input-grid mr10">
+                <input
+                  type="text"
+                  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="text"
+                  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="text"
+                  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>
+      <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/circuitTrestle/CircuitTrestleSetting.jsx

@@ -479,7 +479,7 @@ export default function CircuitTrestleSetting({ id }) {
     console.log(stepUpListData)
     stepUpListData[0].pcsItemList.map((item, index) => {
       return item.serQtyList
-        .filter((serQty) => serQty.selected)
+        .filter((serQty) => serQty.selected && serQty.paralQty > 0)
         .forEach((serQty) => {
           pcs.push({
             pcsMkrCd: item.pcsMkrCd,

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

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

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

@@ -573,7 +573,7 @@ export default function StepUp(props) {
                   value={seletedMainOption}
                   sourceKey="code"
                   targetKey="code"
-                  showKey="name"
+                  showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
                   onChange={(e) => setSeletedMainOption(e)}
                 />
               )}
@@ -586,7 +586,7 @@ export default function StepUp(props) {
                     value={seletedSubOption}
                     sourceKey="code"
                     targetKey="code"
-                    showKey="name"
+                    showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
                     onChange={(e) => setSeletedSubOption(e)}
                   />
                 )}

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

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

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

@@ -38,6 +38,11 @@ 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() //선택해제
+    }
   }, [])
 
   //모듈 이동 적용
@@ -87,7 +92,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" style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
+    <WithDraggable isShow={true} pos={pos} className="lrr" isHidden={isHidden}>
       <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,6 +19,7 @@ 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'
 
 /**
  * 지붕 레이아웃
@@ -53,7 +54,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     rafter: useRef(null),
     hajebichi: useRef(null),
   }
-
+  const { saveCanvas } = usePlan()
   /**
    * 치수 입력방법(복시도입력/실측값입력/육지붕)
    */
@@ -205,7 +206,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   /**
    * 배치면초기설정 저장 버튼 클릭
    */
-  const handleSaveBtn = () => {
+  const handleSaveBtn = async () => {
     const roofInfo = {
       ...currentRoof,
       planNo: basicSetting.planNo,
@@ -254,14 +255,13 @@ 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,7 +271,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
             <tbody>
               <tr>
                 <th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
-                <td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
+                <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/management/Stuff.jsx

@@ -203,7 +203,7 @@ export default function Stuff() {
     if (event.column.colId === 'objectNo') {
       return
     } else {
-      //T 면 임시 R은 진짜
+      //T 면 임시 S는 진짜
       if (event.data.objectNo) {
         setIsGlobalLoading(true)
         if (event.data.tempFlg === '0') {

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...(임시) R...(진짜)
+    // 물건번호 T...(임시) S...(진짜)
     planReqNo: '', //설계의뢰No
     receiveUser: session?.userNm, //담당자 로그인사용자명 디폴트
     objectStatusId: '0', //물건구분(신축:0 기축 : 1)
@@ -1033,8 +1033,7 @@ export default function StuffDetail() {
   const _saleStoreId = watch('saleStoreId')
   // 2차 판매점명
   const _otherSaleStoreId = watch('otherSaleStoreId')
-  // zipNo: '', //우편번호
-  const _zipNo = watch('zipNo')
+  // zipNo: '', //우편번호 필수값제거 #947
   // prefId: '', //도도부현
   const _prefId = watch('prefId')
   // address: '', //주소
@@ -1071,10 +1070,6 @@ export default function StuffDetail() {
         }
       }
 
-      if (!formData.zipNo) {
-        errors.zipNo = true
-      }
-
       if (!formData.prefId) {
         errors.prefId = true
       }
@@ -1115,10 +1110,6 @@ export default function StuffDetail() {
         }
       }
 
-      if (!formData.zipNo) {
-        errors.zipNo = true
-      }
-
       if (!formData.prefId || formData.prefId === '0') {
         errors.prefId = true
       }
@@ -1144,7 +1135,6 @@ export default function StuffDetail() {
     _objectName,
     _saleStoreId,
     _otherSaleStoreId,
-    _zipNo,
     _prefId,
     _address,
     _areaId,
@@ -1189,6 +1179,14 @@ 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)
@@ -1243,12 +1241,6 @@ 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')
@@ -1558,7 +1550,7 @@ export default function StuffDetail() {
             type: 'alert',
             icon: 'error',
           })
-          console.log('error::::::', error)
+          console.error('error::::::', error)
         })
     }
   }
@@ -2004,9 +1996,7 @@ export default function StuffDetail() {
                     </td>
                   </tr>
                   <tr>
-                    <th>
-                      {getMessage('stuff.detail.zipNo')} <span className="important">*</span>
-                    </th>
+                    <th>{getMessage('stuff.detail.zipNo')}</th>
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr5" style={{ width: '200px' }}>
@@ -2038,10 +2028,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>
@@ -2571,9 +2561,7 @@ export default function StuffDetail() {
                         </td>
                       </tr>
                       <tr>
-                        <th>
-                          {getMessage('stuff.detail.zipNo')} <span className="important">*</span>
-                        </th>
+                        <th>{getMessage('stuff.detail.zipNo')}</th>
                         <td>
                           <div className="flx-box">
                             <div className="input-wrap mr5" style={{ width: '200px' }}>
@@ -2606,10 +2594,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/hooks/common/useCanvasMenu.js

@@ -7,8 +7,6 @@ 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 } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import useSWRMutation from 'swr/mutation'
 import { useAxios } from '../useAxios'
 import { unescapeString } from '@/util/common-utils'
@@ -10,6 +10,8 @@ import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useCircuitTrestle } from '../useCirCuitTrestle'
 import { useEffect } from 'react'
+import { addedRoofsState } from '@/store/settingAtom'
+import { roofsState } from '@/store/roofAtom'
 
 /**
  * 캔버스 팝업 상태 관리
@@ -19,13 +21,14 @@ import { useEffect } from 'react'
 export function useCanvasPopupStatusController(param = 1) {
   const popupType = parseInt(param)
 
-  const [compasDeg, setCompasDeg] = useRecoilState(compasDegAtom)
-  const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
-  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
+  const setCompasDeg = useSetRecoilState(compasDegAtom)
+  const setModuleSelectionDataStore = useSetRecoilState(moduleSelectionDataState)
+  const setSelectedModules = useSetRecoilState(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)
   /**
    * 팝업 상태 조회
    * @param {number} popupTypeParam
@@ -53,19 +56,27 @@ export function useCanvasPopupStatusController(param = 1) {
   const handleModuleSelectionTotal = async () => {
     for (let i = 1; i < 3; i++) {
       const result = await getModuleSelection(i)
-      console.log('🚀 ~ handleModuleSelectionTotal ~ result:', result)
       if (!result.objectNo) return
       if (i === 1) {
-        setCompasDeg(result.popupStatus)
+        if (result.popupStatus && unescapeString(result.popupStatus)) {
+          const data = JSON.parse(unescapeString(result.popupStatus))
+
+          if (data?.compasDeg) setCompasDeg(data.compasDeg)
+          if (data?.module) setSelectedModules(data.module)
+          setModuleSelectionDataStore(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.module) setSelectedModules(data.module)
+        if (data.roofConstruction) {
+          setRoofs(data.roofConstruction)
+          // setManagementState({ ...managementState, roofs: data.roofConstruction.map((roof) => roof.construction.managementState) })
+        }
+        // if (data?.module) setManagementState(data.common.managementState)
       }
     }
   }
@@ -80,7 +91,8 @@ 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/floorPlan/estimate/useEstimateController.js

@@ -136,7 +136,7 @@ export const useEstimateController = (planNo, flag) => {
   }
 
   useEffect(() => {
-    setEstimateData({ ...estimateContextState, userId: session.userId, sapSalesStoreCd: session.custCd })
+    setEstimateData({ ...estimateContextState, userId: session.userId })
   }, [estimateContextState])
 
   // 첨부파일 다운로드
@@ -452,8 +452,6 @@ export const useEstimateController = (planNo, flag) => {
     }
 
     const params = {
-      saleStoreId: session.storeId,
-      sapSalesStoreCd: session.custCd,
       objectNo: estimateData.objectNo,
       planNo: sendPlanNo,
       copySaleStoreId: otherSaleStoreId ? otherSaleStoreId : saleStoreId,
@@ -462,24 +460,30 @@ export const useEstimateController = (planNo, flag) => {
     }
 
     setIsGlobalLoading(true)
-    await promisePost({ url: '/api/estimate/save-estimate-copy', data: params }).then((res) => {
-      setIsGlobalLoading(false)
-      if (res.status === 201) {
-        if (isObjectNotEmpty(res.data)) {
-          let newObjectNo = res.data.objectNo
-          swalFire({
-            text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessage'),
-            type: 'alert',
-            confirmFn: () => {
-              setEstimateCopyPopupOpen(false) //팝업닫고
-              router.push(`/management/stuff/detail?objectNo=${newObjectNo.toString()}`, { scroll: false })
-            },
-          })
-        }
-      } else {
+    await promisePost({ url: '/api/estimate/save-estimate-copy', data: params })
+      .then((res) => {
         setIsGlobalLoading(false)
-      }
-    })
+        if (res.status === 201) {
+          if (isObjectNotEmpty(res.data)) {
+            let newObjectNo = res.data.objectNo
+            swalFire({
+              text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessage'),
+              type: 'alert',
+              confirmFn: () => {
+                setEstimateCopyPopupOpen(false) //팝업닫고
+                router.push(`/management/stuff/detail?objectNo=${newObjectNo.toString()}`, { scroll: false })
+              },
+            })
+          }
+        } else {
+          setIsGlobalLoading(false)
+        }
+      })
+      .catch((e) => {
+        console.error('캔버스 복사 중 오류 발생')
+        swalFire({ text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessageError'), type: 'alert', icon: 'error' })
+        setIsGlobalLoading(false)
+      })
   }
 
   const checkLength = (value) => {

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 && obj.top === target.top)
+      .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && Math.abs(obj.top - target.top) < 1)
       .sort((a, b) => a.left - b.left)
   }
 
   const getColumnModules = (target) => {
     return canvas
       .getObjects()
-      .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.left === target.left)
+      .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && Math.abs(obj.left - target.left) < 1)
       .sort((a, b) => a.top - b.top)
   }
 

src/hooks/module/useModulePlace.js

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

@@ -19,9 +19,9 @@ export function useModuleSelection(props) {
   const [moduleList, setModuleList] = useState([{}]) //모듈 목록
 
   const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
-  const [installHeight, setInstallHeight] = useState() //설치 높이
-  const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
-  const [verticalSnowCover, setVerticalSnowCover] = 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) 면조도, 높이등등
@@ -32,6 +32,7 @@ export function useModuleSelection(props) {
   const { restoreModuleInstArea } = useModuleBasicSetting()
 
   const bindInitData = () => {
+    console.log('bindInitData', managementState)
     setInstallHeight(managementState?.installHeight)
     setStandardWindSpeed(managementState?.standardWindSpeedId)
     setVerticalSnowCover(managementState?.verticalSnowCover)
@@ -184,14 +185,6 @@ export function useModuleSelection(props) {
     })
   }
 
-  useEffect(() => {
-    // console.log('installHeight', installHeight)
-  }, [installHeight])
-
-  useEffect(() => {
-    // console.log('verticalSnowCover', verticalSnowCover)
-  }, [verticalSnowCover])
-
   //TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
 
   // useEffect(() => {
@@ -226,11 +219,17 @@ export function useModuleSelection(props) {
     roughnessCodes,
     windSpeedCodes,
     managementState,
+    setManagementState,
     moduleList,
+    setSelectedModules,
     selectedSurfaceType,
+    setSelectedSurfaceType,
     installHeight,
+    setInstallHeight,
     standardWindSpeed,
+    setStandardWindSpeed,
     verticalSnowCover,
+    setVerticalSnowCover,
     handleChangeModule,
     handleChangeSurfaceType,
     handleChangeWindSpeed,

src/hooks/module/useModuleTrestle.js

@@ -0,0 +1,244 @@
+import { use, useContext, useEffect, useReducer, useState } from 'react'
+import { useCommonCode } from '../common/useCommonCode'
+import { useMasterController } from '../common/useMasterController'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { useRecoilValue } from 'recoil'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+
+const RAFT_BASE_CODE = '203800'
+
+const trestleReducer = (state, action) => {
+  console.log('🚀 ~ trestleReducer ~ state:', state)
+  console.log('🚀 ~ trestleReducer ~ action:', action)
+  switch (action.type) {
+    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':
+      console.log('SET_INITIALIZE')
+      return {
+        moduleTpCd: action.roof.moduleTpCd ?? '',
+        roofMatlCd: action.roof.roofMatlCd ?? '',
+        raftBaseCd: action.roof.raftBaseCd ?? null,
+        trestleMkrCd: action.roof.trestleMkrCd ?? null,
+        constMthdCd: action.roof.constMthdCd ?? null,
+        constTp: action.roof.constTp ?? null,
+        roofBaseCd: action.roof.roofBaseCd ?? null,
+        workingWidth: action.roof.workingWidth ?? 0,
+        lengthBase: action.roof.length ?? 0,
+        illuminationTp: action.roof.illuminationTp ?? null,
+        instHt: action.roof.instHt ?? null,
+        stdWindSpeed: action.roof.stdWindSpeed ?? null,
+        stdSnowLd: action.roof.stdSnowLd ?? null,
+        inclCd: action.roof.inclCd ?? 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 [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)
+
+  useEffect(() => {
+    const raftCodeList = findCommonCode(RAFT_BASE_CODE)
+
+    setRaftBaseList(raftCodeList)
+    setTrestleList([])
+    setConstMthdList([])
+    setRoofBaseList([])
+    setConstructionList([])
+    setEavesMargin(selectedRoof?.eavesMargin ?? 0)
+    setRidgeMargin(selectedRoof?.ridgeMargin ?? 0)
+    setKerabaMargin(selectedRoof?.kerabaMargin ?? 0)
+    setCvrYn(selectedRoof?.cvrYn ?? 'N')
+    setCvrChecked(selectedRoof?.cvrChecked ?? false)
+    setSnowGdPossYn(selectedRoof?.snowGdPossYn ?? 'N')
+    setSnowGdChecked(selectedRoof?.snowGdChecked ?? false)
+  }, [selectedRoof])
+
+  useEffect(() => {
+    if (trestleState) {
+      console.log('🚀 ~ useEffect ~ trestleState:', trestleState)
+      handleSetTrestleList()
+      if (!trestleState.trestleMkrCd) {
+        setConstMthdList([])
+        setRoofBaseList([])
+        setConstructionList([])
+        setTrestleDetail(null)
+        return
+      }
+
+      handleSetConstMthdList()
+      if (!trestleState.constMthdCd) {
+        setRoofBaseList([])
+        setConstructionList([])
+        setTrestleDetail(null)
+        return
+      }
+
+      handleSetRoofBaseList()
+      if (!trestleState.roofBaseCd) {
+        setConstructionList([])
+        setTrestleDetail(null)
+        return
+      }
+
+      handleSetConstructionList()
+      if (!trestleState.constTp) {
+        setTrestleDetail(null)
+        return
+      }
+
+      if (!trestleState.eavesMargin) {
+        handleSetTrestleDetailData()
+      }
+    }
+  }, [trestleState])
+
+  const handleSetTrestleList = () => {
+    getTrestleList({
+      moduleTpCd: trestleState.moduleTpCd ?? '',
+      roofMatlCd: trestleState.roofMatlCd ?? '',
+      raftBaseCd: trestleState.raftBaseCd ?? '',
+    }).then((res) => {
+      if (res?.data) setTrestleList(res.data)
+    })
+  }
+
+  const handleSetConstMthdList = () => {
+    getTrestleList({
+      moduleTpCd: trestleState.moduleTpCd ?? '',
+      roofMatlCd: trestleState.roofMatlCd ?? '',
+      raftBaseCd: trestleState.raftBaseCd ?? '',
+      trestleMkrCd: trestleState.trestleMkrCd ?? '',
+    }).then((res) => {
+      if (res?.data) setConstMthdList(res.data)
+    })
+  }
+
+  const handleSetRoofBaseList = () => {
+    getTrestleList({
+      moduleTpCd: trestleState.moduleTpCd ?? '',
+      roofMatlCd: trestleState.roofMatlCd ?? '',
+      raftBaseCd: trestleState.raftBaseCd ?? '',
+      trestleMkrCd: trestleState.trestleMkrCd ?? '',
+      constMthdCd: trestleState.constMthdCd ?? '',
+    }).then((res) => {
+      if (res?.data) setRoofBaseList(res.data)
+    })
+  }
+
+  const handleSetConstructionList = () => {
+    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.raftBaseCd ?? '',
+      roofPitch: trestleState.roofPitch ?? '',
+    }).then((res) => {
+      if (res?.data) setConstructionList(res.data)
+    })
+  }
+
+  const handleSetTrestleDetailData = () => {
+    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.workingWidth ?? '',
+      },
+    ]).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,
+        //   },
+        // })
+      }
+    })
+  }
+
+  return {
+    trestleState,
+    trestleDetail,
+    dispatch,
+    raftBaseList,
+    trestleList,
+    constMthdList,
+    roofBaseList,
+    constructionList,
+    handleSetTrestleList,
+    handleSetConstMthdList,
+    handleSetRoofBaseList,
+    handleSetConstructionList,
+    handleSetTrestleDetailData,
+    eavesMargin,
+    ridgeMargin,
+    kerabaMargin,
+    setEavesMargin,
+    setRidgeMargin,
+    setKerabaMargin,
+    cvrYn,
+    cvrChecked,
+    snowGdPossYn,
+    snowGdChecked,
+    setCvrYn,
+    setCvrChecked,
+    setSnowGdPossYn,
+    setSnowGdChecked,
+  }
+}

src/hooks/module/useTrestle.js

@@ -10,6 +10,7 @@ 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
@@ -26,6 +27,7 @@ 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)
@@ -58,7 +60,6 @@ export const useTrestle = () => {
         }
         const construction = moduleSelectionData?.roofConstructions?.find((construction) => construction.roofIndex === roofMaterialIndex).construction
         if (!construction) {
-          swalFire({ text: 'construction 존재안함', icon: 'error' })
           return
         }
 
@@ -131,9 +132,9 @@ export const useTrestle = () => {
         surface.isChidory = isChidory
 
         if (plvrYn === 'N' && isChidory) {
-          swalFire({ text: '치조불가공법입니다.', icon: 'error' })
+          swalFire({ text: getMessage('chidory.can.not.install'), icon: 'error' })
           clear()
-          throw new Error('치조불가공법입니다.')
+          throw new Error(getMessage('chidory.can.not.install'))
         }
 
         surface.set({ isChidory: isChidory })
@@ -369,7 +370,20 @@ export const useTrestle = () => {
                 rack.value.moduleTpCd === leftRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === leftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
-            } else {
+            } else if (leftRowsInfo.rowsInfo.length >= 2) {
+              //C1C2C3인 경우
+              if (rack.value.moduleTpCd.length === 6) {
+                // 변환 C1C2만 있는경우 C3 0개로 추가해준다.
+                let newLeftRowsInfo = normalizeModules(rack.value.moduleTpCd, leftRowsInfo)
+
+                return (
+                  rack.value.moduleTpCd === newLeftRowsInfo.moduleTotalTp &&
+                  rack.value.moduleRows === newLeftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                  Number(rack.value.moduleTpRows1) === newLeftRowsInfo.rowsInfo[0].count &&
+                  Number(rack.value.moduleTpRows2) === newLeftRowsInfo.rowsInfo[1].count &&
+                  Number(rack.value.moduleTpRows3) === newLeftRowsInfo.rowsInfo[2].count
+                )
+              }
               return (
                 rack.value.moduleTpCd === leftRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === leftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
@@ -386,7 +400,19 @@ export const useTrestle = () => {
                 rack.value.moduleTpCd === rightRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === rightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
-            } else {
+            } else if (rightRowsInfo.rowsInfo.length === 2) {
+              if (rack.value.moduleTpCd.length === 6) {
+                // 변환 C1C2만 있는경우 C3 0개로 추가해준다.
+                let newRightRowsInfo = normalizeModules(rack.value.moduleTpCd, rightRowsInfo)
+
+                return (
+                  rack.value.moduleTpCd === newRightRowsInfo.moduleTotalTp &&
+                  rack.value.moduleRows === newRightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                  Number(rack.value.moduleTpRows1) === newRightRowsInfo.rowsInfo[0].count &&
+                  Number(rack.value.moduleTpRows2) === newRightRowsInfo.rowsInfo[1].count &&
+                  Number(rack.value.moduleTpRows3) === newRightRowsInfo.rowsInfo[2].count
+                )
+              }
               return (
                 rack.value.moduleTpCd === rightRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === rightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
@@ -403,7 +429,19 @@ export const useTrestle = () => {
                 rack.value.moduleTpCd === centerRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === centerRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
-            } else {
+            } else if (centerRowsInfo.rowsInfo.length === 2) {
+              if (rack.value.moduleTpCd.length === 6) {
+                // 변환 C1C2만 있는경우 C3 0개로 추가해준다.
+                let newCenterRowsInfo = normalizeModules(rack.value.moduleTpCd, centerRowsInfo)
+
+                return (
+                  rack.value.moduleTpCd === newCenterRowsInfo.moduleTotalTp &&
+                  rack.value.moduleRows === newCenterRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                  Number(rack.value.moduleTpRows1) === newCenterRowsInfo.rowsInfo[0].count &&
+                  Number(rack.value.moduleTpRows2) === newCenterRowsInfo.rowsInfo[1].count &&
+                  Number(rack.value.moduleTpRows3) === newCenterRowsInfo.rowsInfo[2].count
+                )
+              }
               return (
                 rack.value.moduleTpCd === centerRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === centerRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
@@ -498,7 +536,19 @@ export const useTrestle = () => {
                 rack.value.moduleTpCd === leftRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === leftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
-            } else {
+            } else if (leftRowsInfo.rowsInfo.length === 2) {
+              if (rack.value.moduleTpCd.length === 6) {
+                // 변환 C1C2만 있는경우 C3 0개로 추가해준다.
+                let newLeftRowsInfo = normalizeModules(rack.value.moduleTpCd, leftRowsInfo)
+
+                return (
+                  rack.value.moduleTpCd === newLeftRowsInfo.moduleTotalTp &&
+                  rack.value.moduleRows === newLeftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                  Number(rack.value.moduleTpRows1) === newLeftRowsInfo.rowsInfo[0].count &&
+                  Number(rack.value.moduleTpRows2) === newLeftRowsInfo.rowsInfo[1].count &&
+                  Number(rack.value.moduleTpRows3) === newLeftRowsInfo.rowsInfo[2].count
+                )
+              }
               return (
                 rack.value.moduleTpCd === leftRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === leftRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
@@ -574,7 +624,19 @@ export const useTrestle = () => {
                 rack.value.moduleTpCd === rightRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === rightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0)
               )
-            } else {
+            } else if (rightRowsInfo.rowsInfo.length === 2) {
+              if (rack.value.moduleTpCd.length === 6) {
+                // 변환 C1C2만 있는경우 C3 0개로 추가해준다.
+                let newRightRowsInfo = normalizeModules(rack.value.moduleTpCd, rightRowsInfo)
+
+                return (
+                  rack.value.moduleTpCd === newRightRowsInfo.moduleTotalTp &&
+                  rack.value.moduleRows === newRightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
+                  Number(rack.value.moduleTpRows1) === newRightRowsInfo.rowsInfo[0].count &&
+                  Number(rack.value.moduleTpRows2) === newRightRowsInfo.rowsInfo[1].count &&
+                  Number(rack.value.moduleTpRows3) === newRightRowsInfo.rowsInfo[2].count
+                )
+              }
               return (
                 rack.value.moduleTpCd === rightRowsInfo.moduleTotalTp &&
                 rack.value.moduleRows === rightRowsInfo.rowsInfo.reduce((acc, row) => acc + row.count, 0) &&
@@ -634,6 +696,31 @@ 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)
@@ -2130,12 +2217,13 @@ export const useTrestle = () => {
     const visited = new Set()
     const width = Math.floor(moduleExample.width)
     const height = Math.floor(moduleExample.height)
-    const horizonPadding = 0 // 가로 패딩
-    const verticalPadding = 0 // 세로 패딩
+    const horizonPadding = 3 // 가로 패딩
+    const verticalPadding = 7 // 세로 패딩
 
     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 ||
@@ -2167,6 +2255,128 @@ 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
+      const { moduleIntvlHor, moduleIntvlVer } = trestleDetail
+
+      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 && Math.abs(m1Y - m2Y) <= maxY) ||
+          (Math.abs(Math.abs(m1X - m2X) - maxX / 2) <= halfMaxX && Math.abs(Math.abs(m1Y - m2Y) - maxY) <= halfMaxY) ||
+          (Math.abs(Math.abs(m1X - m2X) - maxX) <= halfMaxX && Math.abs(Math.abs(m1Y - m2Y) - maxY / 2) <= halfMaxY)
+        )
+      } 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 && Math.abs(m1Y - m2Y) <= maxX) ||
+          (Math.abs(Math.abs(m1X - m2X) - maxY / 2) <= halfMaxY && Math.abs(Math.abs(m1Y - m2Y) - maxX) <= halfMaxX) ||
+          (Math.abs(Math.abs(m1X - m2X) - maxY) <= halfMaxY && Math.abs(Math.abs(m1Y - m2Y) - maxX / 2) <= halfMaxX)
+        )
+      }
+    })
+  }
+
+  // 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) {
@@ -2864,5 +3074,15 @@ export const useTrestle = () => {
     return surfaces.every((surface) => surface.isComplete)
   }
 
-  return { apply, getTrestleParams, clear, setViewCircuitNumberTexts, getEstimateData, setAllModuleSurfaceIsComplete, isAllComplete }
+  return {
+    apply,
+    getTrestleParams,
+    clear,
+    setViewCircuitNumberTexts,
+    getEstimateData,
+    setAllModuleSurfaceIsComplete,
+    isAllComplete,
+    groupCoordinates,
+    groupPoints,
+  }
 }

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -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: '지붕형상이 없습니다.' })
+      swalFire({ text: getMessage('roof.line.not.found') })
       closePopup(id)
       return
     }

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: '외벽선이 없습니다.' })
+      swalFire({ text: getMessage('wall.line.not.found') })
       closePopup(id)
     }
   }, [])

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 { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
@@ -26,6 +26,8 @@ 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'
 
 export function useRoofAllocationSetting(id) {
   const canvas = useRecoilValue(canvasState)
@@ -49,8 +51,9 @@ 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 [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
   const resetPoints = useResetRecoilState(outerLinePointsState)
@@ -68,30 +71,19 @@ 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])
 
@@ -99,7 +91,7 @@ export function useRoofAllocationSetting(id) {
     /** 현재 선택된 객체가 보조라인, 피라미드, 힙인 경우 두께 4로 설정 */
     const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     if (roofBases.length === 0) {
-      swalFire({ text: '할당할 지붕이 없습니다.' })
+      swalFire({ text: getMessage('roofAllocation.not.found'), icon: 'warning' })
       closePopup(id)
     }
 
@@ -112,9 +104,7 @@ 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) {
@@ -184,11 +174,7 @@ 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)
@@ -200,6 +186,7 @@ export function useRoofAllocationSetting(id) {
    */
   const basicSettingSave = async () => {
     try {
+      setIsGlobalLoading(true)
       const patternData = {
         objectNo: correntObjectNo,
         planNo: Number(basicSetting.planNo),
@@ -222,6 +209,8 @@ 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 설정
@@ -242,22 +231,34 @@ export function useRoofAllocationSetting(id) {
       swalFire({ type: 'alert', icon: 'error', text: getMessage('roof.exceed.count') })
       return
     }
-    setCurrentRoofList([
-      ...currentRoofList,
-      {
-        ...currentRoofMaterial,
-        selected: false,
-        id: currentRoofMaterial.roofMatlCd,
-        name: currentRoofMaterial.roofMatlNm,
-        index: currentRoofList.length,
-      },
-    ])
+
+    const originCurrentRoofList = currentRoofList.map((roof) => {
+      return { ...roof, selected: false }
+    })
+    originCurrentRoofList.push({
+      ...currentRoofMaterial,
+      selected: true,
+      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) {
@@ -270,8 +271,6 @@ export function useRoofAllocationSetting(id) {
    * 선택한 지붕재로 할당
    */
   const handleSave = () => {
-    basicSettingSave()
-
     /**
      * 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
      */
@@ -280,6 +279,7 @@ export function useRoofAllocationSetting(id) {
     } else {
       apply()
       resetPoints()
+      basicSettingSave()
     }
   }
 
@@ -287,23 +287,45 @@ 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)
     const selectedRoofMaterial = newRoofList.find((roof) => roof.selected)
     setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial, true)
     drawDirectionArrow(currentObject)
     modifyModuleSelectionData()
     closeAll()
+    basicSettingSave()
+  }
+
+  /**
+   * 기존 세팅된 지붕에 지붕재 내용을 바뀐 내용으로 수정
+   * @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)
+      })
+    })
   }
 
   /**
@@ -313,11 +335,7 @@ export function useRoofAllocationSetting(id) {
     if (!checkInnerLines()) {
       apply()
     } else {
-      swalFire({
-        type: 'alert',
-        icon: 'error',
-        text: getMessage('실제치수를 입력해 주세요.'),
-      })
+      swalFire({ type: 'alert', icon: 'error', text: getMessage('실제치수를 입력해 주세요.') })
     }
   }
 
@@ -332,11 +350,7 @@ 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
           }
         })
@@ -361,6 +375,7 @@ export function useRoofAllocationSetting(id) {
           splitPolygonWithLines(roofBase)
         }
       } catch (e) {
+        console.log(e)
         return
       }
 
@@ -383,10 +398,7 @@ export function useRoofAllocationSetting(id) {
     })
 
     setBasicSetting((prev) => {
-      return {
-        ...prev,
-        selectedRoofMaterial: newRoofList.find((roof) => roof.selected),
-      }
+      return { ...prev, selectedRoofMaterial: newRoofList.find((roof) => roof.selected) }
     })
     setRoofList(newRoofList)
 
@@ -394,9 +406,7 @@ export function useRoofAllocationSetting(id) {
 
     roofs.forEach((roof) => {
       if (roof.isFixed) return
-      roof.set({
-        isFixed: true,
-      })
+      roof.set({ isFixed: true })
 
       /** 모양 패턴 설정 */
       setSurfaceShapePattern(
@@ -408,6 +418,8 @@ export function useRoofAllocationSetting(id) {
       drawDirectionArrow(roof)
     })
 
+    setRoofMaterials(newRoofList)
+
     /** 외곽선 삭제 */
     const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' || obj.name === 'outerLine')
     removeTargets.forEach((obj) => {
@@ -431,10 +443,7 @@ 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' })
         }
       })
     })

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 } = usePolygon()
+  const { addPolygonByLines, addLengthText } = 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: '외벽선이 없습니다.' })
+      swalFire({ text: getMessage('wall.line.not.found') })
       closePopup(id)
       return
     }
@@ -248,6 +248,7 @@ 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: '외벽선이 없습니다.', icon: 'error' })
+      swalFire({ text: getMessage('wall.line.not.found') })
       return
     }
 

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: '외벽선이 없습니다.' })
+      swalFire({ text: getMessage('wall.line.not.found') })
       closePopup(id)
       return
     }

src/hooks/surface/usePlacementShapeDrawing.js

@@ -32,6 +32,7 @@ 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'
@@ -50,6 +51,8 @@ export function usePlacementShapeDrawing(id) {
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
   const { tempGridMode } = useTempGrid()
   const { setSurfaceShapePattern } = useRoofFn()
+  const { changeSurfaceLineType } = useSurfaceShapeBatch({})
+
   const canvasSetting = useRecoilValue(canvasSettingState)
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
   const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
@@ -253,11 +256,14 @@ export function usePlacementShapeDrawing(id) {
         setPoints([])
         canvas?.renderAll()
 
-        if (+canvasSetting?.roofSizeSet === 3) {
-          closePopup(id)
-          return
-        }
-        addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
+        // if (+canvasSetting?.roofSizeSet === 3) {
+        //   closePopup(id)
+        //   return
+        // }
+        // addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
+
+        changeSurfaceLineType(roof)
+        closePopup(id)
       }
 
       if (points.length < 3) {

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 } from '@/common/common'
+import { MENU, POLYGON_TYPE, LINE_TYPE } from '@/common/common'
 import { getIntersectionPoint, toFixedWithoutRounding } from '@/util/canvas-util'
 import { degreesToRadians } from '@turf/turf'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -111,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',
@@ -120,6 +120,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         }
 
         obj = new QPolygon(points, options)
+
         let imageRotate = 0
         if (xInversion && !yInversion) {
           if (rotate % 180 === 0 || rotate < 0) {
@@ -148,7 +149,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         } else {
           imageRotate = (rotate + 360) % 360
         }
-        obj.set({ angle: imageRotate })
+        obj.set({ angle: imageRotate, flipX: xInversion !== yInversion })
         obj.setCoords() //좌표 변경 적용
 
         canvas?.add(obj)
@@ -158,6 +159,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       addCanvasMouseEventListener('mouse:down', (e) => {
         isDrawing = false
 
+        const { xInversion, yInversion } = surfaceRefs
         canvas?.remove(obj)
 
         //각도 추가
@@ -178,6 +180,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         }
 
         //회전, flip등이 먹은 기준으로 새로생성
+        // const batchSurface = addPolygon(reorderedPoints, {
         const batchSurface = addPolygon(obj.getCurrentPoints(), {
           fill: 'transparent',
           stroke: 'red',
@@ -196,18 +199,25 @@ 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
-        const popupId = uuidv4()
-        addPopup(popupId, 2, <PlacementSurfaceLineProperty roof={batchSurface} id={popupId} setIsHidden={setIsHidden} />)
+        // if (+canvasSetting?.roofSizeSet === 3) return
+        // const popupId = uuidv4()
+        // 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)
@@ -488,18 +498,18 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       }
       case 10: {
         points = [
-          { 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, y: pointer.y + length4 / 2 - 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, y: pointer.y + length4 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
           {
             x: pointer.x + length1 / 2 - length1 + length2 + length3,
             y: pointer.y + length4 / 2 - length5 - (length4 - 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 },
         ]
         break
       }
@@ -613,27 +623,27 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       }
       case 14: {
         points = [
-          { 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, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
           {
             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 },
           { 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 },
           { 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, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
         ]
         break
       }
@@ -641,28 +651,28 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       case 16: {
         points = [
           {
-            x: pointer.x - length1 / 2,
-            y: pointer.y + length3 / 2,
+            x: pointer.x - length1 / 2 + (length1 - length2) / 2,
+            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
           },
           {
             x: pointer.x - length1 / 2 + (length1 - length2) / 2,
             y: pointer.y + length3 / 2 - (length3 - length4),
           },
           {
-            x: pointer.x - length1 / 2 + (length1 - length2) / 2,
-            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
+            x: pointer.x - length1 / 2,
+            y: pointer.y + length3 / 2,
           },
           {
-            x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
-            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
+            x: pointer.x - length1 / 2 + length1,
+            y: pointer.y + length3 / 2,
           },
           {
             x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
             y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
           },
           {
-            x: pointer.x - length1 / 2 + length1,
-            y: pointer.y + length3 / 2,
+            x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
+            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
           },
         ]
         break
@@ -673,25 +683,25 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
 
         points = [
-          {
-            x: pointer.x - length1 / 2 + length1,
-            y: pointer.y + length3 / 2,
-          },
           {
             x: pointer.x - length1 / 2,
             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 + length1,
+            y: pointer.y + length3 / 2,
+          },
+          {
+            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)) + topL * 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)) + length2 + topL * Math.cos(degreesToRadians(angle)),
-            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
+            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
           },
         ]
         break
@@ -1066,45 +1076,294 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
     canvas?.renderAll()
   }
 
-  const updateFlippedPoints = (polygon) => {
-    if (!(polygon instanceof fabric.Polygon)) {
-      console.error('The object is not a Polygon.')
-      return
-    }
+  /**
+   * 면형상 작도시 라인 속성 넣는 로직
+   * 폴리곤으로 보면 직선방향에 따라 아래쪽인지 윗쪽인지 판단이 가능하다고 생각하여
+   * south -> 밑면은 무조건 right direction이라 가정하고 작업함 좌우반전시 반대로 그려지는 경우도 생기지만 그럴땐 흐름방향에 따라 최대값(최소값)을 찾아
+   * 해당 하는 흐름에 맞게 변경함
+   * @param { } polygon
+   */
 
-    const { flipX, flipY, width, height, points, left, top, scaleX, scaleY } = polygon
+  //폴리곤, 상하반전, 좌우반전
+  const changeSurfaceLineType = (polygon) => {
+    const { isXInversion, isYInversion } = polygon //상하반전, 좌우반전
 
-    // 현재 points의 사본 가져오기
-    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 }
+    polygon.lines.forEach((line) => {
+      line.attributes.type = LINE_TYPE.WALLLINE.GABLE
     })
 
-    // flipX, flipY를 초기화
-    polygon.flipX = false
-    polygon.flipY = false
+    const directionConfig = {
+      south: { evaesDirection: 'right', ridgeDirection: 'left', coord1: 'y1', coord2: 'y2' },
+      north: { evaesDirection: 'left', ridgeDirection: 'right', coord1: 'y1', coord2: 'y2' },
+      east: { evaesDirection: 'top', ridgeDirection: 'bottom', coord1: 'x1', coord2: 'x2' },
+      west: { evaesDirection: 'bottom', ridgeDirection: 'top', coord1: 'x1', coord2: 'x2' },
+    }
 
-    // points 업데이트
-    polygon.set({ points: newPoints })
-    polygon.setCoords()
+    const { evaesDirection, ridgeDirection, coord1, coord2 } = directionConfig[polygon.direction] || directionConfig.west
 
-    return polygon
+    polygon.lines.forEach((line) => {
+      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 {
@@ -1115,5 +1374,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
     changeSurfaceLinePropertyEvent,
     changeSurfaceLineProperty,
     changeSurfaceLinePropertyReset,
+    changeSurfaceLineType,
   }
 }

src/hooks/useCanvasEvent.js

@@ -198,7 +198,7 @@ export function useCanvasEvent() {
 
       if (selected?.length > 0) {
         selected.forEach((obj) => {
-          if (obj.type === 'QPolygon' && obj.name !== 'module') {
+          if (obj.type === 'QPolygon') {
             obj.set({ stroke: 'red' })
           }
         })
@@ -235,7 +235,7 @@ export function useCanvasEvent() {
 
       if (selected?.length > 0) {
         selected.forEach((obj) => {
-          if (obj.type === 'QPolygon' && obj.name !== 'module') {
+          if (obj.type === 'QPolygon') {
             obj.set({ stroke: 'red' })
           }
         })

src/hooks/useContextMenu.js

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

src/hooks/useEvent.js

@@ -79,6 +79,9 @@ export function useEvent() {
     // 마우스 위치 기준으로 확대/축소
     canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom)
 
+    canvas.requestRenderAll()
+    canvas.calcOffset()
+
     // 이벤트의 기본 동작 방지 (스크롤 방지)
     opt.e.preventDefault()
     opt.e.stopPropagation()
@@ -104,6 +107,10 @@ export function useEvent() {
         const horizonLines = canvas.getObjects().filter((obj) => obj.name === 'lineGrid' && obj.direction === 'horizontal')
         const verticalLines = canvas.getObjects().filter((obj) => obj.name === 'lineGrid' && obj.direction === 'vertical')
 
+        if (!horizonLines || !verticalLines) {
+          return
+        }
+
         const closestHorizontalLine = horizonLines.reduce((prev, curr) => {
           const prevDistance = calculateDistance(pointer, prev)
           const currDistance = calculateDistance(pointer, curr)

src/hooks/usePlan.js

@@ -20,6 +20,7 @@ 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'
 
 /**
  * 플랜 처리 훅
@@ -52,6 +53,9 @@ export function usePlan(params = {}) {
   const { fetchBasicSettings, basicSettingCopySave } = useCanvasSetting()
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
 
+  /** 전역 로딩바 컨텍스트 */
+  const { setIsGlobalLoading } = useContext(QcastContext)
+
   /**
    * 플랜 복사 시 모듈이 있을경우 모듈 데이터 복사하기 위한 처리
    */
@@ -414,7 +418,7 @@ export function usePlan(params = {}) {
   useEffect(() => {
     setSelectedPlan(currentCanvasPlan)
     handleCurrentPlanUrl()
-    resetCurrentObject()
+    // resetCurrentObject()
     resetModuleSetupSurface()
   }, [currentCanvasPlan])
 
@@ -450,13 +454,21 @@ export function usePlan(params = {}) {
           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)
           },
         })
-      : await postObjectPlan(userId, objectNo, false, false)
+      : async () => {
+          setIsGlobalLoading(true)
+          await postObjectPlan(userId, objectNo, false, false)
+          setIsGlobalLoading(false)
+        }
   }
 
   /**

src/hooks/usePolygon.js

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

src/locales/ja.json

@@ -18,6 +18,7 @@
   "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,7 +38,7 @@
   "modal.roof.shape.setting.patten.a": "Aパターン",
   "modal.roof.shape.setting.patten.b": "Bパターン",
   "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": "屋根形状の手動設定",
@@ -72,7 +73,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": "直線",
@@ -88,13 +89,17 @@
   "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.area.eaves": "軒側",
+  "modal.module.basic.setting.module.placement.area.ridge": "棟側",
+  "modal.module.basic.setting.module.placement.area.keraba": "けらぱ",
   "modal.module.basic.setting.module.hajebichi": "ハゼピッチ",
   "modal.module.basic.setting.module.setting.info1": "※勾配の範囲には制限があります。屋根傾斜が2.5値未満10値を超える場合は、施工が可能かどうか施工マニュアルを確認してください。",
   "modal.module.basic.setting.module.setting.info2": "※モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ずご確認ください。",
@@ -112,12 +117,16 @@
   "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.ridge": "棟",
+  "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒の側",
+  "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.south": "南向き設置",
@@ -128,9 +137,10 @@
   "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": "自動配置",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "回路設定",
   "modal.circuit.trestle.setting": "回路設定",
   "modal.circuit.trestle.setting.alloc.trestle": "架台配置",
@@ -178,7 +188,7 @@
   "modal.roof.alloc.select.parallel": "筋配置",
   "modal.roof.alloc.select.stairs": "千鳥配置",
   "modal.roof.alloc.apply": "選択した屋根材として割り当て",
-  "plan.menu.estimate.docDown": "各種資料ダウンロード",
+  "plan.menu.estimate.docDownload": "見積書出力",
   "plan.menu.estimate.save": "保存",
   "plan.menu.estimate.reset": "初期化",
   "plan.menu.estimate.copy": "見積書のコピー",
@@ -558,7 +568,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": "登録日",
@@ -886,7 +896,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": "担当者",
@@ -957,6 +967,7 @@
   "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": "一次販売店は必須です。",
@@ -997,7 +1008,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": "シミュレーションガイド",
@@ -1034,5 +1045,20 @@
   "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": "지붕재별 모듈의 최대 단수. 혼합 최대 단수를 확인하십시오. (JA)",
+  "modal.module.basic.setting.module.placement.max.row": "최대 단수 (JA)",
+  "modal.module.basic.setting.module.placement.max.rows.multiple": "혼합 단수 (JA)",
+  "modal.module.basic.setting.module.placement.mix.asg.yn.error": "혼합 설치 불가능한 모듈입니다. (JA)",
+  "modal.module.basic.setting.module.placement.mix.asg.yn": "ミックス. (JA)",
+  "modal.module.basic.setting.layoutpassivity.placement": "layout配置 (JA)"
 }

src/locales/ko.json

@@ -18,6 +18,7 @@
   "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": "복시도 입력",
@@ -88,13 +89,17 @@
   "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.area.eaves": "처마쪽",
+  "modal.module.basic.setting.module.placement.area.ridge": "용마루쪽",
+  "modal.module.basic.setting.module.placement.area.keraba": "케라바쪽",
   "modal.module.basic.setting.module.hajebichi": "망둥어 피치",
   "modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.",
   "modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.",
@@ -112,12 +117,16 @@
   "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.ridge": "용마루",
+  "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "처마쪽",
+  "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.south": "남향설치",
@@ -129,6 +138,7 @@
   "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": "설정값으로 자동 배치",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로설정",
@@ -178,7 +188,7 @@
   "modal.roof.alloc.select.parallel": "병렬식",
   "modal.roof.alloc.select.stairs": "계단식",
   "modal.roof.alloc.apply": "선택한 지붕재로 할당",
-  "plan.menu.estimate.docDown": "문서 다운로드",
+  "plan.menu.estimate.docDownload": "문서 다운로드",
   "plan.menu.estimate.save": "저장",
   "plan.menu.estimate.reset": "초기화",
   "plan.menu.estimate.copy": "견적서 복사",
@@ -594,6 +604,7 @@
   "myinfo.message.password.error": "비밀번호가 틀렸습니다.",
   "login": "로그인",
   "login.auto.page.text": "자동로그인 중 입니다.",
+  "login.fail": "계정이 없거나 비밀번호가 잘못되었습니다.",
   "login.id.save": "ID Save",
   "login.id.placeholder": "아이디를 입력해주세요.",
   "login.password.placeholder": "비밀번호를 입력해주세요.",
@@ -886,7 +897,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": "담당자",
@@ -957,6 +968,7 @@
   "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차 판매점은 필수값 입니다.",
@@ -1034,5 +1046,20 @@
   "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": "지붕재별 모듈의 최대 단수. 혼합 최대 단수를 확인하십시오.",
+  "modal.module.basic.setting.module.placement.max.row": "최대 단수",
+  "modal.module.basic.setting.module.placement.max.rows.multiple": "혼합 단수",
+  "modal.module.basic.setting.module.placement.mix.asg.yn.error": "혼합 설치 불가능한 모듈입니다.",
+  "modal.module.basic.setting.module.placement.mix.asg.yn": "혼합",
+  "modal.module.basic.setting.layoutpassivity.placement": "레이아웃 배치"
 }

src/store/canvasAtom.js

@@ -384,3 +384,27 @@ 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

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

src/store/roofAtom.js

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

src/styles/_contents.scss

@@ -340,6 +340,14 @@
         &.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;

src/styles/_grid-detail.scss

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

src/styles/_modal.scss

@@ -279,10 +279,11 @@ $alert-color: #101010;
         border-bottom: 1px solid #424242;
     }
 }
-.grid-check-form-block{
-    display: block;
-    > div{
-        margin-bottom: 10px;
+.grid-check-form-flex{
+    display: flex;
+    gap: 10px;
+    .d-check-box{
+        flex: 1;
     }
 }
 .grid-option-overflow{
@@ -1313,13 +1314,13 @@ $alert-color: #101010;
     
     .circle {
         position: absolute;
-        width: 12px;
-        height: 12px;
+        width: 10px;
+        height: 10px;
         border: 1px solid #fff;
         border-radius: 50%;
-        top: 95%;
+        top: 88%;
         left: 50%;
-        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+        transform-origin: 0 -76px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
         cursor:pointer;
         z-index: 3;
         /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
@@ -1366,8 +1367,8 @@ $alert-color: #101010;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
-                width: 5px;
-                height: 5px;
+                width: 4px;
+                height: 4px;
                 background-color: #fff;
                 border-radius: 50%;
             }
@@ -1381,15 +1382,15 @@ $alert-color: #101010;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 148px;
-        height: 148px;
+        width: 121px;
+        height: 121px;
         border: 4px solid #fff;
         border-radius: 50%;
         .compas-arr{
             width: 100%;
             height: 100%;
             background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
-            background-size: 122px 122px;
+            background-size: 100px 100px;
         }
     }
 }
@@ -1441,10 +1442,10 @@ $alert-color: #101010;
 .roof-module-compas{
     margin-bottom: 24px;
     .compas-box-inner{
-        width: 280px;
-        height: 253px;
+        width: 235px;
+        height: 215px;
         .circle{
-            top: 86%;
+            top: 85%;
             // &:nth-child(1),
             // &:nth-child(7),
             // &:nth-child(13),
@@ -1461,7 +1462,7 @@ $alert-color: #101010;
             //     }
             // }
             i{
-                top: 22px;
+                top: 19px;
             }
             &.act{
                 i{color: #8B8B8B;}
@@ -1482,6 +1483,10 @@ $alert-color: #101010;
     .outline-form{
         flex: 1;
     }
+    .non-flex{
+        min-width: 300px;
+        flex: none;
+    }
 }
 
 .module-box-tab{
@@ -2172,31 +2177,46 @@ $alert-color: #101010;
     &.tab2{
         margin-top: 10px;
         gap: 15px;
-        
+        .eaves-keraba-table{
+            margin-top: 0;
+        }
     }
     .module-flex-item{
         flex: 1;
-        .module-flex-item-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #4D4D4D;
-        }
+
         .flex-item-btn-wrap{
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 8px;
-            margin-bottom: 24px;
+            margin-bottom: 10px;
         }
         &.non-flex{
             display: flex;
             flex-direction: column;
             justify-content: flex-start;
             flex: none;
-            padding-top: 27.5px;
-            width: 260px;
+            width: 340px;
         }
+        .flex-item-button{
+            margin-top: 10px;
+            button{
+                width: 100%;
+            }
+        }
+    }
+}
+.module-flex-item-tit-wrap{
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #4D4D4D;
+    .module-flex-item-tit{
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+    }
+    button{
+        margin-left: auto;
     }
 }
 
@@ -2277,4 +2297,129 @@ $alert-color: #101010;
             box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
             }
         }
+}
+
+.roof-module-inner{
+    display: flex;
+    .compas-wrapper{
+        position: relative;
+        flex: none;
+        width: 300px;
+        padding-right: 15px;
+        &:before{
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 10px;
+            width: 1px;
+            height: 100%;
+            background-color: #424242;
+        }
+    }
+    .compas-table-wrap{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+
+        
+    }
+    .compas-table-box{
+        background-color: #3D3D3D;
+        padding: 10px;
+        .outline-form{
+            span{
+                width: auto;
+            }
+        }
+        .compas-grid-table{
+            display: grid;
+            gap: 10px;
+            grid-template-columns: repeat(2, 1fr);
+            .outline-form{
+                span{
+                    width: 65px;
+                    &.thin{
+                        width: 20px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+.module-table-block-wrap{
+    .roof-module-table{
+        &.self{
+            table{
+                table-layout: fixed;
+            }
+        }
+    }
+    .self-table-radio{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.module-area{
+    display: flex;
+    align-items: center;
+    .module-area-title{
+        flex: none;
+        font-size: 12px;
+        color: #fff;
+        font-weight: 500;
+        margin-right: 20px;
+    }
+    .outline-form{
+        flex: 1;
+    }
+}
+
+.placement-name-guide{
+    font-size: 11px;
+    margin-left: 10px;
+    color: #53a7eb;
+    font-weight: 500;
+}
+
+.hexagonal-flex-wrap{
+    display: flex;
+    gap: 10px;
+    .non-flex{
+        flex: none;
+    }
+}
+
+.hexagonal-radio-wrap{
+    padding: 17px 10px;
+}
+
+.hide-check-guide{
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #fff;
+    margin-top: 10px;
+    font-weight: 500;
+    .arr{
+        width: 13px;
+        height: 13px;
+        margin-left: 10px;
+        background: url(../../public/static/images/canvas/hide-check-arr.svg) no-repeat center;
+        background-size: contain;
+        transform: rotate(180deg);
+        &.act{
+            transform: rotate(0deg);
+        }
+    }
+}
+
+.module-table-box{
+    &.hide{
+        overflow: hidden;
+        height: 0;
+    }
 }

src/styles/_reset.scss

@@ -222,15 +222,16 @@ button{
         padding: 0 10px;
         line-height: 28px;
         font-family: 'Noto Sans JP', sans-serif;
-        background-color: transparent;
+        background-color: #353535;
         border: 1px solid #484848;
         color: #fff;
         &.blue{
             background-color: #4C6FBF;
             border: 1px solid #4C6FBF;
             &:hover{
-                background-color: #414E6C;
-                border: 1px solid #414E6C;
+                background-color: #4C6FBF;
+                border: 1px solid #4C6FBF;
+                font-weight: normal;
             }
         }
         &.white{
@@ -241,13 +242,14 @@ button{
                 background-color: #fff;
                 border: 1px solid #fff;
                 color: #101010;
+                font-weight: normal;
             }
         }
         &:hover{
-            font-weight: 400;
-            background-color: transparent;
+            background-color: #353535;
             border: 1px solid #484848;
             color: #fff;
+            font-weight: normal;
         }
     }
     &.self{
@@ -381,7 +383,7 @@ button{
             }
         }
         &::-webkit-scrollbar {
-            width: 2px;
+            width: 5px;
             background-color: transparent;
             
         }

src/styles/_table.scss

@@ -236,6 +236,16 @@ table{
                 .d-check-box{
                     opacity: 0.5;
                 }
+                .color-wrap{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    .color-box{
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 8px;
+                    }
+                }
             }
         }
         tbody{

src/util/canvas-util.js

@@ -348,15 +348,15 @@ export const calculateIntersection = (line1, line2) => {
   }
 
   // Determine the min and max for line1 and line2 for both x and y
-  const line1MinX = Math.min(line1.x1, line1.x2)
-  const line1MaxX = Math.max(line1.x1, line1.x2)
-  const line2MinX = Math.min(line2.x1, line2.x2)
-  const line2MaxX = Math.max(line2.x1, line2.x2)
+  const line1MinX = Math.min(line1.x1, line1.x2) - 5
+  const line1MaxX = Math.max(line1.x1, line1.x2) + 5
+  const line2MinX = Math.min(line2.x1, line2.x2) - 5
+  const line2MaxX = Math.max(line2.x1, line2.x2) + 5
 
-  const line1MinY = Math.min(line1.y1, line1.y2)
-  const line1MaxY = Math.max(line1.y1, line1.y2)
-  const line2MinY = Math.min(line2.y1, line2.y2)
-  const line2MaxY = Math.max(line2.y1, line2.y2)
+  const line1MinY = Math.min(line1.y1, line1.y2) - 5
+  const line1MaxY = Math.max(line1.y1, line1.y2) + 5
+  const line2MinY = Math.min(line2.y1, line2.y2) - 5
+  const line2MaxY = Math.max(line2.y1, line2.y2) + 5
 
   // Check if the intersection X and Y are within the range of both lines
   if (
@@ -518,14 +518,23 @@ export const sortedPointLessEightPoint = (points) => {
  */
 // 직선의 방정식.
 // 방정식은 ax + by + c = 0이며, 점의 좌표를 대입하여 계산된 값은 직선과 점 사이의 관계를 나타낸다.
-export function isPointOnLine(line, point) {
-  const a = line.y2 - line.y1
+export function isPointOnLine({ x1, y1, x2, y2 }, { x, y }) {
+  /*const a = line.y2 - line.y1
   const b = line.x1 - line.x2
   const c = line.x2 * line.y1 - line.x1 * line.y2
   const result = Math.abs(a * point.x + b * point.y + c) / 100
 
   // 점이 선 위에 있는지 확인
-  return result <= 10
+  return result <= 10*/
+  // 직선 방정식 만족 여부 확인
+  const crossProduct = (y - y1) * (x2 - x1) - (x - x1) * (y2 - y1)
+  if (Math.abs(crossProduct) > 5) return false // 작은 오차 허용
+
+  // 점이 선분의 범위 내에 있는지 확인
+  const withinXRange = Math.min(x1, x2) <= x && x <= Math.max(x1, x2)
+  const withinYRange = Math.min(y1, y2) <= y && y <= Math.max(y1, y2)
+
+  return withinXRange && withinYRange
 }
 /**
  * 점과 가까운 line 찾기

src/util/qpolygon-utils.js

@@ -305,6 +305,9 @@ export function removeDuplicatePolygons(polygons) {
 }
 
 export const isSamePoint = (a, b) => {
+  if (!a || !b) {
+    return false
+  }
   return Math.abs(Math.round(a.x) - Math.round(b.x)) <= 2 && Math.abs(Math.round(a.y) - Math.round(b.y)) <= 2
 }
 

startscript.js

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