Sp1/#566 cart page api

[gunom]

🔥 Related Issues

resolved #566

💜 작업 내용

• 장바구니 item 삭제 모달 API 연결
• 장바구니 수량 변경 API 연결
• 장바구니 결제 페이지(OrderPage) 에러 없이 연결되도록 연결 및 Order API 수정
• CompletePage로 이동 시 필드명 수정

✅ PR Point

const CartItem = ({
  id,
  mainImageUrl,
  name,
  price,
  originalPrice,
  count,
  handleClickQuantityButton,
}: {
  id: number;
  mainImageUrl: string;
  name: string;
  price: number;
  originalPrice: number;
  count: number;
  handleClickQuantityButton: (price: number) => void;
}) => {
  const [quantity, setQuantity] = useState(count);
  const [modalOn, setModalOn] = useState(false);
  const navigate = useNavigate();

  const fetchData = async () => {
    await api
      .patch(`/cart`, {
        cartCountReqs: [
          {
            cartId: id,
            count: quantity + 1,
          },
        ],
      })
      .then()
      .catch((err) => {
        navigate('/error');
      });
  };

  const [debouncedFetchData, setDebouncedFetchData] = useState(() => debounce(fetchData, 300));

  useEffect(() => {
    // quantity가 변경될 때마다 debouncedFetchData를 새로 설정
    setDebouncedFetchData(() => debounce(fetchData, 300));
    return () => {
      debouncedFetchData.cancel(); // 컴포넌트가 언마운트 될 때 debounce를 취소합니다
    };
  }, [quantity]); // 의존성 배열에 quantity 추가

  const handleClickPlusButton = (price: number) => {
    handleClickQuantityButton(price);
    setQuantity((prev) => prev + 1);
    debouncedFetchData();
  };

  const handleClickMinusButton = (price: number) => {
    if (quantity > 1) {
      handleClickQuantityButton(-price);
      setQuantity((prev) => prev - 1);
      debouncedFetchData();
    }
  };

  return (
    <St.Item>
      <St.ItemInformation>
        <St.TattooImage src={mainImageUrl} />
        <St.TitleSection>
          <St.TattooTitle>{name}</St.TattooTitle>
          <St.ItemPriceBox>
            <St.TattooPriceText>{price.toLocaleString()}원</St.TattooPriceText>
            <St.TattooOriginalPriceText>
              {originalPrice.toLocaleString()}원
            </St.TattooOriginalPriceText>
          </St.ItemPriceBox>
        </St.TitleSection>
      </St.ItemInformation>
      <St.ButtonSection>
        <IcCancelDark onClick={() => setModalOn(true)} />
        {modalOn && <DeleteCartModal setModalOn={setModalOn} id={id} />}
        <St.Stepper>
          {quantity === 1 ? (
            <IcMinusOneunder />
          ) : (
            <IcMinus onClick={() => handleClickMinusButton(price)} />
          )}
          <span>{quantity}</span>
          <IcPlus onClick={() => handleClickPlusButton(price)} />
        </St.Stepper>
      </St.ButtonSection>
    </St.Item>
  );
};

해당 부분에서 수량을 증가 시킬 시 debounce를 이용하여 일정 시간 이후 입력이 없을 시에만 서버와 API 통신을 진행하도록 했습니다. throttle, debounce 참고하세요.

// OrderPage
const OrderPage = () => {
  const location = useLocation();
  const state = location.state as { stickerId: number; count: number; shippingFee: number };
  const { response, error, loading } = useGetOrdersheet(
    state ? state : ({ stickerId: 0, count: 0 } as OrderSheetRequest),
  );

장바구니에서 넘어올 때는 state가 없기 때문에 이런 식으로 처리했습니다.

const useGetOrdersheet = ({ stickerId, count }: OrderSheetRequest) => {
  const navigate = useNavigate();

  const [response, setResponse] = useState<OrderSheetProps>();
  const [error, setError] = useState<AxiosError>();
  const [loading, setLoading] = useState(true);

  const url =
    stickerId && count
      ? `/order/ordersheet?stickerId=${stickerId}&count=${count}`
      : '/order/ordersheet';

  const fetchData = async () => {
    await api
      .get(url)

따라서 url도 stickerId와 count 유무로 다르게 지정했습니다.

const CompletePage = () => {
  const renderCompletePageHeader = () => {
    return <Header title='주문하기' />;
  };

  const location = useLocation();
  const { orderSheetStickersRes, orderAmountDetailRes } = location.state as {
    orderSheetStickersRes: orderSheetStickersResProps[];
    orderAmountDetailRes: orderAmountDetailResProps;
  };

  return (
    <PageLayout renderHeader={renderCompletePageHeader} footer={<CompleteFooter />}>
      <St.Container>
        <Result
          mainText={'결제가 완료되었어요'}
          description={'7일 내에 배송이 시작되며, 문자로 안내드려요'}
        />
        <St.Line />
        <St.Title>주문 정보</St.Title>
        {orderSheetStickersRes.map((item) => {
          return <ProductInfo key={item.name} orderSheetSticker={item} />;
        })}
        <St.LightLine />
        <St.PriceContainer>
          <PaymentMini orderAmountDetailRes={orderAmountDetailRes} />
        </St.PriceContainer>
      </St.Container>
    </PageLayout>
  );
};

CompletePage도 배열로 수행되도록 수정했습니다.

😡 Trouble Shooting

현재 장바구니를 삭제하고 화면을 reload해주는 방식을 사용하고 있습니다. 그러나 이게 사용성이 안좋아보이기도 해서 장바구니 item들을 전부 state로 관리하는게 맞을지 고민입니다.

const DeleteCartModal = ({ setModalOn, id }: DeleteCartModalProps) => {
  const navigate = useNavigate();

  const handleClickDeleteModal = async () => {
    await api
      .delete(`/cart/${id}`)
      .then(() => {
        setModalOn(false);
        window.location.reload();
      })
      .catch((err) => {
        console.log(err);
        navigate('/error');
      });
  };
  return (
    <ModalPortal>
      <EscapeModalForm
        onClose={() => setModalOn(false)}
        pageName={'CartPage'}
        title={'선택한 상품을 삭제하시나요?'}
        subTitle={'삭제하시면 결제 대상에서'}
        subTitle2={'해당 상품이 제외돼요'}
        continueBtn={'삭제하기'}
        stopBtn={'그만하기'}
        continueBtnFunc={() => handleClickDeleteModal()}
      />
    </ModalPortal>
  );
};

const CartItemSection = ({
  items,
  handleClickQuantityButton,
}: {
  items: CartItemProps[];
  handleClickQuantityButton: (price: number) => void;
}) => {
  return (
    <St.ItemSection>
      {items.map((item) => (
        <CartItem
          key={item.stickerId}
          id={item.cartId}
          name={item.name}
          price={item.discountPrice}
          originalPrice={item.price}
          mainImageUrl={item.mainImageUrl}
          count={item.count}
          handleClickQuantityButton={handleClickQuantityButton}
        />
      ))}
    </St.ItemSection>
  );
};

해당 item 삭제를 해야 함.

☀️ 스크린샷 / GIF / 화면 녹화

📚 Reference

• 구현에 참고한 링크 (필요한 경우만 작성하고 없으면 지우기)

[Arooming]

헉 수고하셨습니당 LGTM
트러블슈팅에 적어주신 내용은 저도 더 생각해볼게용

[Arooming]

요거 빈태그 없어도 되지 않을까요??

[Arooming]

오... 굿!

[Arooming]

콘솔 콘솔

[Arooming]

여기도 에러페이지로 이동하게 해줘야하지 않나용?!

Suggested change

	setError(err);
	setError(err);
	navigate('/error')

[lydiacho]

트러블 슈팅 관련 의견은 해당 부분에 리뷰 남겨두었습니다
수고하셨습니다 ! 💯

[lydiacho]

state를 넘겨주지 않고 별도 인자 없이 useGetOrdersheet을 호출하면 에러나는걸까요? 저는 처음에 이렇게 각각 0으로 지정해줄 필요 없이 아예 state 안넘겨주면 알아서 undefined 처리 될거라고 생각했는데 !

[gunom]

조건 한번 수정해볼게요~

[lydiacho]

👍

[lydiacho]

아 이부분을 반영 안했네요 감사합니다!

[lydiacho]

트러블 슈팅 관련해서 첨언하자면
구현 영상 보니까 사용자 경험이 많이 떨어지게 되는 것 같아서 reload는 안쓰는게 맞는 것 같고 그래서 일단 state로 관리하는게 괜찮아 보이는 것 같습니다 (물론 더 좋은 방법이 있으면 좋겠지만)
어차피 수량도 CartItem에서 state로 관리하고 있으니까 장바구니 아이템 정보 state를 객체배열로 만들어서 한 state로 수량 조절 및 삭제 다 관리해주는건 어떨까요?
quantity랑 item list 따로 관리하지 말고 아이템 id랑 quantity 프로퍼티 두개만 가져가서 삭제 통신 성공 시에 quantity 0으로 만들고 0인 애들은 렌더링 안하는 식으로 해주는 방식이 일단 당장 떠오르는 가장 기본적인방법? 인 것 같습니다!
(어차피 장바구니 페이지 들어올 때마다 새로 장바구니 목록 불러와서 state 초기화 시켜줄 테니까 삭제한 아이템이 quantity 0 상태로 정보 남아있는건 별로 신경쓰지 않아도 될 것 같아요!)

[gunom]

SP2로 가져가겠습니다. 혹은 면접 끝나고,,,

[Yeonseo-Jo]

수고하셨슴니다!

[Yeonseo-Jo]

interface로 빼주는게 가독성이 좋을것 같아용

[Yeonseo-Jo]

오 좋은 코드 배워갑니다

[Yeonseo-Jo]

여기도 복잡한 props type들은 interface로 따로 빼주면 더 가독성이 좋을것 같습니당

[Yeonseo-Jo]

요거 위에 props들의 type으로도 쓰이는것 같은데 type 파일에 빼두고 extends 해서 쓰거나 하면 좋을것 같습니다!

[Yeonseo-Jo]

저도 승희 의견에 동의합니다
reload보다는 state로 관리하는게 좋아 보여요!