육지붕 작업

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

@@ -20,7 +20,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const orientationRef = useRef(null)
   const { initEvent } = useEvent()
   // const { initEvent } = useContext(EventContext)
-  const { makeModuleInstArea, manualModuleSetup, autoModuleSetup } = useModuleBasicSetting()
+  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting()
   const handleBtnNextStep = () => {
     if (tabNum === 1) {
       orientationRef.current.handleNextStep()
@@ -28,20 +28,16 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     setTabNum(tabNum + 1)
   }
 
-  useEffect(() => {
-    makeModuleInstArea() //기붕 모듈설치면 생성
-
-    return () => {
-      initEvent() //모듈설치면 선택 이벤트 삭제
-    }
-  }, [])
-
   const placementRef = {
     isChidori: useRef('false'),
     setupLocation: useRef('center'),
     isMaxSetup: useRef('false'),
   }
 
+  const placementFlatRef = {
+    setupLocation: useRef('south'),
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lx-2`}>
@@ -66,7 +62,9 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
           {/*배치면 초기설정 - 입력방법: 육지붕*/}
           {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && <PitchPlacement setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && (
+            <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
+          )}
 
           <div className="grid-btn-wrap">
             {tabNum !== 1 && (
@@ -80,7 +78,10 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                 Next
               </button>
             )}
+
             {tabNum === 3 && (
+              <>
+                {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && (
                   <>
                     <button className="btn-frame modal mr5" onClick={manualModuleSetup}>
                       {getMessage('modal.module.basic.setting.passivity.placement')}
@@ -90,6 +91,18 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                     </button>
                   </>
                 )}
+                {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet === 3 && (
+                  <>
+                    <button className="btn-frame modal mr5" onClick={manualFlatroofModuleSetup}>
+                      {getMessage('modal.module.basic.setting.passivity.placement')}
+                    </button>
+                    <button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
+                      {getMessage('modal.module.basic.setting.auto.placement')}
+                    </button>
+                  </>
+                )}
+              </>
+            )}
           </div>
         </div>
       </div>

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

@@ -1,5 +1,6 @@
+import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { forwardRef, useState } from 'react'
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
@@ -7,6 +8,12 @@ const Placement = forwardRef((props, refs) => {
   const [setupLocation, setSetupLocation] = useState('center')
   const [isMaxSetup, setIsMaxSetup] = useState('false')
 
+  const { makeModuleInstArea } = useModuleBasicSetting()
+
+  useEffect(() => {
+    makeModuleInstArea()
+  }, [])
+
   const moduleData = {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },

src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx

@@ -1,7 +1,16 @@
+import { forwardRef, useState, useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 
-export default function PitchPlacement() {
+const PitchPlacement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
+  const [setupLocation, setSetupLocation] = useState('south')
+  const { makeModuleInstArea } = useModuleBasicSetting()
+
+  useEffect(() => {
+    makeModuleInstArea()
+  }, [])
+
   const moduleData = {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },
@@ -24,6 +33,12 @@ export default function PitchPlacement() {
       },
     ],
   }
+
+  const handleSetupLocation = (e) => {
+    setSetupLocation(e.target.value)
+    refs.setupLocation.current = e.target.value
+  }
+
   return (
     <>
       <div className="module-table-box mb10">
@@ -88,11 +103,26 @@ export default function PitchPlacement() {
             <div className="hexagonal-item">
               <div className="pop-form-radio">
                 <div className="d-check-radio pop">
-                  <input type="radio" name="radio01" id="ra01" />
+                  <input
+                    type="radio"
+                    name="radio01"
+                    id="ra01"
+                    value={'south'}
+                    checked={setupLocation === 'south'}
+                    defaultChecked
+                    onChange={handleSetupLocation}
+                  />
                   <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
                 </div>
                 <div className="d-check-radio pop">
-                  <input type="radio" name="radio01" id="ra02" />
+                  <input
+                    type="radio"
+                    name="radio01"
+                    id="ra02"
+                    value={'excreta'}
+                    checked={setupLocation === 'excreta'}
+                    onChange={handleSetupLocation}
+                  />
                   <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
                 </div>
               </div>
@@ -102,4 +132,6 @@ export default function PitchPlacement() {
       </div>
     </>
   )
-}
+})
+
+export default PitchPlacement