🎯 장바구니 목록과 주문서 작성 페이지를 제작합니다.

📗 Today I Learned

장바구니 목록

Cart.tsx

import styled from 'styled-components';
import Title from '../components/common/Title';
import CartItem from '../components/cart/CartItem';
import { useCart } from '../hooks/useCart';
import { useMemo, useState } from 'react';
import Empty from '../components/common/Empty';
import { FaShoppingCart } from 'react-icons/fa';
import CartSummary from '../components/cart/CartSummary';
import Button from '../components/common/Button';
import { useAlert } from '../hooks/useAlert';
import { OrderSheet } from '../models/order.model';
import { useNavigate } from 'react-router-dom';
import { Theme } from '../style/theme';

export default function Cart() {
  const { carts, isEmpty, deleteCartItem } = useCart();
  const [checkedItems, setCheckedItems] = useState<number[]>([]);
  const { showAlert, showConfirm } = useAlert();
  const navigate = useNavigate();
 
  const handleCheck = (id: number) => {
    if (checkedItems.includes(id)) {
      setCheckedItems(checkedItems.filter((item) => item !== id));
    } else {
      setCheckedItems([...checkedItems, id]);
    }
  };
  
  const handleItemDelete = (id: number) => {
    deleteCartItem(id);
  };
  
  const totalQuantity = useMemo(() => {
    return carts.reduce((acc, cart) => {
      if (checkedItems.includes(cart.id)) {
        return acc + cart.quantity;
      }
      return acc;
    }, 0);
  }, [carts, checkedItems]);
  
  const totalPrice = useMemo(() => {
    return carts.reduce((acc, cart) => {
      if (checkedItems.includes(cart.id)) {
        return acc + cart.price * cart.quantity;
      }
      return acc;
    }, 0);
  }, [carts, checkedItems]);
  
  const handleOrder = () => {
    if (checkedItems.length === 0) {
      showAlert('주문할 상품을 선택해주세요.');
      return;
    }

    const orderData: Omit<OrderSheet, 'delivery'> = {
      items: checkedItems,
      totalPrice,
      totalQuantity,
      firstBookTitle: carts[0].title,
    };

    showConfirm('주문하시겠습니까?', () => {
      navigate('/order', { state: orderData });
    });
  };

  return (
    <>
      <Title size='large'>장바구니</Title>
      <StyledCart>
        {!isEmpty && (
          <>
            <div className='content'>
              {carts.map((cart) => (
                <CartItem
                  key={cart.id}
                  cart={cart}
                  checkedItems={checkedItems}
                  onCheck={handleCheck}
                  onDelete={handleItemDelete}
                />
              ))}
            </div>
            <div className='summary'>
              <CartSummary
                totalPrice={totalPrice}
                totalQuantity={totalQuantity}
              />
              <Button size='large' scheme='primary' onClick={handleOrder}>
                주문하기
              </Button>
            </div>
          </>
        )}
        {isEmpty && (
          <Empty
            icon={<FaShoppingCart />}
            title='장바구니가 비었습니다.'
            description='장바구니를 채워보세요.'
          />
        )}
      </StyledCart>
    </>
  );
}

export const StyledCart = styled.div<{ theme: Theme }>`
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 24px 0 0 0;

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .summary {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .order-info {
    h1 {
      padding: 0 0 24px 0;
    }

    border: 1px solid ${({ theme }) => theme.color.border};
    border-radius: ${({ theme }) => theme.borderRadius.default};
    padding: 12px;
  }

  .delivery {
    fieldset {
      border: 0;
      margin: 0;
      padding: 0 0 12px 0;
      display: flex;
      justify-content: start;
      gap: 8px;

      label {
        width: 80px;
      }

      .input {
        flex: 1;
        input {
          width: 100%;
        }
      }
    }

    .error-text {
      color: red;
      margin: 0;
      padding: 0 0 12px 0;
      text-align: right;
    }
  }
`;

• useCart() : carts(장바구니 목록), isEmpty(비었는지 여부), deleteCartItem()(삭제 함수)를 가져옵니다.

• useState<number[]>([]) : 체크된 상품의 ID를 숫자로 된 배열로 관리합니다.

• useAlert() : showAlert()와 showConfirm()으로 알림창이나 확인창을 띄웁니다.

• useNavigate() : React Router에서 제공하는 훅으로, 페이지 이동을 돕습니다.

• handleCheck : 사용자가 체크박스를 누르면 해당 상품 ID를 checkedItems에서 추가하거나 제거합니다.

• handleItemDelete : 훅을 통해 가져온 deleteCartItem()(삭제 함수)를 이용해서 상품을 삭제합니다.

• totalQuantity : 장바구니목록과 체크된 목록이 바뀌면, 장바구니 아이템이 체크된 아이템이면 수량을 계산합니다.

🤔 useMemo()는 어떤 훅이지?

import { useMemo } from 'react';

const 변수명 = useMemo(() => {
  // "함수"
}, ["의존성 배열"]);

컴포넌트가 리렌더링될 때, 불필요한 계산을 방지하기 위한 훅입니다.
"의존성 배열"이 바뀔 때마다 "함수"가 실행되고, 보통 계산 비용이 큰 연산이나 데이터 필터링을 수행합니다.

• totalPrice : 장바구니목록과 체크된 목록이 바뀌면, 장바구니 아이템이 체크된 아이템이면 가격을 계산합니다.

• handleOrder : 체크된 상품이 없으면 경고창을 띄우고, 체크된 상품이 있다면, 확인창 띄운 뒤에 /order 페이지로 이동하면서 orderData 데이터를 함께 넘깁니다.

---

CartItem.tsx

import styled from 'styled-components';
import { Cart } from '../../models/cart.model';
import Button from '../common/Button';
import Title from '../common/Title';
import { formatNumber } from '../../utils/format';
import { Theme } from '../../style/theme';
import CheckIconButton from './CheckIconButton';
import { useMemo } from 'react';
import { useAlert } from '../../hooks/useAlert';

interface Props {
  cart: Cart;
  checkedItems: number[];
  onCheck: (id: number) => void;
  onDelete: (id: number) => void;
}

export default function CartItem({
  cart,
  checkedItems,
  onCheck,
  onDelete,
}: Props) {
  const { showConfirm } = useAlert();

  const isChecked = useMemo(() => {
    return checkedItems.includes(cart.id);
  }, [checkedItems, cart.id]);

  const handleCheck = () => {
    onCheck(cart.id);
  };

  const handleDelete = () => {
    showConfirm('정말 삭제하시겠습니까?', () => {
      onDelete(cart.id);
    });
  };

  return (
    <StyledCartItem>
      <div className='info'>
        <div className='check'>
          <CheckIconButton isChecked={isChecked} onCheck={handleCheck} />
        </div>
        <div>
          <Title size='medium' color='text'>
            {cart.title}
          </Title>
          <p className='summary'>{cart.summary}</p>
          <p className='price'>{formatNumber(cart.price)} 원</p>
          <p className='quantity'>{cart.quantity} 권</p>
        </div>
      </div>
      <Button size='medium' scheme='normal' onClick={handleDelete}>
        장바구니 삭제
      </Button>
    </StyledCartItem>
  );
}

const StyledCartItem = styled.div<{ theme: Theme }>`
  display: flex;
  justify-content: space-between;
  align-items: start;
  border: 1px solid ${({ theme }) => theme.color.border};
  border-radius: ${({ theme }) => theme.borderRadius.default};
  padding: 12px;

  .info {
    display: flex;
    align-items: start;
    flex: 1;

    .check {
      width: 40px;
      flex-shrink: 0;
      margin-top: 3px;
    }
  }

  p {
    margin: 0;
    padding: 0 0 8px 0;
  }
`;

• useAlert() : showConfirm()으로 확인창을 띄웁니다.

• isChecked : checkedItems 와 cart.id 가 바뀔 때 마다 checkedItems 안에 이 cart.id가 들어있는지 확인합니다.

• handleCheck : 사용자가 체크박스를 클릭하면 onCheck(cart.id)를 호출합니다.

🛣️ 어떻게 연결되는 걸까?

CheckIconButton 클릭 → handleCheck() 실행 → onCheck(cart.id) 실행 → Cart.tsx의 handleCheck(id) 실행 → checkedItems 상태가 변경

• handleDelete : 확인창을 띄운 후, onDelete(cart.id)를 호출합니다.

CheckIconButton.tsx

import { FaRegCheckCircle, FaRegCircle } from 'react-icons/fa';
import styled from 'styled-components';

interface Props {
  isChecked: boolean;
  onCheck: () => void;
}

export default function CheckIconButton({ isChecked, onCheck }: Props) {
  return (
    <StyledCheckIconButton onClick={onCheck}>
      {isChecked ? <FaRegCheckCircle /> : <FaRegCircle />}
    </StyledCheckIconButton>
  );
}

const StyledCheckIconButton = styled.button`
  background: none;
  border: 0;
  cursor: pointer;

  svg {
    width: 24px;
    height: 24px;
  }
`;

• isChecked : true면 체크된 동그라미를 보여주고, false면 체크 안 된 동그라미를 보여줍니다.

• onCheck : 버튼 클릭 시 실행되는 함수로 CartItem에서 넘겨준 handleCheck를 뜻합니다.

---

CartSummary.tsx

import styled from 'styled-components';
import { formatNumber } from '../../utils/format';
import { Theme } from '../../style/theme';

interface Props {
  totalQuantity: number;
  totalPrice: number;
}

export default function CartSummary({ totalQuantity, totalPrice }: Props) {
  return (
    <StyledCartSummary>
      <h1>주문 요약</h1>
      <dl>
        <dt>총 수량</dt>
        <dd>{totalQuantity} 권</dd>
      </dl>
      <dl>
        <dt>총 금액</dt>
        <dd>{formatNumber(totalPrice)} 원</dd>
      </dl>
    </StyledCartSummary>
  );
}

const StyledCartSummary = styled.div<{ theme: Theme }>`
  border: 1px solid ${({ theme }) => theme.color.border};
  border-radius: ${({ theme }) => theme.borderRadius.default};
  padding: 12px;
  width: 240px;

  h1 {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }
  dl {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    dd {
      font-weight: 700;
    }
  }
`;

• Cart.tsx에서 계산한 totalQuantity와 totalPrice를 받아와서 요약 정보를 보여줍니다.

• <dl> 태그는 definition list를 말하고, 정보의 제목(<dt>)과 내용(<dd>) 짝으로 구성된 목록입니다.
  출처: mdn

실행 화면

---

주문서

Order.tsx

import { useLocation, useNavigate } from 'react-router-dom';
import { StyledCart } from './Cart';
import Title from '../components/common/Title';
import CartSummary from '../components/cart/CartSummary';
import Button from '../components/common/Button';
import InputText from '../components/common/InputText';
import { useForm } from 'react-hook-form';
import { Delivery, OrderSheet } from '../models/order.model';
import FindAddressButton from '../components/order/FindAddressButton';
import { order } from '../api/order.api';
import { useAlert } from '../hooks/useAlert';

interface DeliveryForm extends Delivery {
  addressDetail: string;
}

export default function Order() {
  const { showAlert, showConfirm } = useAlert();
  const navigate = useNavigate();
  const location = useLocation();
  const orderDataFromCart = location.state;
  const { totalPrice, totalQuantity, firstBookTitle } = orderDataFromCart;
  
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm<DeliveryForm>();
  
  const handlePay = (data: DeliveryForm) => {
    const orderData: OrderSheet = {
      ...orderDataFromCart,
      delivery: {
        ...data,
        address: `${data.address} ${data.addressDetail}`,
      },
    };

    showConfirm('주문을 진행하시겠습니까?', () => {
      order(orderData).then(() => {
        showAlert('주문이 처리되었습니다.');
        navigate('/orderlist');
      });
    });
  };

  return (
    <>
      <Title size='large'>주문서 작성</Title>
      <StyledCart>
        <div className='content'>
          <div className='order-info'>
            <Title size='medium' color='text'>
              배송 정보
            </Title>
            <form className='delivery'>
              <fieldset>
                <label>주소</label>
                <div className='input'>
                  <InputText
                    inputType='text'
                    {...register('address', { required: true })}
                  />
                </div>
                <FindAddressButton
                  onCompleted={(address) => {
                    setValue('address', address);
                  }}
                />
              </fieldset>
              {errors.address && (
                <p className='error-text'>주소를 입력해주세요.</p>
              )}
              <fieldset>
                <label>상세 주소</label>
                <div className='input'>
                  <InputText
                    inputType='text'
                    {...register('addressDetail', { required: true })}
                  />
                </div>
              </fieldset>
              {errors.addressDetail && (
                <p className='error-text'>상세 주소를 입력해주세요.</p>
              )}
              <fieldset>
                <label>수령인</label>
                <div className='input'>
                  <InputText
                    inputType='text'
                    {...register('receiver', { required: true })}
                  />
                </div>
              </fieldset>
              {errors.receiver && (
                <p className='error-text'>수령인을 입력해주세요.</p>
              )}
              <fieldset>
                <label>전화번호</label>
                <div className='input'>
                  <InputText
                    inputType='text'
                    {...register('contact', { required: true })}
                  />
                </div>
              </fieldset>
              {errors.contact && (
                <p className='error-text'>전화번호를 입력해주세요.</p>
              )}
            </form>
          </div>
          <div className='order-info'>
            <Title size='medium' color='text'>
              주문 상품
            </Title>
            <strong>
              {firstBookTitle} 등 총 {totalQuantity} 권
            </strong>
          </div>
        </div>
        <div className='summary'>
          <CartSummary totalPrice={totalPrice} totalQuantity={totalQuantity} />
          <Button
            size='large'
            scheme='primary'
            onClick={handleSubmit(handlePay)}
          >
            결제하기
          </Button>
        </div>
      </StyledCart>
    </>
  );
}

• orderDataFromCart : Cart.tsx에서 navigate('/order', { state: orderData })로 넘긴 데이터를 받아옵니다.

  • items, totalPrice, totalQuantity, firstBookTitle 정보가 담겨있습니다.

• register로 input 연결, errors로 에러 처리, setValue는 주소 찾기 후 값 넣을 때 사용합니다.

🤔 useForm()는 어떤 훅이지?

React Hook Form 에서 제공하는 폼 상태 관리용 훅입니다.
HTML <form> 안에서 입력값들을 편하게 다루고, 검증도 쉽게 할 수 있도록 도와줍니다.

<InputText {...register('address', { required: true })} />

• input을 등록(register)해서 상태를 관리하게 해줍니다.

onClick={handleSubmit(handlePay)}

• 유효성 검사를 먼저 하고, 통과하면 handlePay 실행합니다.
• ✨ handlePay 함수만 넘기면 그 안에 data: DeliveryForm이 자동으로 전달됩니다.

{errors.address && <p>주소를 입력해주세요.</p>}

• 유효성 검사 실패 시 에러 정보를 표시합니다.

<FindAddressButton
  onCompleted={(address) => {
    setValue('address', address);
  }}
/>

• 주소 검색해서 찾은 주소를 폼 필드에 직접 넣어줄 때 사용합니다.

• handlePay : 배송 정보와 장바구니 데이터를 합쳐서 orderData를 만들고 API (order()) 호출 후 성공하면 성공 메세지를 보여주고 /orderlist 페이지로 이동합니다.

---

FindAddressButton.tsx

import Button from '../common/Button';
import { useEffect } from 'react';

interface Props {
  onCompleted: (address: string) => void;
}

const SCRIPT_URL =
  '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';

export default function FindAddressButton({ onCompleted }: Props) {
  const handleOpen = () => {
    new window.daum.Postcode({
      oncompleted: (data: any) => {
        onCompleted(data.address as string);
      },
    }).open();
  };

  useEffect(() => {
    const script = document.createElement('script');
    script.src = SCRIPT_URL;
    script.async = true;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    <Button type='button' size='medium' scheme='normal' onClick={handleOpen}>
      주소 찾기
    </Button>
  );
}

• onCompleted : 주소 선택이 완료되었을 때 실행할 콜백 함수로 Order.tsx에서 setValue('address', 주소)로 연결합니다.

• handleOpen : window.daum.Postcode()는 다음에서 제공하는 우편번호 검색 팝업입니다.

  • 팝업에서 주소를 선택하면 oncompleted 콜백이 실행되고, 그 안에서 선택한 주소(data.address)를 onCompleted()로 전달해줍니다.

• useEffect : 컴포넌트가 처음 마운트될 때에만 다음 주소 검색 스크립트를 불러옵니다. document.head에 직접 <script> 태그를 삽입하고, 컴포넌트가 사라질 때는 제거합니다.

📬 다음 우편번호 서비스 이용 방법

1. cdn 링크를 추가합니다.

<head> 태그에 <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> 를 삽입합니다.

2. 글로벌하게 타입을 추가합니다.

// window.d.ts
interface Window {
  daum: {
    Postcode: any;
  };
}

window.daum은 Daum 주소 검색 API가 스크립트를 통해 런타임에 전역으로 주입되는 객체이므로 컴파일 에러가 나기 때문에 타입을 정의해줍니다.

3. oncomeplete : 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성합니다.

new window.daum.Postcode({
    oncomplete: function(data) {
        //data는 사용자가 선택한 주소 정보를 담고 있는 객체
      // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
    }
}).open();

실행 화면

---

주문 내역

OrderList.tsx

import styled from 'styled-components';
import Title from '../components/common/Title';
import { useOrders } from '../hooks/useOrders';
import { Theme } from '../style/theme';
import { formatDate, formatNumber } from '../utils/format';
import Button from '../components/common/Button';
import React from 'react';

export default function OrderList() {
  const { orders, selectedItemId, selectOrderItem } = useOrders();

  return (
    <>
      <Title size='large'>주문 내역</Title>
      <StyledOrderList>
        <table>
          <thead>
            <tr>
              <th>id</th>
              <th>주문일자</th>
              <th>주소</th>
              <th>수령인</th>
              <th>전화번호</th>
              <th>대표상품명</th>
              <th>수량</th>
              <th>금액</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {orders.map((order) => (
              <React.Fragment key={order.id}>
                <tr>
                  <td>{order.id}</td>
                  <td>{formatDate(order.createdAt, 'YYYY.MM.DD')}</td>
                  <td>{order.address}</td>
                  <td>{order.receiver}</td>
                  <td>{order.contact}</td>
                  <td>{order.bookTitle}</td>
                  <td>{order.totalQuantity} 권</td>
                  <td>{order.totalPrice} 원</td>
                  <td>
                    <Button
                      size='small'
                      scheme='normal'
                      onClick={() => selectOrderItem(order.id)}
                    >
                      자세히
                    </Button>
                  </td>
                </tr>
                {selectedItemId === order.id && (
                  <tr>
                    <td></td>
                    <td colSpan={8}>
                      <ul className='detail'>
                        {order?.detail &&
                          order.detail.map((item) => (
                            <li key={item.bookId}>
                              <div>
                                <span>{item.title}</span>
                                <span>{item.author}</span>
                                <span>{formatNumber(item.price)} 원</span>
                              </div>
                            </li>
                          ))}
                      </ul>
                    </td>
                  </tr>
                )}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </StyledOrderList>
    </>
  );
}

const StyledOrderList = styled.div<{ theme: Theme }>`
  padding: 24px 0 0 0;

  table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid ${({ theme }) => theme.color.border};
    border-bottom: 1px solid ${({ theme }) => theme.color.border};
  }

  th,
  td {
    padding: 16px;
    border-bottom: 1px solid ${({ theme }) => theme.color.border};
    text-align: center;
  }

  .detail {
    margin: 0;
    li {
      list-style: square;
      text-align: left;
      div {
        display: flex;
        padding: 8px 12px;
        gap: 8px;
      }
    }
  }
`;

• useOrders()라는 커스텀 훅을 사용해서 orders(주문 리스트 배열), selectedItemId(선택된 주문의 id), selectOrderItem(주문 상세 정보 불러오는 함수)를 가져옵니다.

• 첫번째 <tr> 태그는 주문 요약 정보를 표기하고, 두 번째 <tr> 태그는 해당 주문이 선택된 경우에만 상세 아이템들 출력합니다.

  • <table>은 표의 시작, <thead>는 테이블의 제목 영역,<tr>은 한 줄, <th>은 제목용 셀, <tbody>은 내용 영역, <td>은 실제 데이터 들어가는 칸을 말합니다.
    
    출처: mdn

✨ map으로 돌릴 때에는 key 값이 필요하기 때문에 React.Fragment를 써서 <tr> 2개를 묶어주어야 합니다.

실행 화면

---

✏️ 회고

설명없이 넘어갔던 부분들을 왜 쓰는지 정리하면서 적으니 더 이해가 쉽게 되고 왜 그렇게 적었는지 더 깔끔하게 이해가 되는 것 같다.