Merge branch 'qcast-pub' into dev

2024-10-21 16:27:49 +09:00 · 2024-10-21 16:27:49 +09:00 · 46ac162c26
commit 46ac162c26
parent f8bdce6177 82009ef281
38 changed files with 876 additions and 181 deletions
--- a/src/app/layout.js
+++ b/src/app/layout.js
@ -17,6 +17,7 @@ import '../styles/contents.scss'
 import Dimmed from '@/components/ui/Dimmed'
 import SessionProvider from './SessionProvider'
 import LocaleSwitch from '@/components/LocaleSwitch'
+import PopupManager from '@/components/common/popupManager/PopupManager'

 // const inter = Inter({ subsets: ['latin'] })

@ -86,6 +87,7 @@ export default async function RootLayout({ children }) {
          )}
          <ToastContainer />
          <QModal />
+          <PopupManager />
        </body>
      </html>
    </RecoilRootWrapper>
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@ -39,7 +39,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
 import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
-import { changeAllHipAndGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
+import { drawDirectionStringToArrow } from '@/util/qpolygon-utils'
 import ThumbnailList from '@/components/ui/ThumbnailLIst'
 import ObjectPlacement from '@/components/ui/ObjectPlacement'
 import { globalLocaleStore } from '@/store/localeAtom'
--- a/src/components/common/color-picker/ColorPicker.jsx
+++ b/src/components/common/color-picker/ColorPicker.jsx
@ -1,11 +1,30 @@
 import { HexColorPicker } from 'react-colorful'
+import { useMessage } from '@/hooks/useMessage'

 export default function ColorPicker(props) {
  const { color, setColor } = props
-
+  const { getMessage } = useMessage()
+  const defaultColors = ['#EA575D', '#F29955', '#F2C957', '#32975D', '#3D7FED', '#828282', '#ffffff', '#000000']
  return (
    <>
-      <HexColorPicker color={color} onChange={setColor} />
+      <div>
+        <HexColorPicker color={color} onChange={setColor} />
+      </div>
+      <div className="hex-color-box">
+        <div className="color-box-tit">HEX</div>
+        <div className="color-hex-input">
+          <input type="text" className="input-origin" value={color} onChange={(e) => setColor(e.target.value)} />
+        </div>
+        <div className="color-box" style={{ backgroundColor: color }}></div>
+      </div>
+      <div className="default-color-wrap">
+        <div className="default-tit">{getMessage('modal.color.picker.default.color')}</div>
+        <div className="color-button-wrap">
+          {defaultColors.map((color, index) => (
+            <button key={index} className="default-color" style={{ backgroundColor: color }} onClick={() => setColor(color)}></button>
+          ))}
+        </div>
+      </div>
    </>
  )
 }
--- a/src/components/common/color-picker/ColorPickerModal.jsx
+++ b/src/components/common/color-picker/ColorPickerModal.jsx
@ -0,0 +1,56 @@
+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: 770, y: -815 }, color = '#ff0000', setColor, id } = props
+  const { getMessage } = useMessage()
+  const [originColor, setOriginColor] = useState(color)
+  const { closePopup } = usePopup()
+
+  console.log(props)
+  useEffect(() => {
+    setOriginColor(color)
+  }, [isShow])
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap lr mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
+          <button
+            className="modal-close"
+            onClick={() => {
+              setIsShow(false)
+              closePopup(id)
+            }}
+          >
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="color-setting-wrap">
+            <div className="color-tit">COLOR PICKER</div>
+            <div className="color-picker">
+              <ColorPicker color={originColor} setColor={setOriginColor} />
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                setColor(originColor)
+                setIsShow(false)
+                closePopup(id)
+              }}
+            >
+              {getMessage('common.message.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@ -0,0 +1,129 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
+
+const fonts = [
+  { name: 'MS PGothic', value: 'MS PGothic' },
+  { name: '@Yu Gothic', value: '@Yu Gothic' },
+  { name: 'Yu Gothic', value: 'Yu Gothic' },
+  { name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
+  { name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
+]
+const fontOptions = [
+  { name: '보통', value: 'normal' },
+  { name: '기울임꼴', value: 'italic' },
+  {
+    name: '굵게',
+    value: 'bold',
+  },
+  { name: '굵은 기울임꼴', value: 'boldAndItalic' },
+]
+const fontSizes = [
+  ...Array.from({ length: 4 }).map((_, index) => {
+    return { name: index + 8, value: index + 8 }
+  }),
+  ...Array.from({ length: 9 }).map((_, index) => {
+    return { name: (index + 6) * 2, value: (index + 6) * 2 }
+  }),
+  { name: 36, value: 36 },
+  { name: 48, value: 48 },
+  { name: 72, value: 72 },
+]
+const fontColors = [
+  { name: '검정색', value: 'black' },
+  { name: '빨강색', value: 'red' },
+  { name: '파랑색', value: 'blue' },
+  { name: '회색', value: 'gray' },
+  { name: '황색', value: 'yellow' },
+  { name: '녹색', value: 'green' },
+  { name: '분홍색', value: 'pink' },
+  { name: '황금색', value: 'gold' },
+  { name: '남색', value: 'darkblue' },
+]
+export default function FontSetting(props) {
+  const { id, setIsShow, font, setFont, fontSize, setFontSize } = props
+  const { closePopup } = usePopup()
+  const [originFont, setOriginFont] = useState(font)
+  const [originFontSize, setOriginFontSize] = useState(fontSize)
+  const [selectedFont, setSelectedFont] = useState(font ? font : fonts[0])
+  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`}>
+        <div className="modal-head">
+          <h1 className="title">フォント </h1>
+          <button
+            className="modal-close"
+            onClick={() => {
+              setIsShow(false)
+              closePopup(id)
+            }}
+          >
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="font-option-warp">
+              <div className="font-option-item">
+                <div className="option-item-tit">文字(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="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="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="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-box">
+                <span
+                  style={{
+                    fontFamily: selectedFont?.value ?? '',
+                    fontSize: selectedFontSize?.value ?? '12px',
+                    fontWeight: '400',
+                    color: selectedFontColor?.value ?? 'black',
+                  }}
+                >
+                  Aaあぁアァ
+                </span>
+              </div>
+            </div>
+            <div className="normal-font">ントです。プリンタと画面 でも同じフォントを使用します.</div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                setIsShow(false)
+                setFont(selectedFont)
+                setFontSize(selectedFontSize)
+                closePopup(id)
+              }}
+            >
+              ストレージ
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
--- a/src/components/common/popupManager/PopupManager.jsx
+++ b/src/components/common/popupManager/PopupManager.jsx
@ -0,0 +1,9 @@
+'use client'
+import { useRecoilState } from 'recoil'
+import { popupState } from '@/store/popupAtom'
+import { Fragment } from 'react'
+
+export default function PopupManager() {
+  const [popup, setPopup] = useRecoilState(popupState)
+  return popup.children?.map((child) => <Fragment key={child.id}>{child.component}</Fragment>)
+}
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@ -4,13 +4,24 @@ import { useEffect, useRef } from 'react'

 import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
-import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useContextMenu } from '@/hooks/useContextMenu'
+import { useRecoilValue } from 'recoil'
+import { currentObjectState } from '@/store/canvasAtom'
+import { useCanvasEvent } from '@/hooks/useCanvasEvent'
+import QContextMenu from '@/components/common/context-menu/QContextMenu'

 export default function CanvasFrame({ plan }) {
  const canvasRef = useRef(null)
+  console.log(canvasRef)
  const { canvas } = useCanvas('canvas')
-  const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu()
+  const { handleZoomClear } = useCanvasEvent()
+  const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({
+    externalFn: {
+      handleZoomClear,
+    },
+  })
+
+  const currentObject = useRecoilValue(currentObjectState)

  useEvent()

@ -32,16 +43,22 @@ export default function CanvasFrame({ plan }) {
  const onClickContextMenu = (index) => {}

  return (
-    <div className="canvas-frame flex justify-center">
-      <div className="canvas-container" style={{ position: 'relative' }}>
-        <canvas ref={canvasRef} id={'canvas'}></canvas>
-      </div>
+    <div className="canvas-frame">
+      <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>

      <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
        {contextMenu.map((menus, index) => (
          <ul key={index}>
-            {menus.map((menu, idx) => (
-              <li key={idx} onClick={(e) => setCurrentContextMenu(menu)}>
+            {menus.map((menu) => (
+              <li
+                key={menu.id}
+                onClick={(e) => {
+                  if (menu.fn) {
+                    menu.fn()
+                  }
+                  setCurrentContextMenu(menu)
+                }}
+              >
                {menu.name}
              </li>
            ))}
--- 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'
@ -19,6 +19,10 @@ import { MENU } from '@/common/common'
 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { useCanvasEvent } from '@/hooks/useCanvasEvent'
+import { popupState } from '@/store/popupAtom'
+import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
+import { usePopup } from '@/hooks/usePopup'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'

 const canvasMenus = [
@ -55,6 +59,7 @@ export default function CanvasMenu(props) {
    setShowPropertiesSettingModal,
  } = props

+  const { addPopup, closePopup } = usePopup()
  const [type, setType] = useState('')

  const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
@ -64,6 +69,7 @@ export default function CanvasMenu(props) {
  const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
  const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
+  const { handleZoomClear } = useCanvasEvent()

  const globalLocale = useRecoilValue(globalLocaleStore)
  const canvas = useRecoilValue(canvasState)
@ -72,8 +78,21 @@ export default function CanvasMenu(props) {
  const { getMessage } = useMessage()
  const { saveCanvas } = usePlan()
  const { swalFire } = useSwal()
-
+  const [popup, setPopup] = useRecoilState(popupState)
  const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
+  useEffect(() => {
+    console.log(canvas)
+    if (canvas) {
+      const circle = new fabric.Circle({
+        left: 300,
+        top: 300,
+        radius: 5,
+        stroke: 'black',
+      })
+      canvas.add(circle)
+      canvas.renderAll()
+    }
+  }, [])
  const onClickNav = (menu) => {
    setMenuNumber(menu.index)
    setCurrentMenu(menu.title)
@ -147,12 +166,17 @@ export default function CanvasMenu(props) {
    setPlacementPoints([])
    canvas?.clear()
  }
+  //
+  // const handleZoomClear = () => {
+  //   setCanvasZoom(100)
+  //   canvas.set({ zoom: 1 })
+  //   canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+  //   canvas.renderAll()
+  // }

-  const handleZoomClear = () => {
-    setCanvasZoom(100)
-    canvas.set({ zoom: 1 })
-    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
-    canvas.renderAll()
+  const handlePopup = () => {
+    const id = uuidv4()
+    addPopup(id, 1, <SettingModal01 id={id} />)
  }

  useEffect(() => {
@ -200,7 +224,8 @@ export default function CanvasMenu(props) {
                <QSelectBox title={'瓦53A'} option={SelectOption} />
              </div>
              <div className="btn-from">
-                <button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>
+                {/*<button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></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
@ -1,19 +1,16 @@
 'use client'

 import { useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { settingModalFirstOptionsState, settingModalGridOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import '@/styles/contents.scss'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
-import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
 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'
-import GridColorSetting from './modal/grid/GridColorSetting'
 import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
 import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
 import Slope from '@/components/floor-plan/modal/Slope'
@ -28,6 +25,7 @@ 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 { gridColorState } from '@/store/gridAtom'

 export default function FloorPlan() {
  const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@ -53,16 +51,13 @@ export default function FloorPlan() {
  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+
  const [menuNumber, setMenuNumber] = useState(null)
  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
  const [showGridCopyModal, setShowGridCopyModal] = useState(false)
  const [showGridMoveModal, setShowGridMoveModal] = useState(false)
-  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
-  const canvasSettingProps = {
-    setShowCanvasSettingModal,
-    setShowDotLineGridModal,
-    setShowColorPickerModal,
-  }
+  const [color, setColor] = useRecoilState(gridColorState)
+  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)

  const outlineProps = {
    setShowOutlineModal,
@ -122,14 +117,6 @@ export default function FloorPlan() {
      console.error('Data fetching error:', error)
    }
  }
-  const dotLineProps = {
-    showDotLineGridModal,
-    setShowDotLineGridModal,
-  }
-
-  const gridColorProps = {
-    setShowColorPickerModal,
-  }

  const propertiesSettingProps = {
    setShowPropertiesSettingModal,
@ -138,33 +125,31 @@ export default function FloorPlan() {
  useEffect(() => {}, [showOutlineModal])

  return (
-    <div className="canvas-wrap">
-      <CanvasMenu {...modalProps} />
-      <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-        <CanvasLayout menuNumber={menuNumber} setMenuNumber={setMenuNumber} />
-        {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
-        {showOutlineModal && <WallLineSetting {...outlineProps} />}
-        {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
-        {showColorPickerModal && <GridColorSetting {...gridColorProps} />}
-        {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
-
-        {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
-        {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
-        {showRoofShapePassivitySettingModal && (
-          <RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
-        )}
-        {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
-        {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
-        {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
-        {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
-        {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
-        {showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
-        {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
-        {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
-        {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
-        {showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
-        {showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
+    <>
+      <div className="canvas-wrap">
+        <CanvasMenu {...modalProps} />
+        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
+          <CanvasLayout menuNumber={menuNumber} />
+          {showOutlineModal && <WallLineSetting {...outlineProps} />}
+          {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
+          {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
+          {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
+          {showRoofShapePassivitySettingModal && (
+            <RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
+          )}
+          {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
+          {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
+          {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
+          {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
+          {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
+          {showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
+          {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
+          {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
+          {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
+          {showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
+          {showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
+        </div>
      </div>
-    </div>
+    </>
  )
 }
--- a/src/components/floor-plan/modal/Slope.jsx
+++ b/src/components/floor-plan/modal/Slope.jsx
@ -9,7 +9,7 @@ export default function Slope({ setShowSlopeSettingModal }) {
  const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
  const inputRef = useRef()
  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap xxxm`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
@ -6,7 +5,6 @@ import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
 import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
 import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
-import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'

@ -123,7 +121,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
    setType(button.type)
  }
  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
@ -152,7 +150,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
              {getMessage('modal.cover.outline.rollback')}
            </button>
            <button className="btn-frame modal act" onClick={() => handleFix(setShowAuxiliaryModal)}>
-              {getMessage('modal.cover.outline.fix')}
+              {getMessage('apply')}
            </button>
          </div>
        </div>
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx
@ -14,7 +14,7 @@ export default function BasicSetting({ setShowBasicSettingModal }) {
  const [tabNum, setTabNum] = useState(1)
  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap lx-2`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@ -14,7 +14,7 @@ export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModa
    setCircuitAllocationType,
  }
  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap lx-2`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
--- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
+++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
 import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves'
 import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
 import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
@ -35,7 +34,7 @@ export default function EavesGableEdit({ setShowEavesGableEditModal }) {
  }

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
--- 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 { gridDisplaySelector, 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)
@ -33,6 +34,7 @@ export default function DotLineGrid(props) {
  const { getMessage } = useMessage()
  const { get, post } = useAxios()
  const { swalFire } = useSwal()
+  const { closePopup } = usePopup()

  useEffect(() => {
    return () => {
@ -247,6 +249,8 @@ export default function DotLineGrid(props) {

        canvas.renderAll()
      })
+      setShowDotLineGridModal(false)
+      closePopup(id)
    } catch (error) {
      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
    }
@ -307,11 +311,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/grid/GridColorSetting.jsx
+++ b/src/components/floor-plan/modal/grid/GridColorSetting.jsx
@ -1,39 +0,0 @@
-import WithDraggable from '@/components/common/draggable/WithDraggable'
-import ColorPicker from '@/components/common/color-picker/ColorPicker'
-import { useRecoilState, useSetRecoilState } from 'recoil'
-import { gridColorState } from '@/store/gridAtom'
-import { useMessage } from '@/hooks/useMessage'
-import { useEffect } from 'react'
-import { settingModalGridOptionsState } from '@/store/settingAtom'
-
-export default function GridColorSetting(props) {
-  const { setShowColorPickerModal } = props
-  const [color, setColor] = useRecoilState(gridColorState)
-  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
-  const { getMessage } = useMessage()
-
-  useEffect(() => {
-    return () => {
-      setSettingModalGridOptions((prev) => {
-        const newSettingOptions = [...prev]
-        newSettingOptions[3].selected = false
-        return [...newSettingOptions]
-      })
-    }
-  }, [])
-  return (
-    <WithDraggable isShow={true} pos={{ x: 1300, y: -660 }}>
-      <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head">
-          <h1 className="title">{getMessage('modal.canvas.setting.grid.color.setting')}</h1>
-          <button className="modal-close" onClick={() => setShowColorPickerModal(false)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <ColorPicker color={color} setColor={setColor} />
-        </div>
-      </div>
-    </WithDraggable>
-  )
-}
--- a/src/components/floor-plan/modal/movement/MovementSetting.jsx
+++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx
@ -13,7 +13,7 @@ export default function MovementSetting({ setShowMovementModal }) {
  ]

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@ -1,9 +1,8 @@
 'use client'

-import { useState, useRef, useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
-import { useEvent } from '@/hooks/useEvent'
 import { canvasState } from '@/store/canvasAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
@ -74,7 +73,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
    { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
  ]
  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap lrr`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
--- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
@ -9,7 +9,7 @@ export default function PropertiesSetting(props) {
  const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(setShowPropertiesSettingModal)

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap ssm`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
--- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
@ -109,7 +109,7 @@ export default function WallLineSetting(props) {
  }

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap r mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
@ -5,7 +5,6 @@ import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
 import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
 import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
 import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
-import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing'
@ -120,7 +119,7 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal })
    setType(button.type)
  }
  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@ -1,7 +1,6 @@
 import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
 import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
 import { useRecoilState } from 'recoil'
 import { Fragment, useEffect, useState } from 'react'
 import { canvasSettingState } from '@/store/canvasAtom'
@ -18,7 +17,18 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
  const [basicSetting, setBasicSettings] = useState({
    roofSizeSet: 1,
    roofAngleSet: 'slope',
-    roofs: [{ roofApply: true, roofSeq: 1, roofType: 1, roofWidth: 200, roofHeight: 200, roofHajebichi: 200, roofGap: 0, roofLayout: 'parallel' }],
+    roofs: [
+      {
+        roofApply: true,
+        roofSeq: 1,
+        roofType: 1,
+        roofWidth: 200,
+        roofHeight: 200,
+        roofHajebichi: 200,
+        roofGap: 0,
+        roofLayout: 'parallel',
+      },
+    ],
  })

  const { getMessage } = useMessage()
@ -159,7 +169,7 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
  }

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap l mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
@ -239,7 +239,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
  }, [])

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap l-2`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'

@ -10,7 +9,7 @@ export default function RoofAllocationSetting({ setShowRoofAllocationSettingModa
    useRoofAllocationSetting(setShowRoofAllocationSettingModal)

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap ml`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
--- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
  }

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap xxm`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
--- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
@ -67,10 +67,19 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
    handleRollBack,
  }

-  const directionProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth }
+  const directionProps = {
+    pitch,
+    setPitch,
+    eavesOffset,
+    setEavesOffset,
+    gableOffset,
+    setGableOffset,
+    shedWidth,
+    setShedWidth,
+  }

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap lr mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@ -1,29 +1,56 @@
-import React, { useEffect } from 'react'
-import { useRecoilState } from 'recoil'
+import React, { useEffect, useState } from 'react'
+import { useRecoilState, useSetRecoilState } from 'recoil'
 import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { adsorptionPointAddModeState } from '@/store/canvasAtom'
 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, setShowColorPickerModal } = props
+export default function GridOption() {
  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
-  const [gridColor, setGridColor] = useRecoilState(gridColorState)
  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
+  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
  const { getMessage } = useMessage()
  const { tempGridMode, setTempGridMode } = useTempGrid()
-
+  const [gridColor, setGridColor] = useRecoilState(gridColorState)
  const [color, setColor] = useColor(gridColor)
+  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
+  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
+  const { addPopup, closePopup } = usePopup()
+  let [colorId, dotLineId] = ''

  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()
+    return () => {
+      setSettingModalGridOptions((prev) => {
+        const newSettingOptions = [...prev]
+        newSettingOptions[3].selected = false
+        return [...newSettingOptions]
+      })
+    }
+  }, [])
+
  const onClickOption = (option) => {
    const newGridOptions = [...gridOptions]
+
    newGridOptions.map((item) => {
      if (item.id === option.id) {
        item.selected = !item.selected
@ -41,8 +68,10 @@ export default function GridOption(props) {
      // 점.선 그리드
      if (option.selected) {
        setShowDotLineGridModal(true)
+        addPopup(dotLineId, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={dotLineId} />)
      } else {
        setShowDotLineGridModal(false)
+        closePopup(dotLineId)
      }
    }

@ -56,14 +85,23 @@ export default function GridOption(props) {
      // 그리드 색 설정
      if (option.selected) {
        setShowColorPickerModal(true)
+        addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} id={colorId} />)
      } else {
        setShowColorPickerModal(false)
+        closePopup(colorId)
      }
    }

    setGridOptions(newGridOptions)
  }

+  const colorPickerProps = {
+    color: gridColor,
+    setColor: setGridColor,
+    isShow: showColorPickerModal,
+    setIsShow: setShowColorPickerModal,
+  }
+
  return (
    <>
      <div className="modal-check-btn-wrap">
@ -77,6 +115,7 @@ export default function GridOption(props) {
          ))}
        </div>
      </div>
+      {/*<ColorPickerModal {...colorPickerProps} />*/}
    </>
  )
 }
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@ -5,6 +5,10 @@ import React, { useEffect, useState } from 'react'
 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() {
  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
@ -18,6 +22,9 @@ export default function SecondOption() {
  const { getMessage } = useMessage()
  const { get, post } = useAxios()
  const { swalFire } = useSwal()
+  const { addPopup } = usePopup()
+  const [showFontSettingModal, setShowFontSettingModal] = useState(false)
+  const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)

  // 데이터를 최초 한 번만 조회
  useEffect(() => {
@ -31,7 +38,10 @@ export default function SecondOption() {
      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.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] }))

@ -51,7 +61,14 @@ export default function SecondOption() {

  const onClickOption = async (option) => {
    // option4에서 한 개만 선택 가능하도록 처리
-    const updatedOption4 = option4.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
+    const updatedOption4 = option4.map((item) =>
+      item.id === option.id
+        ? { ...item, selected: true }
+        : {
+            ...item,
+            selected: false,
+          },
+    )

    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
    setSettingModalSecondOptions({ option3, option4: updatedOption4 })
@ -117,6 +134,46 @@ export default function SecondOption() {
    }
    setAdsorptionRange(option.range)
  }
+  const dimensionId = uuidv4()
+  const fontId = uuidv4()
+  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')
+
+  const dimensionProps = {
+    color,
+    setColor,
+    pixel,
+    setPixel,
+    font,
+    setFont,
+    fontSize,
+    setFontSize,
+    fontColor,
+    setFontColor,
+    id: dimensionId,
+    isShow: showDimensionLineSettingModal,
+    setIsShow: setShowDimensionLineSettingModal,
+  }
+
+  const handlePopup = (type) => {
+    const id = uuidv4()
+
+    switch (type) {
+      case 'dimensionLine':
+        setShowDimensionLineSettingModal(true)
+        addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+        break
+      case 'font1': //문자 글꼴변경
+      case 'font2': //흐름 방향 글꼴 변경
+      case 'font3': //치수 글꼴변경
+      case 'font4': //회로번호 글꼴변경
+        addPopup(fontId, 2, <FontSetting id={id} setShowFontSettingModal={setShowFontSettingModal} />)
+    }
+  }
+
  return (
    <>
      <div className="modal-check-btn-wrap">
@ -124,7 +181,7 @@ export default function SecondOption() {
        <div className="flex-check-box for2">
          {settingModalSecondOptions &&
            settingModalSecondOptions.option3.map((item) => (
-              <button key={item.id} className="arr-btn">
+              <button key={item.id} className="arr-btn" onClick={() => handlePopup('font' + item.id)}>
                <span>{getMessage(item.name)}</span>
              </button>
            ))}
@ -142,7 +199,8 @@ export default function SecondOption() {
            ))}
        </div>
        <div className="flex-check-box for-line">
-          <button className="arr-btn">
+          {/*<button className="arr-btn" onClick={() => setShowDimensionLineSettingModal(true)}>*/}
+          <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">
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@ -8,46 +8,50 @@ 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, setShowColorPickerModal } = 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 }}>
-      <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>
-        </div>
-        <div className="modal-body">
-          <div className="modal-btn-wrap">
-            <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
-              {getMessage('modal.canvas.setting.display')}
+    <>
+      <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
+        <div className={`modal-pop-wrap sm mount`}>
+          <div className="modal-head">
+            <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
+            <button className="modal-close" onClick={() => closePopup(id)}>
+              닫기
            </button>
-
-            <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
-              {getMessage('modal.canvas.setting.font.plan')}
-            </button>
-            {canGridOptionSeletorValue && (
-              <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
-                {getMessage('modal.canvas.setting.grid')}
-              </button>
-            )}
          </div>
-          {buttonAct === 1 && <FirstOption />}
-          {buttonAct === 2 && <SecondOption />}
-          {buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} setShowColorPickerModal={setShowColorPickerModal} />}
+          <div className="modal-body">
+            <div className="modal-btn-wrap">
+              <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
+                {getMessage('modal.canvas.setting.display')}
+              </button>
+
+              <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
+                {getMessage('modal.canvas.setting.font.plan')}
+              </button>
+              {canGridOptionSeletorValue && (
+                <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
+                  {getMessage('modal.canvas.setting.grid')}
+                </button>
+              )}
+            </div>
+            {buttonAct === 1 && <FirstOption />}
+            {buttonAct === 2 && <SecondOption />}
+            {buttonAct === 3 && <GridOption />}
+          </div>
        </div>
-      </div>
-    </WithDraggable>
+      </WithDraggable>
+    </>
  )
 }
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@ -0,0 +1,174 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { v4 as uuidv4 } from 'uuid'
+import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
+import { useEffect, useState } from 'react'
+import FontSetting from '@/components/common/font/FontSetting'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useMessage } from '@/hooks/useMessage'
+/*
+ color: 치수선 색
+ fontColor: 글꼴 색
+ fontSize: 치수선 치수 색
+ pixel: 치수선 두깨
+*/
+export default function DimensionLineSetting(props) {
+  const {
+    color,
+    setColor,
+    font,
+    setFont,
+    fontColor,
+    setFontColor,
+    fontSize,
+    setFontSize,
+    pixel,
+    setPixel,
+    setIsShow,
+    id,
+    pos = { x: 985, y: 180 },
+  } = props
+  const { addPopup, closePopup } = usePopup()
+  const pixels = Array.from({ length: 5 }).map((_, index) => {
+    return { name: index + 1, value: index + 1 }
+  })
+  const [originColor, setOriginColor] = useState(color)
+  const [originFont, setOriginFont] = useState(font)
+  const [originFontColor, setOriginFontColor] = useState(fontColor)
+  const [originFontSize, setOriginFontSize] = useState(fontSize)
+  const [originPixel, setOriginPixel] = useState(pixel)
+  const fontModalId = uuidv4()
+  const colorModalId = uuidv4()
+  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
+  const [showFontModal, setShowFontModal] = useState(false)
+  const { getMessage } = useMessage()
+  const colorPickerProps = {
+    isShow: showColorPickerModal,
+    setIsShow: setShowColorPickerModal,
+    color: originColor,
+    setColor: setOriginColor,
+    id: colorModalId,
+    pos: {
+      x: 480,
+      y: -815,
+    },
+  }
+
+  const fontProps = {
+    isShow: showFontModal,
+    setIsShow: setShowFontModal,
+    color: originColor,
+    setColor: setOriginColor,
+    font: originFont,
+    setFont: setOriginFont,
+    fontColor: 'black',
+    setFontColor: setOriginFontColor,
+    fontSize: originFontSize,
+    setFontSize: setOriginFontSize,
+    id: fontModalId,
+    pos: {
+      x: 480,
+      y: -815,
+    },
+  }
+  const popupHandle = (type) => {
+    switch (type) {
+      case 'color':
+        closePopup(fontModalId)
+        addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />)
+        break
+      case 'font':
+        closePopup(colorModalId)
+        addPopup(fontModalId, 3, <FontSetting {...fontProps} />)
+        break
+    }
+  }
+
+  useEffect(() => {
+    console.log(pixel)
+    if (pixel) {
+      setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
+    }
+  }, [])
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xxxm`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
+          <button
+            className="modal-close"
+            onClick={() => {
+              setIsShow(false)
+              closePopup(id)
+            }}
+          >
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="font-btn-wrap">
+            <button className="btn-frame modal" onClick={() => popupHandle('font')}>
+              {getMessage('modal.font.setting')}
+            </button>
+          </div>
+          <div className="line-color-wrap">
+            <div className="outline-form mb10">
+              <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')}</span>
+              <div className="grid-select mr5">
+                <QSelectBox options={pixels} value={originPixel} onChange={(e) => setOriginPixel(e)} />
+              </div>
+              <span className="thin">pixel</span>
+            </div>
+            <div className="outline-form">
+              <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')}</span>
+              <button className="color-btn" style={{ backgroundColor: originColor }} onClick={() => popupHandle('color')}></button>
+            </div>
+          </div>
+          <div className="font-ex-wrap">
+            <div className="font-ex-tit">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}</div>
+            <div className="form-box">
+              <div className="line-form">
+                <div className="line-font-box">
+                  <span
+                    className="font"
+                    style={{
+                      fontFamily: originFont?.value ?? '',
+                      color: originFontColor?.value ?? 'black',
+                      fontSize: originFontSize?.value ?? '12px',
+                      fontWeight: '400',
+                    }}
+                  >
+                    9,999
+                  </span>
+                  <span
+                    className="line"
+                    style={{
+                      backgroundColor: originColor,
+                      borderColor: originColor,
+                      height: originPixel.value,
+                    }}
+                  ></span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                setPixel(originPixel.value)
+                setColor(originColor)
+                setFont(originFont)
+                setIsShow(false)
+                closePopup(id)
+              }}
+            >
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
--- a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
+++ b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
 import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
 import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
 import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting'
@ -38,7 +37,7 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa
  }

  return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
--- a/src/hooks/useCanvasEvent.js
+++ b/src/hooks/useCanvasEvent.js
@ -1,15 +1,17 @@
 import { useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasSizeState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
+import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'

 // 캔버스에 필요한 이벤트
 export function useCanvasEvent() {
-  const [canvas, setCanvasForEvent] = useState(null)
+  const canvas = useRecoilValue(canvasState)
+  const [canvasForEvent, setCanvasForEvent] = useState(null)
  const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
  const canvasSize = useRecoilValue(canvasSizeState)
  const fontSize = useRecoilValue(fontSizeState)
  const fontFamily = useRecoilValue(fontFamilyState)
+  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)

  // 기본적인 이벤트 필요시 추가
  const attachDefaultEventOnCanvas = () => {
@ -167,7 +169,6 @@ export function useCanvasEvent() {
      const whiteList = ['mouseLine', 'guideLine']

      if (whiteList.includes(e.target.name)) {
-        return
      }
    },
  }
@ -336,8 +337,16 @@ export function useCanvasEvent() {
    })
  }

+  const handleZoomClear = () => {
+    setCanvasZoom(100)
+    canvas.set({ zoom: 1 })
+    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+    canvas.renderAll()
+  }
+
  return {
    setCanvasForEvent,
    attachDefaultEventOnCanvas,
+    handleZoomClear,
  }
 }
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@ -1,16 +1,18 @@
 import { useRecoilValue } from 'recoil'
-import { currentMenuState } from '@/store/canvasAtom'
+import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { MENU } from '@/common/common'
 import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove'
 import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'

-export function useContextMenu() {
+export function useContextMenu({ externalFn }) {
  const currentMenu = useRecoilValue(currentMenuState)
  const [contextMenu, setContextMenu] = useState([[]])
  const [currentContextMenu, setCurrentContextMenu] = useState(null)
+  const currentObject = useRecoilValue(currentObjectState)

-  useEffect(() => {
+  const currentMenuSetting = () => {
+    console.log(currentMenu)
    switch (currentMenu) {
      case MENU.PLAN_DRAWING:
        setContextMenu([
@ -50,6 +52,13 @@ export function useContextMenu() {
      case MENU.ROOF_COVERING.DEFAULT:
        setContextMenu([
          [
+            {
+              id: 'refresh',
+              name: '새로고침',
+              fn: () => {
+                externalFn.handleZoomClear()
+              },
+            },
            {
              id: 'roofMaterialPlacement',
              name: '지붕재 배치',
@ -150,8 +159,121 @@ export function useContextMenu() {
        setContextMenu([])
        break
    }
+  }
+  useEffect(() => {
+    currentMenuSetting()
  }, [currentMenu])

+  useEffect(() => {
+    console.log('currentObject', currentObject)
+    console.log('currentMenu', currentMenu)
+    if (currentObject?.name) {
+      console.log(currentObject)
+      switch (currentObject.name) {
+        case 'triangleDormer':
+          setContextMenu([
+            [
+              {
+                id: 'sizeEdit',
+                name: '사이즈 변경',
+              },
+              {
+                id: 'dormerRemove',
+                name: '삭제(D)',
+              },
+              {
+                id: 'dormerMove',
+                name: '이동(M)',
+              },
+              {
+                id: 'dormerCopy',
+                name: '복사(C)',
+              },
+              {
+                id: 'roofMaterialEdit',
+                name: '지붕재 변경',
+              },
+              {
+                id: 'dormerOffset',
+                name: '도머 오프셋',
+              },
+            ],
+          ])
+          break
+        case 'roof':
+          setContextMenu([
+            [
+              {
+                id: 'sizeEdit',
+                name: '사이즈 변경',
+              },
+              {
+                id: 'roofMaterialRemove',
+                name: '삭제(D)',
+              },
+              {
+                id: 'roofMaterialMove',
+                name: '이동(M)',
+              },
+              {
+                id: 'roofMaterialCopy',
+                name: '복사(C)',
+              },
+            ],
+            [
+              {
+                id: 'roofMaterialEdit',
+                name: '지붕재 변경',
+              },
+              {
+                id: 'linePropertyEdit',
+                name: '각 변 속성 변경',
+              },
+              {
+                id: 'flowDirectionEdit',
+                name: '흐름 뱡향 변경',
+              },
+            ],
+          ])
+          break
+        case 'opening':
+          setContextMenu([
+            [
+              {
+                id: 'sizeEdit',
+                name: '사이즈 변경',
+              },
+              {
+                id: 'openingRemove',
+                name: '삭제(D)',
+              },
+              {
+                id: 'openingMove',
+                name: '이동(M)',
+              },
+              {
+                id: 'openingCopy',
+                name: '복사(C)',
+              },
+              {
+                id: 'openingOffset',
+                name: '개구 오프셋',
+              },
+            ],
+          ])
+          break
+        default:
+          currentMenuSetting()
+      }
+    } else {
+      currentMenuSetting()
+    }
+  }, [currentObject])
+
+  useEffect(() => {
+    console.log(currentContextMenu)
+  }, [currentContextMenu])
+
  return {
    contextMenu,
    currentContextMenu,
--- a/src/hooks/usePopup.js
+++ b/src/hooks/usePopup.js
@ -0,0 +1,39 @@
+import { useRecoilState } from 'recoil'
+import { popupState } from '@/store/popupAtom'
+import { useEffect } from 'react'
+
+export function usePopup() {
+  const [popup, setPopup] = useRecoilState(popupState)
+
+  useEffect(() => {
+    console.log(popup)
+  }, [popup])
+
+  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)] })
+  }
+
+  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 {
+    popup,
+    setPopup,
+    addPopup,
+    closePopup,
+    closeAll,
+  }
+}
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@ -156,6 +156,7 @@
  "plan.menu.simulation.pdf": "PDF",
  "plan.mode.vertical.horizontal": "垂直水平モード",
  "plan.mode.free": "프리 모드(JA)",
+  "modal.font.setting": "フォント設定",
  "modal.canvas.setting": "Canvas設定",
  "modal.canvas.setting.display": "ディスプレイ設定",
  "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
@ -198,6 +199,9 @@
  "modal.canvas.setting.font.plan.absorption.medium": "中",
  "modal.canvas.setting.font.plan.absorption.large": "ティーン",
  "modal.canvas.setting.font.plan.absorption.dimension.line": "寸法線の設定",
+  "modal.canvas.setting.font.plan.absorption.dimension.line.font.size": "寸法線の線太さ",
+  "modal.canvas.setting.font.plan.absorption.dimension.line.color": "寸法線の線の色",
+  "modal.canvas.setting.font.plan.absorption.dimension.display": "見る",
  "modal.canvas.setting.font.plan.absorption.plan.size.setting": "図面サイズの設定",
  "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。",
  "modal.canvas.setting.first.option.alloc": "할당표시",
@ -247,6 +251,8 @@
  "modal.object.setting.direction.select": "方向の選択",
  "modal.placement.surface.setting.info": "ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。",
  "modal.placement.surface.setting.diagonal.length": "斜めの長さ",
+  "modal.color.picker.title": "色の設定",
+  "modal.color.picker.default.color": "基本色",
  "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
  "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
  "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@ -160,6 +160,7 @@
  "plan.menu.simulation.pdf": "PDF",
  "plan.mode.vertical.horizontal": "수직 수평 모드",
  "plan.mode.free": "프리 모드",
+  "modal.font.setting": "글꼴 설정",
  "modal.canvas.setting": "Canvas 설정",
  "modal.canvas.setting.display": "디스플레이 설정",
  "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
@ -203,6 +204,9 @@
  "modal.canvas.setting.font.plan.absorption.medium": "중",
  "modal.canvas.setting.font.plan.absorption.large": "대",
  "modal.canvas.setting.font.plan.absorption.dimension.line": "치수선 설정",
+  "modal.canvas.setting.font.plan.absorption.dimension.line.font.size": "치수선의 굵기",
+  "modal.canvas.setting.font.plan.absorption.dimension.line.color": "치수선의 색",
+  "modal.canvas.setting.font.plan.absorption.dimension.display": "보기",
  "modal.canvas.setting.font.plan.absorption.plan.size.setting": "도면크기 설정",
  "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
  "modal.canvas.setting.first.option.alloc": "할당표시",
@ -252,6 +256,8 @@
  "modal.object.setting.direction.select": "방향 선택",
  "modal.placement.surface.setting.info": "ⓘ ①의 길이 입력 후 대각선 길이를 입력하면 ②의 길이를 자동 계산합니다.",
  "modal.placement.surface.setting.diagonal.length": "대각선 길이",
+  "modal.color.picker.title": "색 설정",
+  "modal.color.picker.default.color": "기본색상",
  "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
  "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
  "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
--- a/src/store/popupAtom.js
+++ b/src/store/popupAtom.js
@ -0,0 +1,13 @@
+import { atom } from 'recoil'
+
+/*
+ * id: uuid
+ * component: Popup Component
+ * */
+export const popupState = atom({
+  key: 'popupState',
+  default: {
+    children: [],
+  },
+  dangerouslyAllowMutability: true,
+})
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@ -1629,7 +1629,7 @@ $alert-color: #101010;
        min-height: 80px;
        background-color: #fff;
    }
-    
+
 }

 // 치수선 설정