TIL - 221006

22.10.06 목요일

📝 장바구니 기능구현

✏️ CartMain.js

일단 임의의 데이터객체를 배열에 담아놓았다.

 const productList = [
    {
      name: "[전북] 서영암농협 학이 머문 유기농 쌀(일 미) 4kg, 2021년산...",
      price: 9500,
      discount: 10,
      img: "/img/cart1.png",
    },
  ];
  
   return (
    <MainBox>
      <CartMainBox>
        <h1>장바구니</h1>
        <CartTitle></CartTitle>
        {productList.map((product, index) => {
          return <CartItem product={product} key={index}></CartItem>;
        })}
        
        // 장바구니 페이지의 자식 컴포넌트에 객체를 담아놓은 배열을 통째로 props로 내려줬다. 

✏️ CartItem.js

• props로 받아온 데이터를 기반으로 장바구니 값을 설정해주었다.

• + , - 버튼으로 수량이 변경될 때마다, 값이 변할 수 있게 설정하였다.

  const CartItem = ({ product }) => {
   //수량
   const [number, setNumber] = useState(1);
  
   // 값 바뀔때마다 number로 받고 있는 input창 변화
   const onChange = (e) => {
     if (e.target.value > 0) {
       setNumber(e.target.value);
     }
   };
  
   // 플러스버튼 누르면 1씩 증가
   const clickPlus = () => {
     setNumber(number + 1);
   };
  
   // 마이너스버튼 누르면 1씩 감소
   const clickMinus = () => {
     if (number > 1) {
       setNumber(number - 1);
     }
   };
  
   return (
     <>
       <ItemBox>
         <div>
           <input type="checkbox" name="product"></input>
         </div>
         <div>
           <img src={product.img} alt="productimage"></img>
         </div>
         <div>{product.name}</div>
         <div>{(product.price * number).toLocaleString()}원</div>
         <CountBox>
           <button onClick={clickMinus}>-</button>
           <input value={number} onChange={onChange}></input>
           <button onClick={clickPlus}>+</button>
         </CountBox>
         <div>
           {((product.price / product.discount) * number).toLocaleString()}원
         </div>
         <div>
           {(
             (product.price - product.price / product.discount) *
             number
           ).toLocaleString()}
           원
         </div>
         <div>
           <button>바로구매</button>
           <div>
             <div>
               <img src="/img/cart_heart.png" alt="icon"></img>
             </div>
             <div>
               <img src={"img/cart_trash.png"} alt="icon"></img>
             </div>
           </div>
         </div>
       </ItemBox>
       <CartPrice product={product} number={number}></CartPrice>
     </>
   );
  };

✏️  cartPrice.js
- 여기서도 객체를 담은 값을 사용해야해서 pros로 값을 내려줬고,
- 제품 값에 따라 배송비 설정이 다르게 하도록 하였다.


const CartPrice = ({ product, number }) => {
  let shipping = 2500;
  if (product.price * number < 50000) {
    shipping = 2500;
  } else {
    shipping = 0;
  }

  return (
    <MainBox>
      <Pricebox>
        <p>상품금액</p>
        <p>{(product.price * number).toLocaleString()}원</p>
      </Pricebox>
      <OperatorBox>
        <p>-</p>
      </OperatorBox>
      <Pricebox>
        <p>할인금액</p>
        <p>
          {" "}
          {((product.price / product.discount) * number).toLocaleString()}원
        </p>
      </Pricebox>
      <OperatorBox>
        <p>+</p>
      </OperatorBox>
      <Pricebox>
        <p>배송비</p>
        <p>{shipping.toLocaleString()}원</p>
      </Pricebox>
      <OperatorBox>
        <p>=</p>
      </OperatorBox>
      <Pricebox>
        <p>결제금액</p>
        <p>
          {(
            (product.price - product.price / product.discount) * number +
            shipping
          ).toLocaleString()}
          원
        </p>
      </Pricebox>
    </MainBox>
  );
};

💬 완벽한 구현은 아니지만, 할 수 있는거부터 하나씩 기능 구현을 해나가기로 했다.
마크업할때 그냥 냅다 데이터를 집어넣었는데, 팀원의 설명으로 기능 구현을 할 수 있게되었다.