From b48e43dd9ff3a19153c5fcf341ef7fd5c5f73a72 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 28 Oct 2024 18:15:01 +0900
Subject: [PATCH] =?UTF-8?q?-=20canvas=20setting=EC=97=90=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=ED=91=9C=EC=8B=9C=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?-=20context=20menu=EC=97=90=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=88=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useContextMenu.js | 13 +++++++++++-
 src/store/settingAtom.js    | 40 ++++++++++++++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index c5134e25..293a0ceb 100644
--- a/src/hooks/useContextMenu.js
+++ b/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} />,
+            },
           ],
           [
             {
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index 2432d884..4cab929c 100644
--- a/src/store/settingAtom.js
+++ b/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: 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 },
+      {
+        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: 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,