지붕면 할당 작업중

src/components/floor-plan/CanvasMenu.jsx

@@ -51,8 +51,8 @@ export default function CanvasMenu(props) {
   const canvasMenus = useRecoilValue(menusState)
   const [type, setType] = useRecoilState(menuTypeState)
   const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
-  const [setAppMessageState] = useRecoilState(appMessageStore)
-  const [setCurrentMenu] = useRecoilState(currentMenuState)
+  const setAppMessageState = useSetRecoilState(appMessageStore)
+  const setCurrentMenu = useSetRecoilState(currentMenuState)
   const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
   const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
   const canvasSetting = useRecoilValue(canvasSettingState)
@@ -116,13 +116,6 @@ export default function CanvasMenu(props) {
     if (pathname !== '/floor-plan') router.push('/floor-plan')
   }
 
-  useEffect(() => {
-    console.log('addedRoofs', addedRoofs)
-  }, [addedRoofs])
-  useEffect(() => {
-    console.log('selectedRoofMaterial', selectedRoofMaterial)
-  }, [selectedRoofMaterial])
-
   const changeSelectedRoofMaterial = (e) => {
     setBasicSetting({ ...basicSetting, selectedRoofMaterial: e })
   }

src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx

@@ -28,6 +28,7 @@ export default function ContextRoofAllocationSetting(props) {
     handleChangeRaft,
     handleChangeLayout,
     handleSaveContext,
+    currentRoofList,
   } = useRoofAllocationSetting(id)
 
   const { findCommonCode } = useCommonCode()
@@ -39,7 +40,7 @@ export default function ContextRoofAllocationSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ml mount`}>
+      <div className={`modal-pop-wrap lr mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -53,10 +54,14 @@ export default function ContextRoofAllocationSetting(props) {
             <div className="grid-select">
               <QSelectBox
                 options={roofMaterials}
+                value={roofMaterials[0]}
                 onChange={(e) => {
-                  const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
-                  setCurrentRoofMaterial(selected)
+                  // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
+                  setCurrentRoofMaterial(e)
                 }}
+                showKey={'roofMatlNm'}
+                sourceKey={'roofMatlCd'}
+                targetKey={'roofMatlCd'}
               />
             </div>
             <button
@@ -70,7 +75,7 @@ export default function ContextRoofAllocationSetting(props) {
             </button>
           </div>
           <div className="grid-option-wrap">
-            {roofList.map((roof, index) => {
+            {currentRoofList.map((roof, index) => {
               return (
                 <div className="grid-option-box" key={index}>
                   <div className="d-check-radio pop no-text">
@@ -88,78 +93,74 @@ export default function ContextRoofAllocationSetting(props) {
                         <div className="grid-select" style={{ width: '248px' }}>
                           <QSelectBox
                             options={roofMaterials}
-                            value={roofMaterials.find((r) => r.id === roof.id)}
+                            value={roof}
+                            showKey={'roofMatlNm'}
+                            sourceKey={'roofMatlCd'}
+                            targetKey={'roofMatlCd'}
                             onChange={(e) => handleChangeRoofMaterial(e, index)}
                           />
                         </div>
-                        {index === 0 && <span className="dec">基本屋根材</span>}
+                        {index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
                         {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
                       </div>
                     </div>
-                    <div className="block-box">
-                      {roof.widAuth && (
-                        <div className="flex-ment">
-                          <span>W</span>
-                          <div className="input-grid" style={{ width: '100px' }}>
-                            <input type="text" className="input-origin block" defaultValue={roof.width} readOnly />
+                    {(roof.widAuth || roof.lenAuth) && (
+                      <div className="block-box">
+                        {roof.widAuth && (
+                          <div className="flex-ment">
+                            <span>W</span>
+                            <div className="input-grid" style={{ width: '100px' }}>
+                              <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
+                            </div>
                           </div>
-                          {/* <div className="select-wrap" style={{ width: '84px' }}>
-                            <select className="select-light dark" name="" id="">
-                              <option>265</option>
-                            </select>
-                          </div> */}
-                        </div>
-                      )}
-                      {roof.lenAuth && (
-                        <div className="flex-ment">
-                          <span>L</span>
-                          <div className="input-grid" style={{ width: '100px' }}>
-                            <input type="text" className="input-origin block" defaultValue={roof.length} readOnly />
+                        )}
+                        {roof.lenAuth && (
+                          <div className="flex-ment">
+                            <span>L</span>
+                            <div className="input-grid" style={{ width: '100px' }}>
+                              <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
+                            </div>
                           </div>
-                          {/* <div className="select-wrap" style={{ width: '84px' }}>
-                            <select className="select-light dark" name="" id="">
-                              <option>235</option>
-                            </select>
-                          </div> */}
-                        </div>
-                      )}
-                      {roof.raftAuth && (
-                        <div className="flex-ment">
-                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                          <div className="grid-select" style={{ width: '84px' }}>
-                            {raftCodes.length > 0 && (
-                              <QSelectBox
-                                options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
-                                onChange={(e) => handleChangeRaft(e, index)}
-                                value={raftCodes.find((r) => r.value === roof.raft)}
-                              />
-                            )}
-                            {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
-                              {raftCodes.map((raft, index) => {
-                                return (
-                                  <option key={index} value={raft.clCode}>
-                                    {raft.clCodeNm}
-                                  </option>
-                                )
-                              })}
-                            </select> */}
+                        )}
+                      </div>
+                    )}
+                    {(roof.raftAuth || roof.roofPchAuth) && (
+                      <div className="block-box">
+                        {roof.raftAuth && (
+                          <div className="block-box">
+                            <div className="flex-ment">
+                              <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                              {raftCodes.length > 0 && (
+                                <div className="grid-select" style={{ width: '160px' }}>
+                                  <QSelectBox
+                                    options={raftCodes}
+                                    value={roof}
+                                    showKey={'clCodeNm'}
+                                    sourceKey={'clCode'}
+                                    targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
+                                  />
+                                </div>
+                              )}
+                            </div>
                           </div>
-                        </div>
-                      )}
-                      {roof.roofPchAuth && (
-                        <div className="flex-ment">
-                          <span>{getMessage('hajebichi')}</span>
-                          <div className="input-grid" style={{ width: '84px' }}>
-                            <input type="text" className="input-origin block" value={parseInt(roof.hajebichi)} readOnly={roof.roofPchAuth === 'R'} />
+                        )}
+                        {roof.roofPchAuth && (
+                          <div className="block-box">
+                            <div className="flex-ment">
+                              <span>{getMessage('hajebichi')}</span>
+                              <div className="input-grid" style={{ width: '84px' }}>
+                                <input
+                                  type="text"
+                                  className="input-origin block"
+                                  value={parseInt(roof.hajebichi)}
+                                  readOnly={roof.roofPchAuth === 'R'}
+                                />
+                              </div>
+                            </div>
                           </div>
-                          {/* <div className="grid-select no-flx" style={{ width: '84px' }}>
-                            <select className="select-light dark" name="" id="">
-                              <option>265</option>
-                            </select>
-                          </div> */}
-                        </div>
-                      )}
-                    </div>
+                        )}
+                      </div>
+                    )}
                     <div className="block-box">
                       <div className="icon-btn-wrap">
                         <button

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -27,6 +27,7 @@ export default function RoofAllocationSetting(props) {
     handleChangeRoofMaterial,
     handleChangeRaft,
     handleChangeLayout,
+    currentRoofList,
   } = useRoofAllocationSetting(id)
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
@@ -73,7 +74,7 @@ export default function RoofAllocationSetting(props) {
             </button>
           </div>
           <div className="grid-option-wrap">
-            {roofList.map((roof, index) => {
+            {currentRoofList.map((roof, index) => {
               return (
                 <div className="grid-option-box" key={index}>
                   <div className="d-check-radio pop no-text">

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -13,6 +13,7 @@ import useMenu from '@/hooks/common/useMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { menuTypeState } from '@/store/menuAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(id) {
@@ -32,7 +33,7 @@ export function useRoofAllocationSetting(id) {
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
   const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열
   const [editingLines, setEditingLines] = useState([])
-  const isFirstRef = useRef(0)
+  const [currentRoofList, setCurrentRoofList] = useState(roofList)
 
   const { setSurfaceShapePattern } = useRoofFn()
 
@@ -76,20 +77,25 @@ export function useRoofAllocationSetting(id) {
   }, [])
 
   const onAddRoofMaterial = () => {
-    if (roofList.length >= 4) {
+    if (currentRoofList.length >= 4) {
       swalFire({ type: 'alert', icon: 'error', text: getMessage('지붕재는 4개까지 선택 가능합니다.') })
       return
     }
-    setRoofList([...roofList, { ...currentRoofMaterial, selected: false, id: currentRoofMaterial.roofMatlCd, name: currentRoofMaterial.roofMatlNm }])
+    setCurrentRoofList([
+      ...currentRoofList,
+      { ...currentRoofMaterial, selected: false, id: currentRoofMaterial.roofMatlCd, name: currentRoofMaterial.roofMatlNm },
+    ])
   }
 
   const onDeleteRoofMaterial = (idx) => {
-    setRoofList([...roofList.filter((_, index) => index !== idx)])
+    const isSelected = currentRoofList[idx].selected
+    const newRoofList = [...currentRoofList].filter((_, index) => index !== idx)
+    if (isSelected) {
+      newRoofList[0].selected = true
+    }
+    setCurrentRoofList(newRoofList)
   }
 
-  const { handleMenu } = useMenu()
-  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
-
   // 선택한 지붕재로 할당
   const handleSave = () => {
     // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
@@ -102,7 +108,7 @@ export function useRoofAllocationSetting(id) {
 
   // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
   const handleSaveContext = () => {
-    const selectedRoofMaterial = roofList.find((roof) => roof.selected)
+    const selectedRoofMaterial = currentRoofList.find((roof) => roof.selected)
     setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial)
     closeAll()
   }
@@ -169,11 +175,11 @@ export function useRoofAllocationSetting(id) {
     setBasicSetting((prev) => {
       return {
         ...prev,
-        selectedRoofMaterial: roofList.find((roof) => roof.selected),
+        selectedRoofMaterial: currentRoofList.find((roof) => roof.selected),
       }
     })
 
-    setRoofList(roofList)
+    setRoofList(currentRoofList)
 
     const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
 
@@ -182,7 +188,12 @@ export function useRoofAllocationSetting(id) {
       roof.set({
         isFixed: true,
       })
-      setSurfaceShapePattern(roof, roofDisplay.column)
+      setSurfaceShapePattern(
+        roof,
+        roofDisplay.column,
+        false,
+        currentRoofList.find((roof) => roof.selected),
+      )
       drawDirectionArrow(roof)
     })
 
@@ -216,54 +227,53 @@ export function useRoofAllocationSetting(id) {
 
   // 지붕재 변경
   const handleChangeRoofMaterial = (value, index) => {
-    if (isFirstRef.current === 0) {
-      isFirstRef.current++
-      return
-    }
+    const selectedIndex = roofMaterials.findIndex((roof) => roof.selected)
 
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
-    const newRoofList = roofList.map((roof, idx) => {
+    const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
         return { ...selectedRoofMaterial }
       }
       return roof
     })
 
-    setRoofList(newRoofList)
+    newRoofList[selectedIndex].selected = true
+
+    setCurrentRoofList(newRoofList)
   }
 
   // 기본 지붕재 radio값 변경
   const handleDefaultRoofMaterial = (index) => {
-    const newRoofList = roofList.map((roof, idx) => {
+    const newRoofList = currentRoofList.map((roof, idx) => {
       return { ...roof, selected: idx === index }
     })
 
-    setRoofList(newRoofList)
+    setCurrentRoofList(newRoofList)
   }
 
   // 서까래 변경
   const handleChangeRaft = (e, index) => {
     const raftValue = e.value
 
-    const newRoofList = roofList.map((roof, idx) => {
+    const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
         return { ...roof, raft: raftValue }
       }
       return roof
     })
 
-    setRoofList(newRoofList)
+    setCurrentRoofList(newRoofList)
   }
 
   const handleChangeLayout = (layoutValue, index) => {
-    const newRoofList = roofList.map((roof, idx) => {
+    const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
         return { ...roof, layout: layoutValue }
       }
       return roof
     })
 
-    setRoofList(newRoofList)
+    setCurrentRoofList(newRoofList)
   }
 
   return {
@@ -278,11 +288,11 @@ export function useRoofAllocationSetting(id) {
     setBasicSetting,
     currentRoofMaterial,
     setCurrentRoofMaterial,
-    roofList,
     handleDefaultRoofMaterial,
     handleChangeRoofMaterial,
     handleChangeRaft,
     handleChangeLayout,
     handleSaveContext,
+    currentRoofList,
   }
 }

src/store/settingAtom.js

@@ -224,9 +224,9 @@ export const roofMaterialsAtom = atom({
 export const selectedRoofMaterialSelector = selector({
   key: 'selectedRoofMaterialSelector',
   get: ({ get }) => {
-    const basicSetting = get(basicSettingState)
+    const addedRoofs = get(addedRoofsState)
 
-    return { ...basicSetting.selectedRoofMaterial }
+    return addedRoofs.find((roof) => roof.selected)
   },
 })