아마존 E-commerce 클론 -15) payment Screen 만들기

먼저 PaymentMethodScreen을 만든다. 

import React, {useState} from 'react'
import CheckoutSteps from '../components/CheckoutSteps'
import {useDispatch} from 'react-redux'

function PaymentMethodScreen(props) {
    const [paymentMethod, setPaymentMethod] = useState("PayPal")
    const dispatch = useDispatch();


    const submitHandler = (e) =>{
        e.preventDefault();
        dispatch(savePaymentMethod(paymentMethod));
        props.history.push('/placeorder');

    }
    return (
        <div>
            <CheckoutSteps step1 step2 step3></CheckoutSteps>
            <form onSubmit={onSubmitHandler} className="form">
                <div>
                    <h1>Payment Method</h1>
                </div>
                <div>
                    <div>
                        <input type="radio" id="paypal" value="Paypal" name="paymentMethod" required checked onChange= {e=>setPaymentMethod(e.target.value)} />
                        <label htmlFor="paypal">PayPal</label>
                    </div>
                </div>
                <div>
                    <div>
                        <input type="radio" id="stripe" value="Stripe" name="paymentMethod" required onChange= {e=>setPaymentMethod(e.target.value)} />
                        <label htmlFor="stripe">Stripe</label>
                    </div>
                </div>
                <div>
                    <button className="primary" type="submit">Continue</button>
                </div>
            </form>
        </div>
    )
}

export default PaymentMethodScreen

 

payment와 관련된 사항을 진행하기 위해서 

cart constants를 만든다. 

export const CART_SAVE_PAYMENT_METHOD = 'CART_SAVE_PAYMENT_METHOD'

 

 

action을 만든다. 

이건 그냥 radio버튼이라서 로컬저장소에 저장할 것이 없다는 것에 유의해라. 

export const savePaymentMethod = (data) =>(dispatch)=>{
    dispatch({
        type:CART_SAVE_PAYMENT_METHOD,
        payload:data
    });
}

 

cartreducers.js

        case CART_SAVE_PAYMENT_METHOD:
            return {...state, paymentMethod:action.payload}
        default: 
            return state;

 

store.js에서 이니셜 스테잇을 지정해준다. 

const initialState = {
    userSignin:{
        userInfo:localStorage.getItem('userInfo')? JSON.parse(localStorage.getItem('userInfo')):null
    },
    cart:{
        cartItems: localStorage.getItem('cartItems')? JSON.parse(localStorage.getItem('cartItems')):[],
        shippingAddress: localStorage.getItem('shippingAddress')? JSON.parse(localStorage.getItem('shippingAddress')):{},
        paymentMethod: 'PayPal'
    }
};

 

 

다시 paymentMethodScreen.

import { savePaymentMethod } from '../actions/cartActions';

 

app.js에 payment 페이지 추가. 

import PaymentMethodScreen from './screens/PaymentMethodScreen';

<Route path="/payment" component={PaymentMethodScreen} exact></Route>

 

 

 

contiinue누르면 placeorder페이지로 이동

 

스타일링 변경해준다. 

.form label{
  margin: 1rem 0;
}

 

페이팔로 선택하고 continue눌렀을 때 state

stripe로 변경하고 continue눌렀을 때 

 

 

 

여기서 페이지 상단에 보이는 checkoutsteps가 입력이 완료되지 않았으면 payment 선택후 다시 address페이지로 이동하도록 하자. 

function PaymentMethodScreen(props) {

    const cart = useSelector(state=>state.cart);
    const {shippingAddress} = cart;
    if(!shippingAddress.address){
        props.history.push('/shipping')
    }

 

또 로그아웃했을 때는 shippingAddress정보도 모두 사라지도록 설정하자. 

useractions.js

export const signout = () => (dispatch)=>{ 
    localStorage.removeItem('userInfo');
    localStorage.removeItem('cartItems');
    localStorage.removeItem('shippingAddress');
    dispatch({
        type:USER_SIGNIN_SIGNOUT})

}

 

다음과 같이 로그아웃된 상태에서는 payment주소를 치고 들어가도 다시 signin 페이지로 이동하는것을 확인할 수 있다. 

 

다시 로그인하고 payment주소를 치고들어가면 이미 localstorage에서 배송주소가 사라졌기 때문에 주소가 없어서 다시 address페이지로 이동한다.