diff --git a/src/components/current/timer/index.styles.ts b/src/components/current/timer/index.styles.ts index ebd15120..879a3cca 100755 --- a/src/components/current/timer/index.styles.ts +++ b/src/components/current/timer/index.styles.ts @@ -16,20 +16,21 @@ export const Wrapper = styled.div` justify-content: center; `; -export const TextWrapper = styled.div<{ isTimerExpired: boolean }>` - width: 291px; +export const TextWrapper = styled.div` + width: 100%; + padding: 0 22px; display: flex; align-items: center; - justify-content: ${({ isTimerExpired }) => - isTimerExpired ? 'center' : 'space-between'}; + justify-content: space-between; `; export const Span = styled.span` - ${theme.typography.regular01}; + ${theme.typography.regular02}; `; export const Time = styled.span` - color: ${theme.colors.orange03}; ${theme.typography.semibold03}; + font-feature-settings: 'tnum'; + font-variant-numeric: tabular-nums; `; diff --git a/src/components/current/timer/index.tsx b/src/components/current/timer/index.tsx index c668fc70..f05dc41b 100644 --- a/src/components/current/timer/index.tsx +++ b/src/components/current/timer/index.tsx @@ -11,15 +11,16 @@ export interface TimerTypes { const Timer = ({ deadLine }: TimerTypes) => { const [isTimeExpired, setIsTimeExpired] = useState(false); - const targetDate = dayjs(deadLine).format('YYYY-MM-DD HH:mm:00'); - const { days, hours, minutes, seconds } = getCountdown(targetDate); + const targetDate = dayjs(deadLine).format('YYYY-MM-DD HH:mm:00:00'); + const { days, hours, minutes, seconds, milliseconds } = + getCountdown(targetDate); useEffect(() => { if (!isTimeExpired) { const now = dayjs(); const end = dayjs(deadLine); - if (end.diff(now) < 1000) { + if (end.diff(now) < 10) { setIsTimeExpired(true); } } @@ -30,9 +31,9 @@ const Timer = ({ deadLine }: TimerTypes) => { {isTimeExpired ? ( '일정 등록 기간이 종료됐어요 !' ) : ( - + 일정 등록 기간이 - + 남았어요 )} diff --git a/src/utils/getCountdown.ts b/src/utils/getCountdown.ts index c803c3a4..2fe709be 100644 --- a/src/utils/getCountdown.ts +++ b/src/utils/getCountdown.ts @@ -2,14 +2,14 @@ import dayjs from 'dayjs'; import { useEffect, useState } from 'react'; export const getCountdown = (targetDate: string) => { - const deadLine = dayjs(targetDate).format('YYYY-MM-DD HH:mm:00'); + const deadLine = dayjs(targetDate).format('YYYY-MM-DD HH:mm:00:00'); const [countDown, setCountDown] = useState(dayjs(deadLine).diff(dayjs())); useEffect(() => { setInterval(() => { setCountDown(dayjs(deadLine).diff(dayjs())); - }, 1000); + }, 10); }, [deadLine]); return getReturnValues(countDown); @@ -28,11 +28,13 @@ const getReturnValues = (countDown: number) => { ); const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((countDown % (1000 * 60)) / 1000); + const milliseconds = +(countDown % 1000).toString().slice(0, 2); return { days: days, hours: addZero(hours), minutes: addZero(minutes), seconds: addZero(seconds), + milliseconds: addZero(milliseconds), }; };