feat: 여행 계획에 장소 담기 api연동

packages/react-native/src/apis/mutations/useSelectedSpotAddMutation.ts

@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { SpotResponse } from '../queries/spot/useSpotDetailQuery';
+import useAuthAxios from '../useAuthAxios';
+import QUERY_KEYS from '@/constants/QUERY_KEYS';
+
+interface AddSpotToPlanRequest {
+  planId: number;
+  spotList: SpotResponse[];
+}
+
+export default function useSelectedSpotAddMutation() {
+  const authAxios = useAuthAxios();
+  const queryClient = useQueryClient();
+
+  const addSpotToPlan = async ({ planId, spotList }: AddSpotToPlanRequest) => {
+    await authAxios.post(
+      `/api/schedule/selected-spot/${planId}`,
+      spotList.map((spot) => ({
+        title: spot.title,
+        addr1: spot.addr1,
+        addr2: spot.addr2,
+        contentId: spot.contentId,
+        image: spot.image,
+        dist: spot.dist,
+        contentTypeId: spot.contentTypeId,
+      })),
+    );
+  };
+
+  return useMutation({
+    mutationFn: addSpotToPlan,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.TRIP_PLANS] });
+    },
+  });
+}

packages/react-native/src/apis/queries/detail/useDetailQuery.ts

@@ -18,6 +18,8 @@ interface DetailResponse {
   isLiked: boolean;
   likeCount: number;
   posterUrl: string;
+  contentTypeId: string;
+  dist: string;
 }
 
 export default function useDetailQuery({

packages/react-native/src/apis/queries/spot/useSpotDetailQuery.ts

@@ -16,6 +16,8 @@ export interface SpotResponse {
   latitude: number;
   longitude: number;
   overview: string;
+  contentTypeId: string;
+  dist: string;
 }
 
 export default function useSpotDetailQuery({ id }: UseSpotDetailQueryParams) {

packages/react-native/src/pages/Detail.tsx

@@ -34,6 +34,8 @@ const Detail = withSuspense(() => {
     isLiked,
     city,
     region,
+    dist,
+    contentTypeId,
   } = data;
 
   const handleAddPlan = () => {
@@ -50,6 +52,8 @@ const Detail = withSuspense(() => {
           longitude,
           latitude,
           overview,
+          dist,
+          contentTypeId,
         },
       ],
     });

packages/react-native/src/pages/HomeSpotAdd.tsx

@@ -1,14 +1,15 @@
 import { useState } from 'react';
 import { Dimensions, View } from 'react-native';
 import { Button, FloatingPlusButton, Font } from 'design-system';
-import { useRoute } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import useTripPlansQuery from '@/apis/queries/tripPlan/useTripPlansQuery';
 import Header from '@/components/common/Header';
 import withSuspense from '@/components/HOC/withSuspense';
 import EmptyPlan from '@/components/tripPlan/EmptyPlan';
 import TripPlanCard, { CARD_GAP } from '@/components/tripPlan/TripPlanCard';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
-import { StackRouteProps } from '@/types/navigation';
+import { StackNavigation, StackRouteProps } from '@/types/navigation';
+import useSelectedSpotAddMutation from '@/apis/mutations/useSelectedSpotAddMutation';
 
 const { height } = Dimensions.get('window');
 
@@ -17,6 +18,15 @@ export default withSuspense(function HomeSpotAdd() {
   const { data } = useTripPlansQuery();
   const [tripId, setTripId] = useState<number>();
   const isEmpty = data.length === 0;
+  const { mutateAsync } = useSelectedSpotAddMutation();
+  const navigation = useNavigation<StackNavigation<'Home/AddSpot'>>();
+
+  const add = () => {
+    if (tripId) {
+      mutateAsync({ planId: tripId, spotList: route.params.spots });
+    }
+    navigation.goBack();
+  };
 
   return (
     <>
@@ -58,13 +68,17 @@ export default withSuspense(function HomeSpotAdd() {
         </View>
       </BackGroundGradient>
       <View className="absolute bottom-4 w-full px-4">
-        <Button disabled={!tripId}>
+        <Button disabled={!tripId} onPress={add}>
           <Font type="title1" color="white">
             이 여행에 담기
           </Font>
         </Button>
       </View>
-      <FloatingPlusButton bottom={16} right={16} onPress={() => {}} />
+      <FloatingPlusButton
+        bottom={16}
+        right={16}
+        onPress={() => navigation.navigate('TripPlanner/Post')}
+      />
     </>
   );
 });