Merge branch 'dev' into bug/333

KakaoFunding · Jun 18, 2024 · ae9b7de · ae9b7de
2 parents 6991f20 + b6ff9c3
commit ae9b7de
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 96 deletions.
diff --git a/src/layouts/Cart/CartBoxItem/index.tsx b/src/layouts/Cart/CartBoxItem/index.tsx
@@ -1,52 +1,61 @@
 import clsx from 'clsx';
 
+import { useAxios } from 'hooks/useAxios';
 import { formatNumberWithComma, formatNumberWithUnit } from 'utils/format';
 
+import { CartItem } from 'types/cart';
+
 import styles from './index.module.scss';
 
-const data = {
-  cartId: 1,
-  productId: 101,
-  optionId: 201,
-  optionDetailId: 301,
-  productName:
-    '"독일 명품 비타민" 오쏘몰 이뮨 멀티비타민&미네랄 7입 - 단독 카톤박스 배송',
-  brandName: '오쏘몰',
-  quantity: 2,
-  productPrice: 38000,
-  imageUrl:
-    'https://img1.kakaocdn.net/thumb/[email protected]/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240605140558_d7afcc696ee4488abe48fdb21864c1f9.jpg',
-  optionName: 'dd',
-  optionDetailName: '',
-  totalPrice: 76000,
+type CartBoxItemProps = {
+  refetch: () => void;
+  item: CartItem;
+  handleSelect: (productId: number) => void;
+  isSelected: boolean;
 };
-const hasOption = true;
-const isSelect = true;
-const CartBoxItem = () => {
+
+const CartBoxItem = ({
+  refetch,
+  item,
+  handleSelect,
+  isSelected,
+}: CartBoxItemProps) => {
+  const { sendRequest } = useAxios({
+    method: 'delete',
+    url: `cart/${item.productId}`,
+  });
+
+  const handleDelete = async () => {
+    await sendRequest();
+    refetch();
+  };
+
   return (
     <div className={styles.wrapper_item}>
-      <div className={styles.wrapper_icons}>
+      <div
+        className={styles.wrapper_icons}
+        onClick={() => handleSelect(item.productId)}
+      >
         <input type="checkbox" className={styles.btn_input} id="checkbox" />
         <span
           id="checkbox"
-          className={clsx(styles.ico_input, { [styles.on]: isSelect })}
+          className={clsx(styles.ico_input, { [styles.on]: isSelected })}
         />
-
-        <span className={styles.ico_delete} />
+        <span className={styles.ico_delete} onClick={handleDelete} />
       </div>
       <div className={styles.wrapper_prod}>
         <img
-          alt={`${data.productName}상품이미지`}
-          src={data.imageUrl}
+          alt={`${item.productName}상품이미지`}
+          src={item.imageUrl}
           className={styles.thumb_prod}
         />
         <div>
-          <p className={styles.txt_brand}>{data.brandName}</p>
-          <strong className={styles.txt_prod}>{data.productName}</strong>
-          {hasOption && (
+          <p className={styles.txt_brand}>{item.brandName}</p>
+          <strong className={styles.txt_prod}>{item.productName}</strong>
+          {item.optionName && (
             <p className={styles.txt_option}>
               <span className={styles.ico_option} />
-              {data.optionName}
+              {item.optionDetailName}
             </p>
           )}
         </div>
@@ -55,11 +64,11 @@ const CartBoxItem = () => {
         <div className={styles.wrapper_box}>
           <p className={styles.txt_info}>
             상품금액
-            <span>{formatNumberWithUnit(data.productPrice)}</span>
+            <span>{formatNumberWithUnit(item.productPrice)}</span>
           </p>
           <p className={styles.txt_info}>
             선택수량
-            <span>x {data.quantity}개</span>
+            <span>x {item.quantity}개</span>
           </p>
           <p className={styles.txt_info}>
             수신인원
@@ -71,7 +80,7 @@ const CartBoxItem = () => {
             결제금액
             <span className={styles.txt_unit}>
               <span className={styles.num_info}>
-                {formatNumberWithComma(data.productPrice)}
+                {formatNumberWithComma(item.productPrice * item.quantity)}
               </span>
               원
             </span>

diff --git a/src/layouts/Cart/CartPay/BillItem/index.tsx b/src/layouts/Cart/CartPay/BillItem/index.tsx
@@ -1,27 +1,24 @@
 import { formatNumberWithUnit } from 'utils/format';
 
+import { CartItem } from 'types/cart';
+
 import styles from './index.module.scss';
 
-const prod = {
-  title:
-    '"선물제격" 보르딘 콜드브루 더치커피 알록달록 앰플 12종 커피 선물세트 (25ml*12개)',
-  quantity: 1,
-  price: 19900,
-  receiver: 1,
-};
+type BillItemProps = { item: CartItem };
 
-const BillItem = () => {
+const BillItem = ({ item }: BillItemProps) => {
+  const { productName, quantity, totalPrice } = item;
   return (
     <div className={styles.wrapper_item}>
-      <strong className={styles.txt_title}>{prod.title}</strong>
+      <strong className={styles.txt_title}>{productName}</strong>
       <div className={styles.wrapper_pay_info}>
         <p className={styles.txt_info}>
           상품금액
-          <span>{formatNumberWithUnit(prod.price)}</span>
+          <span>{formatNumberWithUnit(totalPrice)}</span>
         </p>
         <p className={styles.txt_info}>
           수량
-          <span>x {prod.quantity}개</span>
+          <span>x {quantity}개</span>
         </p>
         <p className={styles.txt_info}>
           수신인원
@@ -30,7 +27,7 @@ const BillItem = () => {
       </div>
       <p className={styles.txt_info}>
         상품 결제 금액
-        <span>{formatNumberWithUnit(prod.price * prod.quantity)}</span>
+        <span>{formatNumberWithUnit(totalPrice)}</span>
       </p>
     </div>
   );

diff --git a/src/layouts/Cart/CartPay/index.tsx b/src/layouts/Cart/CartPay/index.tsx
@@ -8,46 +8,47 @@ import { useSelectedFriendsStore } from 'store/useSelectedFriendsStore';
 
 import { useKakaoPicker } from 'hooks/useKakaoPicker';
 import { useLogin } from 'hooks/useLogin';
+import { formatNumberWithUnit } from 'utils/format';
 
-import { RequestOrderPreview } from 'types/payment';
+import { CartItem } from 'types/cart';
 
 import DefaultProfileImage from 'assets/profile_noimg.png';
 
 import BillItem from './BillItem';
 
 import styles from './index.module.scss';
 
-// TODO : 가짜 상품데이터
-const prod = [1, 2, 3];
-const CartPay = () => {
+type CartPayProps = {
+  selectedItems: CartItem[];
+  totalPayment: number;
+};
+
+const CartPay = ({ selectedItems, totalPayment }: CartPayProps) => {
   const [isToggled, handleToggle] = useReducer((prev) => !prev, false);
-  const navigate = useNavigate();
-  const { isLoggedIn, login, confirmLogin } = useLogin();
+  const { checkLoginBeforeAction } = useLogin();
+  const { openKakaoPicker } = useKakaoPicker();
   const { isSelected, isSelfSelected, selectedFriends, getImgUrl } =
     useSelectedFriendsStore();
-  const { openKakaoPicker } = useKakaoPicker();
+  const navigate = useNavigate();
 
-  // 로그인 여부 확인
-  const checkLoginBeforeAction = (action: () => void) => {
-    if (isLoggedIn) action();
-    else {
-      const result = confirmLogin();
-      if (result) login();
-    }
-  };
+  const getOrderInfo = () => {
+    const orderInfos = selectedItems.map((item) => {
+      return {
+        productId: item.productId,
+        quantity: item.quantity,
+        options: [{ id: item.optionId, detailId: item.optionDetailId }],
+      };
+    });
 
-  const orderInfos: RequestOrderPreview = [
-    {
-      productId: 1361966,
-      quantity: 1,
-      options: [],
-    },
-  ];
+    return orderInfos;
+  };
 
   // 나에게 선물하기 버튼 핸들러
   const handleClickGiftForMe = () => {
     checkLoginBeforeAction(() => {
-      navigate('/bill/gift', { state: { orderInfos, giftFor: 'me' } });
+      navigate('/bill/gift', {
+        state: { orderInfos: getOrderInfo(), giftFor: 'me' },
+      });
     });
   };
 
@@ -60,9 +61,13 @@ const CartPay = () => {
       }
 
       if (isSelfSelected) {
-        navigate('/bill/gift', { state: { orderInfos, giftFor: 'me' } });
+        navigate('/bill/gift', {
+          state: { orderInfos: getOrderInfo(), giftFor: 'me' },
+        });
       } else if (selectedFriends.length === 1) {
-        navigate('/bill/gift', { state: { orderInfos, giftFor: 'friends' } });
+        navigate('/bill/gift', {
+          state: { orderInfos: getOrderInfo(), giftFor: 'friends' },
+        });
       } else {
         alert('지금은 한 번에 한 명에게만 선물할 수 있어요.');
       }
@@ -84,9 +89,9 @@ const CartPay = () => {
         >
           {isToggled && (
             <ul className={styles.scroll}>
-              {prod.map((it) => (
-                <li key={it}>
-                  <BillItem />
+              {selectedItems.map((item) => (
+                <li key={item.cartId}>
+                  <BillItem item={item} />
                 </li>
               ))}
             </ul>
@@ -95,7 +100,7 @@ const CartPay = () => {
         <Button onClick={handleToggle} color="white" className={styles.btn}>
           <strong>총 결제 금액</strong>
           <em className={styles.num_price}>
-            57,900원
+            {formatNumberWithUnit(totalPayment)}
             <span
               className={clsx(styles.ico_toggle, { [styles.on]: isToggled })}
             >