파일 이식(0.31.1)

hwe/ts/components/SimpleClock.vue

@@ -0,0 +1,46 @@
+<template>
+  <span class="time-zone">{{ serverNow }}</span>
+</template>
+
+<script lang="ts" setup>
+import { addMilliseconds } from "date-fns";
+import { 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>