적설량, 풍속 등 수정했을때 설정한 roof 초기화

# Conflicts:
#	src/components/floor-plan/modal/basic/BasicSetting.jsx
#	src/components/floor-plan/modal/basic/step/Trestle.jsx

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를 비교하여 보여준다
 

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'
@@ -29,11 +34,10 @@ 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 trestleRef = useRef(null)
-  const { initEvent } = useEvent()
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
+  const trestleRef = useRef(null)
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
   const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
   const loginUserState = useRecoilValue(loginUserStore)
@@ -43,6 +47,9 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   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,
@@ -71,8 +78,10 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   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(() => {
@@ -124,7 +133,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
   useEffect(() => {
     if (basicSetting.roofSizeSet !== '3') {
-      manualModuleSetup(placementRef)
+      manualModuleSetup()
     } else {
       manualFlatroofModuleSetup(placementFlatRef)
     }
@@ -163,7 +172,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
         if (!trestleRef.current.isComplete()) {
           Swal.fire({
-            title: getMessage('아직 멀었따'),
+            title: getMessage('construction.length.difference'),
             icon: 'warning',
           })
           return
@@ -183,20 +192,20 @@ 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)
   }
@@ -207,6 +216,9 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
       if (isManualModuleSetup) {
         setIsManualModuleSetup(false)
       }
+      if (isManualModuleLayoutSetup) {
+        setIsManualModuleLayoutSetup(false)
+      }
     }
     setIsClosePopup({ close: true, id: id })
   }
@@ -257,8 +269,39 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   }
   const placementProps = {}
 
+  useEffect(() => {
+    if (basicSetting.roofSizeSet !== '3') {
+      if (manualSetupMode.indexOf('manualSetup') > -1) {
+        manualModuleSetup()
+      } else if (manualSetupMode.indexOf('manualLayoutSetup') > -1) {
+        manualModuleLayoutSetup(layoutSetup)
+      } else if (manualSetupMode.indexOf('off') > -1) {
+        manualModuleSetup()
+        manualModuleLayoutSetup(layoutSetup)
+      }
+    } else {
+      manualFlatroofModuleSetup(placementFlatRef)
+    }
+
+    if (isClosePopup.close) {
+      closePopup(isClosePopup.id)
+    }
+  }, [manualSetupMode, isClosePopup])
+
+  useEffect(() => {
+    if (isManualModuleLayoutSetup) {
+      manualModuleLayoutSetup(layoutSetup)
+    }
+  }, [layoutSetup])
+
+  useEffect(() => {
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode(`off`)
+  }, [checkedModules])
+
   return (
-    <WithDraggable isShow={true} pos={pos} className="ll">
+    <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">
@@ -280,8 +323,9 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
         {tabNum === 1 && <Orientation ref={orientationRef} {...orientationProps} />}
         {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Trestle ref={trestleRef} {...trestleProps} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
-
+          <Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
+        )}
         {/*배치면 초기설정 - 입력방법: 육지붕*/}
         {/* {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && <PitchModule setTabNum={setTabNum} />} */}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
@@ -307,11 +351,13 @@ 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 ${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>
                 </>

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

@@ -66,12 +66,12 @@ export const Orientation = forwardRef((props, ref) => {
   useEffect(() => {
     if (selectedSurfaceType) {
       console.log(roughnessCodes, selectedSurfaceType)
-      setInputRoughness(roughnessCodes.find((code) => code.clCode === moduleSelectionData.common.illuminationTp))
+      setInputRoughness(roughnessCodes.find((code) => code.clCode === managementState?.surfaceTypeValue))
     }
   }, [selectedSurfaceType])
 
   useEffect(() => {
-    if (standardWindSpeed) setInputStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === moduleSelectionData.common.stdWindSpeed))
+    if (standardWindSpeed) setInputStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === managementState?.standardWindSpeedId))
   }, [standardWindSpeed])
 
   useEffect(() => {
@@ -181,11 +181,35 @@ export const Orientation = forwardRef((props, ref) => {
   }
 
   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,
-        raftBaseCd: null,
         trestleMkrCd: null,
         constMthdCd: null,
         constTp: null,
@@ -201,7 +225,6 @@ export const Orientation = forwardRef((props, ref) => {
       }
     })
     setRoofs(newRoofs)
-    setSelectedModules(e)
   }
 
   return (
@@ -359,10 +382,7 @@ export const Orientation = forwardRef((props, ref) => {
                             targetKey={'clCode'}
                             sourceKey={'clCode'}
                             showKey={'clCodeNm'}
-                            onChange={(e) => {
+                            onChange={(e) => handleChangeRoughness(e)}
-                              console.log('🚀 ~ handleChangeModule ~ inputRoughness:', e)
-                              setInputRoughness(e)
-                            }}
                           />
                         )}
                       </div>
@@ -374,7 +394,7 @@ export const Orientation = forwardRef((props, ref) => {
                           type="text"
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => setInputInstallHeight(e.target.value)}
+                          onChange={(e) => handleChangeInstallHeight(e.target.value)}
                         />
                       </div>
                       <span className="thin">m</span>
@@ -390,10 +410,7 @@ export const Orientation = forwardRef((props, ref) => {
                             targetKey={'clCode'}
                             sourceKey={'clCode'}
                             showKey={'clCodeNm'}
-                            onChange={(e) => {
+                            onChange={(e) => handleChangeStandardWindSpeed(e)}
-                              console.log('🚀 ~ handleChangeModule ~ inputStandardWindSpeed:', e)
-                              setInputStandardWindSpeed(e)
-                            }}
                           />
                         )}
                       </div>
@@ -405,7 +422,7 @@ export const Orientation = forwardRef((props, ref) => {
                           type="text"
                           className="input-origin block"
                           value={inputVerticalSnowCover}
-                          onChange={(e) => setInputVerticalSnowCover(e.target.value)}
+                          onChange={(e) => handleChangeVerticalSnowCover(e.target.value)}
                         />
                       </div>
                       <span className="thin">cm</span>

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

@@ -1,29 +1,41 @@
 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 {
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+  checkedModuleState,
+  isManualModuleLayoutSetupState,
+  isManualModuleSetupState,
+  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)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -36,10 +48,17 @@ const Placement = forwardRef((props, refs) => {
       makeModuleInitArea(moduleSelectionData)
     }
 
+    if (moduleSelectionData.module.itemList.length > 1) {
+      setColspan(2)
+    }
+
     return () => {
-      refs.isChidori.current = 'false'
+      // refs.isChidori.current = 'false'
-      refs.setupLocation.current = 'eaves'
+      // refs.setupLocation.current = 'eaves'
       setIsManualModuleSetup(false)
+      setIsManualModuleLayoutSetup(false)
+      setManualSetupMode('off')
+      resetModuleSetupOption()
     }
   }, [])
 
@@ -56,8 +75,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 })))
       }
 
       //모듈 배치면 생성
@@ -82,59 +103,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)
+    setModuleSetupOption({ ...moduleSetupOption, isChidori: bool })
-    refs.isChidori.current = e.target.value
+
+    //변경하면 수동 다 꺼짐
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode('off')
   }
 
   const handleSetupLocation = (e) => {
-    setSetupLocation(e.target.value)
+    setModuleSetupOption({ ...moduleSetupOption, setupLocation: e.target.value })
-    refs.setupLocation.current = e.target.value
-  }
 
-  const handleMaxSetup = (e) => {
+    //변경하면 수동 다 꺼짐
-    if (e.target.checked) {
+    setIsManualModuleSetup(false)
-      setIsMaxSetup('true')
+    setIsManualModuleLayoutSetup(false)
-      refs.isMaxSetup.current = 'true'
+    setManualSetupMode('off')
-    } else {
-      setIsMaxSetup('false')
-      refs.isMaxSetup.current = 'false'
-    }
   }
 
   //체크된 모듈 아이디 추출
-  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) => (
-                    {moduleData.header.map((data) => (
+                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
-                      <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
+                      {data.type === 'check' ? (
-                        {data.type === 'check' ? (
+                        <div className="d-check-box no-text pop">
-                          <div className="d-check-box no-text pop">
+                          <input type="checkbox" id="ch01" disabled />
-                            <input type="checkbox" id="ch01" disabled />
+                          <label htmlFor="ch01"></label>
-                            <label htmlFor="ch01"></label>
+                        </div>
-                          </div>
+                      ) : (
-                        ) : (
+                        data.name
-                          data.name
+                      )}
-                        )}
+                    </th>
-                      </th>
+                  ))}
-                    ))}
-                  </tr>
                 </thead>
                 <tbody>
                   {selectedModules.itemList &&
@@ -147,7 +184,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>
@@ -158,93 +195,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="roof-module-table">
-            <div className="module-self-table">
+              <table>
-              <div className="self-table-item">
+                <thead>
-                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</div>
+                  <tr>
-                <div className="self-item-td">
+                    <th>{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</th>
-                  <div className="pop-form-radio">
+                    <th>{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</th>
-                    <div className="d-check-radio pop">
+                  </tr>
-                      <input
+                </thead>
-                        type="radio"
+                <tbody>
-                        name="radio01"
+                  <tr>
-                        id="ra01"
+                    <td>
-                        checked={isChidori}
+                      <div className="hexagonal-radio-wrap">
-                        disabled={isChidoriNotAble}
+                        <div className="d-check-radio pop mb10">
-                        value={'true'}
+                          <input
-                        onChange={(e) => handleChangeChidori(e)}
+                            type="radio"
-                      />
+                            name="radio02"
-                      <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
+                            id="ra03"
-                    </div>
+                            checked={moduleSetupOption.isChidori}
-                    <div className="d-check-radio pop">
+                            disabled={isChidoriNotAble}
-                      <input type="radio" name="radio02" id="ra02" checked={!isChidori} value={'false'} onChange={(e) => handleChangeChidori(e)} />
+                            value={'true'}
-                      <label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
+                            onChange={(e) => handleChangeChidori(e)}
-                    </div>
+                          />
-                  </div>
+                          <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
-                </div>
+                        </div>
-              </div>
+                        <div className="d-check-radio pop">
-              <div className="self-table-item">
+                          <input
-                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div>
+                            type="radio"
-                <div className="self-item-td">
+                            name="radio02"
-                  <div className="pop-form-radio">
+                            id="ra04"
-                    <div className="d-check-radio pop">
+                            checked={!moduleSetupOption.isChidori}
-                      <input
+                            value={'false'}
-                        type="radio"
+                            onChange={(e) => handleChangeChidori(e)}
-                        name="radio03"
+                          />
-                        id="ra03"
+                          <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
-                        checked={setupLocation === 'center'}
+                        </div>
-                        value={'center'}
+                      </div>
-                        onChange={handleSetupLocation}
+                    </td>
-                        disabled={isMultiModule}
+                    <td>
-                      />
+                      <div className="hexagonal-radio-wrap">
-                      <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.center')}</label>
+                        <div className="d-check-radio pop mb10">
-                    </div>
+                          <input
-                    <div className="d-check-radio pop">
+                            type="radio"
-                      <input
+                            name="radio03"
-                        type="radio"
+                            id="ra05"
-                        name="radio04"
+                            checked={moduleSetupOption.setupLocation === 'eaves'}
-                        id="ra04"
+                            value={'eaves'}
-                        checked={setupLocation === 'eaves'}
+                            onChange={handleSetupLocation}
-                        value={'eaves'}
+                          />
-                        onChange={handleSetupLocation}
+                          <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
-                      />
+                        </div>
-                      <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
+                        <div className="d-check-radio pop">
-                    </div>
+                          <input
-                    <div className="d-check-radio pop">
+                            type="radio"
-                      <input
+                            name="radio03"
-                        type="radio"
+                            id="ra06"
-                        name="radio05"
+                            checked={moduleSetupOption.setupLocation === 'ridge'}
-                        id="ra05"
+                            value={'ridge'}
-                        checked={setupLocation === 'ridge'}
+                            onChange={handleSetupLocation}
-                        value={'ridge'}
+                            disabled={isMultiModule}
-                        onChange={handleSetupLocation}
+                          />
-                        disabled={isMultiModule}
+                          <label htmlFor="ra06">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
-                      />
+                        </div>
-                      <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
+                      </div>
-                    </div>
+                    </td>
-                  </div>
+                  </tr>
-                </div>
+                </tbody>
-              </div>
+              </table>
-            </div>
-            <div className="self-table-flx">
-              {/* <div className="d-check-box pop">
-                <input type="checkbox" id="ch04" checked={isMaxSetup === 'true'} value={'true'} onChange={handleMaxSetup} />
-                <label htmlFor="ch04">{getMessage('modal.module.basic.setting.module.placement.maximum')}</label>
-              </div> */}
             </div>
           </div>
         </div>
       </div>
+      <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) => (
+                  <tr>
+                    <td>
+                      <div className="color-wrap">
+                        <span className="color-box" style={{ backgroundColor: roofOutlineColor(item.roofIndex) }}></span>
+                        <span className="name">{item.addRoof.roofMatlNmJp}</span>
+                      </div>
+                    </td>
+                    {selectedModules.itemList.map((item) => (
+                      <>
+                        <td className="al-c">7</td>
+                        {colspan > 1 && <td className="al-c">5</td>}
+                      </>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </>
   )
 })

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

@@ -172,7 +172,6 @@ const Trestle = forwardRef((props, ref) => {
           snowGdPossYn,
           cvrChecked,
           snowGdChecked,
-          trestleDetail,
         }
       }
       return { ...roof }

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/locales/ja.json

@@ -1046,6 +1046,7 @@
   "outerLine.property.fix": "外壁線の属性設定 を完了しますか？",
   "outerLine.property.close": "外壁線の属性設定 を終了しますか？",
   "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": "屋根形状がありません",
@@ -1053,5 +1054,11 @@
   "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)"
+  "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

@@ -1047,6 +1047,7 @@
   "outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?",
   "outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?",
   "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": "지붕형상이 없습니다.",
@@ -1054,5 +1055,11 @@
   "chidory.can.not.install": "치조 불가 공법입니다.",
   "module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다.",
   "module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다.",
-  "roofAllocation.not.found": "할당할 지붕이 없습니다."
+  "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,21 @@ 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: '',
+})