feat: is1000pxMode에 widthMode 통합

hwe/ts/PageFront.vue

@@ -523,6 +523,8 @@ watch(refreshCounter, async () => {
 }
 
 .nationNoticeBody {
+  word-break: break-all;
+
   :deep(p) {
     min-height: 1em;
   }

hwe/ts/components/MapViewer.vue

@@ -180,7 +180,7 @@ import MapCityDetail from "./MapCityDetail.vue";
 import { convertDictById } from "@/common_legacy";
 import { useElementSize, useMouse, useMouseInElement } from "@vueuse/core";
 import { hideMapCityName, toggleSingleTap } from "@/state/mapViewer";
-import { is1000pxMode } from "@/state/is1000pxMode";
+import { isFullWidth } from "@/state/is1000pxMode";
 const uuid = uuidv4();
 const gameConstStore = unwrap_err(
   inject<Ref<GameConstStore>>("gameConstStore"),
@@ -210,19 +210,6 @@ const emit = defineEmits<{
   (event: "update:modelValue", value: MapCityParsed): void;
 }>();
 
-const isFullWidth = ref(true);
-
-function setWidthMode([widthMode, is1000pxMode]: ["auto" | "full" | "small" | undefined, boolean]): void {
-  if (widthMode == "full") {
-    isFullWidth.value = true;
-  }
-  if (widthMode == "small") {
-    isFullWidth.value = false;
-  }
-  isFullWidth.value = is1000pxMode;
-}
-watch([() => props.width, is1000pxMode], setWidthMode, { immediate: true });
-
 const props = defineProps({
   width: {
     type: String as PropType<"full" | "small" | "auto" | undefined>,

hwe/ts/state/is1000pxMode.ts

@@ -1,3 +1,19 @@
-import { useMediaQuery } from "@vueuse/core";
+import { useLocalStorage, useMediaQuery } from "@vueuse/core";
+import { keyScreenMode, type ScreenModeType } from "@/defs";
+import { ref, watch } from "vue";
 
-export const is1000pxMode = useMediaQuery('(min-width:900px');
+export const is1000pxMode = useMediaQuery('(min-width:900px');
+export const isFullWidth = ref(true);
+export const widthMode = useLocalStorage<ScreenModeType>(keyScreenMode, "auto")
+
+function setWidthMode([widthMode, is1000pxMode]: [ScreenModeType, boolean]): void {
+  if (widthMode == "1000px") {
+    isFullWidth.value = true;
+  }
+  if (widthMode == "500px") {
+    isFullWidth.value = false;
+  }
+  isFullWidth.value = is1000pxMode;
+}
+watch([widthMode, is1000pxMode], setWidthMode);
+setWidthMode([widthMode.value, is1000pxMode.value]);