Feat: trip connect wish

src/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton.tsx

@@ -1,13 +1,13 @@
 import {Button} from '@chakra-ui/react';
 import {useLocation, useNavigate} from 'react-router-dom';
-import {useRecoilValue} from 'recoil';
+import {useRecoilValue, useSetRecoilState} from 'recoil';
 
-import {selectedPlaceState} from '@/recoil/vote/selectPlace';
+import {usePostPlaces} from '@/hooks/Spaces/space';
+
+import {selectedPlaceState, selectedTripPlaceState} from '@/recoil/vote/selectPlace';
 
 //prop이나 params로 trip or vote 판별, onClick에 삼항연산자로 함수 넣기
 const AddToCandidateButton = () => {
-  const selectedPlaces = useRecoilValue(selectedPlaceState);
-  const counts = selectedPlaces.length;
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const spaceId = queryParams.get('placeID');
@@ -16,10 +16,28 @@ const AddToCandidateButton = () => {
   const voteIdArray = tripDateParam?.split(' ') as string[]; // 띄어쓰기를 기준으로 문자열 분할
   const isInVote = voteIdArray[0] === 'vote';
   const voteId = voteIdArray[1];
+  const selectedPlaces = useRecoilValue(selectedPlaceState);
+  const selectedTripPlaces = useRecoilValue(selectedTripPlaceState);
+  const setTripRecoil = useSetRecoilState(selectedTripPlaceState);
+  const counts = isInVote ? selectedPlaces.length : selectedTripPlaces.length;
+  const postPlaces = usePostPlaces();
+
+  const addPlaces = async () => {
+    await postPlaces.mutateAsync({
+      spaceId: Number(spaceId),
+      journeyId: Number(voteId),
+      placeIds: selectedTripPlaces,
+    });
+    navigate(`/trip/${spaceId}`, {state: {id: spaceId}});
+    setTripRecoil([]);
+  };
+
   const handleAddCandidates = () => {
     // 경로 추후 수정
     if (isInVote) {
       navigate(`/trip/${spaceId}/votes/${voteId}/votememo`, {replace: true});
+    } else {
+      addPlaces();
     }
   };
   return (

src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx

@@ -1,11 +1,11 @@
 import {useEffect, useState} from 'react';
-import {useRecoilValue} from 'recoil';
+import {useRecoilValue, useSetRecoilState} from 'recoil';
 
 import styles from './SelectButton.module.scss';
 
 import useGetSelectedArray from '@/hooks/useGetSelectedArray';
 
-import {selectedPlaceState} from '@/recoil/vote/selectPlace';
+import {selectedPlaceState, selectedTripPlaceState} from '@/recoil/vote/selectPlace';
 
 import {SearchItemType} from '@/types/home';
 
@@ -15,22 +15,41 @@ interface Propstype {
 
 const SelectButton = ({data}: Propstype) => {
   const [isClicked, setIsClicked] = useState(false);
+  const queryParams = new URLSearchParams(location.search);
+  const tripDateParam = queryParams.get('tripDate');
+  const voteIdArray = tripDateParam?.split(' ') as string[]; // 띄어쓰기를 기준으로 문자열 분할
+  const isInVote = voteIdArray[0] === 'vote';
   const selectedPlaces = useRecoilValue(selectedPlaceState);
-
+  const selectedTripPlaces = useRecoilValue(selectedTripPlaceState);
+  const setRecoil = useSetRecoilState(selectedTripPlaceState);
   const {toggleItemInNewArray} = useGetSelectedArray(selectedPlaceState);
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    console.log(selectedTripPlaces);
+
     e.preventDefault();
     setIsClicked((prev) => !prev);
-    toggleItemInNewArray(data);
+    if (isInVote) {
+      toggleItemInNewArray(data);
+    } else {
+      setRecoil((prev) => [...prev, data.id]);
+    }
   };
 
   useEffect(() => {
-    selectedPlaces.map((selectData) => {
-      if (selectData.id === data.id) {
-        setIsClicked(true);
-      }
-    });
+    if (isInVote) {
+      selectedPlaces.map((selectData) => {
+        if (selectData.id === data.id) {
+          setIsClicked(true);
+        }
+      });
+    } else {
+      selectedTripPlaces.map((selectData) => {
+        if (selectData === data.id) {
+          setIsClicked(true);
+        }
+      });
+    }
   }, [data]);
 
   return (

src/components/Home/TripSpaceAtHome/TripSpaceAtHome.tsx

@@ -1,4 +1,5 @@
 import {useEffect, useState} from 'react';
+import {Cookies} from 'react-cookie';
 
 import styles from './TripSpaceAtHome.module.scss';
 
@@ -17,13 +18,13 @@ function TripSpaceAtHome() {
   const [data, setData] = useState<TripSpaceData[]>();
   const [slideLocation, setSlideLocation] = useState<number>(0);
   const [componentRef, size] = useComponentSize();
+  const cookie = new Cookies().get('isLogin');
 
   useEffect(() => {
-    getHomeTripSpace(setData);
+    if (cookie) {
+      getHomeTripSpace(setData);
+    }
   }, []);
-  useEffect(() => {
-    console.log(data);
-  }, [data]);
 
   return (
     <div className={styles.container}>

src/components/Home/VoteAtHome/VoteAtHome.tsx

@@ -1,4 +1,5 @@
 import {useEffect, useState} from 'react';
+import {Cookies} from 'react-cookie';
 
 import styles from './VoteAtHome.module.scss';
 
@@ -13,13 +14,14 @@ import {Vote} from '@/types/home';
 
 function VoteAtHome() {
   const [data, setData] = useState<Vote>();
+  const cookie = new Cookies().get('isLogin');
   const userData = useGetMyInfo(true).data?.data.nickname;
 
   useEffect(() => {
-    if (userData) {
+    if (cookie) {
       getHomeVote(setData);
     }
-  }, [userData]);
+  }, []);
 
   return (
     <div className={styles.container}>

src/components/Route/AddPlace/AddPlace.tsx

@@ -20,7 +20,7 @@ function AddPlace({journeyId, day}: AddPlaceProps) {
             <button
               onClick={() => {
                 navigate(
-                  `/search?keyword=없음&category=0&map=false&location=전국&sort=등록순&hot=false&placeID=여기에넣어줘요&tripDate=여기에넣어줘요`,
+                  `/search?keyword=없음&category=0&map=false&location=전국&sort=등록순&hot=false&placeID=${spaceId}&tripDate=trip ${journeyId}`,
                 );
               }}
             >
@@ -29,7 +29,13 @@ function AddPlace({journeyId, day}: AddPlaceProps) {
             <p>장소 검색</p>
           </div>
           <div className={styles.buttonContainer}>
-            <button>
+            <button
+              onClick={() => {
+                navigate(
+                  `/wishes/bring?category=0&location=전국&sort=등록순&placeID=${spaceId}&tripDate=trip ${journeyId}`,
+                );
+              }}
+            >
               <WishIcon color='#FF85B1' size='2.4rem' />
             </button>
             <p>찜 목록 검색</p>

src/components/SearchFromHome/SearchList/DateFilter/DateFilter.module.scss

@@ -3,20 +3,20 @@
 .container {
   position: relative;
 
-  height: 2.4rem;
-
-  display: flex;
-  align-items: center;
+  @include typography(button);
+  .button {
+    height: 2.4rem;
 
-  padding: 4px 8px;
+    display: flex;
+    align-items: center;
 
-  cursor: pointer;
+    padding: 4px 8px;
 
-  @include typography(button);
-
-  .icon {
-    width: 2.4rem;
-    height: 2.4rem;
+    cursor: pointer;
+    .icon {
+      width: 2.4rem;
+      height: 2.4rem;
+    }
   }
 
   .modal {
@@ -30,8 +30,6 @@
     flex-direction: column;
     justify-content: space-between;
 
-    padding: 20px 32px;
-
     border-radius: 16px;
 
     background-color: $neutral0;
@@ -42,6 +40,10 @@
 
     overflow: hidden;
 
-    transition: 0.5s all;
+    box-sizing: border-box;
+
+    transition:
+      0.5s opacity,
+      0.5s height;
   }
 }

src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx

@@ -40,10 +40,15 @@ function DateFilter({forSearch = undefined, wishesFilter = undefined}: PropsType
   }, [forSearch?.sort]);
 
   return (
-    <div className={styles.container} onClick={handleModal}>
-      <BsFilterLeft className={styles.icon} />
-      <span style={{userSelect: 'none', whiteSpace: 'none'}}>{sort}</span>
-      <div className={styles.modal} style={{height: click ? '136px' : 0, opacity: click ? 1 : 0}}>
+    <div className={styles.container}>
+      <p className={styles.button} onClick={handleModal}>
+        <BsFilterLeft className={styles.icon} />
+        <span style={{userSelect: 'none', whiteSpace: 'none'}}>{sort}</span>
+      </p>
+      <div
+        className={styles.modal}
+        style={{height: click ? '136px' : 0, opacity: click ? 1 : 0, padding: click ? '20px 32px' : 0}}
+      >
         {filterData.map((data) => (
           <span
             style={{opacity: click ? 1 : 0, whiteSpace: 'none'}}

src/components/SearchFromHome/SearchList/SearchItem/SearchItem.module.scss

@@ -9,6 +9,8 @@
   gap: 12px;
 
   .itemBox {
+    flex: 1;
+
     max-height: 70px;
 
     display: flex;
@@ -29,6 +31,8 @@
     }
 
     .text {
+      flex: 1;
+
       display: flex;
       flex-direction: column;
       gap: 2px;
@@ -38,6 +42,7 @@
       transition: 0.3s all linear;
 
       .title {
+        max-width: calc(100% - 30px);
         height: 24px;
 
         text-overflow: ellipsis;

src/components/SearchFromHome/SearchList/SearchList.tsx

@@ -73,8 +73,6 @@ function SearchList({forSearch}: PropsType) {
   }, [inView]);
 
   useEffect(() => {
-    console.log(data);
-
     if (data) {
       if (forSearch.category !== 0) {
         const filterData: SearchItemType[][] = [];

src/components/VoteMemo/MemoItem/MemoItem.tsx

@@ -7,13 +7,15 @@ import {useDebounce} from '@/hooks/useDebounce';
 import useGetSelectedArray from '@/hooks/useGetSelectedArray';
 
 import {selectedTaglineState} from '@/recoil/vote/voteMemo';
+import titleCaseChange from '@/utils/titleCaseChange';
 
 import {MemoItemProps} from '@/types/vote';
 
 const MemoItem = ({place, existingTagline}: MemoItemProps) => {
   const [text, setText] = useState('');
   const {toggleItemInNewArray, setMemoArray} = useGetSelectedArray(selectedTaglineState);
   const debouncedText = useDebounce(text, 500);
+  const title = titleCaseChange(place.title);
 
   useEffect(() => {
     if (existingTagline) {
@@ -57,7 +59,7 @@ const MemoItem = ({place, existingTagline}: MemoItemProps) => {
             <img src={place.thumbnail} alt={place.title} />
           </div>
           <div className={styles.candidateBox__text}>
-            <p className={styles.candidateBox__text__name}>{place.title}</p>
+            <p className={styles.candidateBox__text__name}>{title}</p>
             <span className={styles.candidateBox__text__category}>
               {place.contentTypeId}
               {'ꞏ'}

src/recoil/vote/selectPlace.ts

@@ -8,3 +8,9 @@ export const selectedPlaceState = atom<SearchItemType[]>({
   default: [],
   effects_UNSTABLE: [persistAtom],
 });
+
+export const selectedTripPlaceState = atom<number[]>({
+  key: 'selectedTripPlaceState',
+  default: [],
+  effects_UNSTABLE: [persistAtom],
+});