popupManager canvasSetting 적용

2024-10-18 15:28:59 +09:00 · 2024-10-18 15:28:59 +09:00 · d6fbea705f
commit d6fbea705f
parent 15af4655a3
10 changed files with 112 additions and 77 deletions
--- a/src/components/common/color-picker/ColorPickerModal.jsx
+++ b/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')}
--- a/src/components/common/font/FontSetting.jsx
+++ b/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
-  console.log(
-    Array.from({ length: 10 }).map((_, index) => {
-      return { name: 5 + index }
-    }),
-  )
+  const { id, setShowFontSettingModal } = props
+  const { closePopup } = usePopup()
  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>
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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>
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/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 && (
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/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>
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/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} />*/}
    </>
  )
 }
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/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} />
    </>
  )
 }
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/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>
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/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>
+            <button className="btn-frame modal">フォント設定</button>
          </div>
          <div className="line-color-wrap">
            <div className="outline-form mb10">
--- a/src/hooks/usePopup.js
+++ b/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) => {
-    setPopup({ children: [...popup.children, { id: uuidv4(), component: component }] })
+  const addPopup = (id, depth, 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,
  }
 }