context 메뉴에서 지붕재 선택시 해당 지붕만 지붕재 수정 추가

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -42,7 +42,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
-    fetchBasicSettings()
+    // fetchBasicSettings()
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
   }, [])
@@ -50,6 +50,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
+    setRoofLayout(selectedRoofMaterial.layout)
     setCurrentRoofMaterial(selectedRoofMaterial)
   }
 

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

@@ -0,0 +1,198 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useEffect, useState } from 'react'
+import { basicSettingState } from '@/store/settingAtom'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+
+export default function ContextRoofAllocationSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  const {
+    handleSave,
+    onAddRoofMaterial,
+    onDeleteRoofMaterial,
+    roofMaterials,
+    setCurrentRoofMaterial,
+    roofList,
+    handleDefaultRoofMaterial,
+    handleChangeRoofMaterial,
+    handleChangeRaft,
+    handleChangeLayout,
+    handleSaveContext,
+  } = useRoofAllocationSetting(id)
+
+  const { findCommonCode } = useCommonCode()
+  const [raftCodes, setRaftCodes] = useState([])
+  useEffect(() => {
+    const raftCodeList = findCommonCode('203800')
+    setRaftCodes(raftCodeList.map((raft) => ({ ...raft, value: raft.clCode, name: raft.clCodeNm })))
+  }, [])
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap ml mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+          <div className="allocation-select-wrap">
+            <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+            <div className="grid-select">
+              <QSelectBox
+                options={roofMaterials}
+                onChange={(e) => {
+                  const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
+                  setCurrentRoofMaterial(selected)
+                }}
+              />
+            </div>
+            <button
+              className="allocation-edit"
+              onClick={() => {
+                onAddRoofMaterial()
+              }}
+            >
+              <i className="edit-ico"></i>
+              {getMessage('modal.common.add')}
+            </button>
+          </div>
+          <div className="grid-option-wrap">
+            {roofList.map((roof, index) => {
+              return (
+                <div className="grid-option-box" key={index}>
+                  <div className="d-check-radio pop no-text">
+                    <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
+                    <label
+                      htmlFor="ra01"
+                      onClick={(e) => {
+                        handleDefaultRoofMaterial(index)
+                      }}
+                    ></label>
+                  </div>
+                  <div className="grid-option-block-form">
+                    <div className="block-box">
+                      <div className="flex-ment">
+                        <div className="grid-select" style={{ width: '248px' }}>
+                          <QSelectBox
+                            options={roofMaterials}
+                            value={roofMaterials.find((r) => r.id === roof.id)}
+                            onChange={(e) => handleChangeRoofMaterial(e, index)}
+                          />
+                        </div>
+                        {index === 0 && <span className="dec">基本屋根材</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 />
+                          </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 />
+                          </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>
+                        </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'} />
+                          </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 className="block-box">
+                      <div className="icon-btn-wrap">
+                        <button
+                          className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
+                          onClick={() => {
+                            handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
+                          }}
+                        >
+                          {getMessage('modal.roof.alloc.select.parallel')}
+                          <i className="allocation01"></i>
+                        </button>
+                        <button
+                          className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
+                          onClick={() => {
+                            handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
+                          }}
+                        >
+                          {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleSaveContext}>
+              {getMessage('modal.roof.alloc.apply')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/hooks/common/useRoofFn.js

@@ -1,17 +1,20 @@
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { selectedRoofMaterialSelector } from '@/store/settingAtom'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 
 export function useRoofFn() {
   const canvas = useRecoilValue(canvasState)
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
 
   //면형상 선택 클릭시 지붕 패턴 입히기
-  function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) {
+  function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial = selectedRoofMaterial) {
+    console.log('selectedRoofMaterial', selectedRoofMaterial)
     const ratio = window.devicePixelRatio || 1
+    const layout = roofMaterial.layout
 
-    let width = selectedRoofMaterial.width / 10
-    let height = selectedRoofMaterial.length / 10
+    let width = roofMaterial.width / 10
+    let height = roofMaterial.length / 10
     let roofStyle = 2
     const inputPatternSize = { width: width, height: height } //임시 사이즈
     const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
@@ -31,7 +34,7 @@ export function useRoofFn() {
     const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
     const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
 
-    ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'green'
+    ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'blue'
     ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4
     ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'
 
@@ -58,7 +61,7 @@ export function useRoofFn() {
         }
 
         for (let row = 0; row <= rows; row++) {
-          const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset)
+          const y = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? row * patternSize.height + (col % 2 === 0 ? 0 : offset) : row * patternSize.height
           const xStart = col * patternSize.width
           const xEnd = xStart + patternSize.width
           ctx.beginPath()
@@ -83,7 +86,7 @@ export function useRoofFn() {
         }
 
         for (let col = 0; col <= cols; col++) {
-          const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
+          const x = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? col * patternSize.width + (row % 2 === 0 ? 0 : offset) : col * patternSize.width
           const yStart = row * patternSize.height
           const yEnd = yStart + patternSize.height
 

src/hooks/option/useCanvasSetting.js

@@ -129,6 +129,7 @@ export function useCanvasSetting() {
       return
     }
     const { data } = await getRoofMaterialList()
+
     const roofLists = data.map((item, idx) => ({
       ...item,
       id: item.roofMatlCd,
@@ -138,7 +139,7 @@ export function useCanvasSetting() {
       length: item.lenBase && parseInt(item.lenBase),
       width: item.widBase && parseInt(item.widBase),
       raft: item.raftBase && parseInt(item.raftBase),
-      layout: ROOF_MATERIAL_LAYOUT.PARALLEL,
+      layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
       hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
     }))
     setRoofMaterials(roofLists)

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -100,6 +100,13 @@ export function useRoofAllocationSetting(id) {
     }
   }
 
+  // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
+  const handleSaveContext = () => {
+    const selectedRoofMaterial = roofList.find((roof) => roof.selected)
+    setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial)
+    closeAll()
+  }
+
   const handleAlloc = () => {
     if (!checkInnerLines()) {
       apply()
@@ -161,6 +168,7 @@ export function useRoofAllocationSetting(id) {
       return {
         ...prev,
         roofs: roofList,
+        selectedRoofMaterial: roofList.find((roof) => roof.selected),
       }
     })
 
@@ -203,9 +211,6 @@ export function useRoofAllocationSetting(id) {
     canvas?.renderAll()
   }
 
-  //roof input값 변경
-  const handleChangeInput = (type, value, index) => {}
-
   // 지붕재 변경
   const handleChangeRoofMaterial = (value, index) => {
     if (isFirstRef.current === 0) {
@@ -275,5 +280,6 @@ export function useRoofAllocationSetting(id) {
     handleChangeRoofMaterial,
     handleChangeRaft,
     handleChangeLayout,
+    handleSaveContext,
   }
 }

src/hooks/useContextMenu.js

@@ -35,6 +35,7 @@ import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
 import { useLine } from '@/hooks/useLine'
 import { useSwal } from '@/hooks/useSwal'
+import ContextRoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting'
 
 export function useContextMenu() {
   const canvas = useRecoilValue(canvasState)
@@ -377,7 +378,7 @@ export function useContextMenu() {
               {
                 id: 'roofMaterialEdit',
                 name: getMessage('contextmenu.roof.material.edit'),
-                component: <RoofAllocationSetting id={popupId} />,
+                component: <ContextRoofAllocationSetting id={popupId} />,
               },
               {
                 id: 'linePropertyEdit',

src/store/settingAtom.js

@@ -220,7 +220,11 @@ export const selectedRoofMaterialSelector = selector({
   key: 'selectedRoofMaterialSelector',
   get: ({ get }) => {
     const basicSetting = get(basicSettingState)
-    return basicSetting.selectedRoofMaterial
+    const addedRoofs = get(addedRoofsSelector)
+    // addedRoofs에서 selectedRoofMaterial을 찾아 index를 반환
+    const index = addedRoofs.findIndex((roof) => roof === basicSetting.selectedRoofMaterial)
+
+    return { ...basicSetting.selectedRoofMaterial, index }
   },
 })