diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx index 0a46e18f..dbd4d992 100644 --- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -11,6 +11,9 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' import { useCommonCode } from '@/hooks/common/useCommonCode' import { globalLocaleStore } from '@/store/localeAtom' import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting' +import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom' +import { getDegreeByChon } from '@/util/canvas-util' +import { onlyNumberWithDotInputChange } from '@/util/input-utils' export default function RoofAllocationSetting(props) { const contextPopupPosition = useRecoilValue(contextPopupPositionState) @@ -29,11 +32,13 @@ export default function RoofAllocationSetting(props) { handleChangeRaft, handleChangeLayout, currentRoofList, + handleChangeInput, } = useRoofAllocationSetting(id) - const { pitchText } = useRoofShapeSetting(id) + const pitchText = useRecoilValue(pitchTextSelector) const { findCommonCode } = useCommonCode() const [raftCodes, setRaftCodes] = useState([]) const globalLocale = useRecoilValue(globalLocaleStore) + const currentAngleType = useRecoilValue(currentAngleTypeSelector) useEffect(() => { const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList.map((raft) => ({ ...raft, name: raft.clCodeNm }))) @@ -110,7 +115,14 @@ export default function RoofAllocationSetting(props) {
{getMessage('slope')}
- + { + handleChangeInput(e, 'pitch', index) + }} + defaultValue={currentAngleType === 'slope' ? roof.pitch : getDegreeByChon(roof.pitch)} + />
{pitchText}
@@ -121,7 +133,13 @@ export default function RoofAllocationSetting(props) {
W
- + handleChangeInput(e, 'width', index)} + readOnly={roof.widAuth === 'R'} + />
)} @@ -129,7 +147,13 @@ export default function RoofAllocationSetting(props) {
L
- + handleChangeInput(e, 'length', index)} + readOnly={roof.lenAuth === 'R'} + />
)} @@ -164,6 +188,7 @@ export default function RoofAllocationSetting(props) { handleChangeInput(e, 'hajebichi', index)} value={parseInt(roof.hajebichi)} readOnly={roof.roofPchAuth === 'R'} /> diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 70c421b9..638da76a 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -1,10 +1,17 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' -import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom' +import { canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState } from '@/store/canvasAtom' import { useEffect, useRef, useState } from 'react' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' import { usePolygon } from '@/hooks/usePolygon' -import { correntObjectNoState, addedRoofsState, basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom' +import { + correntObjectNoState, + addedRoofsState, + basicSettingState, + roofDisplaySelector, + roofMaterialsSelector, + selectedRoofMaterialSelector, +} from '@/store/settingAtom' import { usePopup } from '@/hooks/usePopup' import { POLYGON_TYPE } from '@/common/common' import { v4 as uuidv4 } from 'uuid' @@ -16,6 +23,7 @@ import { menuTypeState } from '@/store/menuAtom' import { useRoofFn } from '@/hooks/common/useRoofFn' import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' import { globalLocaleStore } from '@/store/localeAtom' +import { getChonByDegree } from '@/util/canvas-util' // 지붕면 할당 export function useRoofAllocationSetting(id) { @@ -37,6 +45,7 @@ export function useRoofAllocationSetting(id) { const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열 const [editingLines, setEditingLines] = useState([]) const [currentRoofList, setCurrentRoofList] = useState(roofList) + const currentAngleType = useRecoilValue(currentAngleTypeSelector) const globalLocaleState = useRecoilValue(globalLocaleStore) const { get, post } = useAxios(globalLocaleState) @@ -110,7 +119,6 @@ export function useRoofAllocationSetting(id) { } }) } else { - roofsArray = [ { roofApply: true, @@ -131,27 +139,28 @@ export function useRoofAllocationSetting(id) { } console.log('fetchBasicSettings roofsArray', roofsArray) - + // 데이터 설정 const selectRoofs = [] - for (let i = 0; i < roofsArray.length; i++) { - roofMaterials?.map((material) => { + for (let i = 0; i < roofsArray.length; i++) { + roofMaterials?.map((material) => { if (material.roofMatlCd === roofsArray[i].roofMatlCd) { - selectRoofs.push({ ...material - , selected: roofsArray[i].roofApply - , index: roofsArray[i].roofSeq - , id: roofsArray[i].roofMatlCd - , width: roofsArray[i].roofWidth - , length: roofsArray[i].roofHeight - , hajebichi: roofsArray[i].roofHajebichi - , raft: roofsArray[i].roofGap - , layout: roofsArray[i].roofLayout - }) + selectRoofs.push({ + ...material, + selected: roofsArray[i].roofApply, + index: roofsArray[i].roofSeq, + id: roofsArray[i].roofMatlCd, + width: roofsArray[i].roofWidth, + length: roofsArray[i].roofHeight, + hajebichi: roofsArray[i].roofHajebichi, + raft: roofsArray[i].roofGap, + layout: roofsArray[i].roofLayout, + }) setCurrentRoofList(selectRoofs) } }) } - setBasicSetting({ ...basicSetting, roofsData: roofsArray}) + setBasicSetting({ ...basicSetting, roofsData: roofsArray }) }) } catch (error) { console.error('Data fetching error:', error) @@ -160,11 +169,10 @@ export function useRoofAllocationSetting(id) { // 저장 const basicSettingSave = async () => { - const patternData = { objectNo: correntObjectNo, roofSizeSet: basicSetting.roofSizeSet, - roofAngleSet: basicSetting.roofAngleSet, + roofAngleSet: basicSetting.roofAngleSet, roofMaterialsAddList: currentRoofList.map((item) => ({ roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected, roofSeq: item.index === null || item.index === undefined ? 0 : item.index, @@ -174,24 +182,23 @@ export function useRoofAllocationSetting(id) { roofHajebichi: item.hajebichi === null || item.hajebichi === undefined ? 0 : item.hajebichi, roofGap: item.raft === null || item.raft === undefined ? 'HEI_455' : item.raft, roofLayout: item.layout === null || item.layout === undefined ? 'P' : item.layout, + })), + } + + console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData) + + // HTTP POST 요청 보내기 + await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }) + .then((res) => { + swalFire({ text: getMessage(res.returnMessage) }) + + //Recoil 설정 + // setCanvasSetting({ ...basicSetting }) + fetchBasicSettings() + }) + .catch((error) => { + swalFire({ text: error.message, icon: 'error' }) }) - ), - } - - console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData) - - // HTTP POST 요청 보내기 - await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }) - .then((res) => { - swalFire({ text: getMessage(res.returnMessage) }) - - //Recoil 설정 - // setCanvasSetting({ ...basicSetting }) - fetchBasicSettings() - }) - .catch((error) => { - swalFire({ text: error.message, icon: 'error' }) - }) } const onAddRoofMaterial = () => { @@ -221,17 +228,15 @@ export function useRoofAllocationSetting(id) { } // 선택한 지붕재로 할당 - const handleSave = () => { - + const handleSave = () => { basicSettingSave() // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정 - if (checkInnerLines()) { + if (checkInnerLines()) { addPopup(popupId, 1, ) } else { apply() } - } // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우 @@ -417,6 +422,65 @@ export function useRoofAllocationSetting(id) { setCurrentRoofList(newRoofList) } + const handleChangeInput = (e, type, index) => { + const value = e.target.value + if (type === 'pitch') { + // type이 pitch인 경우 소수점 1자리까지만 입력 가능 + const reg = /^[0-9]+(\.[0-9]{0,1})?$/ + + if (!reg.test(value)) { + e.target.value = value.substring(0, value.length - 1) + const newRoofList = currentRoofList.map((roof, idx) => { + if (idx === index) { + return { + ...roof, + [type]: currentAngleType === 'slope' ? value.substring(0, value.length - 1) : getChonByDegree(value.substring(0, value.length - 1)), + } + } + return roof + }) + + setCurrentRoofList(newRoofList) + + return + } else { + const newRoofList = currentRoofList.map((roof, idx) => { + if (idx === index) { + return { + ...roof, + [type]: currentAngleType === 'slope' ? value : getChonByDegree(value), + } + } + return roof + }) + + setCurrentRoofList(newRoofList) + } + + return + } + const newRoofList = currentRoofList.map((roof, idx) => { + if (idx === index) { + return { ...roof, [type]: value } + } + return roof + }) + + setCurrentRoofList(newRoofList) + } + + const handleChangePitch = (e, index) => { + const value = e.target.value + const newRoofList = currentRoofList.map((roof, idx) => { + if (idx === index) { + return { ...roof, pitch: value } + } + return roof + }) + + setCurrentRoofList(newRoofList) + } + return { handleSave, onAddRoofMaterial, @@ -435,5 +499,7 @@ export function useRoofAllocationSetting(id) { handleChangeLayout, handleSaveContext, currentRoofList, + handleChangeInput, + handleChangePitch, } } diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index a844dd6b..3a5c88f5 100644 --- a/src/hooks/usePolygon.js +++ b/src/hooks/usePolygon.js @@ -268,7 +268,7 @@ export const usePolygon = () => { surfaceCompass: polygon.surfaceCompass, moduleCompass: polygon.moduleCompass, visible: isFlowDisplay, - pitch: polygon.pitch, + pitch: polygon.roofMaterial.pitch ?? 4, parentId: polygon.id, })