Canvas 설정 화면 수정(globalLocale 및 toastUp 적용)
This commit is contained in:
changkyu choi
parent
ea6ba4ef2c
commit
993870e169
@ -4,15 +4,21 @@ import { useEffect, useState } from 'react'
|
||||
import MenuDepth01 from './MenuDepth01'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { post } from '@/lib/Axios'
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
|
||||
import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
|
||||
import { outerLinePointsState } from '@/store/outerLineAtom'
|
||||
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
||||
import { MENU } from '@/common/common'
|
||||
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { toastUp } from '@/hooks/useToast'
|
||||
|
||||
import KO from '@/locales/ko.json'
|
||||
import JA from '@/locales/ja.json'
|
||||
|
||||
export default function CanvasMenu(props) {
|
||||
const [objectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
|
||||
const [menuNumber, setMenuNumber] = useState(null)
|
||||
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
|
||||
@ -22,6 +28,9 @@ export default function CanvasMenu(props) {
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const setCurrentMenu = useSetRecoilState(currentMenuState)
|
||||
const setPoints = useSetRecoilState(outerLinePointsState)
|
||||
const globalLocale = useRecoilValue(globalLocaleStore)
|
||||
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
|
||||
const { post } = useAxios()
|
||||
|
||||
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
|
||||
const onClickNav = (number) => {
|
||||
@ -38,7 +47,13 @@ export default function CanvasMenu(props) {
|
||||
const firstOptions = useRecoilState(settingModalFirstOptionsState)
|
||||
const secondOptions = useRecoilState(settingModalSecondOptionsState)
|
||||
|
||||
useEffect(() => {}, [menuNumber, type])
|
||||
useEffect(() => {
|
||||
if (globalLocale === 'k') {
|
||||
setAppMessageState(KO)
|
||||
} else {
|
||||
setAppMessageState(JA)
|
||||
}
|
||||
}, [menuNumber, type, globalLocale])
|
||||
|
||||
// 저장버튼(btn08) 클릭 시 호출되는 함수
|
||||
const handleSaveSettings = async () => {
|
||||
@ -65,6 +80,7 @@ export default function CanvasMenu(props) {
|
||||
|
||||
const patternData = {
|
||||
objectNo,
|
||||
//디스플레이 설정(다중)
|
||||
assignDisplay: dataToSend.firstOption1[0].selected,
|
||||
drawDisplay: dataToSend.firstOption1[1].selected,
|
||||
gridDisplay: dataToSend.firstOption1[2].selected,
|
||||
@ -76,9 +92,11 @@ export default function CanvasMenu(props) {
|
||||
trestleDisplay: dataToSend.firstOption1[8].selected,
|
||||
coordiDisplay: dataToSend.firstOption1[9].selected,
|
||||
drawConverDisplay: dataToSend.firstOption1[10].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,
|
||||
@ -86,13 +104,11 @@ export default function CanvasMenu(props) {
|
||||
}
|
||||
|
||||
// HTTP POST 요청 보내기
|
||||
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
|
||||
|
||||
// 응답 처리
|
||||
alert('설정이 저장되었습니다.')
|
||||
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
|
||||
toastUp({ message: res.returnMessage, type: 'success' })
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('설정을 저장하는 동안 오류가 발생했습니다:', error)
|
||||
alert('설정을 저장하는 중 오류가 발생했습니다.')
|
||||
toastUp({ message: res.returnMessage, type: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,28 +1,24 @@
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { get } from '@/lib/Axios'
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
|
||||
export default function FirstOption() {
|
||||
const [objectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
|
||||
const { option1, option2 } = settingsModalOptions
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태
|
||||
const { get } = useAxios()
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
console.log('FirstOption useEffect 실행')
|
||||
if (!isFetched) {
|
||||
// 조회가 안 되었을 때만 fetchSettings 실행
|
||||
fetchSettings()
|
||||
}
|
||||
}, [isFetched]) // isFetched 상태가 변할 때마다 확인
|
||||
fetchSettings()
|
||||
}, [objectNo])
|
||||
|
||||
// Canvas Setting 조회 및 초기화
|
||||
const fetchSettings = async () => {
|
||||
const fetchSettings = useCallback(async () => {
|
||||
try {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
||||
|
||||
@ -49,12 +45,10 @@ export default function FirstOption() {
|
||||
option1,
|
||||
option2,
|
||||
})
|
||||
|
||||
setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
}
|
||||
}, [objectNo])
|
||||
|
||||
const onClickOption = (option) => {
|
||||
option.selected = !option.selected
|
||||
@ -67,23 +61,25 @@ export default function FirstOption() {
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
|
||||
<div className="flex-check-box for2">
|
||||
{settingsModalOptions?.option1?.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
{settingsModalOptions &&
|
||||
settingsModalOptions.option1.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
|
||||
<div className="flex-check-box for-line">
|
||||
{settingsModalOptions?.option2?.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
{settingsModalOptions &&
|
||||
settingsModalOptions.option2.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,27 +1,24 @@
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { settingModalSecondOptionsState } from '@/store/settingAtom'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { get } from '@/lib/Axios'
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
|
||||
export default function SecondOption() {
|
||||
const [objectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
|
||||
const { option1, option2 } = settingsModalOptions
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태
|
||||
const { get } = useAxios()
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
console.log('SecondOption useEffect 실행')
|
||||
if (!isFetched) {
|
||||
// 조회가 안 되었을 때만 fetchSettings 실행
|
||||
fetchSettings()
|
||||
}
|
||||
}, [isFetched]) // isFetched 상태가 변할 때마다 확인
|
||||
fetchSettings()
|
||||
}, [objectNo])
|
||||
|
||||
const fetchSettings = async () => {
|
||||
// Canvas Setting 조회 및 초기화
|
||||
const fetchSettings = useCallback(async () => {
|
||||
try {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
||||
|
||||
@ -36,12 +33,10 @@ export default function SecondOption() {
|
||||
option1,
|
||||
option2,
|
||||
})
|
||||
|
||||
setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
}
|
||||
}, [objectNo])
|
||||
|
||||
const onClickOption = (option) => {
|
||||
// option2에서 한 개만 선택 가능하도록 처리
|
||||
@ -54,22 +49,24 @@ export default function SecondOption() {
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.edit')}</h3>
|
||||
<div className="flex-check-box for2">
|
||||
{settingsModalOptions.option1.map((item, index) => (
|
||||
<button key={item.id || index} className="arr-btn">
|
||||
<span>{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
{settingsModalOptions &&
|
||||
settingsModalOptions.option1.map((item) => (
|
||||
<button key={item.id} className="arr-btn">
|
||||
<span>{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.absorption')}</h3>
|
||||
<div className="flex-check-box for-line">
|
||||
{settingsModalOptions.option2.map((item, index) => (
|
||||
<button key={item.id || index} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
{settingsModalOptions &&
|
||||
settingsModalOptions.option2.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-check-box for-line">
|
||||
<button className="arr-btn">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user