- Canvas Setting 메뉴 변경
This commit is contained in:
minsik
parent
99633bda4a
commit
0c97f9d4a8
@ -53,11 +53,14 @@ export default function FloorPlan() {
|
||||
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
||||
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
|
||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
|
||||
...item,
|
||||
}))
|
||||
// 데이터 설정
|
||||
setSettingModalFirstOptions({
|
||||
option1: optionData1,
|
||||
option2: optionData2,
|
||||
dimensionDisplay: optionData5,
|
||||
})
|
||||
setSettingModalSecondOptions({
|
||||
option3: optionData3,
|
||||
|
||||
@ -9,7 +9,7 @@ export default function FirstOption() {
|
||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
|
||||
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
|
||||
const { option1, option2 } = settingModalFirstOptions
|
||||
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
||||
const { option3, option4 } = settingModalSecondOptions
|
||||
const { getMessage } = useMessage()
|
||||
const { get, post } = useAxios()
|
||||
@ -28,12 +28,17 @@ export default function FirstOption() {
|
||||
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
||||
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
|
||||
...item,
|
||||
}))
|
||||
|
||||
// 데이터 설정
|
||||
setSettingModalFirstOptions({
|
||||
option1: optionData1,
|
||||
option2: optionData2,
|
||||
dimensionDisplay: optionData5,
|
||||
})
|
||||
console.log('optionData5', optionData5)
|
||||
setSettingModalSecondOptions({
|
||||
option3: optionData3,
|
||||
option4: optionData4,
|
||||
@ -46,7 +51,7 @@ export default function FirstOption() {
|
||||
const onClickOption = async (option) => {
|
||||
option.selected = !option.selected
|
||||
|
||||
setSettingModalFirstOptions({ option1, option2 })
|
||||
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
||||
setSettingModalSecondOptions({ option3, option4 })
|
||||
|
||||
try {
|
||||
@ -106,30 +111,48 @@ export default function FirstOption() {
|
||||
}
|
||||
}
|
||||
|
||||
const onClickDimension = (item) => {
|
||||
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
|
||||
option.selected = option.id === item.id
|
||||
return option
|
||||
})
|
||||
|
||||
setSettingModalFirstOptions({ option1, option2, dimensionDisplay: options })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<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">
|
||||
{settingModalFirstOptions &&
|
||||
settingModalFirstOptions.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>
|
||||
))}
|
||||
{settingModalFirstOptions?.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.dimension')}</h3>
|
||||
<div className="flex-check-box for-line">
|
||||
{settingModalFirstOptions?.dimensionDisplay?.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(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">
|
||||
{settingModalFirstOptions &&
|
||||
settingModalFirstOptions.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>
|
||||
))}
|
||||
{settingModalFirstOptions?.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>
|
||||
</>
|
||||
|
||||
@ -28,11 +28,14 @@ export default function SecondOption() {
|
||||
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
||||
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
|
||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
|
||||
...item,
|
||||
}))
|
||||
// 데이터 설정
|
||||
setSettingModalFirstOptions({
|
||||
option1: optionData1,
|
||||
option2: optionData2,
|
||||
dimensionDisplay: optionData5,
|
||||
})
|
||||
setSettingModalSecondOptions({
|
||||
option3: optionData3,
|
||||
|
||||
@ -6,21 +6,30 @@ export const settingModalFirstOptionsState = atom({
|
||||
option1: [
|
||||
{ id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
|
||||
{ id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
|
||||
{ id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: false },
|
||||
{ id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
|
||||
{ id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
|
||||
{ id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
|
||||
{ id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
|
||||
{ id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
|
||||
{ id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
|
||||
{ id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
|
||||
{ id: 3, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
|
||||
{ id: 4, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
|
||||
{ id: 5, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
|
||||
{ id: 6, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
|
||||
{ id: 7, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
|
||||
{ id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
|
||||
{ id: 9, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
|
||||
{
|
||||
id: 11,
|
||||
id: 10,
|
||||
column: 'drawConverDisplay',
|
||||
name: 'modal.canvas.setting.first.option.corridor.dimension',
|
||||
selected: false,
|
||||
},
|
||||
],
|
||||
dimensionDisplay: [
|
||||
{
|
||||
id: 1,
|
||||
column: 'corridorDimension',
|
||||
name: 'modal.canvas.setting.first.option.corridor.dimension',
|
||||
selected: false,
|
||||
},
|
||||
{ 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: false },
|
||||
{ id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
|
||||
@ -41,7 +50,12 @@ export const settingModalSecondOptionsState = atom({
|
||||
],
|
||||
option4: [
|
||||
{ id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true },
|
||||
{ id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false },
|
||||
{
|
||||
id: 2,
|
||||
column: 'adsorpRangeSmallSemi',
|
||||
name: 'modal.canvas.setting.font.plan.absorption.small.semi',
|
||||
selected: false,
|
||||
},
|
||||
{ id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false },
|
||||
{ id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false },
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user