diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 25efa782..18f3ea0d 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -15,7 +15,6 @@ export default function FloorPlan({ children }) { const [correntObjectNo, setCurrentObjectNo] = useRecoilState(correntObjectNoState) const searchParams = useSearchParams() const objectNo = searchParams.get('objectNo') - const pid = searchParams.get('pid') const { closeAll } = usePopup() const { selectedMenu, setSelectedMenu } = useCanvasMenu() @@ -41,11 +40,10 @@ export default function FloorPlan({ children }) { * 설정 데이터 fetch */ useEffect(() => { - /** - * correntObjectNo가 없으면 실행하지 않음 - */ + /** correntObjectNo가 없으면 실행하지 않음 */ if (!correntObjectNo) return + /** CanvasSetting 데이터 fetch */ fetchSettings() return () => { diff --git a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx index 8b519e86..5320bef9 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx @@ -46,8 +46,6 @@ export default function StepUp(props) { const [selectedRows, setSelectedRows] = useState({}) const [isManualSelection, setIsManualSelection] = useState({}) - // 선택된 값들을 저장할 상태 추가 - const [selectedValues, setSelectedValues] = useState({}) const isDisplayCircuitNumber = useRecoilValue(circuitNumDisplaySelector) const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText')) // useCanvasPopupStatusController(6) @@ -58,7 +56,7 @@ export default function StepUp(props) { useEffect(() => { if (allocationType === 'auto') { - // 자동일 때 모듈의 회로 정보 초기화 + /** 자동일 때 모듈의 회로 정보 초기화 */ canvas .getObjects() .filter((obj) => obj.name === POLYGON_TYPE.MODULE) @@ -70,40 +68,41 @@ export default function StepUp(props) { canvas.renderAll() - // PCS 자동 승압설정 정보 조회 + /** PCS 자동 승압설정 정보 조회 */ fetchAutoStepUpData() } else { - // PCS 수동 승압설정 정보 조회 + /** PCS 수동 승압설정 정보 조회 */ fetchPassiStepUpData() } }, []) - // PCS 자동 승압설정 정보 조회 + /** + * PCS 자동 승압설정 정보 조회 + */ const fetchAutoStepUpData = async () => { try { const params = { - ...props.getOptYn(), // 옵션 Y/N - useModuleItemList: props.getUseModuleItemList(), // 사용된 모듈아이템 List - roofSurfaceList: props.getRoofSurfaceList(), // 지붕면 목록 - pcsItemList: props.getSelectedPcsItemList(), // PCS 아이템 목록 + ...props.getOptYn() /** 옵션 Y/N */, + useModuleItemList: props.getUseModuleItemList() /** 사용된 모듈아이템 List */, + roofSurfaceList: props.getRoofSurfaceList() /** 지붕면 목록 */, + pcsItemList: props.getSelectedPcsItemList() /** PCS 아이템 목록 */, } - // 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회 + /** 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회 */ getPcsVoltageStepUpList(params).then((res) => { if (res?.result.resultCode === 'S' && res?.data) { const dataArray = Array.isArray(res.data) ? res.data : [res.data] const stepUpListData = formatStepUpListData(dataArray) - // PCS 승압설정 정보 SET + /** PCS 승압설정 정보 SET */ setStepUpListData(stepUpListData) - // PCS 옵션 조회 + /** PCS 옵션 조회 */ const formattedOptCodes = formatOptionCodes(res.data.optionList) setOptCodes(formattedOptCodes) setSeletedOption(formattedOptCodes[0]) - // 캔버스에 회로 정보 적용 - //stepUpListData[0].pcsItemList.forEach((pcsItem) => { + /** 캔버스에 회로 정보 적용 */ stepUpListData[0].pcsItemList.forEach((pcsItem) => { const selectedSerQty = pcsItem.serQtyList.find((serQty) => serQty.selected) if (selectedSerQty) { @@ -111,13 +110,13 @@ export default function StepUp(props) { const targetSurface = canvas.getObjects().filter((obj) => obj.id === roofSurface.roofSurfaceId)[0] const moduleIds = targetSurface.modules.map((module) => module.id) - // 기존 모듈 텍스트 삭제 + /** 기존 모듈 텍스트 삭제 */ canvas .getObjects() .filter((obj) => moduleIds.includes(obj.parentId)) .forEach((text) => canvas.remove(text)) - // 새로운 모듈 회로 정보 추가 + /** 새로운 모듈 회로 정보 추가 */ roofSurface.moduleList.forEach((module) => { const targetModule = canvas.getObjects().find((obj) => obj.id === module.uniqueId) if (targetModule && module.circuit !== '' && module.circuit) { @@ -154,10 +153,6 @@ export default function StepUp(props) { setModuleStatisticsData() } else { swalFire({ text: getMessage('common.message.send.error') }) - // swalFire({ - // title: res.result.resultMsg, - // type: 'alert', - // }) } }) } catch (error) { @@ -165,7 +160,9 @@ export default function StepUp(props) { } } - // PCS 수동 승압설정 정보 조회 + /** + * PCS 수동 승압설정 정보 조회 + */ const fetchPassiStepUpData = async () => { try { // 1-1 2-2 @@ -174,13 +171,13 @@ export default function StepUp(props) { // .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuit) // .map((module) => module.circuitNumber) - // 모듈 데이터 가져오기 + /** 모듈 데이터 가져오기 */ const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE) - // PCS별 회로 정보를 저장할 객체 + /** PCS별 회로 정보를 저장할 객체 */ const pcsSummary = {} - // 각 모듈을 순회하며 PCS별 회로 정보 수집 + /** 각 모듈을 순회하며 PCS별 회로 정보 수집 */ modules.forEach((module) => { if (!module.circuit || !module.pcsItemId) return @@ -204,10 +201,10 @@ export default function StepUp(props) { pcsItemList: getSelectedPcsItemList(), } - // PCS 접속함 및 옵션 목록 조회 + /** PCS 접속함 및 옵션 목록 조회 */ getPcsConnOptionItemList(params).then((res) => { if (res?.result.code === 200 && res?.data) { - // PCS 아이템 리스트에 serQtyList 추가 + /** PCS 아이템 리스트에 serQtyList 추가 */ const pcsItemListWithSerQty = res.data.pcsItemList.map((pcsItem) => { const pcsData = pcsSummary[pcsItem.itemId] || { circuits: {}, totalModules: 0 } const circuitCounts = Object.values(pcsData.circuits) @@ -215,9 +212,9 @@ export default function StepUp(props) { ...pcsItem, serQtyList: [ { - // 한 회로당 최대 모듈 수 + /** 한 회로당 최대 모듈 수 */ serQty: circuitCounts.length > 0 ? Math.max(...circuitCounts) : 0, - // 회로 개수 + /** 회로 개수 */ paralQty: Object.keys(pcsData.circuits).length || 0, rmdYn: 'Y', usePossYn: 'Y', @@ -227,16 +224,16 @@ export default function StepUp(props) { } }) - // Update res.data with modified pcsItemList + /** res.data with modified pcsItemList */ res.data.pcsItemList = pcsItemListWithSerQty const dataArray = Array.isArray(res.data) ? res.data : [res.data] const stepUpListData = formatStepUpListData(dataArray) - // PCS 승압설정 정보 SET + /** PCS 승압설정 정보 SET */ setStepUpListData(stepUpListData) - // PCS 옵션 조회 + /** PCS 옵션 조회 */ const formattedOptCodes = formatOptionCodes(res.data.optionList) setOptCodes(formattedOptCodes) setSeletedOption(formattedOptCodes[0]) @@ -247,7 +244,9 @@ export default function StepUp(props) { } } - // PCS 옵션 조회 + /** + * PCS 옵션 조회 + */ const formatOptionCodes = (optionList = []) => { return optionList?.map((opt) => ({ code: opt.pcsOptCd ? opt.pcsOptCd : '', @@ -256,7 +255,9 @@ export default function StepUp(props) { })) } - // PCS 승압설정 정보 포맷 후 추천 값 저장 + /** + * PCS 승압설정 정보 포맷 후 추천 값 저장 + */ const formatStepUpListData = (dataArray = []) => { const formattedData = dataArray?.map((stepUps) => ({ ...stepUps, @@ -268,7 +269,9 @@ export default function StepUp(props) { return formattedData } - // PCS 옵션 포맷 + /** + * PCS 옵션 포맷 + */ const formatOptionList = (optionList = []) => { return optionList?.map((option) => ({ pcsOptCd: option.pcsOptCd ? option.pcsOptCd : '', @@ -277,7 +280,9 @@ export default function StepUp(props) { })) } - // PCS 아이템 포맷 + /** + * PCS 아이템 포맷 + */ const formatPcsItemList = (pcsItemList = []) => { return pcsItemList?.map((item, index) => ({ goodsNo: item.goodsNo ? item.goodsNo : '', @@ -291,7 +296,9 @@ export default function StepUp(props) { })) } - // PCS 연결 포맷 + /** + * PCS 연결 포맷 + */ const formatConnList = (connList = []) => { if (!connList) return [] // null인 경우 빈 배열 반환 @@ -305,7 +312,9 @@ export default function StepUp(props) { })) } - // PCS 시리즈 포맷 + /** + * PCS 시리즈 포맷 + */ const formatSerQtyList = (serQtyList = []) => { return serQtyList?.map((qty) => ({ code: uuidv4(), @@ -318,7 +327,9 @@ export default function StepUp(props) { })) } - // PCS RoofSurface 포맷 + /** + * PCS RoofSurface 포맷 + */ const formatRoofSurfaceList = (roofSurfaceList = []) => { return roofSurfaceList?.map((rsf) => ({ moduleList: formatModuleList(rsf.moduleList), @@ -327,7 +338,10 @@ export default function StepUp(props) { roofSurfaceIncl: rsf.roofSurfaceIncl ? +rsf.roofSurfaceIncl : '', })) } - // PCS MatModule 포맷 + + /** + * PCS MatModule 포맷 + */ const formatModuleList = (moduleList = []) => { return moduleList?.map((module) => ({ circuit: module.circuit ? module.circuit : '', @@ -337,7 +351,9 @@ export default function StepUp(props) { })) } - // 각 모듈의 탭을 변경하는 함수 + /** + * 각 모듈의 탭을 변경하는 함수 + */ const handleTabChange = (goodsNo, idx, tabNumber) => { setModuleTabs((prev) => ({ ...prev, @@ -345,9 +361,11 @@ export default function StepUp(props) { })) } - // 행 선택 핸들러 함수 추가 + /** + * 행 선택 핸들러 함수 추가 + */ const handleRowClick = (mainIdx, subIdx) => { - // 자동 승압 설정인 경우만 실행 + /** 자동 승압 설정인 경우만 실행 */ if (allocationType !== 'auto') return let tempStepUpListData = [...stepUpListData] @@ -359,26 +377,24 @@ export default function StepUp(props) { } item.selected = index === subIdx }) - // 선택된 행 정보 저장 + /** 선택된 행 정보 저장 */ setStepUpListData(tempStepUpListData) - // console.log('🚀 ~ handleRowClick ~ tempStepUpListData:', tempStepUpListData) - // console.log('🚀 ~ handleRowClick ~ selectedData:', selectedData) - - // PCS 2개 이상 또는 첫번째 PCS 선택 시에만 실행 + /** PCS 2개 이상 또는 첫번째 PCS 선택 시에만 실행 */ if (tempStepUpListData[0].pcsItemList.length > 1 && mainIdx === 0) { - // 파워컨디셔너 옵션 조회 요청 파라미터 + /** 파워컨디셔너 옵션 조회 요청 파라미터 */ const params = { ...props.getOptYn(), // 옵션 Y/N useModuleItemList: props.getUseModuleItemList(), // 사용된 모듈아이템 List roofSurfaceList: props.getRoofSurfaceList(), // 지붕면 목록 pcsItemList: props.getSelectedPcsItemList().map((pcsItem, index) => { - // PCS 아이템 목록 - // tempStepUpListData에서 해당 PCS 아이템 찾기 - // uniqueIndex를 사용하여 매칭 + /** PCS 아이템 목록 + * tempStepUpListData에서 해당 PCS 아이템 찾기 + * uniqueIndex를 사용하여 매칭 + */ const matchingPcsItem = tempStepUpListData[0].pcsItemList.find((item) => item.uniqueIndex === `${pcsItem.itemId}_${index}`) - // 선택된 serQty 찾기 + /** 선택된 serQty 찾기 */ const selectedSerQty = matchingPcsItem?.serQtyList.find((serQty) => serQty.selected)?.serQty || 0 return { @@ -388,34 +404,29 @@ export default function StepUp(props) { }), } - // PCS가 1개 이고 2번째 또는 3번째 PCS serQty가 0인 경우는 추천 API 실행하지 않음 + /** PCS가 1개 이고 2번째 또는 3번째 PCS serQty가 0인 경우는 추천 API 실행하지 않음 */ if (params.pcsItemList.length !== 1 && (params.pcsItemList[1]?.applySerQty !== 0 || params.pcsItemList[2]?.applySerQty) !== 0) { - // PCS 승압설정 정보 조회 - //const res = await getPcsVoltageStepUpList(params) - //getPcsManualConfChk(params).then((res) => { + /** PCS 승압설정 정보 조회 */ getPcsVoltageStepUpList(params).then((res) => { if (res?.result.resultCode === 'S' && res?.data) { const dataArray = Array.isArray(res.data) ? res.data : [res.data] const stepUpListData = formatStepUpListData(dataArray) - // PCS 승압설정 정보 SET + /** PCS 승압설정 정보 SET */ setStepUpListData(stepUpListData) - // PCS 옵션 조회 + /** PCS 옵션 조회 */ const formattedOptCodes = formatOptionCodes(res.data.optionList) setOptCodes(formattedOptCodes) setSeletedOption(formattedOptCodes[0]) } else { swalFire({ text: getMessage('common.message.send.error') }) - // swalFire({ - // title: res.result.resultMsg, - // type: 'alert', - // }) } }) } } + /** 모듈 목록 삭제 */ canvas .getObjects() .filter((obj) => obj.name === POLYGON_TYPE.MODULE) @@ -425,13 +436,14 @@ export default function StepUp(props) { module.pcsItemId = null }) + /** 선택된 모듈 목록 추가 */ selectedData.roofSurfaceList.forEach((roofSurface) => { const targetSurface = canvas.getObjects().filter((obj) => obj.id === roofSurface.roofSurfaceId)[0] const moduleIds = targetSurface.modules.map((module) => { return module.id }) - // 모듈 목록 삭제 + /** 모듈 목록 삭제 */ canvas .getObjects() .filter((obj) => moduleIds.includes(obj.parentId)) @@ -439,7 +451,7 @@ export default function StepUp(props) { canvas.remove(text) }) - // 모듈 목록 추가 + /** 모듈 목록 추가 */ canvas.renderAll() roofSurface.moduleList.forEach((module) => { @@ -475,7 +487,9 @@ export default function StepUp(props) { setModuleStatisticsData() } - // 현재 선택된 값들을 가져오는 함수 추가 + /** + * 현재 선택된 값들을 가져오는 함수 추가 + */ const getCurrentSelections = () => { const selectedValues = stepUpListData[0].pcsItemList.forEach((item) => { item.serQtyList.filter((serQty) => serQty.selected) @@ -496,20 +510,20 @@ export default function StepUp(props) { return selectedValues } - // props로 getCurrentSelections 함수 전달 + /** props로 getCurrentSelections 함수 전달 */ useEffect(() => { if (props.onInitialize) { props.onInitialize(getCurrentSelections) } }, []) - // stepUpListData가 변경될 때마다 업데이트하는 useEffect + /** stepUpListData가 변경될 때마다 업데이트하는 useEffect */ useEffect(() => { if (props.onInitialize) { - // onInitialize를 props에서 가져옴 + /** onInitialize를 props에서 가져옴 */ props.onInitialize(() => ({ ...getCurrentSelections(), - stepUpListData, // stepUpListData를 포함하여 반환 + stepUpListData /** stepUpListData를 포함하여 반환 */, })) } }, [stepUpListData]) @@ -524,9 +538,7 @@ export default function StepUp(props) { {optCodes.length > 0 && (
- {/* */} { return { ...roof, name: globalLocale === 'ko' ? roof.name : roof.nameJp } })} @@ -628,8 +640,6 @@ export default function StepUp(props) { - {/* - */} diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index bfa86372..a7decdb7 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -17,10 +17,14 @@ import { globalLocaleStore } from '@/store/localeAtom' import { onlyNumberInputChange } from '@/util/input-utils' import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util' +/** + * 지붕 레이아웃 + */ export const ROOF_MATERIAL_LAYOUT = { PARALLEL: 'P', STAIRS: 'S', } + export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, planNo, openPoint }) { const [showSizeGuideModal, setShowSizeGuidModal] = useState(false) const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false) @@ -31,9 +35,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting() const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) const { findCommonCode } = useCommonCode() - const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보 - const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보 - const { closePopup } = usePopup() // usePopup에서 closeAll 함수 가져오기 + const [raftCodes, setRaftCodes] = useState([]) /** 서까래 정보 */ + const [currentRoof, setCurrentRoof] = useState(null) /** 현재 선택된 지붕재 정보 */ + const { closePopup } = usePopup() /** usePopup에서 closePopup 함수 가져오기 */ const roofRef = { roofCd: useRef(null), @@ -100,6 +104,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla if (openPoint && openPoint === 'canvasMenus') fetchBasicSettings(planNo, openPoint) }, []) + /** + * 배치면초기설정 데이터 조회 후 화면 오픈 + */ useEffect(() => { if (addedRoofs.length > 0) { const raftCodeList = findCommonCode('203800') @@ -145,6 +152,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla setCurrentRoof({ ...currentRoof, roofAngleSet: value }) } + /** + * 지붕재 변경 시 현재 지붕 정보 변경 + */ const handleRoofTypeChange = (value) => { const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value) @@ -159,15 +169,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla }) } + /** + * 입력 값 변경 시 현재 지붕 정보 변경 + */ const changeInput = (value, e) => { const { name } = e.target setCurrentRoof({ ...currentRoof, [name]: Number(value) }) } + /** + * 서까래 변경 시 현재 지붕 정보 변경 + */ const handleRafterChange = (value) => { setCurrentRoof({ ...currentRoof, raft: value }) } + /** + * 지붕 레이아웃 변경 시 현재 지붕 정보 변경 + */ const handleRoofLayoutChange = (value) => { if (+currentRoof.roofSizeSet === 3) { setCurrentRoof({ ...currentRoof, layout: ROOF_MATERIAL_LAYOUT.PARALLEL }) @@ -176,6 +195,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla setCurrentRoof({ ...currentRoof, layout: value }) } + /** + * 배치면초기설정 저장 버튼 클릭 + */ const handleSaveBtn = () => { const roofInfo = { ...currentRoof, @@ -321,7 +343,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla ? currentRoof?.roofMatlNm : currentRoof?.roofMatlNmJp } - //ref={roofRef.roofCd} options={roofMaterials.map((roof) => { return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp } })} @@ -332,23 +353,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla showKey="name" disabled={currentRoof?.roofSizeSet === '3'} /> - {/* */} {currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && (
@@ -365,14 +369,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla disabled={currentRoof?.roofSizeSet === '3'} />
- {/*
- -
*/} )} {currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && ( @@ -390,14 +386,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla disabled={currentRoof?.roofSizeSet === '3'} /> - {/*
- -
*/} )} {currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && ( @@ -407,7 +395,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft)) .clCodeNm @@ -419,15 +406,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla showKey="clCodeNm" disabled={currentRoof?.roofSizeSet === '3'} /> - {/* */}
)} diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 4dc7d839..5fb72a1f 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -27,7 +27,6 @@ import { moduleSelectionDataState } from '@/store/selectedModuleOptions' import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController' import { outerLinePointsState } from '@/store/outerLineAtom' -// 지붕면 할당 export function useRoofAllocationSetting(id) { const canvas = useRecoilValue(canvasState) const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState) @@ -40,8 +39,8 @@ export function useRoofAllocationSetting(id) { const roofMaterials = useRecoilValue(roofMaterialsSelector) const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState) - const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재 - const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열 + const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) /** 팝업 내 기준 지붕재 */ + const [roofList, setRoofList] = useRecoilState(addedRoofsState) /** 배치면 초기설정에서 선택한 지붕재 배열 */ const [editingLines, setEditingLines] = useState([]) const [currentRoofList, setCurrentRoofList] = useState([]) const currentAngleType = useRecoilValue(currentAngleTypeSelector) @@ -57,14 +56,25 @@ export function useRoofAllocationSetting(id) { const resetPoints = useResetRecoilState(outerLinePointsState) useEffect(() => { + /** 배치면 초기설정에서 선택한 지붕재 배열 설정 */ setCurrentRoofList(roofList) }, []) useEffect(() => { - const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines + const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) /** roofPolygon.innerLines */ roofBases.forEach((roof) => { + /** 현재 선택된 라인인 경우 라인 두께 2로 설정 */ + if (editingLines.includes(line)) { + line.set({ + strokeWidth: 2, + stroke: 'black', + selectable: true, + }) + } + roof.innerLines.forEach((line) => { + /** 실측값이 없는 경우 라인 두께 4로 설정 */ if (!line.attributes.actualSize || line.attributes?.actualSize === 0) { line.set({ strokeWidth: 4, @@ -73,6 +83,7 @@ export function useRoofAllocationSetting(id) { }) } + /** 현재 선택된 라인인 경우 라인 두께 2로 설정 */ if (editingLines.includes(line)) { line.set({ strokeWidth: 2, @@ -82,6 +93,8 @@ export function useRoofAllocationSetting(id) { } }) }) + + /** 현재 선택된 객체가 보조라인, 피라미드, 힙인 경우 두께 4로 설정 */ if (currentObject && currentObject.name && ['auxiliaryLine', 'ridge', 'hip'].includes(currentObject.name)) { currentObject.set({ strokeWidth: 4, @@ -91,20 +104,21 @@ export function useRoofAllocationSetting(id) { }, [currentObject]) useEffect(() => { - // canvas.getObjects().filter((obj) => obj.type === 'QLine') + /** 현재 선택된 객체가 보조라인, 피라미드, 힙인 경우 두께 4로 설정 */ const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) if (roofBases.length === 0) { swalFire({ text: '할당할 지붕이 없습니다.' }) closePopup(id) } - fetchBasicSettings(basicSetting.planNo, null) + /** 배치면 초기설정 조회 */ + fetchBasicSettings(basicSetting.planNo) }, []) /** - * 지붕면 할당 조회 및 초기화 + * 배치면 초기설정 조회 */ - const fetchBasicSettings = async (planNo, openPoint) => { + const fetchBasicSettings = async (planNo) => { try { await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`, @@ -169,7 +183,6 @@ export function useRoofAllocationSetting(id) { }) } - // setCurrentRoofList(selectRoofs) setBasicSetting({ ...basicSetting, planNo: res[0].planNo, @@ -178,6 +191,7 @@ export function useRoofAllocationSetting(id) { roofsData: roofsArray, selectedRoofMaterial: selectRoofs.find((roof) => roof.selected), }) + setBasicInfo({ planNo: '' + res[0].planNo, roofSizeSet: '' + res[0].roofSizeSet, @@ -220,12 +234,17 @@ export function useRoofAllocationSetting(id) { //Recoil 설정 //setCanvasSetting({ ...basicSetting }) - fetchBasicSettings(basicSetting.planNo, null) + + /** 배치면 초기설정 조회 */ + fetchBasicSettings(basicSetting.planNo) } catch (error) { swalFire({ text: error.message, icon: 'error' }) } } + /** + * 지붕재 추가 + */ const onAddRoofMaterial = () => { if (currentRoofList.length >= 4) { swalFire({ type: 'alert', icon: 'error', text: getMessage('지붕재는 4개까지 선택 가능합니다.') }) @@ -243,6 +262,9 @@ export function useRoofAllocationSetting(id) { ]) } + /** + * 지붕재 삭제 + */ const onDeleteRoofMaterial = (idx) => { const isSelected = currentRoofList[idx].selected const newRoofList = JSON.parse(JSON.stringify(currentRoofList)).filter((_, index) => index !== idx) @@ -292,6 +314,9 @@ export function useRoofAllocationSetting(id) { closeAll() } + /** + * 지붕면 할당 + */ const handleAlloc = () => { if (!checkInnerLines()) { apply() @@ -304,6 +329,9 @@ export function useRoofAllocationSetting(id) { } } + /** + * 실측값 없는 경우 체크 + */ const checkInnerLines = () => { const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines let result = false @@ -327,6 +355,9 @@ export function useRoofAllocationSetting(id) { return result } + /** + * 지붕면 할당 + */ const apply = () => { const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && !obj.roofMaterial) const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) @@ -340,6 +371,8 @@ export function useRoofAllocationSetting(id) { } catch (e) { return } + + /** 라인 삭제 */ roofBase.innerLines.forEach((line) => { canvas.remove(line) }) @@ -347,10 +380,12 @@ export function useRoofAllocationSetting(id) { canvas.remove(roofBase) }) + /** 벽면 삭제 */ wallLines.forEach((wallLine) => { canvas.remove(wallLine) }) + /** 데이터 설정 */ const newRoofList = currentRoofList.map((roof, idx) => { return { ...roof, index: idx, ...basicInfo } }) @@ -370,6 +405,8 @@ export function useRoofAllocationSetting(id) { roof.set({ isFixed: true, }) + + /** 모양 패턴 설정 */ setSurfaceShapePattern( roof, roofDisplay.column, @@ -379,6 +416,7 @@ export function useRoofAllocationSetting(id) { drawDirectionArrow(roof) }) + /** 외곽선 삭제 */ const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' || obj.name === 'outerLine') removeTargets.forEach((obj) => { canvas.remove(obj) @@ -387,9 +425,13 @@ export function useRoofAllocationSetting(id) { closeAll() setSelectedMenu('surface') + /** 모듈 선택 데이터 초기화 */ modifyModuleSelectionData() } + /** + * 라인 사이즈 설정 + */ const setLineSize = (id, size) => { const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) roofBases.forEach((roof) => { @@ -452,6 +494,9 @@ export function useRoofAllocationSetting(id) { setCurrentRoofList(newRoofList) } + /** + * 레이아웃 변경 + */ const handleChangeLayout = (layoutValue, index) => { const newRoofList = currentRoofList.map((roof, idx) => { if (idx === index) { @@ -463,6 +508,9 @@ export function useRoofAllocationSetting(id) { setCurrentRoofList(newRoofList) } + /** + * 치수 입력방법(복시도입력/실측값입력/육지붕) + */ const handleChangeInput = (e, type = '', index) => { const value = e.target.value const newRoofList = currentRoofList.map((roof, idx) => { @@ -475,6 +523,9 @@ export function useRoofAllocationSetting(id) { setCurrentRoofList(newRoofList) } + /** + * 피치 변경 + */ const handleChangePitch = (e, index) => { let value = e.target.value @@ -504,6 +555,9 @@ export function useRoofAllocationSetting(id) { } } + /** + * 모듈 선택 데이터 트리거 + */ const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2) return { diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 0addc5c8..012e5bdc 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -1,8 +1,12 @@ import { atom, selector } from 'recoil' +/** + * 디스플레이 설정 + */ export const settingModalFirstOptionsState = atom({ key: 'settingModalFirstOptions', default: { + /** 디스플레이 설정 */ option1: [ { id: 1, column: 'allocDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: true }, { id: 2, column: 'outlineDisplay', name: 'modal.canvas.setting.first.option.outline', selected: true }, @@ -15,6 +19,7 @@ export const settingModalFirstOptionsState = atom({ { id: 9, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false }, { id: 10, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: true }, ], + /** 치수 표시 */ dimensionDisplay: [ { id: 1, @@ -25,6 +30,7 @@ export const settingModalFirstOptionsState = atom({ { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false }, { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false }, ], + /** 화면 표시 */ option2: [ { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: true }, { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false }, @@ -34,15 +40,20 @@ export const settingModalFirstOptionsState = atom({ dangerouslyAllowMutability: true, }) +/** + * 디스플레이 설정 - 문자 표시 + */ export const settingModalSecondOptionsState = atom({ key: 'settingModalSecondOptions', default: { + /** 문자 표시 */ option3: [ { id: 1, name: 'modal.canvas.setting.font.plan.edit.word' }, { id: 2, name: 'modal.canvas.setting.font.plan.edit.flow' }, { id: 3, name: 'modal.canvas.setting.font.plan.edit.dimension' }, { id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' }, ], + /** 흡수범위 */ option4: [ { id: 1, @@ -77,6 +88,9 @@ export const settingModalSecondOptionsState = atom({ dangerouslyAllowMutability: true, }) +/** + * 디스플레이 설정 - 그리드 표시 + */ export const settingModalGridOptionsState = atom({ key: 'settingModalGridOptions', default: [ @@ -88,7 +102,9 @@ export const settingModalGridOptionsState = atom({ dangerouslyAllowMutability: true, }) -// 디스플레이 설정 - 할당 표시 +/** + * 디스플레이 설정 - 할당 표시 + */ export const allocDisplaySelector = selector({ key: 'allocDisplaySelector', get: ({ get }) => { @@ -97,7 +113,9 @@ export const allocDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 외벽선 표시 +/** + * 디스플레이 설정 - 외벽선 표시 + */ export const outlineDisplaySelector = selector({ key: 'outlineDisplaySelector', get: ({ get }) => { @@ -106,7 +124,9 @@ export const outlineDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 그리드 표시 +/** + * 디스플레이 설정 - 그리드 표시 + */ export const gridDisplaySelector = selector({ key: 'gridDisplaySelector', get: ({ get }) => { @@ -115,7 +135,9 @@ export const gridDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 지붕선 표시 +/** + * 디스플레이 설정 - 지붕선 표시 + */ export const roofLineDisplaySelector = selector({ key: 'lineDisplaySelector', get: ({ get }) => { @@ -124,7 +146,9 @@ export const roofLineDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 문자 표시 +/** + * 디스플레이 설정 - 문자 표시 + */ export const wordDisplaySelector = selector({ key: 'wordDisplaySelector', get: ({ get }) => { @@ -133,7 +157,9 @@ export const wordDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 회로번호 표시 +/** + * 디스플레이 설정 - 회로번호 표시 + */ export const circuitNumDisplaySelector = selector({ key: 'circuitNumDisplaySelector', get: ({ get }) => { @@ -142,7 +168,9 @@ export const circuitNumDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 흐름 방향 표시 +/** + * 디스플레이 설정 - 흐름 방향 표시 + */ export const flowDisplaySelector = selector({ key: 'flowDisplaySelector', get: ({ get }) => { @@ -151,7 +179,9 @@ export const flowDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 가대 표시 +/** + * 디스플레이 설정 - 가대 표시 + */ export const trestleDisplaySelector = selector({ key: 'trestleDisplaySelector', get: ({ get }) => { @@ -160,7 +190,9 @@ export const trestleDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 이미지 표시 +/** + * 디스플레이 설정 - 이미지 표시 + */ export const imageDisplaySelector = selector({ key: 'imageDisplaySelector', get: ({ get }) => { @@ -169,7 +201,9 @@ export const imageDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 집계표 표시 +/** + * 디스플레이 설정 - 집계표 표시 + */ export const totalDisplaySelector = selector({ key: 'totalDisplaySelector', get: ({ get }) => { @@ -178,7 +212,9 @@ export const totalDisplaySelector = selector({ }, }) -// 디스플레이 설정 - 치수 표시 +/** + * 디스플레이 설정 - 치수 표시 + */ export const corridorDimensionSelector = selector({ key: 'corridorDimensionSelector', get: ({ get }) => { @@ -188,7 +224,9 @@ export const corridorDimensionSelector = selector({ dangerouslyAllowMutability: true, }) -// 디스플레이 설정 - 화면 표시 +/** + * 디스플레이 설정 - 화면 표시 + */ export const roofDisplaySelector = selector({ key: 'roofDisplaySelector', get: ({ get }) => { @@ -198,29 +236,39 @@ export const roofDisplaySelector = selector({ dangerouslyAllowMutability: true, }) +/** + * basicSetting 설정 + */ export const basicSettingState = atom({ key: 'basicSettingState', default: { - roofSizeSet: 1, - roofAngleSet: 'slope', - selectedRoofMaterial: {}, // 선택된 지붕재 - roofs: [], // 지붕면 할당에서 추가된 지붕재 목록 + roofSizeSet: 1 /** 지붕크기 */, + roofAngleSet: 'slope' /** 지붕각도 */, + selectedRoofMaterial: {} /** 선택된 지붕재 */, + roofs: [] /** 지붕면 할당에서 추가된 지붕재 목록 */, }, dangerouslyAllowMutability: true, }) +/** + * 지붕면 할당에서 추가된 지붕재 목록 + */ export const addedRoofsState = atom({ key: 'addedRoofsState', default: [], }) -// db에 등록된 지붕재 목록 +/** + * db에 등록된 지붕재 목록 + */ export const roofMaterialsAtom = atom({ key: 'roofMaterialState', default: [], }) -//현재 선택된 지붕재 +/** + * 현재 선택된 지붕재 + */ export const selectedRoofMaterialSelector = selector({ key: 'selectedRoofMaterialSelector', get: ({ get }) => { @@ -228,7 +276,9 @@ export const selectedRoofMaterialSelector = selector({ }, }) -// QSelectBox에서 사용할 지붕재 목록 +/** + * QSelectBox에서 사용할 지붕재 목록 + */ export const roofMaterialsSelector = selector({ key: 'roofMaterialsSelector', get: ({ get }) => { @@ -245,6 +295,9 @@ export const correntObjectNoState = atom({ default: '', }) +/** + * 지붕재 목록 조회 여부 + */ export const fetchRoofMaterialsState = atom({ key: 'fetchRoofMaterialsState', default: false,
名称昇圧回路数{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')} {getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}