- canvas setting에 이미지 표시 추가

- context menu에 이미지 크기 조절 기능 추가

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