Merge remote-tracking branch 'origin/dev' into dev

src/components/fabric/QLine.js

@@ -21,9 +21,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     }
     this.line = this
     // 소수점 전부 제거
-    points.forEach((point) => {
+    points = points.map((point) => Math.round(point))
-      point = Math.round(point)
-    })
 
     this.idx = options.idx ?? 0
     this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })

src/components/fabric/QPolygon.js

@@ -24,8 +24,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   initialize: function (points, options, canvas) {
     // 소수점 전부 제거
     points.forEach((point) => {
-      point.x = Math.round(point.x)
+      point.x = Number(point.x.toFixed(1))
-      point.y = Math.round(point.y)
+      point.y = Number(point.y.toFixed(1))
     })
     options.selectable = options.selectable ?? true
     options.sort = options.sort ?? true

src/components/floor-plan/FloorPlan.jsx

@@ -2,56 +2,33 @@
 
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { useAxios } from '@/hooks/useAxios'
-import { globalLocaleStore } from '@/store/localeAtom'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import '@/styles/contents.scss'
 
 export default function FloorPlan({ children }) {
-  const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const { get } = useAxios(globalLocaleState)
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
 
-  // const [menuNumber, setMenuNumber] = useState(null)
   const { menuNumber, setMenuNumber } = useCanvasMenu()
 
+  const { fetchSettings } = useCanvasSetting()
+
   const modalProps = {
     menuNumber,
     setMenuNumber,
   }
+
   useEffect(() => {
     fetchSettings()
   }, [objectNo])
 
-  // Canvas Setting 조회
+  useEffect(() => {
-  const fetchSettings = async () => {
+    setMenuNumber(1)
-    try {
+  }, [])
-      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 optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
-        ...item,
-      }))
-      // 데이터 설정
-      setSettingModalFirstOptions({
-        option1: optionData1,
-        option2: optionData2,
-        dimensionDisplay: optionData5,
-      })
-      setSettingModalSecondOptions({
-        option3: optionData3,
-        option4: optionData4,
-      })
-    } catch (error) {
-      console.error('Data fetching error:', error)
-    }
-  }
 
   return (
     <>

src/components/floor-plan/modal/image/ImageSizeSetting.jsx

@@ -0,0 +1,42 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function ImageSizeSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, size, setSize } = props
+  const [sizeValue, setSizeValue] = useState(100)
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xxxm`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.image.size.setting')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="range-wrap">
+            <input
+              type="range"
+              id="size"
+              name="volume"
+              min="20"
+              max="200"
+              step={10}
+              value={sizeValue}
+              onChange={(e) => setSizeValue(e.target.value)}
+            />
+            <label htmlFor="size">{sizeValue}%</label>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

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

@@ -1,210 +1,216 @@
-import { useRecoilState, useRecoilValue } from 'recoil'
-import { settingModalSecondOptionsState } from '@/store/settingAtom'
-import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
-import { useAxios } from '@/hooks/useAxios'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
-import { useSwal } from '@/hooks/useSwal'
+import { useMessage } from '@/hooks/useMessage'
-import { useFirstOption } from '@/hooks/option/useFirstOption'
+
-import { setSurfaceShapePattern } from '@/util/canvas-util'
+//import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
+//import { settingModalSecondOptionsState } from '@/store/settingAtom'
-import { POLYGON_TYPE } from '@/common/common'
+//import { useAxios } from '@/hooks/useAxios'
+//import { useSwal } from '@/hooks/useSwal'
+//import { setSurfaceShapePattern } from '@/util/canvas-util'
+//import { canvasState } from '@/store/canvasAtom'
+//import { POLYGON_TYPE } from '@/common/common'
 
 export default function FirstOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const { settingModalFirstOptions, setSettingModalFirstOptions } = useFirstOption()
+  const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
-  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
-  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  const { option3, option4 } = settingModalSecondOptions
   const { getMessage } = useMessage()
-  const { get, post } = useAxios()
+
-  const { swalFire } = useSwal()
+  //const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  const canvas = useRecoilValue(canvasState)
+  //const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  //const { option3, option4 } = settingModalSecondOptions
+  //const { get, post } = useAxios()
+  //const { swalFire } = useSwal()
+  //const canvas = useRecoilValue(canvasState)
+
+  const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('FirstOption useEffect 실행')
-    fetchSettings()
+    //fetchSettings()
+    //frontSettings()
   }, [objectNo])
 
-  // Canvas Setting 조회 및 초기화
+  // // Canvas Setting 조회 및 초기화
-  const fetchSettings = async () => {
+  // const fetchSettings = async () => {
-    try {
+  //   try {
-      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+  //     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 optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData2 = settingModalFirstOptions.option2.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 optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+  //     const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
 
-      // 데이터 설정
+  //     // 데이터 설정
-      setSettingModalFirstOptions({
+  //     setSettingModalFirstOptions({
-        option1: optionData1,
+  //       option1: optionData1,
-        option2: optionData2,
+  //       option2: optionData2,
-        dimensionDisplay: optionData5,
+  //       dimensionDisplay: optionData5,
-      })
+  //     })
 
-      setSettingModalSecondOptions({
+  //     setSettingModalSecondOptions({
-        option3: optionData3,
+  //       option3: optionData3,
-        option4: optionData4,
+  //       option4: optionData4,
-      })
+  //     })
-    } catch (error) {
+  //   } catch (error) {
-      console.error('Data fetching error:', error)
+  //     console.error('Data fetching error:', error)
-    }
+  //   }
-  }
+  // }
 
-  const onClickOption = async (option) => {
+  // const onClickOption = async (option) => {
-    option.selected = !option.selected
+  //   option.selected = !option.selected
 
-    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-    setSettingModalSecondOptions({ option3, option4 })
+  //   setSettingModalSecondOptions({ option3, option4 })
 
-    try {
+  //   try {
-      // 서버에 전송할 데이터
+  //     // 서버에 전송할 데이터
-      const dataToSend = {
+  //     const dataToSend = {
-        firstOption1: option1.map((item) => ({
+  //       firstOption1: option1.map((item) => ({
-          column: item.column,
+  //         column: item.column,
-          selected: item.selected,
+  //         selected: item.selected,
-        })),
-        firstOption2: option2.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption3: dimensionDisplay.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        // secondOption1: secondOptions[0].option1.map((item) => ({
-        //   name: item.id,
-        //   name: item.name,
-        //   // 필요한 경우 데이터 항목 추가
   //       })),
-        secondOption2: option4.map((item) => ({
+  //       firstOption2: option2.map((item) => ({
-          column: item.column,
+  //         column: item.column,
-          selected: item.selected,
+  //         selected: item.selected,
-        })),
-      }
-
-      const patternData = {
-        objectNo,
-        //디스플레이 설정(다중)
-        allocDisplay: dataToSend.firstOption1[0].selected,
-        outlineDisplay: dataToSend.firstOption1[1].selected,
-        gridDisplay: dataToSend.firstOption1[2].selected,
-        lineDisplay: dataToSend.firstOption1[3].selected,
-        wordDisplay: dataToSend.firstOption1[4].selected,
-        circuitNumDisplay: dataToSend.firstOption1[5].selected,
-        flowDisplay: dataToSend.firstOption1[6].selected,
-        trestleDisplay: dataToSend.firstOption1[7].selected,
-        totalDisplay: dataToSend.firstOption1[8].selected,
-        //차수 표시(다건)
-        corridorDimension: dataToSend.firstOption3[0].selected,
-        realDimension: dataToSend.firstOption3[1].selected,
-        noneDimension: dataToSend.firstOption3[2].selected,
-        //화면 표시(다중)
-        onlyBorder: dataToSend.firstOption2[0].selected,
-        lineHatch: dataToSend.firstOption2[1].selected,
-        allPainted: dataToSend.firstOption2[2].selected,
-        //흡착범위 설정(단건)
-        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-      }
-
-      // HTTP POST 요청 보내기
-      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-        swalFire({ text: getMessage(res.returnMessage) })
-      })
-    } catch (error) {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-    }
-  }
-
-  const onClickOnlyOne = async (item) => {
-    //화면 표시
-    if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
-      const options2 = settingModalFirstOptions?.option2.map((option2) => {
-        option2.selected = option2.id === item.id
-        return option2
-      })
-
-      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-
-      polygons.forEach((polygon) => {
-        setSurfaceShapePattern(polygon, item.column)
-      })
-
-      //치수 표시
-    } else {
-      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
-        option.selected = option.id === item.id
-        return option
-      })
-    }
-
-    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-
-    try {
-      // 서버에 전송할 데이터
-      const dataToSend = {
-        firstOption1: option1.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption2: option2.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption3: dimensionDisplay.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        // secondOption1: secondOptions[0].option1.map((item) => ({
-        //   name: item.id,
-        //   name: item.name,
-        //   // 필요한 경우 데이터 항목 추가
   //       })),
-        secondOption2: option4.map((item) => ({
+  //       firstOption3: dimensionDisplay.map((item) => ({
-          column: item.column,
+  //         column: item.column,
-          selected: item.selected,
+  //         selected: item.selected,
-        })),
+  //       })),
-      }
+  //       // secondOption1: secondOptions[0].option1.map((item) => ({
+  //       //   name: item.id,
+  //       //   name: item.name,
+  //       //   // 필요한 경우 데이터 항목 추가
+  //       // })),
+  //       secondOption2: option4.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //     }
 
-      const patternData = {
+  //     const patternData = {
-        objectNo,
+  //       objectNo,
-        //디스플레이 설정(다중)
+  //       //디스플레이 설정(다중)
-        allocDisplay: dataToSend.firstOption1[0].selected,
+  //       allocDisplay: dataToSend.firstOption1[0].selected,
-        outlineDisplay: dataToSend.firstOption1[1].selected,
+  //       outlineDisplay: dataToSend.firstOption1[1].selected,
-        gridDisplay: dataToSend.firstOption1[2].selected,
+  //       gridDisplay: dataToSend.firstOption1[2].selected,
-        lineDisplay: dataToSend.firstOption1[3].selected,
+  //       lineDisplay: dataToSend.firstOption1[3].selected,
-        wordDisplay: dataToSend.firstOption1[4].selected,
+  //       wordDisplay: dataToSend.firstOption1[4].selected,
-        circuitNumDisplay: dataToSend.firstOption1[5].selected,
+  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
-        flowDisplay: dataToSend.firstOption1[6].selected,
+  //       flowDisplay: dataToSend.firstOption1[6].selected,
-        trestleDisplay: dataToSend.firstOption1[7].selected,
+  //       trestleDisplay: dataToSend.firstOption1[7].selected,
-        totalDisplay: dataToSend.firstOption1[8].selected,
+  //       totalDisplay: dataToSend.firstOption1[8].selected,
-        //차수 표시(다건)
+  //       //차수 표시(다건)
-        corridorDimension: dataToSend.firstOption3[0].selected,
+  //       corridorDimension: dataToSend.firstOption3[0].selected,
-        realDimension: dataToSend.firstOption3[1].selected,
+  //       realDimension: dataToSend.firstOption3[1].selected,
-        noneDimension: dataToSend.firstOption3[2].selected,
+  //       noneDimension: dataToSend.firstOption3[2].selected,
-        //화면 표시(다중)
+  //       //화면 표시(다중)
-        onlyBorder: dataToSend.firstOption2[0].selected,
+  //       onlyBorder: dataToSend.firstOption2[0].selected,
-        lineHatch: dataToSend.firstOption2[1].selected,
+  //       lineHatch: dataToSend.firstOption2[1].selected,
-        allPainted: dataToSend.firstOption2[2].selected,
+  //       allPainted: dataToSend.firstOption2[2].selected,
-        //흡착범위 설정(단건)
+  //       //흡착범위 설정(단건)
-        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-      }
+  //     }
 
-      // HTTP POST 요청 보내기
+  //     // HTTP POST 요청 보내기
-      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-        swalFire({ text: getMessage(res.returnMessage) })
+  //       swalFire({ text: getMessage(res.returnMessage) })
-      })
+  //     })
-    } catch (error) {
+  //   } catch (error) {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-    }
+  //   }
-  }
+  // }
+
+  // const onClickOnlyOne = async (item) => {
+  //   //화면 표시
+  //   if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
+  //     const options2 = settingModalFirstOptions?.option2.map((option2) => {
+  //       option2.selected = option2.id === item.id
+  //       return option2
+  //     })
+
+  //     const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+  //     polygons.forEach((polygon) => {
+  //       setSurfaceShapePattern(polygon, item.column)
+  //     })
+
+  //     //치수 표시
+  //   } else {
+  //     const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+  //       option.selected = option.id === item.id
+  //       return option
+  //     })
+  //   }
+
+  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+
+  //   try {
+  //     // 서버에 전송할 데이터
+  //     const dataToSend = {
+  //       firstOption1: option1.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       firstOption2: option2.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       firstOption3: dimensionDisplay.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       // secondOption1: secondOptions[0].option1.map((item) => ({
+  //       //   name: item.id,
+  //       //   name: item.name,
+  //       //   // 필요한 경우 데이터 항목 추가
+  //       // })),
+  //       secondOption2: option4.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //     }
+
+  //     const patternData = {
+  //       objectNo,
+  //       //디스플레이 설정(다중)
+  //       allocDisplay: dataToSend.firstOption1[0].selected,
+  //       outlineDisplay: dataToSend.firstOption1[1].selected,
+  //       gridDisplay: dataToSend.firstOption1[2].selected,
+  //       lineDisplay: dataToSend.firstOption1[3].selected,
+  //       wordDisplay: dataToSend.firstOption1[4].selected,
+  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
+  //       flowDisplay: dataToSend.firstOption1[6].selected,
+  //       trestleDisplay: dataToSend.firstOption1[7].selected,
+  //       totalDisplay: dataToSend.firstOption1[8].selected,
+  //       //차수 표시(다건)
+  //       corridorDimension: dataToSend.firstOption3[0].selected,
+  //       realDimension: dataToSend.firstOption3[1].selected,
+  //       noneDimension: dataToSend.firstOption3[2].selected,
+  //       //화면 표시(다중)
+  //       onlyBorder: dataToSend.firstOption2[0].selected,
+  //       lineHatch: dataToSend.firstOption2[1].selected,
+  //       allPainted: dataToSend.firstOption2[2].selected,
+  //       //흡착범위 설정(단건)
+  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+  //     }
+
+  //     // HTTP POST 요청 보내기
+  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+  //       swalFire({ text: getMessage(res.returnMessage) })
+  //     })
+  //   } catch (error) {
+  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+  //   }
+  // }
 
   return (
     <>
@@ -225,7 +231,7 @@ export default function FirstOption() {
         <div className="flex-check-box for-line">
           {settingModalFirstOptions &&
             settingModalFirstOptions.dimensionDisplay.map((item) => (
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(item)}>
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>
               </button>
@@ -237,7 +243,7 @@ export default function FirstOption() {
         <div className="flex-check-box for-line">
           {settingModalFirstOptions &&
             settingModalFirstOptions.option2.map((item) => (
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(item)}>
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>
               </button>

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

@@ -1,143 +1,148 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+//import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 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'
 import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+
+//import { useAxios } from '@/hooks/useAxios'
+//import { useSwal } from '@/hooks/useSwal'
+// import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
 
 export default function SecondOption() {
-  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  //const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
-  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  //const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  // const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
-  const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
+  // const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
-  const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
+  // const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  // const { option3, option4 } = settingModalSecondOptions
+  // const { get, post } = useAxios()
+  // const { swalFire } = useSwal()
 
-  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  const { option3, option4 } = settingModalSecondOptions
   const { getMessage } = useMessage()
-  const { get, post } = useAxios()
-  const { swalFire } = useSwal()
   const { addPopup, closePopup, closePopups } = usePopup()
   const [showFontSettingModal, setShowFontSettingModal] = useState(false)
   const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
   const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
 
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
+  const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
+  const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
+  const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('SecondOption useEffect 실행')
-    fetchSettings()
+    //fetchSettings()
   }, [objectNo])
 
   // Canvas Setting 조회 및 초기화
-  const fetchSettings = async () => {
+  // const fetchSettings = async () => {
-    try {
+  //   try {
-      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+  //     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 optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+  //     const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+  //     const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
-        ...item,
+  //     const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-        selected: res[item.column],
+  //     const optionData4 = settingModalSecondOptions.option4.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] }))
 
-      setSettingModalFirstOptions({
+  //     setSettingModalFirstOptions({
-        option1: optionData1,
+  //       option1: optionData1,
-        option2: optionData2,
+  //       option2: optionData2,
-        dimensionDisplay: optionData5,
+  //       dimensionDisplay: optionData5,
-      })
+  //     })
-      setSettingModalSecondOptions({
+  //     setSettingModalSecondOptions({
-        option3: optionData3,
+  //       option3: optionData3,
-        option4: optionData4,
+  //       option4: optionData4,
-      })
+  //     })
-    } catch (error) {
+  //   } catch (error) {
-      console.error('Data fetching error:', error)
+  //     console.error('Data fetching error:', error)
-    }
+  //   }
-  }
+  // }
 
-  const onClickOption = async (option) => {
+  // const onClickOption = async (option) => {
-    // option4에서 한 개만 선택 가능하도록 처리
+  //   // option4에서 한 개만 선택 가능하도록 처리
-    const updatedOption4 = option4.map((item) =>
+  //   const updatedOption4 = option4.map((item) =>
-      item.id === option.id
+  //     item.id === option.id
-        ? { ...item, selected: true }
+  //       ? { ...item, selected: true }
-        : {
+  //       : {
-            ...item,
+  //           ...item,
-            selected: false,
+  //           selected: false,
-          },
+  //         },
-    )
+  //   )
 
-    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-    setSettingModalSecondOptions({ option3, option4: updatedOption4 })
+  //   setSettingModalSecondOptions({ option3, option4: updatedOption4 })
 
-    try {
+  //   try {
-      // 서버에 전송할 데이터
+  //     // 서버에 전송할 데이터
-      const dataToSend = {
+  //     const dataToSend = {
-        firstOption1: option1.map((item) => ({
+  //       firstOption1: option1.map((item) => ({
-          column: item.column,
+  //         column: item.column,
-          selected: item.selected,
+  //         selected: item.selected,
-        })),
-        firstOption2: option2.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption3: dimensionDisplay.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        // secondOption1: secondOptions[0].option3.map((item) => ({
-        //   name: item.id,
-        //   name: item.name,
-        //   // 필요한 경우 데이터 항목 추가
   //       })),
-        secondOption2: updatedOption4.map((item) => ({
+  //       firstOption2: option2.map((item) => ({
-          column: item.column,
+  //         column: item.column,
-          selected: item.selected,
+  //         selected: item.selected,
-        })),
+  //       })),
-      }
+  //       firstOption3: dimensionDisplay.map((item) => ({
-      const patternData = {
+  //         column: item.column,
-        objectNo,
+  //         selected: item.selected,
-        //디스플레이 설정(다중)
+  //       })),
-        allocDisplay: dataToSend.firstOption1[0].selected,
+  //       // secondOption1: secondOptions[0].option3.map((item) => ({
-        outlineDisplay: dataToSend.firstOption1[1].selected,
+  //       //   name: item.id,
-        gridDisplay: dataToSend.firstOption1[2].selected,
+  //       //   name: item.name,
-        lineDisplay: dataToSend.firstOption1[3].selected,
+  //       //   // 필요한 경우 데이터 항목 추가
-        wordDisplay: dataToSend.firstOption1[4].selected,
+  //       // })),
-        circuitNumDisplay: dataToSend.firstOption1[5].selected,
+  //       secondOption2: updatedOption4.map((item) => ({
-        flowDisplay: dataToSend.firstOption1[6].selected,
+  //         column: item.column,
-        trestleDisplay: dataToSend.firstOption1[7].selected,
+  //         selected: item.selected,
-        totalDisplay: dataToSend.firstOption1[8].selected,
+  //       })),
-        //차수 표시(다건)
+  //     }
-        corridorDimension: dataToSend.firstOption3[0].selected,
+  //     const patternData = {
-        realDimension: dataToSend.firstOption3[1].selected,
+  //       objectNo,
-        noneDimension: dataToSend.firstOption3[2].selected,
+  //       //디스플레이 설정(다중)
-        //화면 표시(다중)
+  //       allocDisplay: dataToSend.firstOption1[0].selected,
-        onlyBorder: dataToSend.firstOption2[0].selected,
+  //       outlineDisplay: dataToSend.firstOption1[1].selected,
-        lineHatch: dataToSend.firstOption2[1].selected,
+  //       gridDisplay: dataToSend.firstOption1[2].selected,
-        allPainted: dataToSend.firstOption2[2].selected,
+  //       lineDisplay: dataToSend.firstOption1[3].selected,
-        //흡착범위 설정(단건)
+  //       wordDisplay: dataToSend.firstOption1[4].selected,
-        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
-        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+  //       flowDisplay: dataToSend.firstOption1[6].selected,
-        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+  //       trestleDisplay: dataToSend.firstOption1[7].selected,
-        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+  //       totalDisplay: dataToSend.firstOption1[8].selected,
-      }
+  //       //차수 표시(다건)
+  //       corridorDimension: dataToSend.firstOption3[0].selected,
+  //       realDimension: dataToSend.firstOption3[1].selected,
+  //       noneDimension: dataToSend.firstOption3[2].selected,
+  //       //화면 표시(다중)
+  //       onlyBorder: dataToSend.firstOption2[0].selected,
+  //       lineHatch: dataToSend.firstOption2[1].selected,
+  //       allPainted: dataToSend.firstOption2[2].selected,
+  //       //흡착범위 설정(단건)
+  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+  //     }
+
+  //     // HTTP POST 요청 보내기
+  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+  //       swalFire({ text: getMessage(res.returnMessage) })
+  //     })
+  //   } catch (error) {
+  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+  //   }
+  //   setAdsorptionRange(option.range)
+  // }
 
-      // HTTP POST 요청 보내기
-      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-        swalFire({ text: getMessage(res.returnMessage) })
-      })
-    } catch (error) {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-    }
-    setAdsorptionRange(option.range)
-  }
   let dimensionId = null
   let fontId = null
   let planSizeId = null
@@ -192,16 +197,6 @@ export default function SecondOption() {
     setShowFontSettingModal(false)
 
     switch (type) {
-      case 'dimensionLine':
-        if (!showDimensionLineSettingModal) {
-          setShowDimensionLineSettingModal(true)
-          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
-        } else {
-          setShowDimensionLineSettingModal(false)
-          closePopup(dimensionId)
-        }
-
-        break
       case 'font1': {
         //문자 글꼴변경
         setShowFontSettingModal(true)
@@ -210,6 +205,7 @@ export default function SecondOption() {
         addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
         break
       }
+
       case 'font2': {
         //흐름 방향 글꼴 변경
         setShowFontSettingModal(true)
@@ -218,6 +214,7 @@ export default function SecondOption() {
         addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
         break
       }
+
       case 'font3': {
         //치수 글꼴변경
         setShowFontSettingModal(true)
@@ -226,19 +223,36 @@ export default function SecondOption() {
         addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
         break
       }
-      case 'font4': //회로번호 글꼴변경
+
+      case 'font4': {
+        //회로번호 글꼴변경
         setShowFontSettingModal(true)
         fontProps.type = 'circuitNumberText'
         fontProps.id = fontId
         addPopup(fontId, 2, <FontSetting {...fontProps} />)
         break
-      case 'planSize':
+      }
-        setShowPlanSizeSettingModal(true)
 
+      case 'dimensionLine': {
+        //치수선 설정
+        if (!showDimensionLineSettingModal) {
+          setShowDimensionLineSettingModal(true)
+          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+        } else {
+          setShowDimensionLineSettingModal(false)
+          closePopup(dimensionId)
+        }
+        break
+      }
+
+      case 'planSize': {
+        //도면크기 설정
+        setShowPlanSizeSettingModal(true)
         addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
         break
       }
     }
+  }
 
   return (
     <>

src/components/management/Stuff.jsx

@@ -43,9 +43,9 @@ export default function Stuff() {
   const copyNo = async (value) => {
     try {
       await navigator.clipboard.writeText(value)
-      alert('물건번호가 복사되었습니다.')
+      alert(getMessage('stuff.detail.header.message2'))
     } catch (error) {
-      alert('물건번호 복사에 실패했습니다.')
+      alert(getMessage('stuff.detail.header.message3'))
     }
   }
 

src/components/management/StuffDetail.jsx

@@ -88,6 +88,9 @@ export default function StuffDetail() {
   const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
   const [prefValue, setPrefValue] = useState('')
   const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
+  const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
+  const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
+
   const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
   const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
 
@@ -318,21 +321,37 @@ export default function StuffDetail() {
 
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
-      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
+      let url
+      if (sessionState?.storeId === 'T01') {
+        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      } else {
+        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+      }
+
+      get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
           const firstList = res.filter((row) => row.saleStoreLevel === '1')
-          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
+          let favList
-
+          if (sessionState?.storeId === 'T01') {
+            firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
+            favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+            setSaleStoreList(firstList)
+            setFavoriteStoreList(favList)
+            setShowSaleStoreList(favList)
+          } else {
             //1차점 셀렉트박스
             setSaleStoreList(firstList)
-
+          }
+          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
           let filterOtherList
           if (sessionState?.storeId === 'T01') {
             filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
+
             setOriginOtherSaleStoreList(filterOtherList)
             setOtherSaleStoreList(filterOtherList)
           } else {
-            //1차점 아닌 판매점 셀렉트박스
+            //T01 아니고 2차점 판매점 셀렉트박스
             setOriginOtherSaleStoreList(otherList)
             setOtherSaleStoreList(otherList)
           }
@@ -380,13 +399,29 @@ export default function StuffDetail() {
 
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
-      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
+      let url
+      if (sessionState?.storeId === 'T01') {
+        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      } else {
+        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+      }
+      get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
           const firstList = res.filter((row) => row.saleStoreLevel === '1')
           const otherList = res.filter((row) => row.saleStoreLevel !== '1')
+          let favList
 
+          if (sessionState?.storeId === 'T01') {
+            firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
+            favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+            setSaleStoreList(firstList)
+            setFavoriteStoreList(favList)
+            setShowSaleStoreList(favList)
+          } else {
             //1차점 셀렉트박스
             setSaleStoreList(firstList)
+          }
 
           let filterOtherList
           if (sessionState?.storeId === 'T01') {
@@ -495,6 +530,16 @@ export default function StuffDetail() {
   const onRadioChange = (key) => {
     setSelectObjectStatusId(key.target.value)
   }
+
+  //1차점 자동완성 input
+  const onInputChange = (key) => {
+    if (key !== '') {
+      setShowSaleStoreList(saleStoreList)
+    } else {
+      setShowSaleStoreList(favoriteStoreList)
+    }
+  }
+
   //1차점 변경 이벤트
   const onSelectionChange = (key) => {
     if (isObjectNotEmpty(key)) {
@@ -516,7 +561,7 @@ export default function StuffDetail() {
       }
     } else {
       // EDIT
-      if (planReqNo !== null) {
+      if (planReqNo !== null && planReqNo !== '') {
         if (confirm(getMessage('stuff.detail.confirm.message1'))) {
           delFlg = true
         } else {
@@ -629,7 +674,7 @@ export default function StuffDetail() {
       }
     } else {
       //EDIT
-      if (planReqNo !== null) {
+      if (planReqNo !== null && planReqNo !== '') {
         if (confirm(getMessage('stuff.detail.confirm.message1'))) {
           delFlg = true
         } else {
@@ -849,7 +894,6 @@ export default function StuffDetail() {
         errors.installHeight = true
       }
 
-      // console.log('상세에러필드:::::', errors)
       setIsFormValid(Object.keys(errors).length === 0 ? true : false)
     }
   }, [
@@ -906,20 +950,17 @@ export default function StuffDetail() {
   // 저장
   const onValid = async () => {
     const formData = form.getValues()
-
     let errors = {}
     let fieldNm
     //담당자
     if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
       fieldNm = getMessage('stuff.detail.receiveUser')
       errors = fieldNm
-      inputReceiveUserEl.current.focus()
     }
     //물건명
     if (!formData.objectName || formData.objectName.trim().length === 0) {
       fieldNm = getMessage('stuff.detail.objectStatusId')
       errors = fieldNm
-      inputObjectNameEl.current.focus()
     }
     //경칭
     if (!formData.objectNameOmit) {
@@ -935,13 +976,11 @@ export default function StuffDetail() {
     if (!formData.zipNo) {
       fieldNm = getMessage('stuff.detail.zipNo')
       errors = fieldNm
-      inputZipNoEl.current.focus()
     }
     //주소
     if (!formData.address) {
       fieldNm = getMessage('stuff.detail.address')
       errors = fieldNm
-      inputAddressEl.current.focus()
     }
     //도도부현
     if (!formData.prefId || formData.prefId === '0') {
@@ -962,7 +1001,6 @@ export default function StuffDetail() {
     if (!formData.verticalSnowCover) {
       fieldNm = getMessage('stuff.detail.verticalSnowCover')
       errors = fieldNm
-      inputVerticalSnowCoverEl.current.focus()
     }
 
     //면조도구분
@@ -974,7 +1012,6 @@ export default function StuffDetail() {
     if (!formData.installHeight) {
       fieldNm = getMessage('stuff.detail.installHeight')
       errors = fieldNm
-      inputInstallHeightEl.current.focus()
     }
 
     if (Object.keys(errors).length > 0) {
@@ -1306,6 +1343,39 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
+                        {(sessionState?.storeId === 'T01' && (
+                          <>
+                            <div className="select-wrap mr5" style={{ width: '567px' }}>
+                              <Select
+                                id="long-value-select1"
+                                instanceId="long-value-select1"
+                                className="react-select-custom"
+                                classNamePrefix="custom"
+                                placeholder="Select"
+                                options={showSaleStoreList}
+                                onInputChange={onInputChange}
+                                onChange={onSelectionChange}
+                                getOptionLabel={(x) => x.saleStoreName}
+                                getOptionValue={(x) => x.saleStoreId}
+                                isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                value={showSaleStoreList.filter(function (option) {
+                                  return option.saleStoreId === selOptions
+                                })}
+                              ></Select>
+                            </div>
+                            <div className="input-wrap" style={{ width: '216px' }}>
+                              <input
+                                type="text"
+                                className="input-light"
+                                value={form.watch('saleStoreId') || ''}
+                                {...form.register('saleStoreId')}
+                                readOnly
+                              />
+                            </div>
+                          </>
+                        )) || (
+                          <>
                             <div className="select-wrap mr5" style={{ width: '567px' }}>
                               <Select
                                 id="long-value-select1"
@@ -1322,7 +1392,7 @@ export default function StuffDetail() {
                                 value={saleStoreList.filter(function (option) {
                                   return option.saleStoreId === selOptions
                                 })}
-                          />
+                              ></Select>
                             </div>
                             <div className="input-wrap" style={{ width: '216px' }}>
                               <input
@@ -1333,6 +1403,8 @@ export default function StuffDetail() {
                                 readOnly
                               />
                             </div>
+                          </>
+                        )}
                       </div>
                     </td>
                   </tr>
@@ -1651,13 +1723,7 @@ export default function StuffDetail() {
                         </th>
                         <td>
                           <div className="input-wrap" style={{ width: '500px' }}>
-                            <input
+                            <input type="text" className="input-light" {...form.register('receiveUser')} value={form.watch('receiveUser') || ''} />
-                              type="text"
-                              className="input-light"
-                              {...form.register('receiveUser')}
-                              value={form.watch('receiveUser') || ''}
-                              ref={inputReceiveUserEl}
-                            />
                           </div>
                         </td>
                       </tr>
@@ -1686,7 +1752,7 @@ export default function StuffDetail() {
                             })}
                             {/* 상세라디오끝 */}
                             <div className="input-wrap mr5" style={{ width: '545px' }}>
-                              <input type="text" className="input-light" {...form.register('objectName')} ref={inputObjectNameEl} />
+                              <input type="text" className="input-light" {...form.register('objectName')} />
                             </div>
                             <div className="select-wrap" style={{ width: '120px' }}>
                               <Select
@@ -1732,6 +1798,39 @@ export default function StuffDetail() {
                         </th>
                         <td>
                           <div className="flx-box">
+                            {(sessionState?.storeId === 'T01' && (
+                              <>
+                                <div className="select-wrap mr5" style={{ width: '567px' }}>
+                                  <Select
+                                    id="long-value-select1"
+                                    instanceId="long-value-select1"
+                                    className="react-select-custom"
+                                    classNamePrefix="custom"
+                                    placeholder="Select"
+                                    options={showSaleStoreList}
+                                    onInputChange={onInputChange}
+                                    onChange={onSelectionChange}
+                                    getOptionLabel={(x) => x.saleStoreName}
+                                    getOptionValue={(x) => x.saleStoreId}
+                                    isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                    isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                    value={saleStoreList.filter(function (option) {
+                                      return option.saleStoreId === selOptions
+                                    })}
+                                  />
+                                </div>
+                                <div className="input-wrap" style={{ width: '216px' }}>
+                                  <input
+                                    type="text"
+                                    className="input-light"
+                                    value={form.watch('saleStoreId') || ''}
+                                    {...form.register('saleStoreId')}
+                                    readOnly
+                                  />
+                                </div>
+                              </>
+                            )) || (
+                              <>
                                 <div className="select-wrap mr5" style={{ width: '567px' }}>
                                   <Select
                                     id="long-value-select1"
@@ -1759,6 +1858,8 @@ export default function StuffDetail() {
                                     readOnly
                                   />
                                 </div>
+                              </>
+                            )}
                           </div>
                         </td>
                       </tr>
@@ -1811,7 +1912,7 @@ export default function StuffDetail() {
                         <td>
                           <div className="flx-box">
                             <div className="input-wrap mr5" style={{ width: '200px' }}>
-                              <input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} ref={inputZipNoEl} />
+                              <input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
                             </div>
                             <Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
                               {getMessage('stuff.detail.btn.addressPop')}
@@ -1848,13 +1949,7 @@ export default function StuffDetail() {
                               )}
                             </div>
                             <div className="input-wrap mr5" style={{ width: '580px' }}>
-                              <input
+                              <input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
-                                type="text"
-                                className="input-light"
-                                value={form.watch('address') || ''}
-                                {...form.register('address')}
-                                ref={inputAddressEl}
-                              />
                             </div>
                           </div>
                         </td>
@@ -1935,7 +2030,6 @@ export default function StuffDetail() {
                                 onKeyUp={handleKeyUp}
                                 value={form.watch('verticalSnowCover') || ''}
                                 {...register('verticalSnowCover')}
-                                ref={inputVerticalSnowCoverEl}
                               />
                             </div>
                             <span className="mr10">cm</span>
@@ -1987,7 +2081,6 @@ export default function StuffDetail() {
                                 onKeyUp={handleKeyUp}
                                 value={form.watch('installHeight') || ''}
                                 {...register('installHeight')}
-                                ref={inputInstallHeightEl}
                               />
                             </div>
                             <span>m</span>
@@ -2017,7 +2110,7 @@ export default function StuffDetail() {
                         <th>{getMessage('stuff.detail.remarks')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" {...form.register('remarks')} />
+                            <input type="text" className="input-light" {...form.register('remarks')} value={form.watch('remarks') || ''} />
                           </div>
                         </td>
                       </tr>

src/components/management/StuffQGrid.jsx

@@ -39,7 +39,7 @@ export default function StuffQGrid(props) {
     return {
       filter: false,
       flex: 1,
-      sortable: false,
+      sortable: true,
       suppressMovable: true,
       resizable: true,
       suppressSizeToFit: false,

src/components/management/StuffSearchCondition.jsx

@@ -4,7 +4,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-// import Select from 'react-dropdown-select'
 import Select from 'react-select'
 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
@@ -57,7 +56,9 @@ export default function StuffSearchCondition() {
   const [receiveUser, setReceiveUser] = useState('') //담당자
   const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
 
-  const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT
+  const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
+  const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
+  const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
   // 조회
   const onSubmit = () => {
     let diff = dayjs(endDate).diff(startDate, 'day')
@@ -128,13 +129,24 @@ export default function StuffSearchCondition() {
   useEffect(() => {
     if (isObjectNotEmpty(sessionState)) {
       // storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
-      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
+      let url
+      if (sessionState?.storeId === 'T01') {
+        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      } else {
+        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+      }
+      get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
           res.map((row) => {
             row.value = row.saleStoreId
             row.label = row.saleStoreName
           })
-          setSchSelSaleStoreList(res)
+          const allList = res
+          const favList = res.filter((row) => row.priority !== 'B')
+          setSchSelSaleStoreList(allList)
+          setFavoriteStoreList(favList)
+          setShowSaleStoreList(favList)
         }
       })
     }
@@ -147,6 +159,15 @@ export default function StuffSearchCondition() {
     }
   }
 
+  //자동완성 인풋
+  const onInputChange = (key) => {
+    if (key !== '') {
+      setShowSaleStoreList(schSelSaleStoreList)
+    } else {
+      setShowSaleStoreList(favoriteStoreList)
+    }
+  }
+
   //판매대리점 자동완성 변경
   const onSelectionChange = (key) => {
     if (isObjectNotEmpty(key)) {
@@ -300,11 +321,15 @@ export default function StuffSearchCondition() {
                         classNamePrefix="custom"
                         placeholder="Select"
                         ref={ref}
-                        options={schSelSaleStoreList}
+                        // options={schSelSaleStoreList}
+                        options={showSaleStoreList}
+                        onInputChange={onInputChange}
                         onChange={onSelectionChange}
                         getOptionLabel={(x) => x.saleStoreName}
                         getOptionValue={(x) => x.saleStoreId}
-                        value={schSelSaleStoreList.filter(function (option) {
+                        // value={schSelSaleStoreList.filter(function (option) {
+                        value={showSaleStoreList.filter(function (option) {
+                          // console.log('자동완성 value::::', option)
                           if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
                             return false
                           } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {

src/hooks/option/useCanvasSetting.js

@@ -0,0 +1,268 @@
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
+import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { setSurfaceShapePattern } from '@/util/canvas-util'
+import { POLYGON_TYPE } from '@/common/common'
+
+import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
+
+export function useCanvasSetting() {
+  const canvas = useRecoilValue(canvasState)
+
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  const { option3, option4 } = settingModalSecondOptions
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get, post } = useAxios(globalLocaleState)
+  const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
+
+  const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
+  const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
+
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+
+  useEffect(() => {
+    console.log('useCanvasSetting useEffect 실행1')
+    fetchSettings()
+  }, [objectNo])
+
+  useEffect(() => {
+    console.log('useCanvasSetting useEffect 실행2')
+    //fetchSettings()
+    //onClickOption()
+    //fetchSettings()
+  }, [settingModalFirstOptions, settingModalSecondOptions])
+
+  const fetchSettings = async () => {
+    try {
+      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 optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
+      // 데이터 설정
+      setSettingModalFirstOptions({
+        option1: optionData1,
+        option2: optionData2,
+        dimensionDisplay: optionData5,
+      })
+      setSettingModalSecondOptions({
+        option3: optionData3,
+        option4: optionData4,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  // 옵션 클릭 후 저장
+  const onClickOption = async (item) => {
+    //치수 표시(단 건 선택)
+    if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
+      console.log('치수 표시 ', item)
+      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+        option.selected = option.id === item.id
+        return option
+      })
+
+      //화면 표시(단 건 선택)
+    } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
+      console.log('화면 표시 ', item)
+      const options2 = settingModalFirstOptions?.option2.map((option2) => {
+        option2.selected = option2.id === item.id
+        return option2
+      })
+
+      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+      polygons.forEach((polygon) => {
+        setSurfaceShapePattern(polygon, item.column)
+      })
+
+      //흡착범위 설정(단 건 선택)
+    } else if (
+      item.column === 'adsorpRangeSmall' ||
+      item.column === 'adsorpRangeSmallSemi' ||
+      item.column === 'adsorpRangeMedium' ||
+      item.column === 'adsorpRangeLarge'
+    ) {
+      console.log('화면 표시2 ', item, option4)
+      // option4에서 한 개만 선택 가능하도록 처리
+      const updatedOption4 = option4.map((option) =>
+        option.id === item.id
+          ? { ...option, selected: true }
+          : {
+              ...option,
+              selected: false,
+            },
+      )
+
+      setSettingModalSecondOptions({ option3, option4: updatedOption4 })
+
+      //디스플레이 설정(다 건 선택)
+    } else {
+      console.log('디스플레이 설정 ', item)
+      item.selected = !item.selected
+    }
+
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+
+    try {
+      // 서버에 전송할 데이터
+      const dataToSend = {
+        firstOption1: option1.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption2: option2.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption3: dimensionDisplay.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        // secondOption1: secondOptions[0].option1.map((item) => ({
+        //   name: item.id,
+        //   name: item.name,
+        //   // 필요한 경우 데이터 항목 추가
+        // })),
+        secondOption2: option4.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+      }
+
+      const patternData = {
+        objectNo,
+        //디스플레이 설정(다중)
+        allocDisplay: dataToSend.firstOption1[0].selected,
+        outlineDisplay: dataToSend.firstOption1[1].selected,
+        gridDisplay: dataToSend.firstOption1[2].selected,
+        lineDisplay: dataToSend.firstOption1[3].selected,
+        wordDisplay: dataToSend.firstOption1[4].selected,
+        circuitNumDisplay: dataToSend.firstOption1[5].selected,
+        flowDisplay: dataToSend.firstOption1[6].selected,
+        trestleDisplay: dataToSend.firstOption1[7].selected,
+        totalDisplay: dataToSend.firstOption1[8].selected,
+        //차수 표시(단 건)
+        corridorDimension: dataToSend.firstOption3[0].selected,
+        realDimension: dataToSend.firstOption3[1].selected,
+        noneDimension: dataToSend.firstOption3[2].selected,
+        //화면 표시(단 건)
+        onlyBorder: dataToSend.firstOption2[0].selected,
+        lineHatch: dataToSend.firstOption2[1].selected,
+        allPainted: dataToSend.firstOption2[2].selected,
+        //흡착범위 설정(단 건)
+        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+      }
+
+      console.log('patternData ', patternData)
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+
+        // Canvas 디스플레이 설정 시 해당 옵션 적용
+        frontSettings()
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+
+    setAdsorptionRange(item.range)
+  }
+
+  // Canvas 디스플레이 설정 시 해당 옵션 적용
+  const frontSettings = async () => {
+    const option1 = settingModalFirstOptions.option1
+
+    // 'allocDisplay' 할당 표시
+    // 'outlineDisplay' 외벽선 표시  'outerLine', 'wallLine'
+    // 'gridDisplay' 그리드 표시     'lindGrid', 'dotGrid'
+    // 'lineDisplay' 지붕선 표시     'roof', 'roofBase'
+    // 'wordDisplay' 문자 표시
+    // 'circuitNumDisplay' 회로번호 표시
+    // 'flowDisplay' 흐름방향 표시   'arrow'
+    // 'trestleDisplay' 가대 표시
+    // 'totalDisplay' 집계표 표시
+
+    let optionName //옵션명
+    let optionSelected //옵션상태
+
+    for (let i = 0; i < option1.length; i++) {
+      switch (option1[i].column) {
+        case 'allocDisplay': //할당 표시
+          optionName = ['1']
+          break
+        case 'outlineDisplay': //외벽선 표시
+          optionName = ['outerLine', 'wallLine']
+          break
+        case 'gridDisplay': //그리드 표시
+          optionName = ['lindGrid', 'dotGrid']
+          break
+        case 'lineDisplay': //지붕선 표시
+          optionName = ['roof', 'roofBase']
+          break
+        case 'wordDisplay': //문자 표시
+          optionName = ['6']
+          break
+        case 'circuitNumDisplay': //회로번호 표시
+          optionName = ['7']
+          break
+        case 'flowDisplay': //흐름방향 표시
+          optionName = ['arrow']
+          break
+        case 'trestleDisplay': //가대 표시
+          optionName = ['8']
+          break
+        case 'totalDisplay': //집계표 표시
+          optionName = ['9']
+          break
+      }
+      // 표시 선택 상태(true/false)
+      optionSelected = option1[i].selected
+
+      canvas
+        .getObjects()
+        .filter((obj) => optionName.includes(obj.name))
+        //.filter((obj) => obj.name === optionName)
+        .forEach((obj) => {
+          obj.set({ visible: optionSelected })
+          //obj.set({ visible: !obj.visible })
+        })
+
+      // console.log(
+      //   'optionName',
+      //   optionName,
+      //   canvas.getObjects().filter((obj) => optionName.includes(obj.name)),
+      // )
+    }
+  }
+
+  return {
+    settingModalFirstOptions,
+    setSettingModalFirstOptions,
+    settingModalSecondOptions,
+    setSettingModalSecondOptions,
+    fetchSettings,
+    onClickOption,
+    frontSettings,
+    adsorptionPointMode,
+    setAdsorptionPointMode,
+  }
+}

src/hooks/option/useCanvasSettingController.js

@@ -46,6 +46,7 @@ export const useCanvasSettingController = () => {
     }
   }
 
+  //
   const onClickOption = async (option) => {
     option.selected = !option.selected
 

src/hooks/useContextMenu.js

@@ -23,6 +23,7 @@ import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/Fl
 import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { contextMenuState } from '@/store/contextMenu'
+import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
 
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@@ -36,7 +37,7 @@ export function useContextMenu() {
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const { handleZoomClear } = useCanvasEvent()
-  const currentMenuSetting = (position) => {
+  const currentMenuSetting = () => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
         setContextMenu([
@@ -104,6 +105,11 @@ export function useContextMenu() {
               id: 'wallLineRemove',
               name: getMessage('contextmenu.wallline.remove'),
             },
+            {
+              id: 'imageSizeEdit',
+              name: getMessage('modal.image.size.setting'),
+              component: <ImageSizeSetting id={popupId} />,
+            },
           ],
           [
             {
@@ -170,6 +176,11 @@ export function useContextMenu() {
               shortcut: ['c', 'C'],
               name: `${getMessage('contextmenu.copy')}(C)`,
             },
+            {
+              id: 'imageSizeEdit',
+              name: getMessage('modal.image.size.setting'),
+              component: <ImageSizeSetting id={popupId} />,
+            },
           ],
           [
             {

src/locales/ja.json

@@ -214,20 +214,20 @@
   "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": "할당표시",
+  "modal.canvas.setting.first.option.alloc": "割り当て表示",
-  "modal.canvas.setting.first.option.outline": "외벽선표시",
+  "modal.canvas.setting.first.option.outline": "外壁線表示",
-  "modal.canvas.setting.first.option.plan": "도면표시",
+  "modal.canvas.setting.first.option.grid": "グリッド表示",
-  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
+  "modal.canvas.setting.first.option.roof.line": "屋根線標示",
-  "modal.canvas.setting.first.option.grid": "그리드표시",
+  "modal.canvas.setting.first.option.word": "文字表示",
-  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.circuit.num": "回路番号表示",
-  "modal.canvas.setting.first.option.word": "문자 표시",
+  "modal.canvas.setting.first.option.flow": "流れ方向表示",
-  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.trestle": "架台表示",
-  "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.image": "画像表示",
-  "modal.canvas.setting.first.option.total": "집계표 표시",
+  "modal.canvas.setting.first.option.total": "集計表表示",
-  "modal.canvas.setting.first.option.dimension": "치수 표시(JA)",
+  "modal.canvas.setting.first.option.dimension": "寸法表示",
-  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시(JA)",
+  "modal.canvas.setting.first.option.corridor.dimension": "廊下寸法表示",
-  "modal.canvas.setting.first.option.real.dimension": "실제치수 표시(JA)",
+  "modal.canvas.setting.first.option.real.dimension": "実際の寸法表示",
-  "modal.canvas.setting.first.option.none.dimension": "치수표시없음(JA)",
+  "modal.canvas.setting.first.option.none.dimension": "寸法表示なし",
   "modal.canvas.setting.first.option.display": "画面表示",
   "modal.canvas.setting.first.option.border": "ボーダーのみ",
   "modal.canvas.setting.first.option.line": "ラインハッチ",
@@ -274,6 +274,7 @@
   "modal.panel.batch.statistic.total": "合計",
   "modal.flow.direction.setting": "流れ方向の設定",
   "modal.flow.direction.setting.info": "流れ方向を選択してください。",
+  "modal.image.size.setting": "画像のサイズ変更",
   "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
   "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
   "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",

src/locales/ko.json

@@ -221,13 +221,13 @@
   "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
   "modal.canvas.setting.first.option.alloc": "할당표시",
   "modal.canvas.setting.first.option.outline": "외벽선표시",
-  "modal.canvas.setting.first.option.plan": "도면표시",
-  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
   "modal.canvas.setting.first.option.grid": "그리드표시",
-  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
   "modal.canvas.setting.first.option.word": "문자 표시",
-  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
   "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.image": "이미지 표시",
   "modal.canvas.setting.first.option.total": "집계표 표시",
   "modal.canvas.setting.first.option.dimension": "치수 표시",
   "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
@@ -279,6 +279,7 @@
   "modal.panel.batch.statistic.total": "합계",
   "modal.flow.direction.setting": "흐름 방향 설정",
   "modal.flow.direction.setting.info": "흐름방향을 선택하세요.",
+  "modal.image.size.setting": "이미지 크기 조절",
   "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
   "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
   "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",

src/store/settingAtom.js

@@ -12,10 +12,16 @@ export const settingModalFirstOptionsState = atom({
       { id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
       { id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
       { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
+      { id: 10, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
       { id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
     ],
     dimensionDisplay: [
-      { id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: true },
+      {
+        id: 1,
+        column: 'corridorDimension',
+        name: 'modal.canvas.setting.first.option.corridor.dimension',
+        selected: true,
+      },
       { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
       { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
     ],
@@ -38,10 +44,34 @@ export const settingModalSecondOptionsState = atom({
       { id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' },
     ],
     option4: [
-      { id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true, range: 10 },
+      {
-      { id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false, range: 30 },
+        id: 1,
-      { id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false, range: 50 },
+        column: 'adsorpRangeSmall',
-      { id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false, range: 70 },
+        name: 'modal.canvas.setting.font.plan.absorption.small',
+        selected: true,
+        range: 10,
+      },
+      {
+        id: 2,
+        column: 'adsorpRangeSmallSemi',
+        name: 'modal.canvas.setting.font.plan.absorption.small.semi',
+        selected: false,
+        range: 30,
+      },
+      {
+        id: 3,
+        column: 'adsorpRangeMedium',
+        name: 'modal.canvas.setting.font.plan.absorption.medium',
+        selected: false,
+        range: 50,
+      },
+      {
+        id: 4,
+        column: 'adsorpRangeLarge',
+        name: 'modal.canvas.setting.font.plan.absorption.large',
+        selected: false,
+        range: 70,
+      },
     ],
   },
   dangerouslyAllowMutability: true,

src/styles/_contents.scss

@@ -329,7 +329,7 @@
         border-top: 1px solid #000;
         width: 100%;
         transition: all .17s ease-in-out;
-        z-index: 999;
+        z-index: 99;
         &.active{
             top: calc(92.8px + 50px);
         }

src/styles/_modal.scss

@@ -1789,3 +1789,21 @@ $alert-color: #101010;
         }
     }
 }
+
+//이미지 크기 설정
+.range-wrap{
+    display: flex;
+    align-items: center;
+    input{
+        flex: 1;
+        margin-right: 10px;
+    }
+    label{
+        flex: none;
+        text-align: right;
+        width: 35px;
+        font-size: 13px;
+        color: #fff;
+        font-weight: 500;
+    }
+}

src/styles/_reset.scss

@@ -130,6 +130,10 @@ button{
     font-family: 'Pretendard', sans-serif !important;
 }
 
+.no-click{
+    cursor: no-drop !important;
+}
+
 // margin
 .mt5{margin-top: 5px !important;}
 .mt10{margin-top: 10px !important;}