[#50] 경매 완료 시 정보 표시

Author: yurim22

src/components/Nfting/index.js

@@ -6,6 +6,7 @@ import {
   startAuction,
   participateAuction,
   checkAuction,
+  justCheckAuction,
 } from 'reducers/auction';
 import useInterval from 'hooks/useInterval';
 import { Nfting, Images, Detail, Border } from './styles';
@@ -16,6 +17,10 @@ function auctionNft({ props, status }) {
   console.log('=======props', props);
   console.log('=======props', props.auction);
 
+  // if (status === 'FINISH') {
+  //   console.log('hello');
+  //   dispatch(checkAuction(props.id, props.email));
+  // }
   useInterval(
     () => {
       dispatch(checkAuction(props.id, props.email));
@@ -24,6 +29,14 @@ function auctionNft({ props, status }) {
     status === 'START' ? 3000 : null,
   );
 
+  useEffect(() => {
+    console.log('useEffect 들어옴');
+    if (status === 'FINISH') {
+      console.log('hello');
+      dispatch(justCheckAuction(props.id));
+    }
+  }, [status]);
+
   const auctionStat = () => {
     if (status === 'READY') {
       if (userInfo.email === props.email) {

src/reducers/auction.js

@@ -84,6 +84,11 @@ export const initialState = {
   checkAuctionDone: false,
   checkAuctionError: null,
 
+  // 경매 결과 조회
+  justCheckAuctionLoading: false,
+  justCheckAuctionDone: false,
+  justChekcAuctionError: null,
+
   // 경매 종료
   terminateAuctionLoading: false,
   terminateAuctionDone: false,
@@ -158,6 +163,11 @@ export const CHECK_AUCTION_REQUEST = 'CHECK_AUCTION_REQUEST';
 export const CHECK_AUCTION_SUCCESS = 'CHECK_AUCTION_SUCCESS';
 export const CHECK_AUCTION_FAILURE = 'CHECK_AUCTION_FAILURE';
 
+// 경매 결과 조회
+export const JUST_CHECK_AUCTION_REQUEST = 'JUST_CHECK_AUCTION_REQUEST';
+export const JUST_CHECK_AUCTION_SUCCESS = 'JUST_CHECK_AUCTION_SUCCESS';
+export const JUST_CHECK_AUCTION_FAILURE = 'JUST_CHECK_AUCTION_FAILURE';
+
 // 경매종료
 export const TERMINATE_AUCTION_REQUEST = 'TERMINATE_AUCTION_REQUEST';
 export const TERMINATE_AUCTION_SUCCESS = 'TERMINATE_AUCTION_SUCCESS';
@@ -215,6 +225,11 @@ export const checkAuction = (data, owner) => ({
   owner,
 });
 
+export const justCheckAuction = data => ({
+  type: JUST_CHECK_AUCTION_REQUEST,
+  data,
+});
+
 export const terminateAuction = data => ({
   type: TERMINATE_AUCTION_REQUEST,
   data,
@@ -470,6 +485,22 @@ const auctionReducer = (state = initialState, action) =>
         draft.checkAuctionLoading = false;
         draft.checkAuctionError = action.error;
         break;
+
+      case JUST_CHECK_AUCTION_REQUEST:
+        draft.justCheckAuctionLoading = true;
+        draft.justCheckAuctionDone = false;
+        draft.justChekcAuctionError = action.error;
+        break;
+      case JUST_CHECK_AUCTION_SUCCESS:
+        draft.justCheckAuctionLoading = false;
+        draft.justCheckAuctionDone = true;
+        draft.singleAuction.curStatus = action.data;
+        break;
+      case JUST_CHECK_AUCTION_FAILURE:
+        draft.justCheckAuctionLoading = false;
+        draft.justChekcAuctionError = action.error;
+        break;
+
       case TERMINATE_AUCTION_REQUEST:
         draft.terminateAuctionLoading = true;
         draft.terminateAuctionDone = false;

src/sagas/auction.js

@@ -77,6 +77,8 @@ import {
   TERMINATE_AUCTION_FAILURE,
   TERMINATE_AUCTION_SUCCESS,
   TERMINATE_AUCTION_REQUEST,
+  JUST_CHECK_AUCTION_REQUEST,
+  JUST_CHECK_AUCTION_SUCCESS,
 } from '../reducers/auction';
 
 // home 모든 경매템 로드
@@ -455,18 +457,21 @@ function* checkAuction(action) {
   }
 }
 
+function* justCheckAuction(action) {
+  const result = yield call(checkAuctionAPI, action.data);
+  yield put({
+    type: JUST_CHECK_AUCTION_SUCCESS,
+    data: result.data,
+  });
+}
+
 function terminateAuctionAPI(data) {
   console.log(data);
   const response = instance({
     method: 'post',
     url: 'main/NFT/auction/finish',
     data,
   });
-  // const dummy = {
-  //   data: {
-  //     status: 'complete',
-  //   },
-  // };
   return response;
 }
 
@@ -544,6 +549,11 @@ function* watchCheckAuction() {
   yield takeLatest(CHECK_AUCTION_REQUEST, checkAuction);
 }
 
+// 경매 상태 로딩
+function* watchJustCheckAuction() {
+  yield takeLatest(JUST_CHECK_AUCTION_REQUEST, justCheckAuction);
+}
+
 // 경매 종료 로딩
 function* watchTerminateAuction() {
   yield takeLatest(TERMINATE_AUCTION_REQUEST, terminateAuction);
@@ -563,6 +573,7 @@ export default function* auctionSaga() {
     fork(watchStartAuctions),
     fork(watchParticipateAuctions),
     fork(watchCheckAuction),
+    fork(watchJustCheckAuction),
     fork(watchTerminateAuction),
   ]);
 }