diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index ed400f95..2fed8591 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -63,20 +63,21 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla /** * 지붕재 초기값 */ - const defaultRoofSettings = { - roofSizeSet: '1', // 기본 치수 입력 방법 - roofAngleSet: 'slope', // 기본 지붕 각도 설정 + const DEFAULT_ROOF_SETTINGS = { + roofSizeSet: '1', + roofAngleSet: 'slope', angle: 21.8, - hajebichi: '', + hajebichi: null, id: 'ROOF_ID_WA_53A', index: 0, layout: ROOF_MATERIAL_LAYOUT.PARALLEL, lenAuth: 'R', lenBase: '235.000', - length: '235', + length: 235, name: '일본기와 A', nameJp: '和瓦A', pitch: 4, + planNo: planNo, raft: '', raftAuth: 'C', raftBaseCd: 'HEI_455', @@ -89,12 +90,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla selected: true, widAuth: 'R', widBase: '265.000', - width: '265', + width: 265, } useEffect(() => { /** - * 메뉴에서 배치면초기설정 선택 시 조회 + * 메뉴에서 배치면초기설정 선택 시 조회 후 화면 오픈 */ if (openPoint && openPoint === 'canvasMenus') fetchBasicSettings(planNo, openPoint) }, []) @@ -103,18 +104,16 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla if (addedRoofs.length > 0) { const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList) - - /** - * 데이터 설정 확인 후 데이터가 없으면 기본 데이터 설정 - */ - if (addedRoofs.length > 0) { - setCurrentRoof({ ...addedRoofs[0], planNo: basicSetting.planNo }) - } else { - setCurrentRoof(defaultRoofSettings) - } + setCurrentRoof({ ...addedRoofs[0], planNo: planNo, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet }) + } else { + /** 데이터 설정 확인 후 데이터가 없으면 기본 데이터 설정 */ + setCurrentRoof({ ...DEFAULT_ROOF_SETTINGS }) } }, [addedRoofs]) + /** + * 배치면초기설정 정보 변경 시 basicSettings 설정 + */ useEffect(() => { if (!currentRoof) return setBasicSettings({ @@ -256,7 +255,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla id={item.id} name={item.name} value={item.value} - checked={currentRoof?.roofSizeSet === item.value} + checked={String(currentRoof?.roofSizeSet) === item.value} onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} /> @@ -279,7 +278,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla id={item.id} name={item.name} value={item.value} - checked={currentRoof?.roofAngleSet === item.value} + checked={String(currentRoof?.roofAngleSet) === item.value} onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })} /> diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 8cdecf1c..37f53f5e 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -43,21 +43,19 @@ import { v4 as uuidv4 } from 'uuid' const defaultDotLineGridSetting = { INTERVAL: { - type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격 + type: 2 /* 1: 가로,세로 간격 수동, 2: 비율 간격 */, ratioInterval: 910, verticalInterval: 910, horizontalInterval: 910, - dimension: 1, // 치수 + dimension: 1 /* 치수 */, }, DOT: false, LINE: false, } -// let previousRoofMaterialsYn = 'N' // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행 - export function useCanvasSetting() { const canvas = useRecoilValue(canvasState) - /* canvas가 null이 아닐 때에만 getObjects 호출 */ + /** canvas가 null이 아닐 때에만 getObjects 호출 */ const canvasObjects = canvas ? canvas.getObjects() : [] const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState) @@ -119,14 +117,14 @@ export function useCanvasSetting() { const [type, setType] = useRecoilState(menuTypeState) const setCurrentMenu = useSetRecoilState(currentMenuState) - const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터 - const resetSelectedModules = useResetRecoilState(selectedModuleState) //선택된 모듈 + const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) /* 다음으로 넘어가는 최종 데이터 */ + const resetSelectedModules = useResetRecoilState(selectedModuleState) /* 선택된 모듈 */ const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2) - const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보 + const [raftCodes, setRaftCodes] = useState([]) /* 서까래 정보 */ const { findCommonCode } = useCommonCode() - const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보 + const [currentRoof, setCurrentRoof] = useState(null) /* 현재 선택된 지붕재 정보 */ const { addPopup } = usePopup() const [popupId, setPopupId] = useState(uuidv4()) @@ -144,7 +142,7 @@ export function useCanvasSetting() { useEffect(() => { const tempFetchRoofMaterials = !fetchRoofMaterials - /* 초 1회만 실행하도록 처리 */ + /** 초 1회만 실행하도록 처리 */ setFetchRoofMaterials(tempFetchRoofMaterials) if (tempFetchRoofMaterials) { addRoofMaterials() @@ -176,7 +174,23 @@ export function useCanvasSetting() { angle: item.angle ? parseInt(item.angle) : 21.8, })) setRoofMaterials(roofLists) - const selectedRoofMaterial = roofLists[0] + } + + useEffect(() => { + if (addedRoofs.length > 0 && addedRoofs[0].planNo === basicSetting.planNo) { + const raftCodeList = findCommonCode('203800') + setRaftCodes(raftCodeList) + setCurrentRoof({ + ...addedRoofs[0], + planNo: addedRoofs[0].planNo, + roofSizeSet: String(basicSetting.roofSizeSet), + roofAngleSet: basicSetting.roofAngleSet, + }) + } + }, [addedRoofs]) + + useEffect(() => { + const selectedRoofMaterial = roofMaterials[0] if (addedRoofs.length === 0) { const newAddedRoofs = [] @@ -184,19 +198,7 @@ export function useCanvasSetting() { setAddedRoofs(newAddedRoofs) } setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial }) - } - - /** - * 배치면 초기설정 화면이 열리지 않아도 데이터 set 하기 위해서 추가 - */ - useEffect(() => { - if (addedRoofs.length > 0) { - const raftCodeList = findCommonCode('203800') - setRaftCodes(raftCodeList) - - setCurrentRoof({ ...addedRoofs[0] }) - } - }, [addedRoofs]) + }, [roofMaterials]) useEffect(() => { if (!canvas) { @@ -339,7 +341,7 @@ export function useCanvasSetting() { } }) - /* 데이터 존재 시 화면 닫기(메뉴/저장 클릭 시 제외) */ + /** 데이터 존재 시 화면 닫기(메뉴/저장 클릭 시 제외) */ if (openPoint !== 'canvasMenus' && openPoint !== 'basicSettingSave') { //closePopup(popupId) closeAll() @@ -369,9 +371,9 @@ export function useCanvasSetting() { }, ] - /* 메뉴에서 배치면 초기설정 클릭 시 실행하지 않음 */ + /** 메뉴에서 배치면 초기설정 클릭 시 실행하지 않음 */ if (openPoint === null) { - /* 배치면 초기설정 미저장 상태이면 화면 열기 */ + /** 배치면 초기설정 미저장 상태이면 화면 열기 */ const placementInitialProps = { id: popupId, pos: { @@ -385,7 +387,7 @@ export function useCanvasSetting() { } } - /* 데이터 설정 */ + /** 데이터 설정 */ const addRoofs = [] for (let i = 0; i < roofsArray.length; i++) { roofMaterials?.map((material) => { @@ -440,6 +442,21 @@ export function useCanvasSetting() { // setCanvasSetting({ ...basicSetting }) } + /** + * 저장/복사저장 시 지붕 크기에 따른 메뉴 설정 + */ + const setMenuByRoofSize = (roofSizeSet) => { + if (['2', '3'].includes(String(roofSizeSet))) { + setMenuNumber(3) + setType('surface') + setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING) + } else { + setMenuNumber(2) + setType('outline') + setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) + } + } + /** * 기본설정(PlacementShapeSetting) 저장 */ @@ -471,31 +488,23 @@ export function useCanvasSetting() { await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => { swalFire({ text: getMessage(res.returnMessage) }) - /* BasicSettings Recoil 설정 */ + /** BasicSettings Recoil 설정 */ setBasicSettings({ ...params }) }) - /* CanvasSetting Recoil 설정 - roofSizeSet을 문자열로 변환 */ + /** CanvasSetting Recoil 설정 - roofSizeSet을 문자열로 변환 */ setCanvasSetting({ ...basicSetting, roofSizeSet: String(params.roofSizeSet), }) - /* 메뉴 설정 */ - if (['2', '3'].includes(params.roofSizeSet)) { - setMenuNumber(3) - setType('surface') - setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING) - } else { - setMenuNumber(2) - setType('outline') - setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) - } + /** 메뉴 설정 */ + setMenuByRoofSize(params.roofSizeSet) - /* 배치면초기설정 조회 */ + /** 배치면초기설정 조회 */ fetchBasicSettings(params.planNo, 'basicSettingSave') - /* 모듈 선택 데이터 초기화 */ + /** 모듈 선택 데이터 초기화 */ resetModuleSelectionData() moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] }) const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE) @@ -536,27 +545,19 @@ export function useCanvasSetting() { swalFire({ text: getMessage(res.returnMessage) }) }) - /* CanvasSetting Recoil 설정 - roofSizeSet을 문자열로 변환 */ + /** CanvasSetting Recoil 설정 - roofSizeSet을 문자열로 변환 */ setCanvasSetting({ ...basicSetting, roofSizeSet: String(params.roofSizeSet), }) - /* 메뉴 설정 */ - if (['2', '3'].includes(params?.roofSizeSet)) { - setMenuNumber(3) - setType('surface') - setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING) - } else { - setMenuNumber(2) - setType('outline') - setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) - } + /** 메뉴 설정 */ + setMenuByRoofSize(params.roofSizeSet) - /* 배치면초기설정 조회 */ + /** 배치면초기설정 조회 */ fetchBasicSettings(Number(params.planNo), 'basicSettingSave') - /* 모듈 선택 데이터 초기화 */ + /** 모듈 선택 데이터 초기화 */ resetModuleSelectionData() moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] }) const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE) @@ -582,24 +583,16 @@ export function useCanvasSetting() { const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item })) - /** - * 흡착점 ON/OFF - */ + /** 흡착점 ON/OFF */ setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint }) - /** - * 치수선 설정 - */ + /** 치수선 설정 */ setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor }) - /** - * 도면크기 설정 - */ + /** 도면크기 설정 */ setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical }) - /** - * 데이터 설정 - */ + /** 데이터 설정 */ setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: optionData1, @@ -614,45 +607,35 @@ export function useCanvasSetting() { const fontPatternData = { commonText: { - /** - * 문자 글꼴 조회 데이터 - */ + /** 문자 글꼴 조회 데이터 */ fontFamily: getFonts(res.wordFont), fontWeight: getFontStyles(res.wordFontStyle), fontSize: getFontSizes(res.wordFontSize), fontColor: getFontColors(res.wordFontColor), }, flowText: { - /** - * 흐름방향 글꼴 조회 데이터 - */ + /** 흐름방향 글꼴 조회 데이터 */ fontFamily: getFonts(res.flowFont), fontWeight: getFontStyles(res.flowFontStyle), fontSize: getFontSizes(res.flowFontSize), fontColor: getFontColors(res.flowFontColor), }, dimensionLineText: { - /** - * 치수 글꼴 조회 데이터 - */ + /** 치수 글꼴 조회 데이터 */ fontFamily: getFonts(res.dimensioFont), fontWeight: getFontStyles(res.dimensioFontStyle), fontSize: getFontSizes(res.dimensioFontSize), fontColor: getFontColors(res.dimensioFontColor), }, circuitNumberText: { - /** - * 회로번호 글꼴 조회 데이터 - */ + /** 회로번호 글꼴 조회 데이터 */ fontFamily: getFonts(res.circuitNumFont), fontWeight: getFontStyles(res.circuitNumFontStyle), fontSize: getFontSizes(res.circuitNumFontSize), fontColor: getFontColors(res.circuitNumFontColor), }, lengthText: { - /** - * 치수선 글꼴 조회 데이터 - */ + /** 치수선 글꼴 조회 데이터 */ fontFamily: getFonts(res.lengthFont), fontWeight: getFontStyles(res.lengthFontStyle), fontSize: getFontSizes(res.lengthFontSize), @@ -660,14 +643,10 @@ export function useCanvasSetting() { }, } - /** - * 조회된 글꼴 데이터 set - */ + /** 조회된 글꼴 데이터 set */ setGlobalFont(fontPatternData) - /** - * 점/선 그리드 - */ + /** 점/선 그리드 */ const patternData = { INTERVAL: { type: res.gridType, @@ -682,47 +661,31 @@ export function useCanvasSetting() { setDotLineGridSettingState(patternData) - /** - * 그리드 색 설정 - */ + /** 그리드 색 설정 */ setGridColor(res.gridColor) } else { - //조회된 글꼴 데이터가 없는 경우 (데이터 초기화) + /** 조회된 글꼴 데이터가 없는 경우 (데이터 초기화) */ - /** - * 흡착점 ON/OFF - */ + /** 흡착점 ON/OFF */ setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false }) - /** - * 치수선 설정 - */ + /** 치수선 설정 */ resetDimensionLineSettings() - /** - * 도면크기 설정 - */ + /** 도면크기 설정 */ resetPlanSizeSettingMode() - /** - * 데이터 설정 - */ + /** 데이터 설정 */ resetSettingModalFirstOptions() resetSettingModalSecondOptions() - /** - * 데이터 초기화 - */ + /** 데이터 초기화 */ resetGlobalFont() - /** - * 점/선 그리드 - */ + /** 점/선 그리드 */ setDotLineGridSettingState({ ...defaultDotLineGridSetting }) - /** - * 그리드 색 설정 - */ + /** 그리드 색 설정 */ setGridColor('#FF0000') } @@ -736,9 +699,7 @@ export function useCanvasSetting() { * CanvasSetting 옵션 클릭 후 저장 */ const onClickOption2 = async () => { - /** - * 서버에 전송할 데이터 - */ + /** 서버에 전송할 데이터 */ const dataToSend = { firstOption1: option1.map((item) => ({ column: item.column, @@ -759,13 +720,9 @@ export function useCanvasSetting() { })), } const patternData = { - /** - * 견적서 번호 - */ + /** 견적서 번호 */ objectNo: correntObjectNo, - /** - * 디스플레이 설정(다중) - */ + /** 디스플레이 설정(다중) */ allocDisplay: dataToSend.firstOption1[0].selected, outlineDisplay: dataToSend.firstOption1[1].selected, gridDisplay: dataToSend.firstOption1[2].selected, @@ -776,85 +733,62 @@ export function useCanvasSetting() { trestleDisplay: dataToSend.firstOption1[7].selected, imageDisplay: dataToSend.firstOption1[8].selected, totalDisplay: dataToSend.firstOption1[9].selected, - /** - * 차수 표시(단 건) - */ + /** 차수 표시(단 건) */ corridorDimension: dataToSend.firstOption3[0].selected, realDimension: dataToSend.firstOption3[1].selected, noneDimension: dataToSend.firstOption3[2].selected, - /** - * 화면 표시(단 건) - */ + /** 화면 표시(단 건) */ onlyBorder: dataToSend.firstOption2[0].selected, lineHatch: dataToSend.firstOption2[1].selected, allPainted: dataToSend.firstOption2[2].selected, - /** - * 흡착범위 설정(단 건) - */ + /** 흡착범위 설정(단 건) */ adsorpRangeSmall: dataToSend.secondOption2[0].selected, adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected, adsorpRangeMedium: dataToSend.secondOption2[2].selected, adsorpRangeLarge: dataToSend.secondOption2[3].selected, - - /** - * 흡착점 ON/OFF - */ + /** 흡착점 ON/OFF */ adsorpPoint: adsorptionPointMode.adsorptionPoint, //??: adsorptionRange, 사용여부 확인 필요 - /** - * 글꼴 설정 - */ - //문자 글꼴 + /** 문자 글꼴 설정 */ wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic', wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal', wordFontSize: globalFont.commonText.fontSize?.value ?? 16, wordFontColor: globalFont.commonText.fontColor?.value ?? 'black', - /** - * 흐름방향 글꼴 - */ + /** 흐름방향 글꼴 설정 */ flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic', flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal', flowFontSize: globalFont.flowText.fontSize?.value ?? 16, flowFontColor: globalFont.flowText.fontColor?.value ?? 'black', - /** - * 치수 글꼴 - */ + /** 치수 글꼴 설정 */ dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic', dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal', dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16, dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black', - /** - * 회로번호 글꼴 - */ + /** 회로번호 글꼴 설정 */ circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic', circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal', circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16, circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black', - /** - * 치수선 글꼴 - */ + /** 치수선 글꼴 설정 */ lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic', lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal', lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16, lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black', - /** - * 치수선 설정 - */ + /** 치수선 설정 */ originPixel: dimensionLineSettings.pixel, originColor: dimensionLineSettings.color, - /** - * 도면크기 설정 - */ + /** 도면크기 설정 */ originHorizon: planSizeSettingMode.originHorizon, originVertical: planSizeSettingMode.originVertical, + /** 점/선 그리드 */ dotGridDisplay: dotLineGridSetting.DOT, lineGridDisplay: dotLineGridSetting.LINE, gridType: dotLineGridSetting.INTERVAL.type, @@ -863,6 +797,7 @@ export function useCanvasSetting() { gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10, gridDimen: dotLineGridSetting.INTERVAL.dimension, + /** 그리드 색 설정 */ gridColor: gridColor, } @@ -875,13 +810,10 @@ export function useCanvasSetting() { .then((res) => { //swalFire({ text: getMessage(res.returnMessage) }) - /** - * Canvas 디스플레이 설정 시 해당 옵션 적용 - */ + /** Canvas 디스플레이 설정 시 해당 옵션 적용 */ frontSettings() - /** - * 저장 후 재조회 - */ + + /** 저장 후 재조회 */ fetchSettings() }) .catch((error) => { @@ -912,8 +844,8 @@ export function useCanvasSetting() { */ /** - * 옵션명 - * 옵션상태 + * 옵션명 optionName + * 옵션상태 optionSelected */ let optionName let optionSelected @@ -948,15 +880,11 @@ export function useCanvasSetting() { optionName = ['backGroundImage'] break case 'totalDisplay': - /** - * 작업할 필요 없음 - */ + /** 작업할 필요 없음 */ optionName = [] break } - /** - * 표시 선택 상태(true/false) - */ + /** 표시 선택 상태(true/false)*/ optionSelected = option1[i].selected canvasObjects