아마존 E-commerce 클론 -9) CartScreen 만들고, removeFromCart버튼 활성화하기

 

 

 

 

카트정보를 리덕스에서 useSelector를 이용해서 가져오고, 

이를 이용해서 카트아이템들의 정보를 화면에 띄우도록 할 것이다. 

만약 카트가 비어있으면 cart is Empty메세지를 나타내게 하고, 

쇼핑하러 랜딩페이지로 이동하는 링크를 걸어준다. 

 

만약 비어있지 않다면 아이탬들의 이미지를 나타내고, 

아이템 정보로 가는 링크를 걸어주고, 

아이템 qty정보와 가격정보, 목록에서 제거 버튼을 화면에 보이도록 설정한다. 

import { Link } from 'react-router-dom'
import React, { useEffect } from 'react'
import {useDispatch, useSelector} from 'react-redux'
import { addToCart } from '../actions/cartActions'
import MessageBox from '../components/MessageBox'


function CartScreen(props) {

    const cart = useSelector(state=>state.cart);
    const {cartItems} = cart;

    const removeFromCartHandler=(id)=>{
        
    }
    return (
       <div className="row top">
           <div className="col-2">
               <h1>Shopping Cart</h1>
               {cartItems.length ===0? 
                    (<MessageBox>
                        Cart is Empty. 
                        <Link to ="/">Go Shopping</Link>
                    </MessageBox>
                    ):(
                    <ul>
                        {
                            cartItems.map(item=>(
                                <li key = {item.product}>
                                    <div className="row">
                                        <div>
                                            <img src={item.image} alt={item.name} className="small"/>
                                        </div>
                                        <div className="min-30">
                                            <Link to={`/product/${item.product}`}>{item.name}</Link>
                                        </div>
                                        <div>
                                            <select value={item.qty} onChange={e=>dispatch(addToCart(item.product, Number(e.target.value)))}>
                                            {[...Array(item.countInStock).keys()].map(
                                                    (x)=>(<option key={x+1}value={x+1}>{x+1}</option>
                                                )
                                            )}
                                            </select>
                                        </div>
                                        <div>
                                            ${item.price}
                                        </div>
                                        <div>
                                            <button type="button" onClick={()=>removeFromCartHandler(item.product)}>Delete</button>
                                        </div>
                                    </div>
                                </li>
                            ))
                        }
                    </ul>
                    )}
           </div>
       </div>
    )
}

export default CartScreen

 

스타일 정보를 추가해준다. 

 

.min-30{
  min-width: 30rem;
}
/* Image */
img {
  border-radius: 0.5rem;
}
img.small {
  max-width: 5rem;
  width: 100%;
}

 

 

 

 

이제 토탈 정보를 주는 col-1을 추가한다. 

여기서는 reduce를 이용해서 총갯수와 총 가격을 계산해서 나타나도록 하고 디폴트 값은 0으로 준다. 

또 체크아웃 버튼을 만들어주는데, 이 버튼은 signin?여부를 판단해서 이미 로그인 되어있다면, shipping페이지로 넘겨줄 것이다. 

import { Link } from 'react-router-dom'
import React, { useEffect } from 'react'
import {useDispatch, useSelector} from 'react-redux'
import { addToCart } from '../actions/cartActions'
import MessageBox from '../components/MessageBox'


function CartScreen(props) {

    const checkoutHandler=()=>{
        props.history.push('/signin?redirect=shipping');
    }
    return (
       
           <div className="col-1">
               <div className="card card-body">
                        <ul>
                            <li>
                                <h2>
                                    Subtotal ({cartItems.reduce((a, c)=> a+c.qty, 0)} items):${cartItems.reduce((a, c)=> a+ c.price*c.qty,0)}
                                </h2>
                            </li>
                            <li>
                                <button type="button" className="primary block" onClick={checkoutHandler} disabled={cartItems.length===0}>Proceed to Checkout</button>
                            </li>
                        </ul>
               </div>
           </div>
       </div>
    )
}

export default CartScreen

 

이제 remove버튼 기능을 만들어 보자. 

 

카트 상수를 일단 만들어주자. 

cartConstants.js

export const CART_ADD_ITEM = 'CART_ADD_ITEM'
export const CART_REMOVE_ITEM='CART_REMOVE_ITEM'

 

cartactions.js

export const removeFromCart = (productId)=> (dispatch, getState)=>{
    dispatch({
        type:CART_REMOVE_ITEM,
        payload:
            productId
        
    });
    localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
}

cartReducers.js

필터로 아이디랑 일치하는건 제외시켜준다. 

        case CART_REMOVE_ITEM:
            return {...state, cartItems:state.cartItems.filter(x=>x.product!==action.payload)};
        default: 
            return state;
    }
}

 

이제 카트스크린에 dispatch로 넣어주자. 

    const removeFromCartHandler=(id)=>{
        dispatch(removeFromCart(id));
    }

 

정상적으로 모두 잘 삭제된다.