Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…-5-frontend into feature/landing
  • Loading branch information
YesHyeon committed Sep 4, 2023
2 parents 4322b62 + cf344b3 commit 220bff8
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 13 deletions.
13 changes: 7 additions & 6 deletions src/components/current/timer/index.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
11 changes: 6 additions & 5 deletions src/components/current/timer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand All @@ -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>
)}
Expand Down
6 changes: 4 additions & 2 deletions src/utils/getCountdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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),
};
};

0 comments on commit 220bff8

Please sign in to comment.