feat: 내 정보/설정 페이지 반응형, 500px/1000px 설정

hwe/ts/myPage.ts

@@ -1,11 +1,13 @@
+import "@scss/myPage.scss";
+
 import axios from 'axios';
 import $ from 'jquery';
-import { InvalidResponse, keyScreenMode } from '@/defs';
+import { InvalidResponse, keyScreenMode, ScreenModeType } from '@/defs';
 import { convertFormData } from '@util/convertFormData';
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { unwrap } from '@util/unwrap';
 import { unwrap_any } from '@util/unwrap_any';
-
+import { auto500px } from './util/auto500px';
 
 
 type LogResponse = {
@@ -109,7 +111,9 @@ $(function ($) {
     const $screenModeRadios = $('input:radio[name=screenMode]');
     $screenModeRadios.prop('checked', false).filter(`[value="${localStorage.getItem(keyScreenMode)??'auto'}"]`).prop('checked', true);
     $screenModeRadios.on('click', function(e){
-        localStorage.setItem(keyScreenMode, (e.target as HTMLInputElement).value);
+        const mode = (e.target as HTMLInputElement).value as ScreenModeType;
+        localStorage.setItem(keyScreenMode, mode);
+        document.dispatchEvent(new CustomEvent('tryChangeScreenMode'));
     });
 
 
@@ -209,4 +213,6 @@ $(function ($) {
         location.reload();
 
     });
-});
+});
+
+auto500px();

hwe/ts/util/auto500px.ts

@@ -5,6 +5,7 @@ import { keyScreenMode, ScreenModeType } from "@/defs";
 export function auto500px(targetHeight = 700): void {
     let deviceWidth = -1;
     let viewportMeta!: HTMLMetaElement;
+    let oldMode: ScreenModeType = 'auto';
 
 
     function init() {
@@ -23,24 +24,32 @@ export function auto500px(targetHeight = 700): void {
     }
 
     function adjustViewportWidth() {
+        const screenMode = (localStorage.getItem(keyScreenMode) as ScreenModeType)??'auto';
+        if(screenMode != oldMode){
+            oldMode = screenMode;
+            if(screenMode == '500px'){
+                viewportMeta.content = 'width=500';
+                return;
+            }
+
+            if(screenMode == '1000px'){
+                viewportMeta.content = 'width=1000';
+                return;
+            }
+
+            if(screenMode == 'auto'){
+                deviceWidth = -1;
+            }
+        }
+
         if (deviceWidth == window.screen.availWidth) {
             return;
         }
+
         deviceWidth = window.screen.availWidth;
         const innerHeight = window.innerHeight;
         const selectorHeight = targetHeight;
 
-        const screenMode = (localStorage.getItem(keyScreenMode) as ScreenModeType)??'auto';
-        if(screenMode == '500px'){
-            viewportMeta.content = 'width=500';
-            return;
-        }
-
-        if(screenMode == '1000px'){
-            viewportMeta.content = 'width=1000';
-            return;
-        }
-
         if (deviceWidth < 500) {
             viewportMeta.content = 'width=500';
             return;
@@ -69,5 +78,8 @@ export function auto500px(targetHeight = 700): void {
         adjustViewportWidth();
         window.addEventListener('scroll', adjustViewportWidth, true);
         window.addEventListener('orientationchange', adjustViewportWidth, true);
+        document.addEventListener('tryChangeScreenMode', adjustViewportWidth, false);
+
+
     });
 }