[#50] 경매 남은 시간 표시 및 경매 아이템 상태 태그 변경

Author: yurim22

src/components/MyPage/Card/CardItem.js

@@ -124,7 +124,7 @@ function Card({ post, isLike }) {
           ) : (
             <RiHeartLine onClick={onClickLike} />
           )}
-          <Status>판매중</Status>
+          <Status>{post.auction === 'READY' ? '경매전' : post.auction === 'START' ? '경매중' : '경매완료'}</Status>
         </CardRight>
       </CardDetail>
     </CardContainer>

src/components/Nfting/index.js

@@ -10,6 +10,7 @@ import {
 } from 'reducers/auction';
 import useInterval from 'hooks/useInterval';
 import { Nfting, Images, Detail, Border } from './styles';
+import Timer from './timer';
 
 function auctionNft({ props, status }) {
   const userInfo = JSON.parse(localStorage.getItem('userInfo'));
@@ -172,7 +173,11 @@ function auctionNft({ props, status }) {
 
           <Border>
             <h3>⏱ 남은 경매시간</h3>
-            <p>19:05:19</p>
+            {status === 'START' ? (
+              <Timer endDate={props.curStatus?.time} status={status} />
+            ) : (
+              <p />
+            )}
           </Border>
 
           <Border>

src/components/Nfting/timer.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import useInterval from 'hooks/useInterval';
+
+const Timer = ({ endDate }) => {
+  console.log(endDate);
+  const [dateTime, setDateTime] = useState('00:00:60');
+
+  const getTime = () => {
+    const endDay = new Date(endDate);
+    const currDay = new Date();
+
+    let diff = endDay - currDay;
+    const diffDays = Math.floor(
+      (endDay.getTime() - currDay.getTime()) / (1000 * 60 * 60 * 24),
+    );
+    diff -= diffDays * (1000 * 60 * 60 * 24);
+    const diffHours = Math.floor(diff / (1000 * 60 * 60));
+    diff -= diffHours * (1000 * 60 * 60);
+    const diffMin = Math.floor(diff / (1000 * 60));
+    diff -= diffMin * (1000 * 60);
+    const diffSec = Math.floor(diff / 1000);
+
+    const hours = diffHours < 10 ? `0${diffHours}` : diffHours;
+    const miniutes = diffMin < 10 ? `0${diffMin}` : diffMin;
+    const seconds = diffSec < 10 ? `0${diffSec}` : diffSec;
+
+    return `${hours}:${miniutes}:${seconds}`;
+  };
+
+  useInterval(
+    () => {
+      setDateTime(getTime());
+    },
+    dateTime === '00:00:00' ? null : 1000,
+  );
+
+  return <p>{dateTime}</p>;
+};
+
+export default Timer;