From 8b3f60ee3adb56d66644e6540af61ad4e5638e51 Mon Sep 17 00:00:00 2001 From: bicochan Date: Sat, 6 Jul 2024 17:47:37 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20useDelayFlag=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDelayFlag.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/hooks/useDelayFlag.ts diff --git a/src/hooks/useDelayFlag.ts b/src/hooks/useDelayFlag.ts new file mode 100644 index 0000000..fff8b44 --- /dev/null +++ b/src/hooks/useDelayFlag.ts @@ -0,0 +1,32 @@ +import { useState, useEffect, useRef } from 'react'; + +export const useDelayFlag = (flag: boolean, delay: number = 1000): boolean => { + const startTimeRef = useRef(0); + const [delayFlag, setDelayFlag] = useState(false); + + useEffect(() => { + let timeoutId: NodeJS.Timeout | null = null; + + if (flag) { + startTimeRef.current = Date.now(); + setDelayFlag(true); + } else if (startTimeRef.current) { + const elapsedTime = Date.now() - startTimeRef.current; + const remainingTime = delay - elapsedTime; + + if (remainingTime > 0) { + timeoutId = setTimeout(() => { + setDelayFlag(false); + }, remainingTime); + } else { + setDelayFlag(false); + } + } + + return () => { + if (timeoutId) clearTimeout(timeoutId); + }; + }, [flag]); + + return delayFlag; +}; From 3f22f95eed5923f92b31387a7eb7d24212465ccb Mon Sep 17 00:00:00 2001 From: bicochan Date: Mon, 8 Jul 2024 11:02:30 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=94=A8=20refactor:=20flag=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDelayFlag.ts | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/hooks/useDelayFlag.ts b/src/hooks/useDelayFlag.ts index fff8b44..1a2d4ff 100644 --- a/src/hooks/useDelayFlag.ts +++ b/src/hooks/useDelayFlag.ts @@ -4,23 +4,33 @@ export const useDelayFlag = (flag: boolean, delay: number = 1000): boolean => { const startTimeRef = useRef(0); const [delayFlag, setDelayFlag] = useState(false); + const initializeFlag = () => { + startTimeRef.current = Date.now(); + setDelayFlag(true); + }; + + const resetFlag = () => { + setDelayFlag(false); + }; + useEffect(() => { let timeoutId: NodeJS.Timeout | null = null; - if (flag) { - startTimeRef.current = Date.now(); - setDelayFlag(true); - } else if (startTimeRef.current) { + const delayFlag = () => { const elapsedTime = Date.now() - startTimeRef.current; const remainingTime = delay - elapsedTime; if (remainingTime > 0) { - timeoutId = setTimeout(() => { - setDelayFlag(false); - }, remainingTime); + timeoutId = setTimeout(resetFlag, remainingTime); } else { - setDelayFlag(false); + resetFlag(); } + }; + + if (flag) { + initializeFlag(); + } else if (startTimeRef.current) { + delayFlag(); } return () => { From 75136f127b7476c139f0c9afb8c7ec5766a3d7ec Mon Sep 17 00:00:00 2001 From: bicochan Date: Mon, 8 Jul 2024 11:05:08 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=A9=B9=20chore:=20props=20=EB=A6=AC?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDelayFlag.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/hooks/useDelayFlag.ts b/src/hooks/useDelayFlag.ts index 1a2d4ff..9d870c6 100644 --- a/src/hooks/useDelayFlag.ts +++ b/src/hooks/useDelayFlag.ts @@ -1,6 +1,9 @@ import { useState, useEffect, useRef } from 'react'; -export const useDelayFlag = (flag: boolean, delay: number = 1000): boolean => { +export const useDelayFlag = ( + flag: boolean, + delayTime: number = 1000 +): boolean => { const startTimeRef = useRef(0); const [delayFlag, setDelayFlag] = useState(false); @@ -18,7 +21,7 @@ export const useDelayFlag = (flag: boolean, delay: number = 1000): boolean => { const delayFlag = () => { const elapsedTime = Date.now() - startTimeRef.current; - const remainingTime = delay - elapsedTime; + const remainingTime = delayTime - elapsedTime; if (remainingTime > 0) { timeoutId = setTimeout(resetFlag, remainingTime); From fb1db9ac777e629d557ea088ab9e3e237962b3ef Mon Sep 17 00:00:00 2001 From: bicochan Date: Mon, 8 Jul 2024 11:06:25 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20fix:=20eslint=20=EA=B2=BD?= =?UTF-8?q?=EA=B3=A0=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDelayFlag.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/useDelayFlag.ts b/src/hooks/useDelayFlag.ts index 9d870c6..08efefa 100644 --- a/src/hooks/useDelayFlag.ts +++ b/src/hooks/useDelayFlag.ts @@ -39,6 +39,7 @@ export const useDelayFlag = ( return () => { if (timeoutId) clearTimeout(timeoutId); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, [flag]); return delayFlag; From a2241409ea7e0f8efd59ac14eaabbfa5b69c4be3 Mon Sep 17 00:00:00 2001 From: bicochan Date: Tue, 9 Jul 2024 09:48:59 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20feat:=20'PositiveInteger'=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDelayFlag.ts | 7 ++++--- src/types/number.ts | 6 ++++++ 2 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 src/types/number.ts diff --git a/src/hooks/useDelayFlag.ts b/src/hooks/useDelayFlag.ts index 08efefa..ff1f9f7 100644 --- a/src/hooks/useDelayFlag.ts +++ b/src/hooks/useDelayFlag.ts @@ -1,8 +1,9 @@ import { useState, useEffect, useRef } from 'react'; +import { PositiveInteger } from '../types/number'; -export const useDelayFlag = ( +export const useDelayFlag = ( flag: boolean, - delayTime: number = 1000 + delayTime?: PositiveInteger ): boolean => { const startTimeRef = useRef(0); const [delayFlag, setDelayFlag] = useState(false); @@ -21,7 +22,7 @@ export const useDelayFlag = ( const delayFlag = () => { const elapsedTime = Date.now() - startTimeRef.current; - const remainingTime = delayTime - elapsedTime; + const remainingTime = (delayTime || 1000) - elapsedTime; if (remainingTime > 0) { timeoutId = setTimeout(resetFlag, remainingTime); diff --git a/src/types/number.ts b/src/types/number.ts new file mode 100644 index 0000000..2c07857 --- /dev/null +++ b/src/types/number.ts @@ -0,0 +1,6 @@ +export type PositiveInteger = `${T}` extends + | `-${string}` + | `${string}.${string}` + | '0' + ? never + : T;