[#50] 경매 완료 과정 수정 및 구현 완료

Author: yurim22

src/components/Nfting/index.js

@@ -10,26 +10,35 @@ import {
 import useInterval from 'hooks/useInterval';
 import { Nfting, Images, Detail, Border } from './styles';
 
-function auctionNft({ props }) {
+function auctionNft({ props, status }) {
   const userInfo = JSON.parse(localStorage.getItem('userInfo'));
   const dispatch = useDispatch();
   console.log('=======props', props);
+  console.log('=======props', props.auction);
+
+  useInterval(
+    () => {
+      dispatch(checkAuction(props.id, props.email));
+      console.log('확인 중');
+    },
+    status === 'START' ? 3000 : null,
+  );
 
   const auctionStat = () => {
-    if (props.auction === 'READY') {
+    if (status === 'READY') {
       if (userInfo.email === props.email) {
         // 판매자 => 경매시작
         return 0;
       }
       // 구매자 => "아직 경매 전 입니다"
       return 1;
     }
-    if (props.auction === 'START') {
+    if (status === 'START') {
       // 경매 중
       // 입찰
       return 2;
     }
-    if (props.auction === 'FINISH') {
+    if (status === 'FINISH') {
       // 경매 완료
       // "경매가 완료된 작품입니다."
       return 3;
@@ -48,23 +57,33 @@ function auctionNft({ props }) {
         }
         break;
       case 2:
-        if (userInfo.email === props.email) {
-          window.confirm('본인작품에 입찰 하실 수 없습니다');
-        } else if (window.confirm('경매에 참여하시겠습니까?')) {
-          dispatch(participateAuction(props.price + 1, props.email, props.id));
+        // if (userInfo.email === props.email) {
+        //   window.confirm('본인작품에 입찰 하실 수 없습니다');
+        // } else
+        if (window.confirm('경매에 참여하시겠습니까?')) {
+          if (props.curStatus?.auction_price) {
+            dispatch(
+              participateAuction(
+                parseInt(props.curStatus?.auction_price + 1, 10),
+                props.email,
+                props.id,
+              ),
+            );
+          } else {
+            dispatch(
+              participateAuction(
+                parseInt(props.price + 1, 10),
+                props.email,
+                props.id,
+              ),
+            );
+          }
         }
         break;
       default:
     }
   };
 
-  if (props.auction === 'START') {
-    useInterval(() => {
-      dispatch(checkAuction(props.id, props.email));
-      console.log('확인 중');
-    }, 3000);
-  }
-
   return (
     <>
       <Nfting>
@@ -100,14 +119,16 @@ function auctionNft({ props }) {
 
             <h3>💰 현입찰 가격</h3>
             <div className="price">
-              {props.curStatus ? (
+              {props.curStatus?.auction_price ? (
                 <p>{props.curStatus?.auction_price} KLAY</p>
-              ) : <p />}
+              ) : (
+                <p />
+              )}
             </div>
 
             <h3 className="current">👤 현재 매수왕</h3>
             <div className="email">
-              {props.curStatus ? <p>{props.curStatus?.email}</p> : <p />}
+              {props.curStatus?.email ? <p>{props.curStatus?.email}</p> : <p />}
             </div>
             {/* 상태 구별 */}
             {/* 판매자일 때  */}
@@ -172,15 +193,4 @@ function auctionNft({ props }) {
   );
 }
 
-auctionNft.propTypes = {
-  props: PropTypes.shape({
-    id: PropTypes.string,
-    no: PropTypes.string,
-    name: PropTypes.string,
-    description: PropTypes.string,
-    image: PropTypes.string,
-    owner: PropTypes.string,
-  }).isRequired,
-};
-
 export default auctionNft;

src/pages/auction/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import Header from 'components/Common/Header';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import Nfting from 'components/Nfting';
 import { LOAD_ONE_AUCTION_REQUEST, clearAuction } from 'reducers/auction';
 
@@ -13,9 +13,6 @@ function auctionPost({ match }) {
       type: LOAD_ONE_AUCTION_REQUEST,
       data: match.params.id,
     });
-    if (singleAuction.auction === 'START') {
-      console.log('경매시작했어');
-    }
     return () => {
       dispatch(clearAuction());
     };
@@ -24,7 +21,7 @@ function auctionPost({ match }) {
   return (
     <>
       <Header />
-      <Nfting props={singleAuction} />
+      <Nfting props={singleAuction} status={singleAuction.auction} />
     </>
   );
 }

src/pages/home/index.js

@@ -21,6 +21,7 @@ function home() {
   const { mainAuctions, likeAuctions } = useSelector(
     stateRedux => stateRedux.auctionReducer,
   );
+  const userInfo = JSON.parse(localStorage.getItem('userInfo'));
 
   useEffect(() => {
     AOS.init({
@@ -32,16 +33,18 @@ function home() {
     dispatch({
       type: LOAD_AUCTION_REQUEST,
     });
-    if (localStorage.getItem('userInfo')) {
+    if (localStorage.getItem('token')) {
       dispatch({
         type: LOAD_LIKE_AUCTION_REQUEST,
-        data: JSON.parse(localStorage.getItem('userInfo')).id,
+        data: userInfo.id,
       });
+      console.log('-----------', mainAuctions, likeAuctions);
     }
-  }, []);
+  }, [localStorage]);
   console.log('-----------', mainAuctions, likeAuctions);
 
-  const likeAuctionsId = likeAuctions?.map(like => like.id);
+  // const likeAuctionsId = likeAuctions ?.map(like => like.id) || [];
+  const likeAuctionsId = likeAuctions ? likeAuctions.map(like => like.id) : [];
 
   // PagingNation
   // 현재 페이지

src/reducers/auction.js

@@ -426,6 +426,8 @@ const auctionReducer = (state = initialState, action) =>
       case PARTICIPATE_AUCTION_SUCCESS:
         draft.participateAuctionLoading = false;
         draft.participateAuctionDone = true;
+        draft.singleAuction.curStatus.auction_price = action.data.price;
+        draft.singleAuction.curStatus.email = action.data.email;
         break;
       case PARTICIPATE_AUCTION_FAILURE:
         draft.participateAuctionLoading = false;