[#35] 작품 상세페이지 관련 기능 세분화 및 새로운 작품 상세페이지로 들어갈 때 텍스트 스위칭 버그 수정

- 경매시작 / 입찰 / 구매확정 버튼 생성
- 기타 상황에 대해서도 안내 메세지 생성
- clearAuction action 생성 및 추가

Author: yurim22

src/components/Common/Header/index.js

@@ -23,7 +23,7 @@ function Header() {
   });
 
   const GoToPage = name => {
-    history.replace(name);
+    history.push(name);
   };
 
   return (

src/components/Nfting/index.js

@@ -17,13 +17,33 @@ function auctionNft({ props }) {
     } if (props.auction === 'START') { // 경매 중
       // 입찰
       return 2;
-    } if (props.auction === 'DONE') { // 경매 완료
+    } if (props.auction === 'FINISH') { // 경매 완료
       // "경매가 완료된 작품입니다."
       return 3;
+      // 최고가 사람 === 나 {return 4} : 구매확정표시
     }
       return null;
   };
 
+  const handleButtonClick = (state) => {
+    console.log(state);
+    switch (state) {
+      case 0:
+        if (window.confirm('경매를 시작하겠습니까?')) {
+          alert('경매가 시작되었습니다.');
+        }
+        break;
+      case 2:
+        if (userInfo.email === props.email) {
+          window.confirm('본인작품에 입찰 하실 수 없습니다');
+        } else if (window.confirm('경매에 참여하시겠습니까?')) {
+          alert('입찰에 성공하셨습니다.');
+        }
+        break;
+      default:
+    }
+  };
+
   return (
     <>
       <Nfting>
@@ -71,20 +91,21 @@ function auctionNft({ props }) {
             {/* 판매자일 때  */}
             {auctionStat() === 0 ? (
               <div className="detail__button">
-                <button type="button">경매시작</button>
+                <button type="button" onClick={() => handleButtonClick(0)}>경매시작</button>
               </div>
             ) : auctionStat() === 1 ? (
               <div className="detail__button">
                 {/* <button type="button">구매확정</button> */}
-                아직 경매시작 전 입니다.
+                <span>⚠️ 경매시작 전 입니다.</span>
               </div>
             ) : auctionStat() === 2 ? (
               <div className="detail__button">
-                <button type="button">입찰</button>
+                <button type="button" onClick={() => handleButtonClick(2)}>입찰</button>
               </div>
             ) : auctionStat() === 3 ? (
               <div className="detail__button">
-                <button type="button">경매가 종료된 작품입니다.</button>
+                {/* <button type="button">경매가 종료된 작품입니다.</button> */}
+                <span>경매가 종료된 작품입니다.</span>
               </div>
             ) : null}
           </Border>

src/components/Nfting/styles.js

@@ -122,4 +122,9 @@ export const Border = styled.div`
     text-align: right;
     line-height: 2;
   }
+  .detail__button {
+    span {
+      font-weight: 600;
+    }
+  }
 `;

src/pages/auction/index.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import Header from 'components/Common/Header';
 import { useSelector, useDispatch } from 'react-redux';
 import Nfting from 'components/Nfting';
-import { LOAD_ONE_AUCTION_REQUEST } from 'reducers/auction';
+import { LOAD_ONE_AUCTION_REQUEST, clearAuction } from 'reducers/auction';
 
 function auctionPost({ match }) {
   const dispatch = useDispatch();
@@ -13,6 +13,9 @@ function auctionPost({ match }) {
       type: LOAD_ONE_AUCTION_REQUEST,
       data: match.params.id,
     });
+    return () => {
+      dispatch(clearAuction());
+    };
   }, [match.params.id]);
 
   return (

src/reducers/auction.js

@@ -133,6 +133,9 @@ export const CONFIRM_PURCHASE_REQUEST = 'CONFIRM_PURCHASE_REQUEST';
 export const CONFIRM_PURCHASE_SUCCESS = 'CONFIRM_PURCHASE_SUCCESS';
 export const CONFIRM_PURCHASE_FAILURE = 'CONFIRM_PURCHASE_FAILURE';
 
+// 경매 작품 내용 비우기
+export const CLEAR_AUCTION = 'CLEAR_AUCTION';
+
 export const addAuction = data => ({
   type: ADD_AUCTION_REQUEST,
   data,
@@ -160,6 +163,10 @@ export const confirmPurchase = data => ({
   data,
 });
 
+export const clearAuction = () => ({
+  type: CLEAR_AUCTION,
+});
+
 const auctionReducer = (state = initialState, action) =>
   produce(state, draft => {
     switch (action.type) {
@@ -369,6 +376,9 @@ const auctionReducer = (state = initialState, action) =>
         draft.confirmPurchaseLoading = false;
         draft.confirmPurchaseError = action.error;
         break;
+      case CLEAR_AUCTION:
+        draft.singleAuction = {};
+        break;
       default:
         break;
     }