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