Feat: trip connect search

Strong-Potato · Jan 28, 2024 · 4d250b8 · 4d250b8
1 parent 670359c
commit 4d250b8
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 19 deletions.
diff --git a/src/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton.tsx b/src/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton.tsx
@@ -2,9 +2,10 @@ import {Button} from '@chakra-ui/react';
 import {useLocation, useNavigate} from 'react-router-dom';
 import {useRecoilValue, useSetRecoilState} from 'recoil';
 
-import {usePostPlaces} from '@/hooks/Spaces/space';
+import {usePostPlaces, usePostSearchPlaces} from '@/hooks/Spaces/space';
 
-import {selectedPlaceState, selectedTripPlaceState} from '@/recoil/vote/selectPlace';
+import {activeTabIndexState} from '@/recoil/spaces/trip';
+import {selectedPlaceState, selectedTripPlaceState, selectedTripSearchPlaceState} from '@/recoil/vote/selectPlace';
 
 //prop이나 params로 trip or vote 판별, onClick에 삼항연산자로 함수 넣기
 const AddToCandidateButton = () => {
@@ -18,26 +19,52 @@ const AddToCandidateButton = () => {
   const voteId = voteIdArray[1];
   const selectedPlaces = useRecoilValue(selectedPlaceState);
   const selectedTripPlaces = useRecoilValue(selectedTripPlaceState);
+  const selectedTripSearchPlace = useRecoilValue(selectedTripSearchPlaceState);
   const setTripRecoil = useSetRecoilState(selectedTripPlaceState);
-  const counts = isInVote ? selectedPlaces.length : selectedTripPlaces.length;
+  const setTripSearchRecoil = useSetRecoilState(selectedTripSearchPlaceState);
   const postPlaces = usePostPlaces();
+  const path = location.pathname;
+  const setSelectedTabIndex = useSetRecoilState(activeTabIndexState);
+  const counts = isInVote
+    ? selectedPlaces.length
+    : path === '/wishes/bring'
+      ? selectedTripPlaces.length
+      : selectedTripSearchPlace.length;
 
   const addPlaces = async () => {
     await postPlaces.mutateAsync({
       spaceId: Number(spaceId),
       journeyId: Number(voteId),
       placeIds: selectedTripPlaces,
     });
-    navigate(`/trip/${spaceId}`, {state: {id: spaceId}});
+    setSelectedTabIndex(1);
     setTripRecoil([]);
+    navigate(`/trip/${spaceId}`, {state: {id: spaceId}});
+  };
+
+  const postSearchPlaces = usePostSearchPlaces();
+
+  const addSearchPlaces = async () => {
+    await postSearchPlaces.mutateAsync({
+      spaceId: Number(spaceId),
+      journeyId: Number(voteId),
+      places: selectedTripSearchPlace,
+    });
+    navigate(`/trip/${spaceId}`, {state: {id: spaceId}});
+    setTripSearchRecoil([]);
+    setSelectedTabIndex(1);
   };
 
   const handleAddCandidates = () => {
     // 경로 추후 수정
     if (isInVote) {
       navigate(`/trip/${spaceId}/votes/${voteId}/votememo`, {replace: true});
     } else {
-      addPlaces();
+      if (path === '/wishes/bring') {
+        addPlaces();
+      } else {
+        addSearchPlaces();
+      }
     }
   };
   return (

diff --git a/src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx b/src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx
@@ -5,7 +5,7 @@ import styles from './SelectButton.module.scss';
 
 import useGetSelectedArray from '@/hooks/useGetSelectedArray';
 
-import {selectedPlaceState, selectedTripPlaceState} from '@/recoil/vote/selectPlace';
+import {selectedPlaceState, selectedTripPlaceState, selectedTripSearchPlaceState} from '@/recoil/vote/selectPlace';
 
 import {SearchItemType} from '@/types/home';
 
@@ -22,7 +22,9 @@ const SelectButton = ({data}: Propstype) => {
   const selectedPlaces = useRecoilValue(selectedPlaceState);
   const selectedTripPlaces = useRecoilValue(selectedTripPlaceState);
   const setRecoil = useSetRecoilState(selectedTripPlaceState);
+  const setSearchRecoil = useSetRecoilState(selectedTripSearchPlaceState);
   const {toggleItemInNewArray} = useGetSelectedArray(selectedPlaceState);
+  const pathname = location.pathname;
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     console.log(selectedTripPlaces);
@@ -32,19 +34,35 @@ const SelectButton = ({data}: Propstype) => {
     if (isInVote) {
       toggleItemInNewArray(data);
     } else {
-      setRecoil((currentArray) => {
-        const index = currentArray.findIndex((item) => item === data.id);
+      if (pathname === '/wishes/bring') {
+        setRecoil((currentArray) => {
+          const index = currentArray.findIndex((item) => item === data.id);
 
-        if (index !== -1) {
-          const newArray = [...currentArray.slice(0, index), ...currentArray.slice(index + 1)];
-          console.log('newArray:', newArray);
-          return newArray;
-        } else {
-          const newArray = [...currentArray, data.id];
-          console.log('newArray:', newArray);
-          return newArray;
-        }
-      });
+          if (index !== -1) {
+            const newArray = [...currentArray.slice(0, index), ...currentArray.slice(index + 1)];
+            console.log('newArray:', newArray);
+            return newArray;
+          } else {
+            const newArray = [...currentArray, data.id];
+            console.log('newArray:', newArray);
+            return newArray;
+          }
+        });
+      } else {
+        setSearchRecoil((currentArray) => {
+          const index = currentArray.findIndex((item) => item.placeId === data.id);
+
+          if (index !== -1) {
+            const newArray = [...currentArray.slice(0, index), ...currentArray.slice(index + 1)];
+            console.log('newArray:', newArray);
+            return newArray;
+          } else {
+            const newArray = [...currentArray, {placeId: data.id, contentTypeId: data.contentTypeId}];
+            console.log('newArray:', newArray);
+            return newArray;
+          }
+        });
+      }
     }
   };
 

diff --git a/src/components/SearchFromHome/SearchHome/SearchKeyword/SearchKeyword.module.scss b/src/components/SearchFromHome/SearchHome/SearchKeyword/SearchKeyword.module.scss
@@ -1,9 +1,10 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
   @include slide_button_container;
 
   .slide_box {
+    padding: 0 20px;
     @include slide_list_container;
     gap: 8px;
 

diff --git a/src/recoil/vote/selectPlace.ts b/src/recoil/vote/selectPlace.ts
@@ -14,3 +14,9 @@ export const selectedTripPlaceState = atom<number[]>({
   default: [],
   effects_UNSTABLE: [persistAtom],
 });
+
+export const selectedTripSearchPlaceState = atom<{placeId: number; contentTypeId: number}[]>({
+  key: 'selectedTripPlaceState',
+  default: [],
+  effects_UNSTABLE: [persistAtom],
+});