feat: 타이머에 밀리세컨드 추가

dnd-side-project · Aug 29, 2023 · 917bd19 · 917bd19
1 parent e52ece5
commit 917bd19
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git 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
@@ -11,15 +11,16 @@ export interface TimerTypes {
 const Timer = ({ deadLine }: TimerTypes) => {
  const [isTimeExpired, setIsTimeExpired] = useState<boolean>(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 ? (
  '일정 등록 기간이 종료됐어요 !'
  ) : (
- <TextWrapper isTimerExpired={isTimeExpired}>
+ <TextWrapper>
  <Span>일정 등록 기간이</Span>
- <Time>{`${days}일 ${hours}:${minutes}:${seconds}`}</Time>
+ <Time>{`${days}일 ${hours}:${minutes}:${seconds}:${milliseconds}`}</Time>
  <Span>남았어요</Span>
  </TextWrapper>
  )}

diff --git 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),
  };
 };