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

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>