Add To Cart 기능 개선 및 카트 Tab 만들기

어떤 페이지를 이동할 때마다 auth라는 액션을 취해준다.

auth가 취해지면 server/routes/users.js를 통과하게 된다. 이때 이 라우터가 auth 미들웨어로 가서 이 사람이 인증이 된 사람인지 ,로그인이 된 사람인지, 올바른 토큰을 갖고 있는 사람인지 등등 체크를 하고 올바른 사람이라면 이것에 대한 정보(user)를 다시 위 라우터에 전달을 해서 리덕스 스토어에 넣어준다. 

 

하지만 현재까지 구현된 상태에서 보면

router.get("/auth", auth, (req, res) => {
    res.status(200).json({
        _id: req.user._id,
        isAdmin: req.user.role === 0 ? false : true,
        isAuth: true,
        email: req.user.email,
        name: req.user.name,
        lastname: req.user.lastname,
        role: req.user.role,
        image: req.user.image,
    });
});

server/routes/users.js

안에 cart와 history가 들어있지 않다. 이렇게 되면 redux-dev tools로 봤을 때 state에서 userData에 cart와 history 내용이 보이지 않는다. 이것을 보기 위해서 코드에 cart와 history까지 넣어주자.

router.get("/auth", auth, (req, res) => {
    res.status(200).json({
        _id: req.user._id,
        isAdmin: req.user.role === 0 ? false : true,
        isAuth: true,
        email: req.user.email,
        name: req.user.name,
        lastname: req.user.lastname,
        role: req.user.role,
        image: req.user.image,
        cart: req.user.cart,
        history: req.user.history
    });
});

 

---

이제 cart page UI를 만들자.

views폴더에 CartPage 폴더와 이 폴더 안에 CartPage.js 까지 만든다.

 

App.js에 방금 만든 CartPage 컴포넌트를 갖고와서 라우터에 연결해주는데, 카트는 로그인이 될 때 보여야 되므로 auth는 true로 한다.

 

그리고 오른쪽 상단에 Cart 뱃지를 넣어주자.

 

 

 

https://ant.design/components/badge#components-badge-demo-dot

Badge - Ant Design

 

 

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import { Menu, Icon, Badge } from 'antd';
import axios from 'axios';
import { USER_SERVER } from '../../../Config';
import { withRouter } from 'react-router-dom';
import { useSelector } from "react-redux";

function RightMenu(props) {
  const user = useSelector(state => state.user)

  const logoutHandler = () => {
    axios.get(`${USER_SERVER}/logout`).then(response => {
      if (response.status === 200) {
        props.history.push("/login");
      } else {
        alert('Log Out Failed')
      }
    });
  };


  if (user.userData && !user.userData.isAuth) {
    return (
      // 로그인이 안된 상태 
      <Menu mode={props.mode}>
        <Menu.Item key="mail">
          <a href="/login">Signin</a>
        </Menu.Item>
        <Menu.Item key="app">
          <a href="/register">Signup</a>
        </Menu.Item>
      </Menu>
    )
  } else {
    return (
      // 로그인이 된 상태
      <Menu mode={props.mode}>
        <Menu.Item key="upload">
          <a href="/product/upload">Upload</a>
        </Menu.Item>

        <Menu.Item key="cart" style={{paddingBottom: 3}}>
          <Badge count={5}>
            <a href="/user/cart" className="head-example" style={{marginRight:-22, color: '#667777'}}>
              <Icon type="shopping-cart" style={{ fontSize:30, marginBottom: 3}}/>
            </a>
          </Badge>
        </Menu.Item>

        <Menu.Item key="logout">
          <a onClick={logoutHandler}>Logout</a>
        </Menu.Item>
      </Menu>
    )
  }
}

export default withRouter(RightMenu);

NavBar/Sections/RightMenu.js