{
cart.length === 0 ? <div className='cart-empty'><h2>장바구니 비어있음</h2><Link to='/'>쇼핑하러 가기</Link></div>
:
<div className='total'>
<span>총 개수 : {cart.length}</span>
<span>총 금액 : {totalPrice.toLocaleString('kr-KR')}</span>
<span></span>
</div>
}
Redux, Router를 이용해서 장바구니 페이지를 구현했다.
1) Router 구조
const App = () => {
return (
<BrowserRouter>
<Routes >
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="/cart" element={<Cart />} />
</Route>
</Routes>
</BrowserRouter>
);
};
export default App;const Layout = () => {
return (
<div id="wrap">
<Header />
<main className="main">
<Outlet />
</main>
<Footer />
</div>
);
};
Layout, Outlet을 이용해서 header와 footer를 항상 표시되게 했다.
Home엔 아이템들이 출력된다.
2) 장바구니 버튼
주문하기 버튼을 클릭하면 버튼이 취소하기로 변경이 되고 우측 상단에 장바구니에 담긴 총 아이템 개수를 나타내준다.
<li><Link to='/cart'>Cart / {cart.length}</Link></li>
개수를 나타내 주는 navigation 부분
{
cart.find(item => item.id === id) ?
<button onClick={() => dispatch(removeCart(id))} className='off'>취소하기</button>
:
<button onClick={() => dispatch(addCart(item))}>주문하기</button>
}
장바구니에 담기지 않았을 때 주문하기 버튼을 클릭하면 addCart 함수를 호출하고, 담긴 상태면 취소하기 버튼이 활성화되며 클릭 시 removeCart 함수를 호출한다.
addCart(state, action) {
state.cart = [...state.cart, action.payload];
},
removeCart(state, action) {
state.cart = state.cart.filter(item => item.id !== action.payload)
}
각각 item(객체 전부), id를 매개변수로 넘겨주기 때문에 cart 배열에 추가해 주고, 해당 id로 제거해 주는 기능을 한다.
3) 장바구니
<article>
<img src={image} alt={title} />
<div>
<h3> {title} </h3>
<span>{
price === 0 ? '무료' : `${price.toLocaleString("kr-KR")} 원`
}</span>
</div>
<button onClick={() => dispatch(removeCart(id))}> 삭제 </button>
</article>
장바구니에 담긴 상품의 삭제 버튼을 누르면 마찬가지로 removeCart 함수를 호출해 cart 배열에서 해당 아이템의 객체를 제거하게 된다.
{
cart.length === 0 ? <div className='cart-empty'><h2>장바구니 비어있음</h2><Link to='/'>쇼핑하러 가기</Link></div>
:
<div className='total'>
<span>총 개수 : {cart.length}</span>
<span>총 금액 : {totalPrice.toLocaleString('kr-KR')}</span>
<span></span>
</div>
}
장바구니에 담긴 상품이 없을 시(cart.length===0) 장바구니가 비어있다는 텍스트가 출력이 되고, 장바구니에 아이템이 있을 시 총 개수와 총금액을 알려준다.
const totalPrice = cart.reduce((total, item) => total + item.price, 0);
총금액의 경우 cart 배열 안의 price의 값만 더해주면 되기 때문에 reduce를 사용하였다.