Fix: fix wish getFunction

src/App.tsx

@@ -12,6 +12,11 @@ import MainRouter from './routes/MainRouter/MainRouter';
 window.Kakao.init(import.meta.env.VITE_KAKAO_KEY);
 
 const queryClient = new QueryClient();
+queryClient.setDefaultOptions({
+  queries: {
+    refetchOnWindowFocus: false,
+  },
+});
 function App() {
   return (
     <Suspense fallback='서스펜스 로딩입니다, 추후에 폴백UI를 추가하거나 아니면 지우겠습니다~~'>

src/api/detail.ts

@@ -1,6 +1,7 @@
-import {MySpaces, PlacesNearby, PostReview, Reviews, ReviewsRating, Wishes, placeInfoData} from '@/types/detail';
 import axios from 'axios';
 
+import {MySpaces, placeInfoData, PlacesNearby, PostReview, Reviews, ReviewsRating, Wishes} from '@/types/detail';
+
 // --------------------------- GET ---------------------------
 
 export const getPlaceInfo = async (id: number, typeId: number): Promise<placeInfoData> => {
@@ -27,13 +28,10 @@ export const getReviews = async (id: number, typeId: number, title: string): Pro
   return response.data;
 };
 
-export const getIsWish = async (id: number, setIsWish: React.Dispatch<React.SetStateAction<boolean>>) => {
+export const getIsWish = async (id: number) => {
   const response = await axios.get(`/api/wishes/${id}`, {
     withCredentials: true,
   });
-
-  setIsWish(response.data.data);
-
   console.log(response.data);
 
   return response.data;

src/api/wishes.ts

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import {Dispatch} from 'react';
+
+import {DataType} from '@/types/home';
+import {Wishes} from '@/types/wish';
+
+export async function getUserWishes(set: Dispatch<Wishes | undefined>) {
+  try {
+    const fetchData = await axios.get('/api/members/my-places');
+    const data: DataType<Wishes> = fetchData.data;
+    set(data.data);
+  } catch (error) {
+    console.log(error);
+  }
+}

src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx

@@ -23,7 +23,6 @@ const SelectButton = ({data}: Propstype) => {
     e.preventDefault();
     setIsClicked((prev) => !prev);
     toggleItemInNewArray(data);
-    console.log(data);
   };
 
   useEffect(() => {

src/components/GlobalNavigationBar/GlobalNavigationBar.tsx

@@ -14,11 +14,13 @@ function GlobalNavigationBar() {
       <Link to='/'>
         <AiOutlineHome fontSize='24px' color={!pathname ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />
       </Link>
-      <Link to='/trip'>
+
+      <Link to='/trip/1'>
         <AiOutlineCarryOut fontSize='24px' color={pathname === 'trip' ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />
       </Link>
-      <Link to='/heart'>
-        <FaRegHeart fontSize='24px' color={pathname === 'heart' ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />
+      <Link to='/wishes'>
+        <FaRegHeart fontSize='24px' color={pathname === 'wishes' ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />
+
       </Link>
       <Link to='/user'>
         <LuUser2 fontSize='24px' color={pathname === 'user' ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />

src/components/Home/VoteAtHome/VoteAtHome.tsx

@@ -2,6 +2,8 @@ import {useEffect, useState} from 'react';
 
 import styles from './VoteAtHome.module.scss';
 
+import {useGetMyInfo} from '@/hooks/User/useUser';
+
 import {getHomeVote} from '@/api/home';
 
 import CardHaveVote from './VoteCard/CardHaveVote/CardHaveVote';
@@ -11,6 +13,7 @@ import {Vote} from '@/types/home';
 
 function VoteAtHome() {
   const [data, setData] = useState<Vote>();
+  const userData = useGetMyInfo(true).data?.data.nickname;
 
   useEffect(() => {
     getHomeVote(setData);
@@ -20,7 +23,7 @@ function VoteAtHome() {
     <div className={styles.container}>
       {data && data.voteResponse.length > 0 ? (
         <p className={styles.title}>
-          <span className={styles.titleNull}>길동님</span>
+          <span className={styles.titleNull}>{userData} 님</span>
           <br />
           진행 중인 투표가 있어요!
         </p>

src/components/Home/VoteAtHome/VoteCard/CardHaveVote/CardHaveVote.tsx

@@ -39,14 +39,15 @@ function CardHaveVote({data}: PropsType) {
       >
         {data &&
           data.voteResponse.map((data) => {
+            const voteTripTitle = data.spaceInfo.title ? data.spaceInfo.title : '여행지 미정';
             const date = setSpaceDate_DOW(data.spaceInfo.startDate, data.spaceInfo.endDate);
 
             return (
               <div className={styles.vote_box} key={data.voteId}>
                 <div className={styles.contents}>
                   <div className={styles.text_box}>
                     <p className={styles.vote_title}>
-                      <span>{data.spaceInfo.title}</span>
+                      <span>{voteTripTitle}</span>
                       <span>{date}</span>
                     </p>
                     <p className={styles.discussion}>

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

@@ -40,6 +40,7 @@ function DateFilter({forSearch}: PropsType) {
             onClick={() => {
               selectSort(data);
             }}
+            key={data}
           >
             {data}
           </span>

src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.module.scss

@@ -1,6 +1,8 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
+  position: relative;
+
   min-width: 33.5rem;
   min-height: 12rem;
 
@@ -15,9 +17,11 @@
   background-color: $neutral0;
 
   img {
-    width: 9.6rem;
+    min-width: 9.6rem;
     height: 9.6rem;
 
+    border-radius: 8px;
+
     transition: 0.3s all linear;
   }
 
@@ -38,4 +42,9 @@
       @include typography(captionSmall);
     }
   }
+  .wishBtn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+  }
 }

src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.tsx

@@ -2,6 +2,8 @@ import {Link} from 'react-router-dom';
 
 import styles from './MapItem.module.scss';
 
+import WishBtn from '@/components/WishBtn/WishBtn';
+
 import areas from '@/utils/areas.json';
 import {translateCategoryToStr} from '@/utils/translateSearchData';
 
@@ -25,6 +27,7 @@ function MapItem({data, categoryChange}: PropsType) {
           {category}·{location}
         </span>
       </p>
+      <WishBtn contentTypeId={data.contentTypeId} placeId={data.id} className={styles.wishBtn} />
     </Link>
   );
 }

src/components/SearchFromHome/SearchList/Map/MapItems/MapItems.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
   position: relative;

src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.tsx

@@ -1,37 +1,53 @@
+import {useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 
 import styles from './Tab.module.scss';
 
 import {translateCategoryToNum, translateCategoryToStr} from '@/utils/translateSearchData';
 
 import {ForSearchType} from '@/types/home';
+import {WishFilterType} from '@/types/wish';
 
 interface PropsType {
-  forSearch: ForSearchType;
+  forSearch: ForSearchType | undefined;
+  wishFilter: WishFilterType | undefined;
   thisCategory: string;
   setCategoryChange: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-function Tab({forSearch, thisCategory, setCategoryChange}: PropsType) {
+function Tab({forSearch, thisCategory, wishFilter, setCategoryChange}: PropsType) {
+  const [isSelect, setIsSelect] = useState(false);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (forSearch) {
+      setIsSelect(translateCategoryToStr(forSearch.category) === thisCategory);
+    } else if (wishFilter) {
+      setIsSelect(translateCategoryToStr(wishFilter.category) === thisCategory);
+    }
+  }, [forSearch, wishFilter]);
+
   function handleCategory(key: number) {
     setCategoryChange(true);
     setTimeout(() => {
       setCategoryChange(false);
     }, 150);
-    navigate(
-      `/search?keyword=${forSearch.keyword}&category=${key}&map=${forSearch.map}&location=${forSearch.location}&sort=${forSearch.sort}&hot=${forSearch.hot}&placeID=${forSearch.placeID}&tripDate=${forSearch.tripDate}`,
-    );
+    if (forSearch) {
+      navigate(
+        `/search?keyword=${forSearch.keyword}&category=${key}&map=${forSearch.map}&location=${forSearch.location}&sort=${forSearch.sort}&hot=${forSearch.hot}&placeID=${forSearch.placeID}&tripDate=${forSearch.tripDate}`,
+      );
+    } else if (wishFilter) {
+      navigate(`/wishes?category=${key}&placeID=${wishFilter.placeID}&tripDate=${wishFilter.tripDate}`);
+    }
   }
 
   return (
     <p
       className={styles.container}
       id={thisCategory}
       style={{
-        color: translateCategoryToStr(forSearch.category) === thisCategory ? '#1d2433' : '#cdcfd0',
-        borderBottom: translateCategoryToStr(forSearch.category) === thisCategory ? '2px solid #1d2433' : 'none',
+        color: isSelect ? '#1d2433' : '#cdcfd0',
+        borderBottom: isSelect ? '2px solid #1d2433' : 'none',
       }}
       onClick={() => {
         handleCategory(translateCategoryToNum(thisCategory));

src/components/SearchFromHome/SearchList/Tabs/Tabs.tsx

@@ -11,14 +11,16 @@ import {translateCategoryToStr} from '@/utils/translateSearchData';
 import Tab from './Tab/Tab';
 
 import {ForSearchType, SearchItemType} from '@/types/home';
+import {WishFilterType} from '@/types/wish';
 
 interface PropsType {
   data: SearchItemType[] | undefined;
-  forSearch: ForSearchType;
+  forSearch?: ForSearchType | undefined;
+  wishFilter?: WishFilterType | undefined;
   setCategoryChange: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-function Tabs({data, forSearch, setCategoryChange}: PropsType) {
+function Tabs({data, forSearch = undefined, wishFilter = undefined, setCategoryChange}: PropsType) {
   const [category, setCategory] = useState<string[]>();
   const [slideLocation, setSlideLocation] = useState<number>(0);
   const [componentRef, size] = useComponentSize();
@@ -28,7 +30,9 @@ function Tabs({data, forSearch, setCategoryChange}: PropsType) {
       const dataCategory: string[] = [];
       data.map((data) => {
         const categoryData = translateCategoryToStr(data.contentTypeId);
-        dataCategory.push(categoryData);
+        if (categoryData !== '전체') {
+          dataCategory.push(categoryData);
+        }
       });
       const set = new Set(dataCategory);
       const push = ['전체', ...set];
@@ -61,6 +65,7 @@ function Tabs({data, forSearch, setCategoryChange}: PropsType) {
           category.map((thisCategory) => (
             <Tab
               forSearch={forSearch}
+              wishFilter={wishFilter}
               setCategoryChange={setCategoryChange}
               thisCategory={thisCategory}
               key={thisCategory}

src/components/WishBtn/WishBtn.tsx

@@ -1,14 +1,17 @@
+import {useState} from 'react';
 import {FaHeart, FaRegHeart} from 'react-icons/fa';
-import {useRecoilState, useSetRecoilState} from 'recoil';
-import {IsHeartValued} from '@/recoil/detail/detail';
+import {useSetRecoilState} from 'recoil';
+
+import {useDeleteWishes, useGetIsWish, usePostWishes} from '@/hooks/Detail/useWish';
+
 import {isModalOpenState, modalContentState} from '@/recoil/vote/alertModal';
+
 import CustomToast from '../CustomToast/CustomToast';
-import {useDeleteWishes, useGetIsWish, usePostWishes} from '@/hooks/Detail/useWish';
 
 interface WishBtnProps {
   placeId: number;
   contentTypeId: number;
-  size: string;
+  size?: string;
   className?: string;
 }
 
@@ -21,7 +24,6 @@ const notLoginContent = {
 };
 
 function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: WishBtnProps) {
-  const [isWish, setIsWish] = useRecoilState(IsHeartValued);
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
   const setModalContent = useSetRecoilState(modalContentState);
 
@@ -35,7 +37,10 @@ function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: Wish
 
   const showToast = CustomToast();
 
-  useGetIsWish(placeId, setIsWish);
+  const {
+    data: {data: wish},
+  } = useGetIsWish(placeId);
+  const [isWish, setIsWish] = useState(wish);
   const postWishes = usePostWishes();
   const deleteWishes = useDeleteWishes();
 
@@ -61,9 +66,28 @@ function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: Wish
   return (
     <>
       {isWish ? (
-        <FaHeart fontSize={size} cursor='pointer' color='#E23774' onClick={handleWishClick} className={className} />
+        <FaHeart
+          fontSize={size}
+          cursor='pointer'
+          color='#E23774'
+          onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            e.stopPropagation();
+            e.preventDefault();
+            handleWishClick();
+          }}
+          className={className}
+        />
       ) : (
-        <FaRegHeart fontSize={size} cursor='pointer' onClick={handleWishClick} className={className} />
+        <FaRegHeart
+          fontSize={size}
+          cursor='pointer'
+          onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            e.stopPropagation();
+            e.preventDefault();
+            handleWishClick();
+          }}
+          className={className}
+        />
       )}
     </>
   );