Feat: 우리의 관심목록 추가 기능

src/api/trips.ts

@@ -47,7 +47,13 @@ export const getTripsLike = async (
 
 // 우리의 관심 목록 등록
 export const postTripsLike = async (tripId: number, tourItemIds: number[]) => {
-  const res = await client.post(`trips/${tripId}/tripLikedTours`, tourItemIds);
+  const requestBody = {
+    tourItemIds: tourItemIds,
+  };
+  const res = await authClient.post(
+    `trips/${tripId}/tripLikedTours`,
+    requestBody,
+  );
   return res;
 };
 

src/pages/plan/OurLikedList.tsx

@@ -3,14 +3,13 @@ import ToursCategoryItem from '@components/Tours/ToursCategoryItem';
 import { useEffect, useState } from 'react';
 import { Spinner } from '@components/common/spinner/Spinner';
 import { getMemberTours } from '@api/member';
-import WishList from '@components/Wish/WishList';
 
 export const OurLikedList = () => {
   const categories = ['전체', '숙소', '식당', '관광지'];
 
-  const [selectedContentTypeId, setSelectedContentTypeId] = useState<
-    null | number
-  >(null);
+  // const [selectedContentTypeId, setSelectedContentTypeId] = useState<
+  //   null | number
+  // >(null);
 
   const [selectedCategory, setSelectedCategory] = useState<string>('전체');
   useEffect(() => {
@@ -26,32 +25,36 @@ export const OurLikedList = () => {
   // }, [searchWord]);
   // console.log();
 
-  const { fetchNextPage, hasNextPage, data, isLoading, isError } =
-    useInfiniteQuery({
-      queryKey: ['wishList'],
-      queryFn: ({ pageParam = 0 }) => getMemberTours(pageParam, 10),
-      initialPageParam: 0,
-      getNextPageParam: (lastPage) => {
-        if (
-          lastPage &&
-          lastPage.data &&
-          lastPage.data &&
-          lastPage.data.pageable
-        ) {
-          const currentPage = lastPage.data.pageable.pageNumber;
-          const totalPages = lastPage.data.totalPages;
+  const {
+    // fetchNextPage, hasNextPage,
+    data,
+    isLoading,
+    isError,
+  } = useInfiniteQuery({
+    queryKey: ['wishList'],
+    queryFn: ({ pageParam = 0 }) => getMemberTours(pageParam, 10),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      if (
+        lastPage &&
+        lastPage.data &&
+        lastPage.data &&
+        lastPage.data.pageable
+      ) {
+        const currentPage = lastPage.data.pageable.pageNumber;
+        const totalPages = lastPage.data.totalPages;
 
-          if (currentPage < totalPages - 1) {
-            return currentPage + 1;
-          }
+        if (currentPage < totalPages - 1) {
+          return currentPage + 1;
         }
-        return undefined;
-      },
-    });
+      }
+      return undefined;
+    },
+  });
 
-  const handleCategoryClick = (contentTypeId: number | null) => {
-    setSelectedContentTypeId(contentTypeId);
-  };
+  // const handleCategoryClick = (contentTypeId: number | null) => {
+  //   setSelectedContentTypeId(contentTypeId);
+  // };
 
   if (isLoading) {
     return <Spinner />;

src/pages/plan/addPlace/AddtoListBtn.tsx

@@ -0,0 +1,36 @@
+import { useRecoilValue } from 'recoil';
+import { selectedItemsState } from '@recoil/listItem';
+import { ButtonPrimary } from '@components/common/button/Button';
+import { postTripsLike } from '@api/trips';
+// import { useNavigate } from 'react-router-dom';
+
+const AddToListButton = () => {
+  const selectedTourItemIds = useRecoilValue(selectedItemsState);
+  // const navigate = useNavigate();
+
+  const getTripIdFromUrl = () => {
+    const pathSegments = window.location.pathname.split('/');
+    const tripIdIndex =
+      pathSegments.findIndex((segment) => segment === 'trip') + 1;
+    return pathSegments[tripIdIndex]
+      ? parseInt(pathSegments[tripIdIndex], 10)
+      : null;
+  };
+
+  const handleAddClick = async () => {
+    const tripId = getTripIdFromUrl();
+    if (tripId) {
+      try {
+        const response = await postTripsLike(tripId, selectedTourItemIds);
+        console.log('API response:', response);
+        // navigate(`/trip/${tripId}`);
+      } catch (error) {
+        console.error('API error:', error);
+      }
+    }
+  };
+
+  return <ButtonPrimary onClick={handleAddClick}>추가하기</ButtonPrimary>;
+};
+
+export default AddToListButton;

src/pages/plan/addPlace/MyLiked.tsx

@@ -3,19 +3,14 @@ import { useState } from 'react';
 import { Spinner } from '@components/common/spinner/Spinner';
 import { getMemberTours } from '@api/member';
 import { MyLikedList } from './MyLikedList';
-import { ButtonPrimary } from '@components/common/button/Button';
 import WishCategory from '@components/Wish/WishCategory';
+import AddToListButton from './AddtoListBtn';
 
 export const MyLiked = () => {
   const [selectedContentTypeId, setSelectedContentTypeId] = useState<
     null | number
   >(null);
 
-  // const [selectedCategory, setSelectedCategory] = useState<string>('전체');
-  // useEffect(() => {
-  //   console.log(selectedCategory);
-  // }, [selectedCategory]);
-
   const handleCategoryClick = (contentTypeId: number | null) => {
     setSelectedContentTypeId(contentTypeId);
   };
@@ -50,9 +45,7 @@ export const MyLiked = () => {
     console.log('error fetching search result ');
   }
 
-  // console.log(data?.pages[0].data.content);
   const searchResults = data?.pages.flatMap((page) => page.data.content) || [];
-  console.log('searchResults', searchResults);
   const noResults = searchResults && searchResults.length === 0;
 
   return (
@@ -73,7 +66,7 @@ export const MyLiked = () => {
         />
       )}
       <div className="sticky bottom-0 bg-white py-[20px]">
-        <ButtonPrimary>추가하기</ButtonPrimary>
+        <AddToListButton />
       </div>
     </>
   );

src/pages/plan/addPlace/ResultCategoryPlan.tsx

@@ -1,7 +1,8 @@
-import { ButtonPrimary, ButtonWhite } from '@components/common/button/Button';
+import { ButtonWhite } from '@components/common/button/Button';
 import { TourType } from '@/@types/tours.types';
 import { InfiniteQueryObserverResult } from '@tanstack/react-query';
 import { ResultItemPlan } from './ResultItem';
+import AddToListButton from './AddtoListBtn';
 
 interface ResultCategoryProps {
   data: TourType[];
@@ -17,7 +18,6 @@ export const ResultCategoryPlan = ({
   hasNextPage,
   isFetchingNextPage,
 }: ResultCategoryProps) => {
-  // console.log('hasNextPage', hasNextPage);
   return (
     <>
       <h2 className="headline2 my-2.5">ResultCategoryPlan</h2>
@@ -38,7 +38,9 @@ export const ResultCategoryPlan = ({
         <div className="mt-3 text-center text-gray3"></div>
       )}
       <div className="sticky bottom-0 bg-white py-[20px]">
-        <ButtonPrimary>추가하기</ButtonPrimary>
+        <div className="sticky bottom-0 bg-white py-[20px]">
+          <AddToListButton />
+        </div>
       </div>
     </>
   );

src/pages/plan/addPlace/ResultItem.tsx

@@ -1,9 +1,19 @@
 import { TourType } from '@/@types/tours.types';
 import { ListSelectBtn } from '@components/common/button/ListSelectBtn';
 import { StarIcon } from '@components/common/icons/Icons';
+import { selectedItemsState } from '@recoil/listItem';
+import { useRecoilState } from 'recoil';
 
 export const ResultItemPlan = ({ result }: { result: TourType }) => {
-  console.log(result);
+  const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsState);
+  const id = result.id;
+  const handleSelect = () => {
+    if (selectedItems.includes(id)) {
+      setSelectedItems(selectedItems.filter((item) => item !== id));
+    } else {
+      setSelectedItems([...selectedItems, id]);
+    }
+  };
   return (
     <div className="mt-[14px] flex h-[52px] w-full py-1.5">
       <div className="imgWrap mr-[16px] flex-shrink-0 overflow-hidden rounded-lg">
@@ -27,7 +37,7 @@ export const ResultItemPlan = ({ result }: { result: TourType }) => {
           </span>
         </div>
       </div>
-      <ListSelectBtn>선택</ListSelectBtn>
+      <ListSelectBtn onClick={handleSelect}>선택</ListSelectBtn>
     </div>
   );
 };