feat: 타이머에 밀리세컨드 추가 (#130)

dnd-side-project · Sep 3, 2023 · cf344b3 · cf344b3
1 parent 7e4a971
commit cf344b3
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),
   };
 };