Merge branch 'dev' into feature/yj-layoutSetup

# Conflicts:
#	src/components/floor-plan/modal/basic/BasicSetting.jsx
#	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.
+
+test

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/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'
@@ -1883,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) {
@@ -1904,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/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/modal/basic/BasicSetting.jsx

@@ -27,36 +27,135 @@ 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 orientationRef = useRef(null)
-  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  const trestleRef = useRef(null)
-  const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
+  const { initEvent } = useEvent()
 
-  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
+  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
-  const addedRoofs = useRecoilValue(addedRoofsState)
+  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 [manualSetupMode, setManualSetupMode] = useRecoilState(toggleManualSetupModeState)
-
   const [layoutSetup, setLayoutSetup] = useState([{}])
+  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
+
+  const [roofs, setRoofs] = useState(null)
+  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, 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(placementRef)
+    } 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)) {
@@ -67,22 +166,22 @@ 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'),
+            title: getMessage('아직 멀었따'),
             icon: 'warning',
           })
           return
         }
         //물건정보 갱신일 수정
-        updateObjectDataApi({
-          objectNo: currentCanvasPlan.objectNo, //오브젝트_no
-          standardWindSpeedId: moduleSelectionData.common.stdWindSpeed, //기준풍속코드
-          verticalSnowCover: moduleSelectionData.common.stdSnowLd, //적설량
-          surfaceType: moduleSelectionData.common.illuminationTpNm, //면조도구분
-          installHeight: moduleSelectionData.common.instHt, //설치높이
-          userId: loginUserState.userId, //작성자아아디
-        })
       } else {
         if (!isObjectNotEmpty(moduleSelectionData.module)) {
           Swal.fire({
@@ -115,18 +214,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     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) {
@@ -140,6 +227,52 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     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') {
       if (manualSetupMode.indexOf('manualSetup') > -1) {
@@ -178,24 +311,34 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
         <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>
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
-          <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
+            <>
-          <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+              <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 === 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 && <PitchModule setTabNum={setTabNum} />} */}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
+        {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')}
@@ -212,6 +355,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
             <>
               {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>
@@ -225,6 +369,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
               )}
               {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 === moduleSelectionData.common.illuminationTp))
+    }
+  }, [selectedSurfaceType])
+
+  useEffect(() => {
+    if (standardWindSpeed) setInputStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === moduleSelectionData.common.stdWindSpeed))
+  }, [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()
+    if (isComplete()) {
-    canvasPopupStatusTrigger(compasDeg)
+      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,256 @@ 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) => {
+    const newRoofs = addedRoofs.map((roof) => {
+      return {
+        ...roof,
+        lengthBase: null,
+        raftBaseCd: 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)
+    setSelectedModules(e)
+  }
+
   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-inner">
-          <div className="roof-module-compas">
+            <div className="compas-wrapper">
-            <div className="compas-box">
+              <div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
-              <div className="compas-box-inner">
+              <div className="roof-module-compas">
-                {Array.from({ length: 180 / 15 }).map((dot, index) => (
+                <div className="compas-box">
-                  <div
+                  <div className="compas-box-inner">
-                    key={index}
+                    {Array.from({ length: 180 / 15 }).map((dot, index) => (
-                    className={`circle ${getDegreeInOrientation(compasDeg) === -1 * (-15 * index + 180) || (index === 0 && compasDeg >= 172 && index === 0 && compasDeg <= 180) || (compasDeg === -180 && index === 0) ? 'act' : ''}`}
+                      <div
-                    onClick={() => {
+                        key={index}
-                      if (index === 0) {
+                        className={`circle ${getDegreeInOrientation(inputCompasDeg) === -1 * (-15 * index + 180) || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
-                        setCompasDeg(180)
+                        onClick={() => {
-                        return
+                          if (index === 0) {
-                      }
+                            setInputCompasDeg(180)
-                      setCompasDeg(-1 * (-15 * index + 180))
+                            return
-                    }}
+                          }
-                  >
+                          setInputCompasDeg(-1 * (-15 * index + 180))
-                    {index === 0 && <i>180°</i>}
+                        }}
-                    {index === 6 && <i>-90°</i>}
+                      >
+                        {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>
-                ))}
+                </div>
-                {Array.from({ length: 180 / 15 }).map((dot, index) => (
+              </div>
-                  <div
+              <div className="center-wrap">
-                    key={index}
+                <div className="outline-form">
-                    className={`circle ${compasDeg !== 180 && getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
+                  <div className="d-check-box pop mr10">
-                    onClick={() => setCompasDeg(15 * index)}
+                    <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
-                  >
+                    <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
-                    {index === 0 && <i>0°</i>}
-                    {index === 6 && <i>90°</i>}
                   </div>
-                ))}
+                  <div className="input-grid mr10" style={{ width: '60px' }}>
-                <div className="compas">
+                    <input
-                  <div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(compasDeg)}deg)` }}></div>
+                      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="compas-table-wrap">
-          <div className="center-wrap">
+              <div className="compas-table-box mb10">
-            <div className="d-check-box pop">
+                <div className="outline-form mb10">
-              <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
+                  <span>{getMessage('modal.module.basic.setting.module.setting')}</span>
-              <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
+                  <div className="grid-select">
-            </div>
+                    {moduleList && (
-            <div className="outline-form">
+                      <QSelectBox
-              <div className="input-grid mr10" style={{ width: '160px' }}>
+                        options={moduleList}
-                <input
+                        value={moduleSelectionInitParams}
-                  type="text"
+                        targetKey={'moduleItemId'}
-                  className="input-origin block"
+                        sourceKey={'itemId'}
-                  value={compasDeg}
+                        showKey={'itemNm'}
-                  readOnly={!hasAnglePassivity}
+                        onChange={(e) => handleChangeModule(e)}
-                  placeholder={0}
+                      />
-                  onChange={
+                    )}
-                    (e) => checkDegree(e.target.value)
+                  </div>
-                    // setCompasDeg(
+                </div>
-
+                <div className="roof-module-table">
-                    // e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
+                  <table>
-                    //   ? e.target.value
+                    <thead>
-                    //   : 0,
+                      <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: 2 }).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) => {
+                              console.log('🚀 ~ handleChangeModule ~ inputRoughness:', e)
+                              setInputRoughness(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) => setInputInstallHeight(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) => {
+                              console.log('🚀 ~ handleChangeModule ~ inputStandardWindSpeed:', e)
+                              setInputStandardWindSpeed(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) => setInputVerticalSnowCover(e.target.value)}
+                        />
+                      </div>
+                      <span className="thin">cm</span>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>

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

@@ -0,0 +1,532 @@
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import QSelectBox from '@/components/common/select/QSelectBox'
+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,
+    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)
+
+  useEffect(() => {
+    if (roofs && !selectedRoof) {
+      setSelectedRoof(roofs[0])
+    }
+  }, [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,
+        }
+      }
+      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,
+        roofConstruction: {
+          ...newAddedRoofs,
+        },
+      })
+      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/placementShape/PlacementShapeSetting.jsx

@@ -46,7 +46,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   const { setSurfaceShapePattern } = useRoofFn()
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
-  const { saveCanvas } = usePlan()
 
   const roofRef = {
     roofCd: useRef(null),
@@ -55,7 +54,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     rafter: useRef(null),
     hajebichi: useRef(null),
   }
-
+  const { saveCanvas } = usePlan()
   /**
    * 치수 입력방법(복시도입력/실측값입력/육지붕)
    */
@@ -263,8 +262,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     <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>

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 setCompasDeg = useSetRecoilState(compasDegAtom)
-  const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
+  const setModuleSelectionDataStore = useSetRecoilState(moduleSelectionDataState)
-  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
+  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/module/useModule.js

@@ -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/useModuleSelection.js

@@ -19,9 +19,9 @@ export function useModuleSelection(props) {
   const [moduleList, setModuleList] = useState([{}]) //모듈 목록
 
   const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
-  const [installHeight, setInstallHeight] = useState() //설치 높이
+  const [installHeight, setInstallHeight] = useState(managementState?.installHeight) //설치 높이
-  const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
+  const [standardWindSpeed, setStandardWindSpeed] = useState() //기준풍속
-  const [verticalSnowCover, setVerticalSnowCover] = 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/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/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": "伏図入力",
@@ -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.eaves": "軒の側",
-  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟側",
+  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "龍丸側",
   "modal.module.basic.setting.module.placement.maximum": "最大配置",
   "modal.module.basic.setting.pitch.module.placement.standard.setting": "配置基準設定",
   "modal.module.basic.setting.pitch.module.placement.standard.setting.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": "架台配置",
@@ -594,7 +604,6 @@
   "myinfo.message.password.error": "パスワードが間違っています。",
   "login": "ログイン",
   "login.auto.page.text": "自動ログイン中です。",
-  "login.fail": "アカウントが存在しないか、パスワードが間違っています。",
   "login.id.save": "ID保存",
   "login.id.placeholder": "IDを入力してください。",
   "login.password.placeholder": "パスワードを入力してください。",

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.eaves": "처마쪽",
-  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "용마루",
+  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "용마루쪽",
   "modal.module.basic.setting.module.placement.maximum": "최대배치",
   "modal.module.basic.setting.pitch.module.placement.standard.setting": "배치기준 설정",
   "modal.module.basic.setting.pitch.module.placement.standard.setting.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": "회로설정",

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/_modal.scss

@@ -279,10 +279,11 @@ $alert-color: #101010;
         border-bottom: 1px solid #424242;
     }
 }
-.grid-check-form-block{
+.grid-check-form-flex{
-    display: block;
+    display: flex;
-    > div{
+    gap: 10px;
-        margin-bottom: 10px;
+    .d-check-box{
+        flex: 1;
     }
 }
 .grid-option-overflow{
@@ -1313,13 +1314,13 @@ $alert-color: #101010;
     
     .circle {
         position: absolute;
-        width: 12px;
+        width: 10px;
-        height: 12px;
+        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;
+                width: 4px;
-                height: 5px;
+                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;
+        width: 121px;
-        height: 148px;
+        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;
+        width: 235px;
-        height: 253px;
+        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: 340px;
-            width: 260px;
         }
+        .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;
     }
 }
 
@@ -2278,3 +2298,128 @@ $alert-color: #101010;
             }
         }
 }
+
+.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;
+                background-color: #4C6FBF;
-                border: 1px solid #414E6C;
+                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: #353535;
-            background-color: transparent;
             border: 1px solid #484848;
             color: #fff;
+            font-weight: normal;
         }
     }
     &.self{

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{