[TIL/React] 2023/10/10

CartPage 시작 🟢

detail page에 있는 내용이다. 바로구매를 클릭하면 가장 먼저 if 문을 통해 로그인 여부를 확인한다. 로그인이 되어 있지 않은 상태라면 로그인 페이지로 이동하고, 로그인이 완료된 상태라면 쇼핑카트 페이지로 이동한다. 이때 이동에 앞서 dispatch를 통해 DetailData에 category key를 추가한 데이터를 getCartData라는 액션 함수로 전달하게 된다.

CartPage 🟢

영역은 크게 세 파트로 구성된다. (제목, 데이터, 총합)이 바로 그것이다.
dataArea와 totalDataArea가 componentWrapper 내부에서 3대 1의 비율로 영역을 차지하고 있다.

dataArea는 다음과 같이 구성된다.

상품정보, 수량, 가격이 기재된 첫 번째 행의 비율과 동일하게, 하단에 추가될 박스의 비율을 조정한 모습이다. 세 영역에서는 useSelector를 통해 가져온 데이터를 적절히 보여주고 있다.

위 코드는 현재로서 가장 문제가 많은 부분이다. 수량에 따른 가격의 총합을 보여줘야 한다.

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import styled from "styled-components";
import { calElemTotalPrice } from "../../modules/cartSlice";
import { shoppingData } from "../../data/ShoppingCategory_Pork";
import { useLocation } from "react-router-dom";
import { useParams } from "react-router-dom";
import { splitPrice } from "../../utils/commonModule";

const CounterContainer = styled.div`
  display: flex;
  align-items: center;
`;

const Button = styled.button`
  padding: 10px 20px;
  font-size: 1.5em;
`;

const Display = styled.div`
  padding: 10px;
  font-size: 1.5em;
  margin: 0 20px;
`;

const Counter = () => {
  const [count, setCount] = useState(1);
  const { id } = useParams();
  const dispatch = useDispatch();
  const location = useLocation();
  const category = location?.state;
  const MapData = shoppingData[category];
  const DetailData = MapData?.find((elem) => elem?.id === id);
  const purePrice = splitPrice(DetailData?.price);

  const elemTotalPrice = purePrice * (count + 1);

  const updateCount = (st) => {
    dispatch(calElemTotalPrice(st));
  };

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const handleDecrement = () => {
    if (count > 1) {
      setCount((prevCount) => prevCount - 1);
    }
  };

  return (
    <CounterContainer>
      <Button
        onClick={() => {
          updateCount(elemTotalPrice);
          handleDecrement();
        }}
      >
        -
      </Button>
      <Display>{count}</Display>
      <Button
        onClick={() => {
          updateCount(elemTotalPrice);
          handleIncrement();
        }}
      >
        +
      </Button>
    </CounterContainer>
  );
};

export default Counter;

요소의 total price를 구해서 updateCount라는 액션 함수에 전달하고, 해당 값으로 상태를 업데이트 한다는 논리이다. 문제는 category별로 접근하지 않아서 나머지 요소들의 가격이 동일하게 나타난다. 무슨 말일까?

그저 엉망이라는 소리다. 내일은 이 부분부터 해결하겠다.