usePopup 적용

2024-10-22 10:13:17 +09:00 · 2024-10-22 10:13:17 +09:00 · 30267703e7
commit 30267703e7
parent d079fe5948
8 changed files with 128 additions and 42 deletions
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@ -2,6 +2,7 @@ import WithDraggable from '@/components/common/draggable/withDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
 import { useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'

 const fonts = [
  { name: 'MS PGothic', value: 'MS PGothic' },
@ -42,7 +43,8 @@ const fontColors = [
  { name: '남색', value: 'darkblue' },
 ]
 export default function FontSetting(props) {
-  const { id, setIsShow, font, setFont, fontSize, setFontSize } = props
+  const { id, setIsShow, font, setFont, fontSize, setFontSize, pos = { x: 455, y: 180 } } = props
+  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const [originFont, setOriginFont] = useState(font)
  const [originFontSize, setOriginFontSize] = useState(fontSize)
@ -50,10 +52,10 @@ export default function FontSetting(props) {
  const [selectedFontSize, setSelectedFontSize] = useState(fontSize ? fontSize : fontSizes[0])
  const [selectedFontColor, setSelectedFontColor] = useState(null)
  return (
-    <WithDraggable isShow={true} pos={{ x: 455, y: 180 }}>
-      <div className={`modal-pop-wrap lrr`}>
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap lrr mount`}>
        <div className="modal-head">
-          <h1 className="title">フォント </h1>
+          <h1 className="title">{getMessage('modal.font')} </h1>
          <button
            className="modal-close"
            onClick={() => {
@ -68,32 +70,32 @@ export default function FontSetting(props) {
          <div className="slope-wrap">
            <div className="font-option-warp">
              <div className="font-option-item">
-                <div className="option-item-tit">文字(F)</div>
+                <div className="option-item-tit">{getMessage('modal.font')}(F)</div>
                <div className="grid-select">
                  <QSelectBox options={fonts} value={selectedFont} onChange={(e) => setSelectedFont(e)} />
                </div>
              </div>
              <div className="font-option-item">
-                <div className="option-item-tit">フォントスタイル(Y)</div>
+                <div className="option-item-tit">{getMessage('modal.font.style')}(Y)</div>
                <div className="grid-select">
                  <QSelectBox options={fontOptions} onChange={(e) => setSelectedFont(e)} />
                </div>
              </div>
              <div className="font-option-item">
-                <div className="option-item-tit">サイズ(S)</div>
+                <div className="option-item-tit">{getMessage('modal.font.size')}(S)</div>
                <div className="grid-select">
                  <QSelectBox options={fontSizes} value={selectedFontSize} onChange={(e) => setSelectedFontSize(e)} />
                </div>
              </div>
              <div className="font-option-item">
-                <div className="option-item-tit">フォン</div>
+                <div className="option-item-tit">{getMessage('modal.font.color')}</div>
                <div className="grid-select">
                  <QSelectBox title={''} options={fontColors} value={selectedFontColor} onChange={(e) => setSelectedFontColor(e)} />
                </div>
              </div>
            </div>
            <div className="font-ex-wrap">
-              <div className="font-ex-tit">見る</div>
+              <div className="font-ex-tit">{getMessage('modal.font.setting.display')}</div>
              <div className="font-ex-box">
                <span
                  style={{
@ -107,7 +109,7 @@ export default function FontSetting(props) {
                </span>
              </div>
            </div>
-            <div className="normal-font">ントです。プリンタと画面 でも同じフォントを使用します.</div>
+            <div className="normal-font">{getMessage('modal.font.setting.info')}</div>
          </div>
          <div className="grid-btn-wrap">
            <button
@ -119,7 +121,7 @@ export default function FontSetting(props) {
                closePopup(id)
              }}
            >
-              ストレージ
+              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@ -21,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 { id, setShowDotLineGridModal } = props
+  const { id, setIsShow, pos = { x: 840, y: -815 } } = props
  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
  const gridColor = useRecoilValue(gridColorState)
  const canvas = useRecoilValue(canvasState)
@ -311,14 +311,14 @@ export default function DotLineGrid(props) {
  }

  return (
-    <WithDraggable isShow={true} pos={{ x: 840, y: -815 }}>
+    <WithDraggable isShow={true} pos={pos}>
      <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)
+              setIsShow(false)
              closePopup(id)
            }}
          >
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@ -22,23 +22,32 @@ export default function GridOption() {
  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
  const { addPopup, closePopup } = usePopup()
-  let [colorId, dotLineId] = ''
+  // const [colorId, setColorId] = useState(uuidv4())
+  // const [dotLineId, setDotLineId] = useState(uuidv4())
+
+  let colorId = null
+  let dotLineId = null
+
+  useEffect(() => {
+    colorId = uuidv4()
+    dotLineId = uuidv4()
+  }, [])

  useEffect(() => {
-    console.log('GridOption useEffect 실행')
-    console.log(color)
    setGridColor(color.hex)
  }, [color])

  useEffect(() => {
-    console.log(showColorPickerModal)
    gridOptions[3].selected = showColorPickerModal
    setGridOptions([...gridOptions])
  }, [showColorPickerModal])

  useEffect(() => {
-    colorId = uuidv4()
-    dotLineId = uuidv4()
+    gridOptions[2].selected = showDotLineGridModal
+    setGridOptions([...gridOptions])
+  }, [showDotLineGridModal])
+
+  useEffect(() => {
    return () => {
      setSettingModalGridOptions((prev) => {
        const newSettingOptions = [...prev]
@ -50,7 +59,7 @@ export default function GridOption() {

  const onClickOption = (option) => {
    const newGridOptions = [...gridOptions]
-
+    console.log(colorId, dotLineId)
    newGridOptions.map((item) => {
      if (item.id === option.id) {
        item.selected = !item.selected
@ -67,10 +76,8 @@ export default function GridOption() {
    if (option.id === 2) {
      // 점.선 그리드
      if (option.selected) {
-        setShowDotLineGridModal(true)
-        addPopup(dotLineId, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={dotLineId} />)
+        addPopup(dotLineId, 2, <DotLineGrid {...dotListGridProps} />)
      } else {
-        setShowDotLineGridModal(false)
        closePopup(dotLineId)
      }
    }
@ -85,7 +92,7 @@ export default function GridOption() {
      // 그리드 색 설정
      if (option.selected) {
        setShowColorPickerModal(true)
-        addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} id={colorId} />)
+        addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />)
      } else {
        setShowColorPickerModal(false)
        closePopup(colorId)
@ -95,11 +102,25 @@ export default function GridOption() {
    setGridOptions(newGridOptions)
  }

+  const dotListGridProps = {
+    id: dotLineId,
+    setIsShow: setShowDotLineGridModal,
+    pos: {
+      x: 845,
+      y: 180,
+    },
+  }
+
  const colorPickerProps = {
+    id: colorId,
    color: gridColor,
    setColor: setGridColor,
    isShow: showColorPickerModal,
    setIsShow: setShowColorPickerModal,
+    pos: {
+      x: 785,
+      y: 180,
+    },
  }

  return (
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@ -9,6 +9,7 @@ import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimens
 import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import FontSetting from '@/components/common/font/FontSetting'
+import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'

 export default function SecondOption() {
  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
@ -22,9 +23,10 @@ export default function SecondOption() {
  const { getMessage } = useMessage()
  const { get, post } = useAxios()
  const { swalFire } = useSwal()
-  const { addPopup } = usePopup()
+  const { addPopup, closePopup, closePopups } = usePopup()
  const [showFontSettingModal, setShowFontSettingModal] = useState(false)
  const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
+  const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)

  // 데이터를 최초 한 번만 조회
  useEffect(() => {
@ -134,14 +136,21 @@ export default function SecondOption() {
    }
    setAdsorptionRange(option.range)
  }
-  const dimensionId = uuidv4()
-  const fontId = uuidv4()
+  let dimensionId = null
+  let fontId = null
+  let planSizeId = null
  const [pixel, setPixel] = useState(1)
  const [color, setColor] = useState('#FF0000')
  const [font, setFont] = useState(null)
  const [fontSize, setFontSize] = useState('#FF0000')
  const [fontColor, setFontColor] = useState('#FF0000')

+  useEffect(() => {
+    dimensionId = uuidv4()
+    fontId = uuidv4()
+    planSizeId = uuidv4()
+  }, [])
+
  const dimensionProps = {
    color,
    setColor,
@ -158,19 +167,42 @@ export default function SecondOption() {
    setIsShow: setShowDimensionLineSettingModal,
  }

+  const [horizon, setHorizon] = useState(1600)
+  const [vertical, setVertical] = useState(1600)
+  const planSizeProps = {
+    id: planSizeId,
+    horizon,
+    setHorizon,
+    vertical,
+    setVertical,
+    setIsShow: setShowPlanSizeSettingModal,
+    pos: { x: 1020, y: 180 },
+  }
+
  const handlePopup = (type) => {
    const id = uuidv4()

    switch (type) {
      case 'dimensionLine':
-        setShowDimensionLineSettingModal(true)
-        addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+        if (!showDimensionLineSettingModal) {
+          setShowDimensionLineSettingModal(true)
+          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+        } else {
+          setShowDimensionLineSettingModal(false)
+          closePopups([dimensionId, fontId])
+        }
+
        break
      case 'font1': //문자 글꼴변경
      case 'font2': //흐름 방향 글꼴 변경
      case 'font3': //치수 글꼴변경
      case 'font4': //회로번호 글꼴변경
-        addPopup(fontId, 2, <FontSetting id={id} setShowFontSettingModal={setShowFontSettingModal} />)
+        addPopup(fontId, 2, <FontSetting id={fontId} setShowFontSettingModal={setShowFontSettingModal} />)
+        break
+      case 'planSize':
+        setShowPlanSizeSettingModal(true)
+        addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
+        break
    }
  }

@ -203,7 +235,7 @@ export default function SecondOption() {
          <button className={`arr-btn ${showDimensionLineSettingModal ? 'act' : ''}`} onClick={() => handlePopup('dimensionLine')}>
            <span>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}</span>
          </button>
-          <button className="arr-btn">
+          <button className={`arr-btn ${showPlanSizeSettingModal ? 'act' : ''}`} onClick={() => handlePopup('planSize')}>
            <span>{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</span>
          </button>
          <button
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@ -24,11 +24,12 @@ export default function DimensionLineSetting(props) {
    setFontSize,
    pixel,
    setPixel,
+    isShow,
    setIsShow,
    id,
    pos = { x: 985, y: 180 },
  } = props
-  const { addPopup, closePopup } = usePopup()
+  const { addPopup, closePopup, closePopups } = usePopup()
  const pixels = Array.from({ length: 5 }).map((_, index) => {
    return { name: index + 1, value: index + 1 }
  })
@ -37,11 +38,17 @@ export default function DimensionLineSetting(props) {
  const [originFontColor, setOriginFontColor] = useState(fontColor)
  const [originFontSize, setOriginFontSize] = useState(fontSize)
  const [originPixel, setOriginPixel] = useState(pixel)
-  const fontModalId = uuidv4()
-  const colorModalId = uuidv4()
+  const [fontModalId, setFontModalId] = useState(uuidv4())
+  const [colorModalId, setColorModalId] = useState(uuidv4())
+
  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
  const [showFontModal, setShowFontModal] = useState(false)
  const { getMessage } = useMessage()
+  useEffect(() => {
+    if (!isShow) {
+      closePopups([fontModalId, colorModalId])
+    }
+  }, [isShow])
  const colorPickerProps = {
    isShow: showColorPickerModal,
    setIsShow: setShowColorPickerModal,
@ -49,8 +56,8 @@ export default function DimensionLineSetting(props) {
    setColor: setOriginColor,
    id: colorModalId,
    pos: {
-      x: 480,
-      y: -815,
+      x: 495,
+      y: 180,
    },
  }

@ -67,8 +74,8 @@ export default function DimensionLineSetting(props) {
    setFontSize: setOriginFontSize,
    id: fontModalId,
    pos: {
-      x: 480,
-      y: -815,
+      x: 455,
+      y: 180,
    },
  }
  const popupHandle = (type) => {
@ -99,8 +106,10 @@ export default function DimensionLineSetting(props) {
          <button
            className="modal-close"
            onClick={() => {
-              setIsShow(false)
-              closePopup(id)
+              console.log('fontModalId', fontModalId)
+              console.log('colorModalId', colorModalId)
+              closePopups([fontModalId, colorModalId, id])
+              // setIsShow(false)
            }}
          >
            닫기
@ -161,7 +170,7 @@ export default function DimensionLineSetting(props) {
                setColor(originColor)
                setFont(originFont)
                setIsShow(false)
-                closePopup(id)
+                closePopups([fontModalId, colorModalId, id])
              }}
            >
              {getMessage('modal.common.save')}
--- a/src/hooks/usePopup.js
+++ b/src/hooks/usePopup.js
@ -14,9 +14,14 @@ export function usePopup() {
  }

  const closePopup = (id) => {
+    console.log(id)
    setPopup({ children: [...popup.children.filter((child) => child.id !== id)] })
  }

+  const closePopups = (ids) => {
+    setPopup({ children: [...popup.children.filter((child) => !ids.includes(child.id))] })
+  }
+
  const closeAll = () => {
    setPopup({ children: [] })
  }
@ -34,6 +39,7 @@ export function usePopup() {
    setPopup,
    addPopup,
    closePopup,
+    closePopups,
    closeAll,
  }
 }
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@ -157,6 +157,14 @@
  "plan.mode.vertical.horizontal": "垂直水平モード",
  "plan.mode.free": "프리 모드(JA)",
  "modal.font.setting": "フォント設定",
+  "modal.font": "フォント",
+  "modal.font.style": "フォントスタイル",
+  "modal.font.size": "サイズ",
+  "modal.font.color": "フォン",
+  "common.horizon": "ガロ",
+  "common.vertical": "縦ロ",
+  "modal.font.setting.display": "見る",
+  "modal.font.setting.info": "ントです。プリンタと画面 でも同じフォントを使用します.",
  "modal.canvas.setting": "Canvas設定",
  "modal.canvas.setting.display": "ディスプレイ設定",
  "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@ -161,6 +161,14 @@
  "plan.mode.vertical.horizontal": "수직 수평 모드",
  "plan.mode.free": "프리 모드",
  "modal.font.setting": "글꼴 설정",
+  "modal.font": "글꼴",
+  "modal.font.style": "글꼴 스타일",
+  "modal.font.size": "크기",
+  "modal.font.color": "글꼴 색",
+  "common.horizon": "가로",
+  "common.vertical": "세로",
+  "modal.font.setting.display": "보기",
+  "modal.font.setting.info": "이것은 Open Type 글꼴입니다. 프린터 및 화면에서도 같은 글꼴을 사용합니다.",
  "modal.canvas.setting": "Canvas 설정",
  "modal.canvas.setting.display": "디스플레이 설정",
  "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",