feat(wip): 세력장수에서 마지막으로 선택한 항목 기억

hwe/ts/PageNationGeneral.vue

@@ -8,6 +8,7 @@
       :troops="troopList"
       :env="envVal"
       :toolbarID="toolbarID"
+      role="pageNationGeneral"
       :height="'fill'"
     />
     <!--<BottomBar />-->

hwe/ts/components/GeneralList.vue

@@ -2,18 +2,22 @@
   <Teleport v-if="toolbarID" :to="`#${toolbarID}`">
     <BButtonGroup class="d-flex general-list-toolbar">
       <BDropdown class="w-50" menuClass="view-mode-list" variant="primary" text="보기 모드">
-        <BDropdownItem @click="setDisplaySetting(defaultDisplaySetting.normal)">기본</BDropdownItem>
+        <BDropdownItem @click="setDisplaySetting([true, 'normal'], defaultDisplaySetting.normal)">기본</BDropdownItem>
-        <BDropdownItem @click="setDisplaySetting(defaultDisplaySetting.war)">전투</BDropdownItem>
+        <BDropdownItem @click="setDisplaySetting([true, 'war'], defaultDisplaySetting.war)">전투</BDropdownItem>
         <BDropdownDivider />
         <BDropdownItem @click="storeDisplaySetting"><i class="bi bi-bookmark-plus-fill" />&nbsp;보관하기</BDropdownItem>
         <BDropdownDivider />
         <BDropdownItem
           v-for="[key, setting] of displaySettings.entries()"
           :key="key"
-          @click="setDisplaySetting(setting)"
+          @click="setDisplaySetting([false, key], setting)"
           ><div class="row gx-0">
-            <div class="col-9 text-wrap"><span class="align-middle">{{ key }}</span></div>
+            <div class="col-9 text-wrap">
-            <div class="col-3"><div class="d-grid"><BButton size="sm" @click="deleteDisplaySetting(key)">삭제</BButton></div></div>
+              <span class="align-middle">{{ key }}</span>
+            </div>
+            <div class="col-3">
+              <div class="d-grid"><BButton size="sm" @click="deleteDisplaySetting(key)">삭제</BButton></div>
+            </div>
           </div></BDropdownItem
         >
       </BDropdown>
@@ -118,6 +122,11 @@ const props = defineProps({
     required: false,
     default: undefined,
   },
+  role: {
+    type: String,
+    required: false,
+    default: "generic",
+  },
 });
 
 const suppressColumnMoveAnimation = ref(true);
@@ -159,19 +168,25 @@ function getRowId(params: GetRowIdParams): string {
   return `${genID}`;
 }
 
-function setDisplaySetting(setting: GridDisplaySetting) {
+function setDisplaySetting(settingKey: SettingKeyType, setting: GridDisplaySetting) {
   if (!columnApi.value) {
     console.error("nyc?");
     return;
   }
   columnApi.value.applyColumnState({ state: setting.column, applyOrder: true });
   columnApi.value.setColumnGroupState(setting.columnGroup);
+  currentSetting.value = settingKey;
 }
 
 const displaySettings = ref(new Map<string, GridDisplaySetting>());
 const displaySettingVersion = 1; //추가되는 걸로 버전 올리지 말고, 사용할 수 없게 될때만 올리기
 const displaySettingsKey = "GeneralListDisplaySetting";
 
+function getLastUsedSettingsKey() {
+  const lastUsedSettingsKey = "LastUsedSettingsKey";
+  return `${lastUsedSettingsKey}_${props.role}`;
+}
+
 function loadDisplaySetting() {
   const rawSettings = localStorage.getItem(displaySettingsKey);
   if (!rawSettings) {
@@ -187,6 +202,34 @@ function loadDisplaySetting() {
 }
 loadDisplaySetting();
 
+type SettingKeyType = [true, keyof typeof defaultDisplaySetting] | [false, string];
+const currentSetting = ref<SettingKeyType>([true, "normal"]);
+function loadLastUsedSettings() {
+  const rawLastSettingKey = localStorage.getItem(getLastUsedSettingsKey());
+  if (!rawLastSettingKey) {
+    return;
+  }
+  const settingKey: SettingKeyType = JSON.parse(rawLastSettingKey);
+  const [isDefault, settingKeyName] = settingKey;
+  if (isDefault) {
+    if (!(settingKeyName in defaultDisplaySetting)) {
+      console.error(`${settingKeyName}은 이제 기본 지원 타입이 아닙니다.`);
+      return;
+    }
+  } else {
+    if (!displaySettings.value.has(settingKeyName)) {
+      console.error(`${settingKeyName}는 저장되어있지 않습니다.`);
+      return;
+    }
+  }
+
+  currentSetting.value = settingKey;
+  return settingKey;
+}
+watch(currentSetting, (newTypeKey) => {
+  localStorage.setItem(getLastUsedSettingsKey(), JSON.stringify(newTypeKey));
+});
+
 watch(
   displaySettings,
   (newSettings) => {
@@ -203,7 +246,7 @@ watch(
   { deep: true }
 );
 
-function deleteDisplaySetting(key: string){
+function deleteDisplaySetting(key: string) {
   if (!confirm(`${key} 설정을 지울까요?`)) {
     return;
   }
@@ -216,7 +259,7 @@ function storeDisplaySetting() {
     return;
   }
 
-  const nickName = prompt("선택한 설정의 별명을 지어주세요");
+  const nickName = prompt("선택한 설정의 별명을 지어주세요", currentSetting.value[0]?'':currentSetting.value[1]);
   if (!nickName) {
     return;
   }
@@ -233,6 +276,7 @@ function storeDisplaySetting() {
   };
 
   displaySettings.value.set(nickName, setting);
+  currentSetting.value = [false, nickName];
 }
 
 function onGridReady(params: GridReadyEvent) {
@@ -243,7 +287,14 @@ function onGridReady(params: GridReadyEvent) {
   } else {
     params.api.setDomLayout("normal");
   }
-  setDisplaySetting(defaultDisplaySetting.normal);
+  loadLastUsedSettings();
+  if(currentSetting.value[0]){
+    setDisplaySetting(currentSetting.value, defaultDisplaySetting[currentSetting.value[1]]);
+  }
+  else{
+    setDisplaySetting(currentSetting.value, unwrap(displaySettings.value.get(currentSetting.value[1])));
+  }
+
   setTimeout(() => {
     suppressColumnMoveAnimation.value = false;
   }, 1);
@@ -979,8 +1030,8 @@ watch(columnRawDefs, (val) => {
   z-index: 5;
 }
 
-:deep(.view-mode-list){
+:deep(.view-mode-list) {
-  width:180px;
+  width: 180px;
 }
 </style>
 <style lang="scss">