단수배치 작업

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

@@ -97,13 +97,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     setTabNum(tabNum + 1)
   }
 
-  const placementRef = {
-    isChidori: useRef('false'),
-    setupLocation: useRef('eaves'),
-  }
-
-  const layoutSetupRef = useRef([])
-
   const placementFlatRef = {
     setupLocation: useRef('south'),
   }
@@ -149,16 +142,18 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
   useEffect(() => {
     if (basicSetting.roofSizeSet !== '3') {
-      console.log('ManualSetupMode', manualSetupMode)
-
       if (manualSetupMode.indexOf('manualSetup') > -1) {
-        manualModuleSetup(placementRef)
+        manualModuleSetup()
       } else if (manualSetupMode.indexOf('manualLayoutSetup') > -1) {
-        manualModuleLayoutSetup(layoutSetupRef)
+        manualModuleLayoutSetup(layoutSetup)
+      } else if (manualSetupMode.indexOf('off') > -1) {
+        manualModuleSetup()
+        manualModuleLayoutSetup(layoutSetup)
       }
     } else {
       manualFlatroofModuleSetup(placementFlatRef)
     }
+
     if (isClosePopup.close) {
       closePopup(isClosePopup.id)
     }
@@ -166,12 +161,13 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
   useEffect(() => {
     if (isManualModuleLayoutSetup) {
-      manualModuleLayoutSetup(layoutSetupRef)
+      manualModuleLayoutSetup(layoutSetup)
     }
   }, [layoutSetup])
 
   useEffect(() => {
     setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
   }, [checkedModules])
 
   return (
@@ -189,13 +185,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
         {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
-          <Placement
+          <Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
-            setTabNum={setTabNum}
-            ref={placementRef}
-            layoutSetupRef={layoutSetupRef}
-            layoutSetup={layoutSetup}
-            setLayoutSetup={setLayoutSetup}
-          />
         )}
 
         {/*배치면 초기설정 - 입력방법: 육지붕*/}
@@ -227,7 +217,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                   <button className={`btn-frame modal mr5 ${isManualModuleLayoutSetup ? 'act' : ''}`} onClick={handleManualModuleLayoutSetup}>
                     레아이웃 수동설치
                   </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/Placement.jsx

@@ -3,10 +3,9 @@ import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import {
   checkedModuleState,
-  currentCanvasPlanState,
   isManualModuleLayoutSetupState,
   isManualModuleSetupState,
-  isModuleChidoriSetupState,
+  moduleSetupOptionState,
   toggleManualSetupModeState,
 } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
@@ -15,13 +14,10 @@ import { isObjectNotEmpty } from '@/util/common-utils'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
-  const [isChidori, setIsChidori] = useRecoilState(isModuleChidoriSetupState)
+
   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)
@@ -35,6 +31,8 @@ const Placement = forwardRef((props, refs) => {
   const setIsManualModuleLayoutSetup = useSetRecoilState(isManualModuleLayoutSetupState)
   const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
 
+  const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션
+
   //모듈 배치면 생성
   useEffect(() => {
     if (moduleSelectionData) {
@@ -49,7 +47,7 @@ const Placement = forwardRef((props, refs) => {
     return () => {
       setIsManualModuleSetup(false)
       setIsManualModuleLayoutSetup(false)
-      setManualSetupMode('')
+      setManualSetupMode('off')
     }
   }, [])
 
@@ -69,11 +67,6 @@ const Placement = forwardRef((props, refs) => {
         setSelectedItems(initCheckedModule)
         setSelectedModules(moduleSelectionData.module)
         props.setLayoutSetup(moduleSelectionData.module.itemList.map((item) => ({ moduleId: item.itemId, col: 0, row: 0 })))
-        props.layoutSetupRef.current = moduleSelectionData.module.itemList.map((item) => ({
-          moduleId: item.itemId,
-          col: 0,
-          row: 0,
-        }))
       }
 
       //모듈 배치면 생성
@@ -105,13 +98,21 @@ const Placement = forwardRef((props, refs) => {
 
   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
+
+    //변경하면 수동 다 꺼짐
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode('off')
   }
 
   //체크된 모듈 아이디 추출
@@ -123,11 +124,6 @@ const Placement = forwardRef((props, refs) => {
     const newLayoutSetup = [...props.layoutSetup]
     newLayoutSetup[index] = { ...newLayoutSetup[index], moduleId: itemId, [e.target.name]: Number(e.target.value) }
     props.setLayoutSetup(newLayoutSetup)
-    props.layoutSetupRef.current[index] = {
-      ...props.layoutSetupRef.current[index],
-      moduleId: itemId,
-      [e.target.name]: Number(e.target.value),
-    }
   }
 
   return (
@@ -214,7 +210,7 @@ const Placement = forwardRef((props, refs) => {
                         type="radio"
                         name="radio01"
                         id="ra01"
-                        checked={isChidori}
+                        checked={moduleSetupOption.isChidori}
                         disabled={isChidoriNotAble}
                         value={'true'}
                         onChange={(e) => handleChangeChidori(e)}
@@ -222,7 +218,14 @@ const Placement = forwardRef((props, refs) => {
                       <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
                     </div>
                     <div className="d-check-radio pop">
-                      <input type="radio" name="radio02" id="ra02" checked={!isChidori} value={'false'} onChange={(e) => handleChangeChidori(e)} />
+                      <input
+                        type="radio"
+                        name="radio02"
+                        id="ra02"
+                        checked={!moduleSetupOption.isChidori}
+                        value={'false'}
+                        onChange={(e) => handleChangeChidori(e)}
+                      />
                       <label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
                     </div>
                   </div>
@@ -232,24 +235,12 @@ const Placement = forwardRef((props, refs) => {
                 <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div>
                 <div className="self-item-td">
                   <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio03"
-                        id="ra03"
-                        checked={setupLocation === 'center'}
-                        value={'center'}
-                        onChange={handleSetupLocation}
-                        disabled={isMultiModule}
-                      />
-                      <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.center')}</label>
-                    </div>
                     <div className="d-check-radio pop">
                       <input
                         type="radio"
                         name="radio04"
                         id="ra04"
-                        checked={setupLocation === 'eaves'}
+                        checked={moduleSetupOption.setupLocation === 'eaves'}
                         value={'eaves'}
                         onChange={handleSetupLocation}
                       />
@@ -260,7 +251,7 @@ const Placement = forwardRef((props, refs) => {
                         type="radio"
                         name="radio05"
                         id="ra05"
-                        checked={setupLocation === 'ridge'}
+                        checked={moduleSetupOption.setupLocation === 'ridge'}
                         value={'ridge'}
                         onChange={handleSetupLocation}
                         disabled={isMultiModule}

src/store/canvasAtom.js

@@ -390,9 +390,12 @@ export const isManualModuleLayoutSetupState = atom({
   default: false,
 })
 
-export const isModuleChidoriSetupState = atom({
+export const moduleSetupOptionState = atom({
-  key: 'isModuleChidoriSetupState',
+  key: 'moduleSetupOptionState',
-  default: false,
+  default: {
+    isChidori: false, //치조 안함
+    setupLocation: 'eaves', //처마
+  },
 })
 
 export const toggleManualSetupModeState = atom({