🩺🍪 Dr.Tart - Retrospect (2)

전반적인 개요를 작성했으니...

이제 프로젝트를 진행하며 어려웠던 점을 남겨볼까 한다.

---

조건부 렌더링을 통한 Order 페이지 만들기

클론할 기존의 사이트의 장바구니와 결제 페이지의 레이아웃이 똑 닮았다.

같은 레이아웃 같은 CSS를 위해 파일을 두개씩 더 만들고 하는 것이 굉장히 비효율적이라고 생각하여,

같은 페이지 내에서 조건부 렌더링을 통해 효율적인 구성을 목표로 코딩을 하게 되었다.

그럼 어떤 식으로 코딩 할건데?

react-router의 useParams 훅을 이용하여 cart 페이지와 checkout 페이지를 구분할 수 있도록 하였고,

그에 따라 조건부로 뷰를 나타낼 수 있도록 처리를 하였다.

Order.js

import React, { useCallback, useEffect, useState } from 'react';
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
import Button from '../../components/Button/Button';
import Goods from './Goods/Goods';
import { API_ADDRESS } from '../../apiConfig';
import './Order.scss';

const Order = () => {
  const [cartList, setCartList] = useState([]);
  const { pageType } = useParams();

  // ...
  
  useEffect(() => {
    if (pageType === 'cart') {
      (async () => {
        setIsOrderLoading(true);
        await fetchCartData();
        setIsOrderLoading(false);
      })();
    } else {
      setCartList(() => location.state.cartList);
      setTotalPrice(() => 0);
      location.state.cartList.forEach(({ price, quantity }) => {
        setTotalPrice(prev => prev + price * quantity);
      });
    }
  }, [fetchCartData, pageType, location]);

  // ...

  return (
    <div className="order">
      <div className="pageTitleArea">
        <div className="progressNav">
          <ul className="progress">
            <li className="stepOne">
              <p>01 장바구니</p>
              {pageType === 'cart' && <span className="line" />}
            </li>
            <li className="stepTwo">
              <p>02 결제진행</p>
              {pageType === 'check' && <span className="line" />}
            </li>
            <li className="stepThree">
              <p>03 주문완료</p>
            </li>
          </ul>
        </div>
        <div className="pageTitle">
          <h1 className="orderTitle">
            {pageType === 'cart' && '장바구니'}
            {pageType === 'check' && '결제진행'}
          </h1>
        </div>
      </div>
      <div className="pageContent">
        
        {// ...}
          
        <div className="orderTotal">
          {pageType !== 'cart' && (
            <div className="orderInfoContainer">
              <div className="selectBox">
                <button className="selectedValue">신용카드</button>
                <ul className="valueList">
                  <li>신용카드</li>
                  <li>카카오페이</li>
                  <li>네이버페이</li>
                  <li>휴대폰결제</li>
                  <li>포인트</li>
                </ul>
              </div>
              <div className="mustCheck">
                <input
                  className="checkBox"
                  type="checkbox"
                  value={isTermsChecked}
                  onChange={() => setIsTermsChecked(prev => !prev)}
                />
                <label className="label" htmlFor="agree">
                  구매하실 상품의 판매조건을 명확히 확인하였으며, 이에
                  동의합니다.
                  <br />
                  (전자상거래법 제8조 2항)
                </label>
              </div>
            </div>
          )}

          <div className="orderCheckButtonWrapper">
            {pageType === 'cart' ? (
              <Link to="/order/check" state={{ cartList }}>
                <Button>장바구니 상품 주문</Button>
              </Link>
            ) : (
              <Button btnOnClick={onOrder}>결제하기</Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};
        
export default Order;

물론 장바구니 혹은 결제서에 담겨있는 상품을 나타내는 컴포넌트 <Goods /> 또한 조건부 렌더링을 걸어주었다.

Goods.js

import React from 'react';
import NumBtn from '../../../components/ProductInfoBox/NumBtn/NumBtn';
import { ReactComponent as Xbutton } from '../../../assets/Xbutton.svg';
import './Goods.scss';

const Goods = ({
  product: { cart_id, korean_name, thumbnail_image_url, price, quantity },
  pageType,
  deleteGoods,
  adjustTotalPrice,
  adjustCart,
}) => {
  const adjustQuantity = operator => {
    if (operator === 'minus') {
      if (quantity > 1) {
        adjustCart(cart_id, quantity - 1);
        adjustTotalPrice(operator, price);
      }
    } else if (operator === 'plus') {
      adjustCart(cart_id, quantity + 1);
      adjustTotalPrice(operator, price);
    }
  };

  return (
    <tbody className="goods">
      <tr className="tableRow">
        <td className="tableBody image">
          <div className="imageContainer">
            <img
              className="goodsImage"
              alt="example_goods"
              src={thumbnail_image_url}
            />
          </div>
        </td>
        <td className="tableBody goods">
          <p>{korean_name}</p>
        </td>
        <td className="tableBody quantity">
          {pageType === 'cart' ? (
            <NumBtn
              minusOne={() => adjustQuantity('minus')}
              plusOne={() => adjustQuantity('plus')}
              numValue={quantity}
            />
          ) : (
            quantity
          )}
        </td>
        <td className="tableBody price">
          <p>{price * quantity}원</p>
        </td>
        <td className="tableBody goodsButton">
          {pageType === 'cart' && (
            <button
              className="deleteButton"
              onClick={() => deleteGoods(cart_id)}
            >
              <Xbutton />
            </button>
          )}
        </td>
      </tr>
    </tbody>
  );
};

export default Goods;

장바구니 페이지일 경우 삭제 버튼이 활성화 될 수 있도록 하였고,

결제 진행버튼일 때는 단순한 컴포넌트로 작동하도록 하였다.

Query를 이용한 결제정보 id 넘겨주기

프로젝트 최종 Merge 한 시간 전 백엔드의 정현님이 마지막 결제정보를 받는 로직에 변경이 생겨서 앞단에서도 수정을 해주실 수 있겠냐는 질문을 하셨다.

시간이 촉박했지만, 우리팀 백엔드를 위해서 좀만 더 힘내기로 했다.

Order.js

const onOrder = async () => {
    if (isTermsChecked) {
      const orderTable = cartList.map(product => ({
        product_id: product.product_id,
        quantity: product.quantity,
      }));

      const data = await fetch(API_ADDRESS.order_checkout, {
        method: 'POST',
        headers: {
          Authorization: token,
        },
        body: JSON.stringify(orderTable),
      });

      const res = await data.json();

      navigate(`/order/confirm?order=${res.message}`);
    } else {
      window.alert('약관에 동의해주셔야 결제가 가능합니다.');
    }
  };

원래 결제 이후 결제 정보를 받는 페이지에서 해당 유저의 가장 최근 결제 정보를 받아오는 방식이었지만,
정보를 정확하게 보내줄 수 있도록 백엔드의 수정이 있었다.

그것을 정확하게 가져오기 위해 쿼리스트링으로 결제정보 테이블의 해당 결제 정보 id를 받아 결제 완료 페이지로 넘겨줄 수 있도록 수정을 하였다.

이 후 결제 완료 페이지에서는 id를 이용해 결제정보 테이블에서 해당하는 결제정보를 불러올 수 있도록 하였다.