diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 26d6f1b9..1ce18a85 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -1,113 +1,26 @@
import { useEffect, useState } from 'react'
-import { useRecoilState } from 'recoil'
-
-import { canvasSettingState } from '@/store/canvasAtom'
-import { basicSettingState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
-import { useAxios } from '@/hooks/useAxios'
-import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+
export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
- const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
- const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
- const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
const { closePopup } = usePopup()
- const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
-
const { getMessage } = useMessage()
- const { get, post } = useAxios()
- const { swalFire } = useSwal()
+
+ const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
- console.log('PlacementShapeSetting useEffect 실행')
-
- fetchSettings()
- }, [objectNo])
-
- // PlacementShapeSetting 조회 및 초기화
- const fetchSettings = async () => {
- try {
- await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
- if (res.length == 0) return
-
- // 'roofs' 배열을 생성하여 각 항목을 추가
- const roofsRow = res.map((item) => {
- return {
- roofSizeSet: item.roofSizeSet,
- roofAngleSet: item.roofAngleSet,
- }
- })
-
- const roofsArray = res.some((item) => !item.roofSeq)
- ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
- res.map(() => ({
- roofApply: true,
- roofSeq: 1,
- roofType: 1,
- roofWidth: 200,
- roofHeight: 200,
- roofHajebichi: 200,
- roofGap: 0,
- roofLayout: 'parallel',
- }))
- : res.map((item) => ({
- roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
- roofSeq: item.roofSeq,
- roofType: item.roofType,
- roofWidth: item.roofWidth,
- roofHeight: item.roofHeight,
- roofHajebichi: item.roofHajebichi,
- roofGap: item.roofGap,
- roofLayout: item.roofLayout,
- }))
- console.log('roofsArray ', roofsArray)
- // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
- const patternData = {
- roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
- roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
- roofs: roofsArray, // 만들어진 roofs 배열
- }
-
- // 데이터 설정
- setBasicSettings({ ...patternData })
- })
- } catch (error) {
- console.error('Data fetching error:', error)
- }
-
- if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
- setBasicSettings({ ...canvasSetting })
- }
- }
-
- const submitCanvasConfig = async () => {
- try {
- const patternData = {
- objectNo,
- roofSizeSet: basicSetting.roofSizeSet,
- roofAngleSet: basicSetting.roofAngleSet,
- roofMaterialsAddList: basicSetting.roofs,
- }
-
- await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
- swalFire({ text: getMessage(res.returnMessage) })
- })
-
- //Recoil 설정
- setCanvasSetting({ ...basicSetting })
- } catch (error) {
- swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
- }
- }
+ fetchBasicSettings()
+ }, [])
// Function to update the roofType and corresponding values
const handleRoofTypeChange = (index, value) => {
@@ -122,7 +35,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
roofWidth: 265,
roofHeight: 235,
roofGap: 455,
- hajebichi: 0,
+ roofHajebichi: 0,
}
} else if (roofType === 2) {
updatedRoofs[index] = {
@@ -490,7 +403,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
-
diff --git a/src/components/floor-plan/modal/placementShape/SizeGuide.jsx b/src/components/floor-plan/modal/placementShape/SizeGuide.jsx
index 1f9d2770..fff7dbe8 100644
--- a/src/components/floor-plan/modal/placementShape/SizeGuide.jsx
+++ b/src/components/floor-plan/modal/placementShape/SizeGuide.jsx
@@ -14,7 +14,7 @@ export default function SizeGuide({ setShowSizeGuidModal }) {
-
+
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index d37ce040..6c73efcc 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -1,6 +1,13 @@
import { useCallback, useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
-import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState, dotLineGridSettingState } from '@/store/canvasAtom'
+import {
+ adsorptionPointModeState,
+ adsorptionRangeState,
+ canvasState,
+ planSizeSettingState,
+ dotLineGridSettingState,
+ canvasSettingState,
+} from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
@@ -11,6 +18,7 @@ import {
settingModalFirstOptionsState,
settingModalSecondOptionsState,
settingModalGridOptionsState,
+ basicSettingState,
} from '@/store/settingAtom'
import { POLYGON_TYPE } from '@/common/common'
import { globalFontAtom } from '@/store/fontAtom'
@@ -70,6 +78,9 @@ export function useCanvasSetting() {
const [color, setColor] = useColor(gridColor ?? '#FF0000')
const [colorTemp, setColorTemp] = useState()
+ const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
+ const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
+
const SelectOptions = [
{ id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
{ id: 2, name: '1/2', value: 1 / 2 },
@@ -112,6 +123,14 @@ export function useCanvasSetting() {
console.log('useCanvasSetting 실행1', correntObjectNo)
}, [])
+ // 배치면 초기설정 변경 시
+ useEffect(() => {
+ //console.log('useCanvasSetting canvasSetting 실행', canvasSetting)
+ if (canvasSetting.flag) {
+ basicSettingSave()
+ }
+ }, [canvasSetting])
+
//흡착점 ON/OFF 변경 시
useEffect(() => {
//console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
@@ -232,6 +251,95 @@ export function useCanvasSetting() {
}
}
+ // 기본설정(PlacementShapeSetting) 조회 및 초기화
+ const fetchBasicSettings = async () => {
+ try {
+ await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => {
+ console.log('fetchBasicSettings res ', res)
+ if (res.length == 0) return
+
+ // 'roofs' 배열을 생성하여 각 항목을 추가
+ const roofsRow = res.map((item) => {
+ return {
+ roofSizeSet: item.roofSizeSet,
+ roofAngleSet: item.roofAngleSet,
+ }
+ })
+
+ const roofsArray = res.some((item) => !item.roofSeq)
+ ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
+ res.map(() => ({
+ flag: false,
+ roofApply: true,
+ roofSeq: 1,
+ roofType: 1,
+ roofWidth: 265,
+ roofHeight: 235,
+ roofHajebichi: 0,
+ roofGap: 455,
+ // roofType: 1,
+ // roofWidth: 200,
+ // roofHeight: 200,
+ // roofHajebichi: 200,
+ // roofGap: 0,
+ roofLayout: 'parallel',
+ }))
+ : res.map((item) => ({
+ flag: false,
+ roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
+ roofSeq: item.roofSeq,
+ roofType: item.roofType,
+ roofWidth: item.roofWidth,
+ roofHeight: item.roofHeight,
+ roofHajebichi: item.roofHajebichi,
+ roofGap: item.roofGap,
+ roofLayout: item.roofLayout,
+ }))
+ console.log('roofsArray ', roofsArray)
+ // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+ const patternData = {
+ roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
+ roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
+ roofs: roofsArray, // 만들어진 roofs 배열
+ }
+
+ //console.error('patternData', patternData)
+
+ // 데이터 설정
+ setBasicSettings({ ...patternData })
+ })
+ } catch (error) {
+ console.error('Data fetching error:', error)
+ }
+
+ if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
+ setBasicSettings({ ...canvasSetting })
+ }
+ //setCanvasSetting({ ...basicSetting })
+ }
+
+ // 기본설정(PlacementShapeSetting) 저장
+ const basicSettingSave = async () => {
+ try {
+ const patternData = {
+ objectNo: correntObjectNo,
+ roofSizeSet: basicSetting.roofSizeSet,
+ roofAngleSet: basicSetting.roofAngleSet,
+ roofMaterialsAddList: basicSetting.roofs,
+ }
+
+ await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
+ swalFire({ text: getMessage(res.returnMessage) })
+ })
+
+ //Recoil 설정
+ setCanvasSetting({ ...basicSetting, flag: false })
+ } catch (error) {
+ swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+ }
+ }
+
+ // CanvasSetting 조회 및 초기화
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${correntObjectNo}` })
@@ -382,7 +490,7 @@ export function useCanvasSetting() {
}
}
- // 옵션 클릭 후 저장
+ // CanvasSetting 옵션 클릭 후 저장
const onClickOption2 = useCallback(async () => {
// 서버에 전송할 데이터
const dataToSend = {
@@ -592,7 +700,6 @@ export function useCanvasSetting() {
adsorptionRange,
setAdsorptionRange,
fetchSettings,
- //onClickOption,
frontSettings,
globalFont,
setGlobalFont,
@@ -621,5 +728,11 @@ export function useCanvasSetting() {
setGridColor,
color,
setColor,
+ canvasSetting,
+ setCanvasSetting,
+ basicSetting,
+ setBasicSettings,
+ fetchBasicSettings,
+ basicSettingSave,
}
}