diff --git a/packages/design-system/package.json b/packages/design-system/package.json index fe28ba5..230eefe 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,7 +1,7 @@ { "name": "@uoslife/design-system", "private": false, - "version": "1.0.43", + "version": "1.0.45", "type": "module", "packageManager": "pnpm@8.4.0", "main": "dist/@uoslife/design-system.es.js", @@ -48,7 +48,7 @@ "dependencies": { "@emotion/native": "^11.11.0", "@emotion/react": "^11.11.1", - "@uoslife/react": "^1.0.3", + "@uoslife/react": "^1.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-native": "^0.72.2", diff --git a/packages/design-system/src/lib/common/atom/input/Input.stories.tsx b/packages/design-system/src/lib/common/atom/input/Input.stories.tsx index 423561e..55a79d6 100644 --- a/packages/design-system/src/lib/common/atom/input/Input.stories.tsx +++ b/packages/design-system/src/lib/common/atom/input/Input.stories.tsx @@ -21,6 +21,7 @@ export const Secondary = { ; -type Props = Omit; - -const VERIFICATION_TIMER_MIN = 3; -const VERIFICATION_TIMER_SEC = 0; - -export const Timer = ({ ...props }: Props) => { - const { currentTime, isFinish } = useTimer( - VERIFICATION_TIMER_MIN, - VERIFICATION_TIMER_SEC - ); +export const Timer = ({ currentTime, ...props }: Props) => { return ( { +type useTimerProps = { + initMin: number; + initSec: number; + autoStart?: boolean; +}; + +const addZero = (num: number) => { + if (num < 10) return "0" + num.toString(); + else return num.toString(); +}; + +export const useTimer = ({ + initMin, + initSec, + autoStart = true, +}: useTimerProps) => { const [min, setMin] = useState(initMin); const [sec, setSec] = useState(initSec); + const [isStart, setIsStart] = useState(autoStart); const [isFinish, setIsFinish] = useState(false); - const addZero = useCallback((num: number) => { - if (num < 10) return "0" + num.toString(); - else return num.toString(); - }, []); + const startTimer = () => { + setIsStart(true); + }; + + const resetTimer = () => { + setMin(initMin); + setSec(initSec); + }; useEffect(() => { + if (!isStart) return; const countDown = setInterval(() => { if (sec === 0 && min === 0) { setIsFinish(true); @@ -26,5 +47,5 @@ export const useTimer = (initMin: number, initSec: number) => { return () => clearInterval(countDown); }); const currentTime = addZero(min) + ":" + addZero(sec); - return { currentTime, isFinish }; + return { currentTime, isFinish, startTimer, resetTimer }; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea14fc6..876aeab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,7 +21,7 @@ importers: specifier: ^11.11.1 version: 11.11.1(@types/react@18.2.17)(react@18.2.0) '@uoslife/react': - specifier: ^1.0.3 + specifier: ^1.0.4 version: link:../react/dist react: specifier: ^18.2.0