feat: 장바구니 api 연결

src/apis/Bucket.ts

@@ -1,63 +1,11 @@
-import {BucketType} from '@/types/Bucket';
+import {BucketType, BucketProductType} from '@/types/Bucket';
 import apiClient from './ApiClient';
-const dummyCartList: BucketType = {
-  market: {
-    id: 1,
-    name: '가게이름이너무나길면두줄이찍히는데설마',
-    images: ['https://legacy.reactjs.org/logo-og.png'],
-  },
-  products: [
-    {
-      id: 1,
-      name: '김치',
-      image: 'https://legacy.reactjs.org/logo-og.png',
-      originPrice: 10000,
-      discountPrice: 7000,
-      count: 3,
-      tags: [
-        {
-          id: 1,
-          tagName: '예시',
-        },
-      ],
-    },
-    {
-      id: 2,
-      name: '깻잎',
-      image: 'https://legacy.reactjs.org/logo-og.png',
-      originPrice: 5000,
-      discountPrice: 3000,
-      count: 3,
-      tags: [
-        {
-          id: 1,
-          tagName: '예시',
-        },
-      ],
-    },
-    {
-      id: 3,
-      name: '간장게장',
-      image: 'https://legacy.reactjs.org/logo-og.png',
-      originPrice: 20000,
-      discountPrice: 17000,
-      count: 3,
-      tags: [
-        {
-          id: 1,
-          tagName: '예시',
-        },
-      ],
-    },
-  ],
-};
 
 export const getBuckets = async (): Promise<BucketType | null> => {
   try {
     const res = await apiClient.get<BucketType | null>('/buckets');
 
-    // TODO: API 호출
-    return res?.products ? res : dummyCartList;
+    return res;
   } catch (error) {
     console.error('Error fetching getBurkets list:', error);
     return null;
@@ -69,14 +17,33 @@ export const validateBucket = async (marketId: number): Promise<boolean> => {
     const res = await apiClient.get<{
       sameMarketProduct: boolean;
     }>(`/buckets/markets/${marketId}`);
-
-    if (!res) {
-      return false;
+    if (res?.sameMarketProduct) {
+      return true;
     }
-
-    return res.sameMarketProduct;
+    return false;
   } catch (error) {
     console.error('Error fetching validateBucket:', error);
     return false;
   }
 };
+
+export const addToBucket = async (
+  marketId: number,
+  products: BucketProductType[],
+): Promise<boolean> => {
+  try {
+    const res = await apiClient.post<{
+      code: number;
+      message: string;
+      data: string;
+    }>(`/buckets/markets/${marketId}`, {products});
+    console.log('products: ', products);
+    if (res && res.code === 200 && res.data === '상품 추가 성공') {
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('addToBucket error:', error);
+    return false;
+  }
+};

src/components/orderPage/PaymentSummary.tsx

@@ -37,7 +37,7 @@ const PaymentSummary = ({originPrice, discountPrice}: Props) => {
         />
         <PaymentSummaryItem
           title="할인금액"
-          price={`-${(originPrice - discountPrice).toLocaleString()}원`}
+          price={`-${discountPrice.toLocaleString()}원`}
           primary
         />
       </S.PaymentSummaryItemList>

src/screens/MarketDetailScreen/MarketDetailPage.tsx

@@ -17,6 +17,7 @@ import {RootStackParamList} from '@/types/StackNavigationType';
 import SubscribeIcon from '@/components/common/SubscribeIcon';
 import {BottomButton} from '@/components/common';
 import {MarketDetailType} from '@/types/Market';
+import {validateBucket, addToBucket} from '@/apis/Bucket';
 type CartItem = {
   productId: number;
   productName: string;
@@ -103,10 +104,39 @@ const MarketDetailPage = ({
       {} as Record<string, ProductType[]>,
     );
 
-  const handleCheckout = () => {
-    navigation.navigate('CartRoot', {
-      screen: 'Cart',
-    });
+  const handleCheckout = async (marketId: number, cartItems: CartItem[]) => {
+    try {
+      const bucketProducts = cartItems.map(cartItem => {
+        const productDetails = products.find(
+          (product): product is ProductType =>
+            product.id === cartItem.productId,
+        );
+
+        if (!productDetails) {
+          throw new Error(`타입 방지 위한 error`);
+        }
+
+        return {
+          count: cartItem.count,
+          id: productDetails.id,
+          name: productDetails.name,
+          image: productDetails.image,
+          originPrice: productDetails.originPrice,
+          discountPrice: productDetails.discountPrice,
+        };
+      });
+
+      const bucketPostValidate = await addToBucket(marketId, bucketProducts);
+      if (bucketPostValidate) {
+        navigation.navigate('CartRoot', {
+          screen: 'Cart',
+        });
+      } else {
+        console.log('add to bucket failed');
+      }
+    } catch (error) {
+      console.error('Error in handleCheckout:', error);
+    }
   };
 
   const scrollToSection = useCallback(
@@ -211,30 +241,33 @@ const MarketDetailPage = ({
   const handleSubscribe = () => {
     setMarketIsLiked(prevState => !prevState);
   };
-  const navigatePage = () => {
-    if (cart.length === 0) {
-      Alert.alert('장바구니가 비어 있습니다.');
-      return;
-    }
-    Alert.alert(
-      `장바구니로 이동하시겠습니까?`,
-      `취소시 장바구니가 초기화됩니다.`,
-      [
-        {
-          text: '예',
-          onPress: () => {
-            handleCheckout();
+  const addProductToBucket = async (
+    marketId: number,
+    addProducts: CartItem[],
+  ) => {
+    if (!(await validateBucket(marketId))) {
+      Alert.alert(
+        '기존에 담아두었던 장바구니가 존재합니다.',
+        '장바구니에 담으시겠습니까?',
+        [
+          {
+            text: '예',
+            onPress: () => {
+              handleCheckout(marketId, addProducts);
+            },
           },
-        },
-        {
-          text: '취소',
-          onPress: () => {
-            setCart([]);
+          {
+            text: '아니오',
+            onPress: () => {
+              setCart([]);
+            },
           },
-        },
-      ],
-      {cancelable: false},
-    );
+        ],
+        {cancelable: false},
+      );
+      return;
+    }
+    handleCheckout(marketId, addProducts);
   };
 
   const caculateRemainingPickupTime = () => {
@@ -330,7 +363,7 @@ const MarketDetailPage = ({
         ))}
       </S.MenuScrollView>
 
-      <BottomButton onPress={navigatePage}>
+      <BottomButton onPress={() => addProductToBucket(id, cart)}>
         예약하기 ({cart.length})
       </BottomButton>
     </S.MarketDetailInfoView>

src/screens/ShoppingCart/ShoppingCartPage.tsx

@@ -36,7 +36,6 @@ const ShoppingCartPage = ({
   };
 
   const onPressPayment = () => {
-    // TODO: 장바구니 담기 post 추가
     navigation.navigate('Detail', {
       screen: 'Payment',
       params: {cartData},

src/screens/ShoppingCart/index.tsx

@@ -16,7 +16,7 @@ const ShoppingCartScreen = ({navigation}: Props) => {
   const [cartData, setCartData] = useState<BucketType | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
-  const fetchDummyData = useCallback(async () => {
+  const fetchBucketData = useCallback(async () => {
     try {
       setIsLoading(true);
       const response = await getBuckets();
@@ -36,8 +36,8 @@ const ShoppingCartScreen = ({navigation}: Props) => {
   }, []);
 
   useEffect(() => {
-    fetchDummyData();
-  }, [fetchDummyData]);
+    fetchBucketData();
+  }, [fetchBucketData]);
 
   const updateProductCount = (id: number, newCount: number) => {
     setCartData(prevCartData => {

src/types/Bucket.ts

@@ -5,3 +5,7 @@ export type BucketType = {
   market: Pick<MarketType, 'id' | 'name' | 'images'>;
   products: ({count: number} & ProductType)[];
 };
+
+export type BucketProductType = Omit<ProductType, 'tags'> & {
+  count: number;
+};