refac: 시계부분을 분리하여 vue render 최적화

hwe/ts/PageChiefCenter.vue

@@ -51,7 +51,6 @@
             :date="date"
             @raiseReload="reloadTable()"
             :officer="officer"
-            :timeDiff="timeDiff"
           />
         </div>
         <div
@@ -117,7 +116,6 @@ import BottomBar from "@/components/BottomBar.vue";
 import VueTypes from "vue-types";
 import { isString } from "lodash";
 import { entriesWithType } from "./util/entriesWithType";
-import { parseTime } from "./util/parseTime";
 import TopItem from "@/ChiefCenter/TopItem.vue";
 import BottomItem from "@/ChiefCenter/BottomItem.vue";
 import type { ChiefResponse, OptionalFull } from "./defs";
@@ -167,10 +165,8 @@ watch(viewTarget, (val) => {
     targetIsMe.value = false;
   }
   targetIsMe.value = val === tableObj.officerLevel;
-  console.log("result", targetIsMe.value);
 });
 
-const timeDiff = ref(0);
 async function reloadTable(): Promise<void> {
   try {
     const response =
@@ -194,10 +190,6 @@ async function reloadTable(): Promise<void> {
       tableObj[key as unknown as "year"] = value as unknown as undefined;
     }
 
-    const serverNowObj = parseTime(response.date);
-    const clientNowObj = new Date();
-    timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
-
     if (viewTarget.value === undefined) {
       if (!tableObj.officerLevel) {
         viewTarget.value = 12;

hwe/ts/PartialReservedCommand.vue

@@ -18,7 +18,7 @@
           justify-content: center;
           align-items: center;
         "
-      >{{ formatTime(serverNow, "HH:mm:ss") }}</div>
+      ><SimpleClock :serverTime="serverNow" /></div>
       <div class="col d-grid">
         <BDropdown right text="반복">
           <BDropdownItem
@@ -306,7 +306,6 @@ declare const staticValues: {
 </script>
 
 <script lang="ts" setup>
-import addMilliseconds from "date-fns/esm/addMilliseconds";
 import addMinutes from "date-fns/esm/addMinutes";
 import { range, trim } from "lodash";
 import { stringifyUrl } from "query-string";
@@ -325,6 +324,7 @@ import { StoredActionsHelper } from "./util/StoredActionsHelper";
 import type { TurnObj } from '@/defs';
 import type { Args } from "./processing/args";
 import { QueryActionHelper } from "./util/QueryActionHelper";
+import SimpleClock from "./components/SimpleClock.vue";
 
 
 
@@ -348,9 +348,6 @@ const {
 
 
 const listReqArgCommand = new Set<string>();
-const serverNow = ref(parseTime(staticValues.serverNow));
-const clientNow = ref(new Date());
-const timeDiff = ref(serverNow.value.getTime() - clientNow.value.getTime());
 const selectedCommand = ref(staticValues.commandList[0].values[0]);
 const commandSelectForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);
 
@@ -393,11 +390,6 @@ function isDropdownChildren(e?: Event): boolean {
   return false;
 }
 
-
-setTimeout(() => {
-  updateNow();
-}, 1000 - serverNow.value.getMilliseconds());
-
 const queryActionHelper = new QueryActionHelper(staticValues.maxTurn);
 const storedActionsHelper = new StoredActionsHelper(staticValues.serverNick, 'general', staticValues.mapName, staticValues.unitSet);
 
@@ -431,16 +423,6 @@ for (const category of commandList) {
   }
 }
 
-
-function updateNow() {
-  serverNow.value = addMilliseconds(new Date(), timeDiff.value);
-  setTimeout(() => {
-    updateNow();
-  }, 1000 - serverNow.value.getMilliseconds());
-}
-
-
-
 function toggleViewMaxTurn() {
   if (viewMaxTurn.value == flippedMaxTurn) {
     viewMaxTurn.value = maxTurn;
@@ -471,6 +453,7 @@ async function pushGeneralCommand(amount: number) {
   await reloadCommandList();
 }
 
+const serverNow = ref(new Date());
 
 function pushGeneralCommandSingle(e: Event) {
   //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
@@ -551,9 +534,9 @@ async function reloadCommandList() {
     nextTurnTime = addMinutes(nextTurnTime, result.turnTerm);
   }
 
+
+
   serverNow.value = parseTime(result.date);
-  clientNow.value = new Date();
-  timeDiff.value = serverNow.value.getTime() - clientNow.value.getTime();
 }
 
 async function reserveCommandDirect(args: [number[], TurnObj][], reload = true): Promise<boolean> {

hwe/ts/components/ChiefReservedCommand.vue

@@ -28,7 +28,7 @@
         </div>
         <div class="row gx-1 gy-1 py-1">
           <div class="col-md-4 mx-0 mb-0 mt-1 d-grid">
-            <div class="alert alert-primary mb-0 center" style="padding: 0.5rem 0">{{ serverNow }}</div>
+            <div class="alert alert-primary mb-0 center" style="padding: 0.5rem 0"><SimpleClock :serverTime="parseTime(props.date)" /></div>
           </div>
 
           <div class="col-md-4 d-grid">
@@ -306,9 +306,8 @@ import type { Args } from "@/processing/args";
 import type { StoredActionsHelper } from "@/util/StoredActionsHelper";
 import { getNpcColor } from "@/common_legacy";
 import { BButton, BDropdownItem, BDropdownText, BButtonGroup, BDropdownDivider, BDropdown } from "bootstrap-vue-3";
-import addMilliseconds from "date-fns/addMilliseconds";
 import CommandSelectForm from "@/components/CommandSelectForm.vue";
-
+import SimpleClock from "@/components/SimpleClock.vue";
 
 type TurnObjWithTime = TurnObj & {
   time: string;
@@ -328,7 +327,6 @@ const props = defineProps({
   turnTime: VueTypes.string.isRequired,
   targetIsMe: VueTypes.bool.isRequired,
 
-  timeDiff: VueTypes.number.isRequired,
 
   selectedTurn: {
     type: Object as PropType<Set<number>>,
@@ -897,22 +895,6 @@ function toggleForm($event: Event): void {
   form.toggle();
 }
 
-
-const serverNow = ref(formatTime(new Date(), "HH:mm:ss"));
-
-function updateNow() {
-  const serverNowObj = addMilliseconds(new Date(), props.timeDiff);
-  serverNow.value = formatTime(serverNowObj, "HH:mm:ss");
-  setTimeout(() => {
-    updateNow();
-  }, 1000 - serverNowObj.getMilliseconds());
-}
-
-setTimeout(() => {
-  updateNow();
-}, 500);
-
-
 onMounted(() => {
   updateCommandList();
 })

hwe/ts/components/SimpleClock.vue

@@ -0,0 +1,43 @@
+<template>
+    <span class="time-zone">{{serverNow}}</span>
+</template>
+
+<script lang="ts" setup>
+import { addMilliseconds } from 'date-fns';
+import { defineProps, type PropType, ref, onMounted, watch } from 'vue';
+import { formatTime } from '@/util/formatTime';
+const props = defineProps({
+    serverTime: {
+        type: Object as PropType<Date>,
+        required: false,
+        default: new Date(),
+    },
+    timeFormat: {
+        type: String,
+        required: false,
+        default: 'HH:mm:ss'
+    }
+})
+
+const timeDiff = ref(0);
+const serverNow = ref('');
+
+watch(()=>props.serverTime, (newValue)=>{
+    const clientNow = new Date();
+    timeDiff.value = newValue.getTime() - clientNow.getTime();
+});
+
+function updateNow() {
+  const serverNowObj = addMilliseconds(new Date(), timeDiff.value);
+  serverNow.value = formatTime(serverNowObj, props.timeFormat);
+  setTimeout(() => {
+    updateNow();
+  }, 1000 - serverNowObj.getMilliseconds());
+}
+
+onMounted(() => {
+    const clientNow = new Date();
+    timeDiff.value = props.serverTime.getTime() - clientNow.getTime();
+    updateNow();
+});
+</script>