From a7dde0fd65164c8e30bb4a67712aa5a51f1a2d24 Mon Sep 17 00:00:00 2001 From: jhkim Date: Sun, 31 Dec 2023 21:16:11 +0900 Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=EB=82=A0=EC=A7=9C=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClockTest.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ClockTest.jsx b/src/components/ClockTest.jsx index 1fe4770..9df4f94 100644 --- a/src/components/ClockTest.jsx +++ b/src/components/ClockTest.jsx @@ -35,7 +35,8 @@ function ClockTest({ setViewMessageModal }) { const calculateTimeDifference = () => { const now = currentTime; - const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); + // const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); + const newYear = moment('2023-12-31 21:16:20').tz('Asia/Seoul'); const diff = newYear - now; // D-DAY 시간 From 55d04306e7fcfb9e62158310764f12ebe5f17f80 Mon Sep 17 00:00:00 2001 From: jhkim Date: Sun, 31 Dec 2023 21:16:37 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix:=20=EC=BB=A8=ED=8E=98=ED=8B=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClockTest.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ClockTest.jsx b/src/components/ClockTest.jsx index 9df4f94..ee49341 100644 --- a/src/components/ClockTest.jsx +++ b/src/components/ClockTest.jsx @@ -36,7 +36,7 @@ function ClockTest({ setViewMessageModal }) { const calculateTimeDifference = () => { const now = currentTime; // const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); - const newYear = moment('2023-12-31 21:16:20').tz('Asia/Seoul'); + const newYear = moment('2023-12-31 21:17:20').tz('Asia/Seoul'); const diff = newYear - now; // D-DAY 시간 From 1b94b0664733ae0c4f1a5f08249300af6e92a37f Mon Sep 17 00:00:00 2001 From: jhkim Date: Sun, 31 Dec 2023 21:18:05 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=EC=BB=A8=ED=8E=98=ED=8B=B0=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClockTest.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ClockTest.jsx b/src/components/ClockTest.jsx index ee49341..c13cd87 100644 --- a/src/components/ClockTest.jsx +++ b/src/components/ClockTest.jsx @@ -36,7 +36,7 @@ function ClockTest({ setViewMessageModal }) { const calculateTimeDifference = () => { const now = currentTime; // const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); - const newYear = moment('2023-12-31 21:17:20').tz('Asia/Seoul'); + const newYear = moment('2023-12-31 21:19:20').tz('Asia/Seoul'); const diff = newYear - now; // D-DAY 시간 From 6ad2f53f96d5c1c78c1f08cf0b645c634b1ef8d1 Mon Sep 17 00:00:00 2001 From: jhkim Date: Sun, 31 Dec 2023 21:19:56 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=EC=BB=A8=ED=8E=98=ED=8B=B0=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=8B=9C=EA=B0=84=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClockTest.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ClockTest.jsx b/src/components/ClockTest.jsx index c13cd87..68e8232 100644 --- a/src/components/ClockTest.jsx +++ b/src/components/ClockTest.jsx @@ -36,7 +36,7 @@ function ClockTest({ setViewMessageModal }) { const calculateTimeDifference = () => { const now = currentTime; // const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); - const newYear = moment('2023-12-31 21:19:20').tz('Asia/Seoul'); + const newYear = moment('2023-12-31 21:21:20').tz('Asia/Seoul'); const diff = newYear - now; // D-DAY 시간 @@ -204,7 +204,7 @@ function ClockTest({ setViewMessageModal }) { )} {startCountDown == true && ( -
+
Date: Sun, 31 Dec 2023 21:22:25 +0900 Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=EC=BB=A8=ED=8E=98=ED=8B=B0=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClockTest.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ClockTest.jsx b/src/components/ClockTest.jsx index 68e8232..1a15d70 100644 --- a/src/components/ClockTest.jsx +++ b/src/components/ClockTest.jsx @@ -36,7 +36,7 @@ function ClockTest({ setViewMessageModal }) { const calculateTimeDifference = () => { const now = currentTime; // const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); - const newYear = moment('2023-12-31 21:21:20').tz('Asia/Seoul'); + const newYear = moment('2023-12-31 21:23:30').tz('Asia/Seoul'); const diff = newYear - now; // D-DAY 시간 From e6270f13d264db71da473b0596afd1fbdc18c1f1 Mon Sep 17 00:00:00 2001 From: jhkim Date: Sun, 31 Dec 2023 21:24:09 +0900 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=EC=BB=A8=ED=8E=98=ED=8B=B0=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClockTest.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ClockTest.jsx b/src/components/ClockTest.jsx index 1a15d70..bd11d02 100644 --- a/src/components/ClockTest.jsx +++ b/src/components/ClockTest.jsx @@ -36,7 +36,7 @@ function ClockTest({ setViewMessageModal }) { const calculateTimeDifference = () => { const now = currentTime; // const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); - const newYear = moment('2023-12-31 21:23:30').tz('Asia/Seoul'); + const newYear = moment('2023-12-31 21:25:00').tz('Asia/Seoul'); const diff = newYear - now; // D-DAY 시간 From 3157edcf48e932c2e9c8cbc1a1b5e147ee289dff Mon Sep 17 00:00:00 2001 From: jhkim Date: Sun, 31 Dec 2023 21:28:09 +0900 Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=EC=BB=A8=ED=8E=98=ED=8B=B0=20?= =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=EC=83=88=ED=95=B4=EB=A1=9C=20=EC=B5=9C?= =?UTF-8?q?=EC=A2=85=20=EB=B3=80=EA=B2=BD,=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClockTest.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/ClockTest.jsx b/src/components/ClockTest.jsx index bd11d02..fbd70e2 100644 --- a/src/components/ClockTest.jsx +++ b/src/components/ClockTest.jsx @@ -35,8 +35,7 @@ function ClockTest({ setViewMessageModal }) { const calculateTimeDifference = () => { const now = currentTime; - // const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); - const newYear = moment('2023-12-31 21:25:00').tz('Asia/Seoul'); + const newYear = moment('2024-1-1 00:00:00').tz('Asia/Seoul'); const diff = newYear - now; // D-DAY 시간 @@ -102,7 +101,6 @@ function ClockTest({ setViewMessageModal }) { eventSource.onmessage = (e) => { const serverTime = moment(JSON.parse(e.data).unixTime); - console.log(`서버 시간: ${moment(serverTime).tz('Asia/Seoul')}`); // 로컬 시간을 전 세계 어디서든 한국시간으로 변환 const clientTime = new Date(); @@ -112,7 +110,6 @@ function ClockTest({ setViewMessageModal }) { // const krCurr = moment().tz('Asia/Seoul'); const timeGap = serverTime - clientTime.getTime(); - console.log(timeGap); setCurrentTime(moment(serverTime + timeGap + 99).tz('Asia/Seoul')); @@ -190,7 +187,6 @@ function ClockTest({ setViewMessageModal }) { useEffect(() => { if (currentTime) { - console.log(`현재 시간: ${currentTime}`); calculateTimeDifference(); } }, [currentTime]); From e280e39a20f079a0e06f28f55194935d03acbf41 Mon Sep 17 00:00:00 2001 From: kjeongh Date: Fri, 12 Jan 2024 01:42:04 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20web=20worker=EB=A5=BC=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=B4=20=ED=83=80=EC=9D=B4=EB=A8=B8?= =?UTF-8?q?=EC=9A=A9=20=EC=8A=A4=EB=A0=88=EB=93=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClockTest.jsx | 28 ++++++++++++++++++++++++---- src/utils/workers/timer.js | 11 +++++++++++ 2 files changed, 35 insertions(+), 4 deletions(-) create mode 100644 src/utils/workers/timer.js diff --git a/src/components/ClockTest.jsx b/src/components/ClockTest.jsx index fbd70e2..b6f64e3 100644 --- a/src/components/ClockTest.jsx +++ b/src/components/ClockTest.jsx @@ -8,7 +8,6 @@ import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import useCountdown from '@bradgarropy/use-countdown'; import { motion } from 'framer-motion'; -import Confetti from 'react-confetti'; import moment from 'moment'; import 'moment-timezone'; import apiV1Instance from '../apiV1Instance'; @@ -139,20 +138,40 @@ function ClockTest({ setViewMessageModal }) { useEffect(() => { fetchServerTime(); + const workerUrl = new URL('../utils/workers/timer.js', import.meta.url) + .href; + const timerWorker = new Worker(workerUrl, { type: 'module' }); + const timerDelay = 1000; // 1초 // 매초 시간 업데이트 - intervalTime = setInterval(() => { + // intervalTime = setInterval(() => { + // setCurrentTime((prevTime) => { + // // prevTime을 밀리초 단위로 변환 + // const prevTimeMillis = prevTime.valueOf(); + // + // // 1초 (1000 밀리초)와 timeGap을 더함 + // const newTimeMillis = prevTimeMillis + 1000; + // + // // moment를 사용하여 한국 시간대의 Date 객체로 변환 + // return moment(newTimeMillis).tz('Asia/Seoul'); + // }); + // }, 1000); + + // web worker를 이용한 1초간격 시간 업데이트 + timerWorker.postMessage(timerDelay); + timerWorker.onmessage = () => { + console.log('setTime'); setCurrentTime((prevTime) => { // prevTime을 밀리초 단위로 변환 const prevTimeMillis = prevTime.valueOf(); // 1초 (1000 밀리초)와 timeGap을 더함 - const newTimeMillis = prevTimeMillis + 1000; + const newTimeMillis = prevTimeMillis + timerDelay; // moment를 사용하여 한국 시간대의 Date 객체로 변환 return moment(newTimeMillis).tz('Asia/Seoul'); }); - }, 1000); + }; // 매 5초마다 서버 시간 업데이트 // const serverTimeUpdateInterval = setInterval(() => { @@ -182,6 +201,7 @@ function ClockTest({ setViewMessageModal }) { eventSource.close(); // 컴포넌트 정리 시 EventSource 인스턴스 닫기 } document.removeEventListener('visibilitychange', handleVisibilityChange); + return timerWorker.terminate(); // 컴포넌트 정리 시 web worker 종료 }; }, []); diff --git a/src/utils/workers/timer.js b/src/utils/workers/timer.js new file mode 100644 index 0000000..aa99f90 --- /dev/null +++ b/src/utils/workers/timer.js @@ -0,0 +1,11 @@ +onmessage = (e) => { + const delay = e.data; + + const interval = setInterval(() => { + postMessage('tick'); + }, delay); + + if (e.data === 'stop') { + clearInterval(interval); + } +};