refac: isEditMode를 state 관리자로 이동

hwe/ts/PartialReservedCommand.vue

@@ -398,15 +398,14 @@ setTimeout(() => {
   updateNow();
 }, 1000 - serverNow.value.getMilliseconds());
 
-
-const editModeKey = `sammo_edit_mode_key`;
-
 const queryActionHelper = new QueryActionHelper(staticValues.maxTurn);
+const storedActionsHelper = new StoredActionsHelper(staticValues.serverNick, 'general', staticValues.mapName, staticValues.unitSet);
+
 const reservedCommandList = queryActionHelper.reservedCommandList;
 const prevSelectedTurnList = queryActionHelper.prevSelectedTurnList;
 const selectedTurnList = queryActionHelper.selectedTurnList;
 
-const isEditMode = ref(localStorage.getItem(editModeKey) === '1');
+const isEditMode = storedActionsHelper.isEditMode;
 
 const flippedMaxTurn = 14;
 
@@ -656,7 +655,6 @@ function toggleQuickReserveForm(turnIdx: number) {
 
 
 watch(isEditMode, newEditMode => {
-  localStorage.setItem(editModeKey, newEditMode ? '1' : '0');
   if (newEditMode) {
     commandQuickReserveForm.value?.close();
     currentQuickReserveTarget.value = -1;
@@ -668,7 +666,6 @@ watch(isEditMode, newEditMode => {
 
 const emptyTurnObj: TurnObj = { action: '휴식', brief: '휴식', arg: {} };
 
-const storedActionsHelper = new StoredActionsHelper(staticValues.serverNick, 'general', staticValues.mapName, staticValues.unitSet);
 
 const recentActions = storedActionsHelper.recentActions;
 const storedActions = storedActionsHelper.storedActions;

hwe/ts/components/ChiefReservedCommand.vue

@@ -172,7 +172,7 @@ queryActionHelper.selectTurn(...$event);
               >{{ turnObj.time }}</div>
             </DragSelect>
             <DragSelect
-              :style="{ ...rowGridStyle, display: isEditMode ? 'block' : 'none' }"
+              :style="{ ...rowGridStyle, display: isEditMode ? 'grid' : 'none' }"
               attribute="turnIdx"
               :disabled="!isEditMode"
               @dragStart="isDragToggle = true"
@@ -309,8 +309,6 @@ import { BButton, BDropdownItem, BDropdownText, BButtonGroup, BDropdownDivider,
 import addMilliseconds from "date-fns/addMilliseconds";
 import CommandSelectForm from "@/components/CommandSelectForm.vue";
 
-const editModeKey = `sammo_edit_mode_key`;
-const isEditMode = ref(localStorage.getItem(editModeKey) === '1');
 
 type TurnObjWithTime = TurnObj & {
   time: string;
@@ -877,9 +875,8 @@ function toggleQuickReserveForm(turnIdx: number) {
   commandQuickReserveForm.value?.show();
 }
 
-
+const isEditMode = storedActionsHelper.isEditMode;
 watch(isEditMode, newEditMode => {
-  localStorage.setItem(editModeKey, newEditMode ? '1' : '0');
   if (newEditMode) {
     commandQuickReserveForm.value?.close();
     currentQuickReserveTarget.value = -1;

hwe/ts/util/StoredActionsHelper.ts

@@ -7,38 +7,46 @@ export class StoredActionsHelper {
     public readonly storedActions = ref(new Map<string, [number[], TurnObj][]>());
     public readonly clipboard = ref<[number[], TurnObj][] | undefined>(undefined);
     public readonly activatedCategory = ref<string>("");
+    public readonly isEditMode = ref(false);
 
     public readonly recentActionsKey: string;
     public readonly storedActionsKey: string;
     public readonly clipboardKey: string;
     public readonly activatedCategoryKey: string;
+    public readonly editModeKey: string;
 
     constructor(protected serverNick: string, protected type: 'general' | 'nation', protected mapName: string, protected unitSet: string, protected maxRecent = 10) {
-        this.recentActionsKey = `${serverNick}_${mapName}_${unitSet}_${type}RecentActions`;
+        const typeKey = `${serverNick}_${mapName}_${unitSet}_${type}`;
-        this.storedActionsKey = `${serverNick}_${mapName}_${unitSet}_${type}StoredActions`;
+        this.recentActionsKey = `${typeKey}RecentActions`;
-        this.clipboardKey = `${serverNick}_${mapName}_${unitSet}_${type}Clipboard`;
+        this.storedActionsKey = `${typeKey}StoredActions`;
-        this.activatedCategoryKey = `${serverNick}_${mapName}_${unitSet}_${type}ActivatedCategory`;
+        this.clipboardKey = `${typeKey}Clipboard`;
+        this.activatedCategoryKey = `${typeKey}ActivatedCategory`;
+        this.editModeKey = `${serverNick}_${type}_isEditMode`;
+
         this.loadRecentActions();
         this.loadStoredActions();
 
         const rawClipboard = localStorage.getItem(this.clipboardKey);
-        if(rawClipboard !== null){
+        if (rawClipboard !== null) {
             this.clipboard.value = JSON.parse(rawClipboard);
         }
-
+        watch(this.clipboard, (newValue) => {
-        const rawActivatedCategory = localStorage.getItem(this.activatedCategoryKey);
-        if(rawActivatedCategory !== null){
-            this.activatedCategory.value = JSON.parse(rawActivatedCategory);
-        }
-
-        watch(this.clipboard, (newValue)=>{
             console.log(newValue);
             localStorage.setItem(this.clipboardKey, JSON.stringify(newValue));
         });
 
-        watch(this.activatedCategory, (newValue)=>{
+        const rawActivatedCategory = localStorage.getItem(this.activatedCategoryKey);
+        if (rawActivatedCategory !== null) {
+            this.activatedCategory.value = JSON.parse(rawActivatedCategory);
+        }
+        watch(this.activatedCategory, (newValue) => {
             localStorage.setItem(this.activatedCategoryKey, JSON.stringify(newValue));
         });
+
+        this.isEditMode.value = localStorage.getItem(this.editModeKey) === '1';
+        watch(this.isEditMode, (newValue) => {
+            localStorage.setItem(this.editModeKey, newValue ? '1' : '0')
+        })
     }
 
     loadRecentActions() {