feat: 턴 선택기에서 클립보드, 선택 카테고리를 상태 관리

hwe/ts/PartialReservedCommand.vue

@@ -281,6 +281,7 @@ queryActionHelper.selectTurn(...$event);
     anchor=".commandSelectFormAnchor"
     ref="commandSelectForm"
     @on-close="chooseCommand($event)"
+    v-model:activatedCategory="activatedCategory"
   />
   <CommandSelectForm
     :commandList="commandList"
@@ -288,6 +289,7 @@ queryActionHelper.selectTurn(...$event);
     ref="commandQuickReserveForm"
     @on-close="chooseQuickReserveCommand($event)"
     :hideClose="false"
+    v-model:activatedCategory="activatedCategory"
   />
 </template>
 
@@ -673,6 +675,7 @@ const storedActionsHelper = new StoredActionsHelper(staticValues.serverNick, 'ge
 
 const recentActions = storedActionsHelper.recentActions;
 const storedActions = storedActionsHelper.storedActions;
+const activatedCategory = storedActionsHelper.activatedCategory;
 
 async function eraseSelectedTurnList(releaseSelect = true): Promise<boolean> {
   const result = await reserveCommandDirect([[
@@ -685,10 +688,7 @@ async function eraseSelectedTurnList(releaseSelect = true): Promise<boolean> {
   return result;
 }
 
-
+const clipboard = storedActionsHelper.clipboard;
-
-
-const clipboard = ref<[number[], TurnObj][] | undefined>(undefined);
 
 async function clipboardCut(releaseSelect = true) {
   clipboardCopy(false);

hwe/ts/components/CommandSelectForm.vue

@@ -69,9 +69,6 @@ import type { CommandItem } from "@/defs";
 import { BButton } from "bootstrap-vue-3";
 import { ref, defineProps, defineEmits, defineExpose, type PropType, watch, onMounted } from "vue";
 
-const chosenCategory = ref<string>("-");
-const chosenSubList = ref<CommandItem[]>([]);
-
 interface CategoryDecoration {
     name: string,
     altName?: string,
@@ -101,9 +98,23 @@ const props = defineProps({
         type: Boolean,
         required: false,
         default: true,
+    },
+    activatedCategory: {
+        type: String,
+        required: false,
+        default: "",
     }
 })
 
+const chosenCategory = ref<string>('-');
+const chosenSubList = ref<CommandItem[]>([]);
+
+const categories = new Set(props.commandList.map(({category})=>category));
+
+watch(()=>props.activatedCategory, (newValue)=>{
+    chosenCategory.value = newValue;
+})
+
 const showForm = ref(false);
 
 function convCategoryDeco(category: string): CategoryDecoration {
@@ -140,17 +151,25 @@ watch(() => props.commandList, updateCommandList);
 updateCommandList(props.commandList);
 
 watch(chosenCategory, (category) => {
-    console.log('sel', category);
     const itemInfo = commandList.value?.get(category);
     if (itemInfo === undefined) {
         console.error(`category 없음: ${category}`);
         return;
     }
     chosenSubList.value = itemInfo.values;
+    if(props.activatedCategory !== category){
+        emits('update:activatedCategory', category);
+    }
 });
 
 onMounted(() => {
-    chosenCategory.value = props.commandList[0].category;
+    if(!categories.has(props.activatedCategory)){
+        chosenCategory.value = props.commandList[0].category;
+    }
+    else{
+        chosenCategory.value = props.activatedCategory;
+    }
+
 });
 
 function show(): void {
@@ -171,6 +190,7 @@ function close(category?: string): void {
 
 const emits = defineEmits<{
     (event: 'onClose', command?: string): void,
+    (event: 'update:activatedCategory', category: string): void,
 }>();
 
 defineExpose({

hwe/ts/util/StoredActionsHelper.ts

@@ -1,18 +1,44 @@
 import type { TurnObj } from '@/defs';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 
 export class StoredActionsHelper {
     public readonly recentActions = ref<TurnObj[]>([]);
     public readonly storedActions = ref(new Map<string, [number[], TurnObj][]>());
+    public readonly clipboard = ref<[number[], TurnObj][] | undefined>(undefined);
+    public readonly activatedCategory = ref<string>("");
+
     public readonly recentActionsKey: string;
     public readonly storedActionsKey: string;
+    public readonly clipboardKey: string;
+    public readonly activatedCategoryKey: 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`;
         this.storedActionsKey = `${serverNick}_${mapName}_${unitSet}_${type}StoredActions`;
+        this.clipboardKey = `${serverNick}_${mapName}_${unitSet}_${type}Clipboard`;
+        this.activatedCategoryKey = `${serverNick}_${mapName}_${unitSet}_${type}ActivatedCategory`;
         this.loadRecentActions();
         this.loadStoredActions();
+
+        const rawClipboard = localStorage.getItem(this.clipboardKey);
+        if(rawClipboard !== null){
+            this.clipboard.value = JSON.parse(rawClipboard);
+        }
+
+        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)=>{
+            localStorage.setItem(this.activatedCategoryKey, JSON.stringify(newValue));
+        });
     }
 
     loadRecentActions() {