From 917bd19e0e4f09f84f00c27b89f0359238f6989a Mon Sep 17 00:00:00 2001
From: Joohyun Kim <corinthionia@gmail.com>
Date: Tue, 29 Aug 2023 14:50:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=83=80=EC=9D=B4=EB=A8=B8=EC=97=90=20?=
 =?UTF-8?q?=EB=B0=80=EB=A6=AC=EC=84=B8=EC=BB=A8=EB=93=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/current/timer/index.styles.ts | 13 +++++++------
 src/components/current/timer/index.tsx       | 11 ++++++-----
 src/utils/getCountdown.ts                    |  6 ++++--
 3 files changed, 17 insertions(+), 13 deletions(-)

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