popupManager canvasSetting 적용

src/components/common/color-picker/ColorPickerModal.jsx

@@ -2,20 +2,30 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import ColorPicker from '@/components/common/color-picker/ColorPicker'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { usePopup } from '@/hooks/usePopup'
 
 export default function ColorPickerModal(props) {
-  const { isShow, setIsShow, pos = { x: 800, y: -950 }, color = '#ff0000', setColor } = props
+  const { isShow, setIsShow, pos = { x: 770, y: -815 }, color = '#ff0000', setColor, id } = props
   const { getMessage } = useMessage()
   const [originColor, setOriginColor] = useState(color)
+  const { closePopup } = usePopup()
+
   useEffect(() => {
     setOriginColor(color)
   }, [isShow])
+  
   return (
-    <WithDraggable isShow={isShow} pos={pos}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
-          <button className="modal-close" onClick={() => setIsShow(false)}>
+          <button
+            className="modal-close"
+            onClick={() => {
+              setIsShow(false)
+              closePopup(id)
+            }}
+          >
             닫기
           </button>
         </div>
@@ -32,6 +42,7 @@ export default function ColorPickerModal(props) {
               onClick={() => {
                 setColor(originColor)
                 setIsShow(false)
+                closePopup(id)
               }}
             >
               {getMessage('common.message.save')}

src/components/common/font/FontSetting.jsx

@@ -1,20 +1,23 @@
 import WithDraggable from '@/components/common/draggable/withDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import { usePopup } from '@/hooks/usePopup'
 
 const SelectOption = [{ name: '原寸' }, { name: '原寸' }, { name: '原寸' }, { name: '原寸' }]
 export default function FontSetting(props) {
-  const { setShowFontSettingModal } = props
+  const { id, setShowFontSettingModal } = props
-  console.log(
+  const { closePopup } = usePopup()
-    Array.from({ length: 10 }).map((_, index) => {
-      return { name: 5 + index }
-    }),
-  )
   return (
-    <WithDraggable isShow={true} pos={{ x: 800, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 820, y: -815 }}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">フォント </h1>
-          <button className="modal-close" onClick={() => setShowFontSettingModal(false)}>
+          <button
+            className="modal-close"
+            onClick={() => {
+              setShowFontSettingModal(false)
+              closePopup(id)
+            }}
+          >
             닫기
           </button>
         </div>

src/components/floor-plan/CanvasMenu.jsx

@@ -6,7 +6,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 
 import MenuDepth01 from './MenuDepth01'
 import QSelectBox from '@/components/common/select/QSelectBox'
-
+import { v4 as uuidv4 } from 'uuid'
 import { useMessage } from '@/hooks/useMessage'
 import { usePlan } from '@/hooks/usePlan'
 import { useSwal } from '@/hooks/useSwal'
@@ -157,6 +157,11 @@ export default function CanvasMenu(props) {
   //   canvas.renderAll()
   // }
 
+  const handlePopup = () => {
+    const id = uuidv4()
+    addPopup(id, 1, <SettingModal01 id={id} />)
+  }
+
   useEffect(() => {
     if (globalLocale === 'ko') {
       setAppMessageState(KO)
@@ -203,7 +208,7 @@ export default function CanvasMenu(props) {
               </div>
               <div className="btn-from">
                 {/*<button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>*/}
-                <button className="btn04" onClick={() => addPopup(<SettingModal01 />)}></button>
+                <button className="btn04" onClick={handlePopup}></button>
                 <button className="btn05"></button>
                 <button className="btn06"></button>
               </div>

src/components/floor-plan/FloorPlan.jsx

@@ -8,7 +8,6 @@ import { settingModalFirstOptionsState, settingModalGridOptionsState, settingMod
 import '@/styles/contents.scss'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
-import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
 import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
 import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
 import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
@@ -26,7 +25,6 @@ import MovementSetting from '@/components/floor-plan/modal/movement/MovementSett
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
 import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
-import FontSetting from '@/components/common/font/FontSetting'
 import { gridColorState } from '@/store/gridAtom'
 
 export default function FloorPlan() {
@@ -54,20 +52,10 @@ export default function FloorPlan() {
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
 
-  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
   const [showGridCopyModal, setShowGridCopyModal] = useState(false)
   const [showGridMoveModal, setShowGridMoveModal] = useState(false)
-  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [color, setColor] = useRecoilState(gridColorState)
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
-  const [showFontSettingModal, setShowFontSettingModal] = useState(false)
-
-  const canvasSettingProps = {
-    setShowCanvasSettingModal,
-    setShowDotLineGridModal,
-    setShowColorPickerModal,
-    setShowFontSettingModal,
-  }
 
   const outlineProps = {
     setShowOutlineModal,
@@ -125,17 +113,6 @@ export default function FloorPlan() {
       console.error('Data fetching error:', error)
     }
   }
-  const dotLineProps = {
-    showDotLineGridModal,
-    setShowDotLineGridModal,
-  }
-
-  const gridColorProps = {
-    setShowColorPickerModal,
-    color,
-    setColor,
-    setSettingModalGridOptions,
-  }
 
   const propertiesSettingProps = {
     setShowPropertiesSettingModal,
@@ -149,13 +126,8 @@ export default function FloorPlan() {
         <CanvasMenu {...modalProps} />
         <div className="canvas-content">
           <CanvasLayout />
-          {/*{showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}*/}
           {showOutlineModal && <WallLineSetting {...outlineProps} />}
-          {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
-          {/*{showColorPickerModal && <GridColorSetting {...gridColorProps} />}*/}
-          {showFontSettingModal && <FontSetting setShowFontSettingModal={setShowFontSettingModal} />}
           {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
-          {/*<DimensionLineSetting setShowFontSettingModal={setShowFontSettingModal} setShowColorPickerModal={setShowColorPickerModal} />*/}
           {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
           {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
           {showRoofShapePassivitySettingModal && (

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -10,6 +10,7 @@ import { gridColorState } from '@/store/gridAtom'
 import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
 
 const TYPE = {
   DOT: 'DOT',
@@ -20,7 +21,7 @@ export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [close, setClose] = useState(false)
-  const { setShowDotLineGridModal } = props
+  const { id, setShowDotLineGridModal } = props
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
   const gridColor = useRecoilValue(gridColorState)
   const canvas = useRecoilValue(canvasState)
@@ -32,6 +33,7 @@ export default function DotLineGrid(props) {
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
   const { swalFire } = useSwal()
+  const { closePopup } = usePopup()
 
   useEffect(() => {
     return () => {
@@ -243,6 +245,8 @@ export default function DotLineGrid(props) {
 
         canvas.renderAll()
       })
+      setShowDotLineGridModal(false)
+      closePopup(id)
     } catch (error) {
       swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
     }
@@ -303,11 +307,17 @@ export default function DotLineGrid(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 1300, y: -660 }}>
+    <WithDraggable isShow={true} pos={{ x: 840, y: -815 }}>
       <div className={`modal-pop-wrap ssm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
-          <button className="modal-close" onClick={() => setShowDotLineGridModal(false)}>
+          <button
+            className="modal-close"
+            onClick={() => {
+              setShowDotLineGridModal(false)
+              closePopup(id)
+            }}
+          >
             닫기
           </button>
         </div>

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -7,9 +7,11 @@ import { useTempGrid } from '@/hooks/useTempGrid'
 import { gridColorState } from '@/store/gridAtom'
 import { useColor } from 'react-color-palette'
 import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
+import { usePopup } from '@/hooks/usePopup'
+import { v4 as uuidv4 } from 'uuid'
+import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
 
 export default function GridOption(props) {
-  const { setShowDotLineGridModal } = props
   const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
   const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
@@ -18,6 +20,8 @@ export default function GridOption(props) {
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const [color, setColor] = useColor(gridColor)
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
+  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
+  const { addPopup } = usePopup()
 
   useEffect(() => {
     console.log('GridOption useEffect 실행')
@@ -26,6 +30,7 @@ export default function GridOption(props) {
   }, [color])
 
   useEffect(() => {
+    console.log(showColorPickerModal)
     gridOptions[3].selected = showColorPickerModal
     setGridOptions([...gridOptions])
   }, [showColorPickerModal])
@@ -42,6 +47,7 @@ export default function GridOption(props) {
 
   const onClickOption = (option) => {
     const newGridOptions = [...gridOptions]
+    const id = uuidv4()
     newGridOptions.map((item) => {
       if (item.id === option.id) {
         item.selected = !item.selected
@@ -59,6 +65,7 @@ export default function GridOption(props) {
       // 점.선 그리드
       if (option.selected) {
         setShowDotLineGridModal(true)
+        addPopup(id, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={id} />)
       } else {
         setShowDotLineGridModal(false)
       }
@@ -75,6 +82,7 @@ export default function GridOption(props) {
       console.log(option)
       if (option.selected) {
         setShowColorPickerModal(true)
+        addPopup(id, 2, <ColorPickerModal {...colorPickerProps} id={id} />)
       } else {
         setShowColorPickerModal(false)
       }
@@ -88,10 +96,6 @@ export default function GridOption(props) {
     setColor: setGridColor,
     isShow: showColorPickerModal,
     setIsShow: setShowColorPickerModal,
-    pos: {
-      x: -515,
-      y: -214,
-    },
   }
 
   return (
@@ -107,7 +111,7 @@ export default function GridOption(props) {
           ))}
         </div>
       </div>
-      <ColorPickerModal {...colorPickerProps} />
+      {/*<ColorPickerModal {...colorPickerProps} />*/}
     </>
   )
 }

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -6,8 +6,11 @@ import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
 import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
+import { usePopup } from '@/hooks/usePopup'
+import { v4 as uuidv4 } from 'uuid'
+import FontSetting from '@/components/common/font/FontSetting'
 
-export default function SecondOption({ setShowFontSettingModal }) {
+export default function SecondOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
@@ -19,15 +22,9 @@ export default function SecondOption({ setShowFontSettingModal }) {
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
   const { swalFire } = useSwal()
+  const { addPopup } = usePopup()
+  const [showFontSettingModal, setShowFontSettingModal] = useState(false)
   const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
-  const dimensionLineSettingProps = {
-    isShow: showDimensionLineSettingModal,
-    setIsShow: setShowDimensionLineSettingModal,
-    pos: {
-      x: -515,
-      y: -214,
-    },
-  }
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
@@ -138,6 +135,21 @@ export default function SecondOption({ setShowFontSettingModal }) {
     setAdsorptionRange(option.range)
   }
 
+  const handlePopup = (type) => {
+    const id = uuidv4()
+
+    switch (type) {
+      case 'dimensionLine':
+        addPopup(id, 2, <DimensionLineSetting id={id} />)
+        break
+      case 'font1': //문자 글꼴변경
+      case 'font2': //흐름 방향 글꼴 변경
+      case 'font3': //치수 글꼴변경
+      case 'font4': //회로번호 글꼴변경
+        addPopup(id, 2, <FontSetting id={id} setShowFontSettingModal={setShowFontSettingModal} />)
+    }
+  }
+
   return (
     <>
       <div className="modal-check-btn-wrap">
@@ -145,7 +157,7 @@ export default function SecondOption({ setShowFontSettingModal }) {
         <div className="flex-check-box for2">
           {settingModalSecondOptions &&
             settingModalSecondOptions.option3.map((item) => (
-              <button key={item.id} className="arr-btn" onClick={() => setShowFontSettingModal(true)}>
+              <button key={item.id} className="arr-btn" onClick={() => handlePopup('font' + item.id)}>
                 <span>{getMessage(item.name)}</span>
               </button>
             ))}
@@ -163,7 +175,8 @@ export default function SecondOption({ setShowFontSettingModal }) {
             ))}
         </div>
         <div className="flex-check-box for-line">
-          <button className="arr-btn" onClick={() => setShowDimensionLineSettingModal(true)}>
+          {/*<button className="arr-btn" onClick={() => setShowDimensionLineSettingModal(true)}>*/}
+          <button className="arr-btn" onClick={() => handlePopup('dimensionLine')}>
             <span>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}</span>
           </button>
           <button className="arr-btn">
@@ -180,7 +193,6 @@ export default function SecondOption({ setShowFontSettingModal }) {
           </button>
         </div>
       </div>
-      <DimensionLineSetting {...dimensionLineSettingProps} />
     </>
   )
 }

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -8,24 +8,26 @@ import { useMessage } from '@/hooks/useMessage'
 import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
 import { canGridOptionSeletor } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
+import { usePopup } from '@/hooks/usePopup'
 
 export default function SettingModal01(props) {
-  const { setShowCanvasSettingModal, setShowDotLineGridModal, setShowFontSettingModal } = props
+  const { setShowDotLineGridModal, setShowFontSettingModal, id } = props
+  console.log(props)
   const [buttonAct, setButtonAct] = useState(1)
   const { getMessage } = useMessage()
   const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
-
+  const { addPopup, closePopup } = usePopup()
   const handleBtnClick = (num) => {
     setButtonAct(num)
   }
 
   return (
     <>
-      <WithDraggable isShow={true} pos={{ x: 1300, y: -950 }}>
+      <WithDraggable isShow={true} pos={{ x: 1270, y: -815 }}>
         <div className={`modal-pop-wrap sm mount`}>
           <div className="modal-head">
             <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
-            <button className="modal-close" onClick={() => setShowCanvasSettingModal(false)}>
+            <button className="modal-close" onClick={() => closePopup(id)}>
               닫기
             </button>
           </div>
@@ -45,7 +47,7 @@ export default function SettingModal01(props) {
               )}
             </div>
             {buttonAct === 1 && <FirstOption />}
-            {buttonAct === 2 && <SecondOption setShowFontSettingModal={setShowFontSettingModal} />}
+            {buttonAct === 2 && <SecondOption />}
             {buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} />}
           </div>
         </div>

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -1,19 +1,22 @@
 import WithDraggable from '@/components/common/draggable/withDraggable'
+import { usePopup } from '@/hooks/usePopup'
 
 export default function DimensionLineSetting(props) {
-  const { isShow, setIsShow, pos = { x: 800, y: -950 }, setShowFontSettingModal, setShowColorPickerModal } = props
+  const { id, pos = { x: 970, y: -815 }, setShowColorPickerModal } = props
+  console.log(props)
+  const { closePopup } = usePopup()
   return (
-    <WithDraggable isShow={isShow} pos={pos}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
         <div className="modal-head">
           <h1 className="title">寸法線 設定 </h1>
-          <button className="modal-close">닫기</button>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
         </div>
         <div className="modal-body">
           <div className="font-btn-wrap">
-            <button className="btn-frame modal" onClick={() => setShowFontSettingModal(true)}>
+            <button className="btn-frame modal">フォント設定</button>
-              フォント設定
-            </button>
           </div>
           <div className="line-color-wrap">
             <div className="outline-form mb10">

src/hooks/usePopup.js

@@ -1,20 +1,32 @@
 import { useRecoilState } from 'recoil'
 import { popupState } from '@/store/popupAtom'
-import { v4 as uuidv4 } from 'uuid'
 import { useEffect } from 'react'
 
 export function usePopup() {
   const [popup, setPopup] = useRecoilState(popupState)
+
   useEffect(() => {
     console.log(popup)
   }, [popup])
 
-  const addPopup = (component) => {
+  const addPopup = (id, depth, component) => {
-    setPopup({ children: [...popup.children, { id: uuidv4(), component: component }] })
+    setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
   }
 
   const closePopup = (id) => {
-    setPopup({ children: popup.children.filter((child) => child.id !== id) })
+    setPopup({ children: [...popup.children.filter((child) => child.id !== id)] })
+  }
+
+  const closeAll = () => {
+    setPopup({ children: [] })
+  }
+
+  const closePrevPopup = () => {
+    setPopup({ children: [...popup.children.slice(popup.children.length - 1)] })
+  }
+
+  const filterDepth = (depth) => {
+    return [...popup.children.filter((child) => child.depth !== depth)]
   }
 
   return {
@@ -22,5 +34,6 @@ export function usePopup() {
     setPopup,
     addPopup,
     closePopup,
+    closeAll,
   }
 }