diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx
index 60181021..54b22b3b 100644
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@@ -47,7 +47,7 @@ const fontColors = [
]
export default function FontSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
- const { id, setIsShow, pos = contextPopupPosition, type } = props
+ const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
@@ -83,7 +83,7 @@ export default function FontSetting(props) {
className="modal-close"
onClick={() => {
if (setIsShow) setIsShow(false)
- closePopup(id)
+ closePopup(id, isConfig)
}}
>
닫기
diff --git a/src/components/common/popupManager/PopupManager.jsx b/src/components/common/popupManager/PopupManager.jsx
index aa4b6cae..f24a8526 100644
--- a/src/components/common/popupManager/PopupManager.jsx
+++ b/src/components/common/popupManager/PopupManager.jsx
@@ -5,5 +5,9 @@ import { Fragment } from 'react'
export default function PopupManager() {
const [popup, setPopup] = useRecoilState(popupState)
- return popup.children?.map((child) => {child.component})
+
+ return [
+ ...popup?.config.map((child) => {child.component}),
+ ...popup?.other.map((child) => {child.component}),
+ ]
}
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index adcd34b3..22ac4131 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -129,7 +129,7 @@ export default function CanvasMenu(props) {
const handlePopup = () => {
const id = uuidv4()
- addPopup(id, 0, )
+ addPopup(id, 1, , true)
}
useEffect(() => {
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx
index 5edb2167..8ef1095f 100644
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@@ -78,14 +78,14 @@ export default function GridOption() {
// 점 선 그리드 설정 모달
setShowDotLineGridModal(selectedOption.selected)
- addPopup(dotLineId, 2, )
+ addPopup(dotLineId, 2, , true)
} else if (selectedOption.id === 3) {
// 흡착점 모드
setAdsorptionPointAddMode(selectedOption.selected)
} else if (selectedOption.id === 4) {
// 그리드 색 설정 모달
setShowColorPickerModal(selectedOption.selected)
- addPopup(colorId, 2, )
+ addPopup(colorId, 2, , true)
}
setGridOptions(newGridOptions)
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
index c09dfdc1..385c7bef 100644
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
@@ -67,6 +67,7 @@ export default function SecondOption() {
id: fontId,
pos: { x: 745, y: 180 },
setIsShow: setShowFontSettingModal,
+ isConfig: true,
}
const planSizeProps = {
id: planSizeId,
@@ -86,36 +87,41 @@ export default function SecondOption() {
case 'font1': {
//문자 글꼴변경
setShowFontSettingModal(true)
+ setShowDimensionLineSettingModal(false)
fontProps.type = 'commonText'
fontProps.id = fontId + 1
- addPopup(fontId + 1, 2, )
+ addPopup(fontId + 1, 2, , true)
break
}
case 'font2': {
//흐름 방향 글꼴 변경
setShowFontSettingModal(true)
+ setShowDimensionLineSettingModal(false)
fontProps.type = 'flowText'
fontProps.id = fontId + 2
- addPopup(fontId + 2, 2, )
+ addPopup(fontId + 2, 2, , true)
break
}
case 'font3': {
//치수 글꼴변경
setShowFontSettingModal(true)
+
+ setShowDimensionLineSettingModal(false)
fontProps.type = 'lengthText'
fontProps.id = fontId + 3
- addPopup(fontId + 3, 2, )
+ addPopup(fontId + 3, 2, , true)
break
}
case 'font4': {
//회로번호 글꼴변경
setShowFontSettingModal(true)
+ setShowDimensionLineSettingModal(false)
fontProps.type = 'circuitNumberText'
fontProps.id = fontId
- addPopup(fontId, 2, )
+ addPopup(fontId, 2, , true)
break
}
@@ -123,7 +129,7 @@ export default function SecondOption() {
//치수선 설정
if (!showDimensionLineSettingModal) {
setShowDimensionLineSettingModal(true)
- addPopup(dimensionId, 2, )
+ addPopup(dimensionId, 2, , true)
} else {
setShowDimensionLineSettingModal(false)
closePopup(dimensionId)
@@ -134,7 +140,8 @@ export default function SecondOption() {
case 'planSize': {
//도면크기 설정
setShowPlanSizeSettingModal(true)
- addPopup(planSizeId, 2, )
+ setShowDimensionLineSettingModal(false)
+ addPopup(planSizeId, 2, , true)
break
}
}
diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
index 8570555e..e1bef1f0 100644
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@@ -11,7 +11,7 @@ import { useRecoilValue } from 'recoil'
import { usePopup } from '@/hooks/usePopup'
export default function SettingModal01(props) {
- const { setShowDotLineGridModal, setShowFontSettingModal, id } = props
+ const { setShowDotLineGridModal, setShowFontSettingModal, id, isConfig } = props
console.log(props)
const [buttonAct, setButtonAct] = useState(1)
const { getMessage } = useMessage()
@@ -27,7 +27,7 @@ export default function SettingModal01(props) {
{getMessage('modal.canvas.setting')}
-
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
index 2afbd184..1aa39e74 100644
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@@ -87,6 +87,7 @@ export default function DimensionLineSetting(props) {
setFontColor: setOriginFontColor,
fontSize: originFontSize,
setFontSize: setOriginFontSize,
+ isConfig: true,
id: fontModalId,
pos: {
x: 455,
@@ -97,17 +98,17 @@ export default function DimensionLineSetting(props) {
const popupHandle = (type) => {
switch (type) {
case 'color':
- addPopup(colorModalId, 3,
)
+ addPopup(colorModalId, 3,
, true)
break
case 'font':
- addPopup(fontModalId, 3,
)
+ addPopup(fontModalId, 3,
, true)
break
}
}
return (
-
+
{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}
-
+
{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}
{
setIsShow(false)
- closePopup(id)
+ closePopup(id, true)
}}
>
닫기
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index 84051f74..9099752e 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -475,7 +475,7 @@ export function useContextMenu() {
{
id: 'dimensionLineDisplayEdit',
name: getMessage('contextmenu.display.edit'),
- component: ,
+ component: ,
},
],
])
diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js
index b126996d..5ef59bdc 100644
--- a/src/hooks/usePopup.js
+++ b/src/hooks/usePopup.js
@@ -4,47 +4,90 @@ import { contextPopupState, popupState } from '@/store/popupAtom'
export function usePopup() {
const [popup, setPopup] = useRecoilState(popupState)
const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState)
- const addPopup = (id, depth, component) => {
- setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
+
+ const addPopup = (id, depth, component, isConfig = false) => {
+ setPopup({
+ config: isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.config],
+ other: !isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.other],
+ })
}
- const closePopup = (id) => {
+ const closePopup = (id, isConfig = false) => {
if (contextMenuPopup) setContextMenuPopup(null)
- setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
+ if (isConfig) {
+ setPopup({
+ config: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
+ other: popup.other,
+ })
+ } else {
+ setPopup({
+ config: popup.config,
+ other: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
+ })
+ }
}
const filterPopup = (depth) => {
- setPopup({ children: [...filterDepth(depth)] })
+ setPopup({
+ config: [...filterDepth(depth)],
+ other: [],
+ })
}
- const filterChildrenPopup = (id) => {
- const target = popup.children.filter((child) => child.id === id)
- if (target.length !== 0) {
- return popup.children.filter((child) => child.depth <= target[0].depth)
+ const filterChildrenPopup = (id, isConfig) => {
+ let target = []
+ if (isConfig) {
+ target = popup?.config.filter((child) => child.id === id)
+ } else {
+ target = popup?.other.filter((child) => child.id === id)
}
- return popup.children
+ if (target.length !== 0) {
+ if (isConfig) {
+ return popup?.config.filter((child) => child.depth <= target[0].depth)
+ } else {
+ return popup?.other.filter((child) => child.depth <= target[0].depth)
+ }
+ } else {
+ if (isConfig) {
+ return popup.config
+ } else {
+ return popup.other
+ }
+ }
}
const closePopups = (ids) => {
- setPopup({ children: [...popup.children.filter((child) => !ids.includes(child.id))] })
+ setPopup({
+ config: [...popup?.config.filter((child) => !ids.includes(child.id))],
+ other: [...popup?.other.filter((child) => !ids.includes(child.id))],
+ })
}
const closeAll = () => {
- setPopup({ children: [] })
+ setPopup({
+ other: [],
+ config: [],
+ })
}
const closePrevPopup = () => {
- setPopup({ children: [...popup.children.slice(popup.children.length - 1)] })
+ setPopup({
+ config: [...popup?.slice(popup?.length - 1)],
+ other: [],
+ })
}
- const filterDepth = (depth) => {
- return [...popup.children.filter((child) => child.depth !== depth)]
+ const filterDepth = (depth, isConfig) => {
+ if (isConfig) {
+ return [...popup?.config.filter((child) => child.depth < depth)]
+ } else {
+ return [...popup?.other.filter((child) => child.depth < depth)]
+ }
}
return {
popup,
- setPopup,
addPopup,
closePopup,
closePopups,
diff --git a/src/store/popupAtom.js b/src/store/popupAtom.js
index c5c75501..8cba0bdc 100644
--- a/src/store/popupAtom.js
+++ b/src/store/popupAtom.js
@@ -7,7 +7,8 @@ import { atom } from 'recoil'
export const popupState = atom({
key: 'popupState',
default: {
- children: [],
+ config: [],
+ other: [],
},
dangerouslyAllowMutability: true,
})