• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• Shopping-Cart-master
  • src
    • services
      • dummyData
        • productItems.ts
        • index.ts
        • coupons.ts
      • productService
        • index.ts
        • productService.ts
      • storageService
        • index.ts
        • storageService.ts
      • index.ts
    • epic.ts
    • pages
      • cart
        • index.ts
        • Cart.tsx
      • products-list
        • index.ts
        • ProductsList.tsx
      • index.ts
    • reducers
      • couponReducer
        • index.ts
        • couponReducer.ts
      • selector.ts
      • index.ts
      • cartedProductReducer
        • index.ts
        • cartedProductReducer.ts
      • paymentCartedProductReducer
        • paymentCartedProductReducer.ts
        • index.ts
      • productReducer
        • index.ts
        • productReducer.ts
      • actions.ts
    • index.tsx
    • containers
      • index.ts
    • models
      • index.ts
      • coupon-model.ts
      • product-model.ts
    • components
      • MainFooter
        • MainFooter.tsx
        • index.ts
      • InfoModal
        • index.ts
        • InfoModal.tsx
      • ConfirmModal
        • index.ts
        • ConfirmModal.tsx
      • MainHeader
        • MainHeader.tsx
        • index.ts
      • NomalLayout
        • NomalLayout.tsx
        • index.ts
      • PriceLabel
        • PriceLabel.tsx
        • index.ts
      • index.ts
      • PageTitle
        • PageTitle.tsx
        • index.ts
      • CartTable
        • index.ts
        • CartTable.tsx
      • ProductCard
        • ProductCard.tsx
        • index.ts
      • CouponTag
        • index.ts
        • CouponTag.tsx
      • CartFinalPriceTable
        • index.ts
        • CartFinalPriceTable.tsx
      • LoadingSpin
        • index.ts
        • LoadingSpin.tsx
      • NavLinkIconButton
        • index.ts
        • NavLinkIconButton.tsx
    • index.html
    • routes
      • index.ts
      • Routes.tsx
      • const.ts
  • .prettierrc
  • LICENSE
  • .eslintrc
  • webpack.config.js
  • babel.config.js
  • README.md
  • package.json
  • tsconfig.json
  • .gitignore

import React, { useState, useEffect, useCallback } from 'react';
import { Row, Col, Button, Divider } from 'antd';
import { NavLink } from 'react-router-dom';
import { PRODUCTS_LIST_PATH } from 'routes';
import {
  PageTitle,
  CartTable,
  CartFinalPriceTable,
  LoadingSpin,
  InfoModal,
} from 'components';
import { storageService } from 'services';
import { useDispatch, useSelector } from 'react-redux';
import {
  fetchCartedProductListAsync,
  fetchCartedProductListEditAsync,
  fetchPaymentCartedProductListAsync,
} from 'reducers/actions';
import { cartedProductSelector, paymentCartedProductSelector } from 'reducers';
import { ProductModel } from 'models';

/**
 * @description 장바구니 페이지
 */
export const Cart = () => {
  const dispatch = useDispatch();
  const { isLoading, items } = useSelector(cartedProductSelector);
  const { tableDataSource, recommend } = useSelector(
    paymentCartedProductSelector,
  );

  useEffect(() => {
    if (storageService.getItem('cart-class101')) {
      dispatch(
        fetchCartedProductListAsync.request({
          productIdList: JSON.parse(
            storageService.getItem('cart-class101') as string,
          ),
        }),
      );
      dispatch(fetchPaymentCartedProductListAsync.request({ id: [] }));
    }
  }, [storageService.getItem]);

  const handleCartTableClick = useCallback(() => {
    storageService.removeItem('cart-class101');
    dispatch(fetchCartedProductListAsync.request({}));
  }, [storageService.removeItem]);

  const handleCartTableChange = useCallback(
    (id: ProductModel['id'], quantity: number) => {
      dispatch(fetchCartedProductListEditAsync.request({ id, quantity }));
    },
    [dispatch],
  );

  const handleSelectChange = useCallback(
    (selectedRowKeys: any, selectedRows: any) => {
      // antd에서 타입을 any로 해놔서 일단, any로 받음. 나머지 로직에서 타입 체크를 차라리 제대로 하자.
      dispatch(
        fetchPaymentCartedProductListAsync.request({
          id: selectedRowKeys as ProductModel['id'][], // 다른 곳에서라도 타입을 정확하게 판단하기 위해 강제 어썰션
          ProductModelList: selectedRows as ProductModel[],
        }),
      );
    },
    [dispatch],
  );

  const handlePaymentClick = useCallback(() => {
    InfoModal('error', '경고', '결제는 안되요~');
  }, [InfoModal]);

  if (isLoading && !items) {
    return <LoadingSpin />;
  }

  return (
    <>
      <Row>
        <Col span={24}>
          <PageTitle title="장바구니" />
        </Col>
      </Row>
      <Row style={{ marginBottom: 50 }}>
        <CartTable
          dataSource={items}
          onClick={handleCartTableClick}
          onChange={handleCartTableChange}
          onSelectChange={handleSelectChange}
        />
      </Row>
      <Row>
        <Divider orientation="left">최종 결제 금액</Divider>
        <CartFinalPriceTable
          dataSource={tableDataSource}
          recommend={recommend}
        />
        <Divider />
      </Row>
      <Row style={{ textAlign: 'right' }}>
        <NavLink to={PRODUCTS_LIST_PATH}>
          <Button size="large" style={{ marginRight: 8 }}>
            뒤로 가기
          </Button>
        </NavLink>
        <Button
          type="danger"
          size="large"
          style={{ marginRight: 6 }}
          disabled={!tableDataSource.totalPrice}
          onClick={handlePaymentClick}
        >
          결제하기
        </Button>
      </Row>
    </>
  );
};