Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

# Conflicts:
#	src/components/floor-plan/modal/setting01/GridOption.jsx

src/app/QcastProvider.js

@@ -1,24 +1,19 @@
 'use client'
 
 import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
 import ServerError from './error'
 
 import '@/styles/common.scss'
 
-// import KO from '@/locales/ko.json'
-// import JA from '@/locales/ja.json'
-
 export const QcastProvider = ({ children }) => {
-  // const globalLocale = useRecoilValue(globalLocaleStore)
+  const { commonCode, findCommonCode } = useCommonCode()
-  // const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
 
   // useEffect(() => {
-  //   if (globalLocale === 'ko') {
+  //   console.log('commonCode', commonCode)
-  //     setAppMessageState(KO)
+  //   console.log(findCommonCode(100200))
-  //   } else {
+  //   console.log(findCommonCode(115800))
-  //     setAppMessageState(JA)
+  // }, [commonCode])
-  //   }
-  // }, [globalLocale])
 
   return (
     <>

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>

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'

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>
     </>
   )
 }

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>
+  )
+}

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>
+  )
+}

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>)
+}

src/components/floor-plan/CanvasFrame.jsx

@@ -4,15 +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()
 
@@ -34,13 +43,22 @@ export default function CanvasFrame({ plan }) {
   const onClickContextMenu = (index) => {}
 
   return (
-    <div className="canvas-frame flex justify-center">
+    <div className="canvas-frame">
-      <canvas ref={canvasRef} id={'canvas'}></canvas>
+      <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) => (
+            {menus.map((menu) => (
-              <li key={idx} onClick={(e) => setCurrentContextMenu(menu)}>
+              <li
+                key={menu.id}
+                onClick={(e) => {
+                  if (menu.fn) {
+                    menu.fn()
+                  }
+                  setCurrentContextMenu(menu)
+                }}
+              >
                 {menu.name}
               </li>
             ))}

src/components/floor-plan/CanvasLayout.jsx

@@ -9,7 +9,8 @@ import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { SessionContext } from '@/app/SessionProvider'
 
-export default function CanvasLayout() {
+export default function CanvasLayout(props) {
+  const { menuNumber } = props
   const { session } = useContext(SessionContext)
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
   const globalLocaleState = useRecoilValue(globalLocaleStore)
@@ -24,7 +25,7 @@ export default function CanvasLayout() {
 
   return (
     <div className="canvas-layout">
-      <div className="canvas-page-list">
+      <div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
         <div className="canvas-plane-wrap">
           {plans.map((plan) => (
             <button

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 = [
@@ -33,6 +37,8 @@ const canvasMenus = [
 
 export default function CanvasMenu(props) {
   const {
+    menuNumber,
+    setMenuNumber,
     setShowCanvasSettingModal,
     showOutlineModal,
     setShowOutlineModal,
@@ -53,7 +59,7 @@ export default function CanvasMenu(props) {
     setShowPropertiesSettingModal,
   } = props
 
-  const [menuNumber, setMenuNumber] = useState(null)
+  const { addPopup, closePopup } = usePopup()
   const [type, setType] = useState('')
 
   const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
@@ -63,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)
@@ -71,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)
@@ -146,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 = () => {
+  const handlePopup = () => {
-    setCanvasZoom(100)
+    const id = uuidv4()
-    canvas.set({ zoom: 1 })
+    addPopup(id, 1, <SettingModal01 id={id} />)
-    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
-    canvas.renderAll()
   }
 
   useEffect(() => {
@@ -199,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>

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)
@@ -54,15 +52,12 @@ export default function FloorPlan() {
   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 [color, setColor] = useRecoilState(gridColorState)
-  const canvasSettingProps = {
+  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
-    setShowCanvasSettingModal,
-    setShowDotLineGridModal,
-    setShowColorPickerModal,
-  }
 
   const outlineProps = {
     setShowOutlineModal,
@@ -70,6 +65,8 @@ export default function FloorPlan() {
   }
 
   const modalProps = {
+    menuNumber,
+    setMenuNumber,
     setShowCanvasSettingModal,
     showOutlineModal,
     setShowOutlineModal,
@@ -120,14 +117,6 @@ export default function FloorPlan() {
       console.error('Data fetching error:', error)
     }
   }
-  const dotLineProps = {
-    showDotLineGridModal,
-    setShowDotLineGridModal,
-  }
-
-  const gridColorProps = {
-    setShowColorPickerModal,
-  }
 
   const propertiesSettingProps = {
     setShowPropertiesSettingModal,
@@ -139,14 +128,10 @@ export default function FloorPlan() {
     <>
       <div className="canvas-wrap">
         <CanvasMenu {...modalProps} />
-        <div className="canvas-content">
+        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-          <CanvasLayout />
+          <CanvasLayout menuNumber={menuNumber} />
-          {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
           {showOutlineModal && <WallLineSetting {...outlineProps} />}
-          {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
-          {showColorPickerModal && <GridColorSetting {...gridColorProps} />}
           {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
-
           {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
           {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
           {showRoofShapePassivitySettingModal && (

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>

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>

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>

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>

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>

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>

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>
-  )
-}

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

@@ -1,26 +1,51 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
-import { useRecoilState, useResetRecoilState } from 'recoil'
+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) {
+export default function GridOption() {
-  const { setShowDotLineGridModal, setShowColorPickerModal } = props
   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(() => {
     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 { id, name, selected } = option
 
@@ -31,6 +56,8 @@ export default function GridOption(props) {
     setShowDotLineGridModal(false)
     setTempGridMode(false)
     setAdsorptionPointAddMode(false)
+    closePopup(dotLineId)
+    closePopup(colorId)
     //
 
     newGridOptions.forEach((item) => {
@@ -48,17 +75,26 @@ export default function GridOption(props) {
     } else if (selectedOption.id === 2) {
       // 점 선 그리드 설정 모달
       setShowDotLineGridModal(selectedOption.selected)
+      addPopup(dotLineId, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={dotLineId} />)
     } else if (selectedOption.id === 3) {
       // 흡착점 모드
       setAdsorptionPointAddMode(selectedOption.selected)
     } else if (selectedOption.id === 4) {
       // 그리드 색 설정 모달
       setShowColorPickerModal(selectedOption.selected)
+      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} id={colorId} />)
     }
 
     setGridOptions(newGridOptions)
   }
 
+  const colorPickerProps = {
+    color: gridColor,
+    setColor: setGridColor,
+    isShow: showColorPickerModal,
+    setIsShow: setShowColorPickerModal,
+  }
+
   return (
     <>
       <div className="modal-check-btn-wrap">
@@ -72,6 +108,7 @@ export default function GridOption(props) {
           ))}
         </div>
       </div>
+      {/*<ColorPickerModal {...colorPickerProps} />*/}
     </>
   )
 }

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">

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`}>
+      <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
-        <div className="modal-head">
+        <div className={`modal-pop-wrap sm mount`}>
-          <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
+          <div className="modal-head">
-          <button className="modal-close" onClick={() => setShowCanvasSettingModal(false)}>
+            <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
-            닫기
+            <button className="modal-close" onClick={() => closePopup(id)}>
-          </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')}
             </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 />}
+          <div className="modal-body">
-          {buttonAct === 2 && <SecondOption />}
+            <div className="modal-btn-wrap">
-          {buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} setShowColorPickerModal={setShowColorPickerModal} />}
+              <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>
+    </>
   )
 }

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>
+  )
+}

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>

src/hooks/common/useCommonCode.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import { useRecoilState } from 'recoil'
+import { commonCodeState } from '@/store/commonCodeAtom'
+import { isObjectNotEmpty } from '@/util/common-utils'
+import { useAxios } from '../useAxios'
+
+export const useCommonCode = () => {
+  const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
+  const { promiseGet } = useAxios()
+
+  const findCommonCode = (key) => {
+    // const arr = commonCode[key]
+    // return arr.sort((a, b) => a.clPriority - b.clPriority)
+    return commonCode[key]
+  }
+
+  useEffect(() => {
+    const getCommonCode = async () => {
+      await promiseGet({ url: '/api/commcode/qc-comm-code' }).then((res) => {
+        setCommonCode(Object.groupBy(res.data, ({ clHeadCd }) => clHeadCd))
+      })
+    }
+
+    if (!isObjectNotEmpty(commonCode)) {
+      getCommonCode()
+    }
+  }, [])
+
+  return {
+    commonCode,
+    findCommonCode,
+  }
+}

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,
   }
 }

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,

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,
+  }
+}

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을 삭제하시겠습니까?",

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을 삭제하시겠습니까?",

src/store/commonCodeAtom.js

@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const commonCodeState = atom({
+  key: 'commonCode',
+  default: {},
+})

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,
+})

src/styles/_modal.scss

@@ -1655,24 +1655,33 @@ $alert-color: #101010;
 .form-box{
     width: 100%;
     background-color: #fff;
-    padding: 10px 0 20px;
+    padding: 10px 15px 20px;
     .line-form{
         position: relative;
-        width: 102px;
+        display: flex;
-        height: 40px;
+        flex-direction: column;
+        justify-content: flex-end;
+        min-width: 102px;
+        min-height: 40px;
         margin: 0 auto;
-        border-left: 1px dashed #101010;
+
-        border-right: 1px dashed #101010;
+        &::before{
-        .line-font-box{
+            content: '';
             position: absolute;
-            bottom: -3px;
+            bottom: 0px;
             left: 0;
             width: 100%;
-            text-align: center;
+            height: 40px;
+            border-left: 1px dashed #101010;
+            border-right: 1px dashed #101010;
+        }
+        .line-font-box{
             .font{
                 display: block;
-                padding-bottom: 6px;
+                padding-bottom: 15px;
                 color: #101010;
+                text-align: center;
+                line-height: 1;
             }
             .line{
                 position: relative;
@@ -1687,7 +1696,7 @@ $alert-color: #101010;
                     transform: translateY(-50%) rotate(45deg);
                     left: 1px;
                     width: 9px;
-                    height: 9px;
+                    height:+ 9px;
                     border: 1px solid;
                     border-color: inherit;
                     border-top: none;

src/styles/_submodal.scss

@@ -228,11 +228,19 @@
     margin-bottom: 20px;
 }
 .design-request-grid{
-    .design-request-grid-tit{
+    .design-request-count{
-        font-size: 13px;
+        display: flex;
-        font-weight: 600;
+        align-items: center;
-        color: #101010;
+        margin-bottom: 10px;
-        margin-bottom: 15px;
+        .design-request-grid-tit{
+            font-size: 13px;
+            font-weight: 600;
+            color: #101010;
+        }
+        .select-wrap{
+            margin-left: auto;
+            width: 80px;
+        }
     }
 }