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