Strong-Potato · Yamyam-code · Jan 26, 2024 · Jan 26, 2024
diff --git a/src/components/Home/VoteAtHome/VoteAtHome.tsx b/src/components/Home/VoteAtHome/VoteAtHome.tsx
@@ -16,12 +16,14 @@ function VoteAtHome() {
   const userData = useGetMyInfo(true).data?.data.nickname;
 
   useEffect(() => {
-    getHomeVote(setData);
-  }, []);
+    if (userData) {
+      getHomeVote(setData);
+    }
+  }, [userData]);
 
   return (
     <div className={styles.container}>
-      {data && data.voteResponse.length > 0 ? (
+      {userData && data && data.voteResponse.length > 0 ? (
         <p className={styles.title}>
           <span className={styles.titleNull}>{userData} 님</span>
           <br />

diff --git a/src/components/Home/VoteAtHome/VoteCard/CardHaveVote/CardHaveVote.tsx b/src/components/Home/VoteAtHome/VoteCard/CardHaveVote/CardHaveVote.tsx
@@ -40,7 +40,9 @@ 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);
+            const date = data.spaceInfo.startDate
+              ? setSpaceDate_DOW(data.spaceInfo.startDate, data.spaceInfo.endDate)
+              : '날짜 미정';
 
             return (
               <div className={styles.vote_box} key={data.voteId}>

diff --git a/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx b/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx
@@ -5,34 +5,44 @@ import {useNavigate} from 'react-router-dom';
 import styles from './DateFilter.module.scss';
 
 import {ForSearchType} from '@/types/home';
+import {WishFilterType} from '@/types/wish';
 
 interface PropsType {
-  forSearch: ForSearchType;
+  forSearch?: ForSearchType | undefined;
+  wishesFilter?: WishFilterType | undefined;
 }
 
-function DateFilter({forSearch}: PropsType) {
+function DateFilter({forSearch = undefined, wishesFilter = undefined}: PropsType) {
   const [click, setClick] = useState(false);
   const filterData = ['등록순', '이름순', '인기순'];
   const navigate = useNavigate();
+  const sort = forSearch ? forSearch.sort : wishesFilter?.sort;
 
   function handleModal() {
     setClick((prev) => !prev);
   }
 
   function selectSort(sort: string) {
-    navigate(
-      `/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=${forSearch.map}&location=${forSearch.location}&sort=${sort}&hot=${forSearch.hot}&placeID=${forSearch.placeID}&tripDate=${forSearch.tripDate}`,
-    );
+    if (forSearch) {
+      navigate(
+        `/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=${forSearch.map}&location=${forSearch.location}&sort=${sort}&hot=${forSearch.hot}&placeID=${forSearch.placeID}&tripDate=${forSearch.tripDate}`,
+      );
+    }
+    if (wishesFilter) {
+      navigate(
+        `/wish?category=${wishesFilter.category}&location=${wishesFilter.location}&placeID=${wishesFilter.placeID}&tripDate=${wishesFilter.tripDate}&sort=${sort}`,
+      );
+    }
   }
 
   useEffect(() => {
     setClick(false);
-  }, [forSearch.sort]);
+  }, [forSearch?.sort]);
 
   return (
     <div className={styles.container} onClick={handleModal}>
       <BsFilterLeft className={styles.icon} />
-      <span style={{userSelect: 'none', whiteSpace: 'none'}}>{forSearch.sort}</span>
+      <span style={{userSelect: 'none', whiteSpace: 'none'}}>{sort}</span>
       <div className={styles.modal} style={{height: click ? '136px' : 0, opacity: click ? 1 : 0}}>
         {filterData.map((data) => (
           <span

diff --git a/src/components/SearchFromHome/SearchList/LocationFilter/LocationFilter.tsx b/src/components/SearchFromHome/SearchList/LocationFilter/LocationFilter.tsx
@@ -6,12 +6,14 @@ import styles from './LocationFilter.module.scss';
 import LocationFliterPage from './LocationFliterPage/LocationFliterPage';
 
 import {ForSearchType} from '@/types/home';
+import {WishFilterType} from '@/types/wish';
 
 interface PropsType {
-  forSearch: ForSearchType;
+  forSearch?: ForSearchType | undefined;
+  wishesFilter?: WishFilterType | undefined;
 }
 
-function LocationFilter({forSearch}: PropsType) {
+function LocationFilter({forSearch = undefined, wishesFilter = undefined}: PropsType) {
   const [click, setClick] = useState(true);
   const [buttonName, setButtonName] = useState('전체 지역');
 
@@ -20,13 +22,20 @@ function LocationFilter({forSearch}: PropsType) {
   }
 
   useEffect(() => {
-    const datas = forSearch.location.split(' ');
-    if (datas[0] === '전국') {
-      setButtonName('전체 지역');
+    let locationData: string[] | undefined;
+    if (forSearch) {
+      locationData = forSearch.location.split(' ');
     } else {
-      setButtonName(datas[0]);
+      locationData = wishesFilter?.location.split(' ');
     }
-  }, [forSearch.location]);
+    if (locationData) {
+      if (locationData[0] === '전국') {
+        setButtonName('전체 지역');
+      } else {
+        setButtonName(locationData[0]);
+      }
+    }
+  }, [forSearch?.location, wishesFilter?.location]);
 
   return (
     <>
@@ -42,7 +51,7 @@ function LocationFilter({forSearch}: PropsType) {
         <span style={{userSelect: 'none'}}>{buttonName}</span>
         <MdOutlineKeyboardArrowDown className={styles.icon} />
       </div>
-      <LocationFliterPage click={click} forSearch={forSearch} handleClick={handleClick} />
+      <LocationFliterPage click={click} forSearch={forSearch} wishesFilter={wishesFilter} handleClick={handleClick} />
     </>
   );
 }

diff --git a/...onents/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx b/...onents/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx
@@ -9,10 +9,12 @@ import PopularList from './PopularList/PopularList';
 import SelectLocation from './SelectLocation/SelectLocation';
 
 import {ForSearchType} from '@/types/home';
+import {WishFilterType} from '@/types/wish';
 
 interface PropsType {
   click: boolean;
-  forSearch: ForSearchType;
+  forSearch: ForSearchType | undefined;
+  wishesFilter?: WishFilterType | undefined;
   handleClick: () => void;
 }
 
@@ -21,7 +23,7 @@ interface AreaDataType {
   sigunguCode: number;
 }
 
-function LocationFliterPage({forSearch, click, handleClick}: PropsType) {
+function LocationFliterPage({forSearch, wishesFilter, click, handleClick}: PropsType) {
   const [area, setArea] = useState('전국');
   const [areaData, setAreaData] = useState<AreaDataType[]>();
   const [sigungu, setSigungu] = useState('전체 지역');
@@ -31,20 +33,41 @@ function LocationFliterPage({forSearch, click, handleClick}: PropsType) {
   const vh = window.innerHeight / 100;
 
   useEffect(() => {
-    const locationData = forSearch.location.split(' ');
-    if (locationData[0] === '전국') {
-      setArea('전국');
-      setSigungu('전체 지역');
-    } else {
-      setArea(locationData[0]);
-      setSigungu(locationData[1]);
+    if (forSearch) {
+      const locationData = forSearch.location.split(' ');
+      if (locationData[0] === '전국') {
+        setArea('전국');
+        setSigungu('전체 지역');
+      } else {
+        setArea(locationData[0]);
+        setSigungu(locationData[1]);
+      }
     }
-  }, [forSearch.location]);
+    if (wishesFilter) {
+      const locationData = wishesFilter.location.split(' ');
+      if (locationData[0] === '전국') {
+        setArea('전국');
+        setSigungu('전체 지역');
+      } else {
+        setArea(locationData[0]);
+        setSigungu(locationData[1]);
+      }
+    }
+  }, [forSearch?.location, wishesFilter?.location]);
 
   function submit() {
-    navigate(
-      `/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=${forSearch.map}&location=${area} ${sigungu}&sort=${forSearch.sort}&hot=${forSearch.hot}&placeID=${forSearch.placeID}&tripDate=${forSearch.tripDate}`,
-    );
+    if (forSearch) {
+      navigate(
+        `/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=${forSearch.map}&location=${area} ${sigungu}&sort=${forSearch.sort}&hot=${forSearch.hot}&placeID=${forSearch.placeID}&tripDate=${forSearch.tripDate}`,
+      );
+    }
+    console.log(wishesFilter);
+
+    if (wishesFilter) {
+      navigate(
+        `/wishes?category=${wishesFilter.category}&location=${area} ${sigungu}&placeID=${wishesFilter.placeID}&tripDate=${wishesFilter.tripDate}&sort=${wishesFilter.sort}`,
+      );
+    }
     handleClick();
   }
 
@@ -62,9 +85,21 @@ function LocationFliterPage({forSearch, click, handleClick}: PropsType) {
         <button
           onClick={() => {
             handleClick();
-            const locationData = forSearch.location.split(' ');
-            setArea(locationData[0]);
-            setSigungu(locationData[1]);
+            let locationData: string[] | undefined;
+            if (forSearch) {
+              locationData = forSearch.location.split(' ');
+            } else {
+              locationData = wishesFilter?.location.split(' ');
+            }
+            if (locationData) {
+              if (locationData[0] === '전국') {
+                setArea('전국');
+                setSigungu('전체 지역');
+              } else {
+                setArea(locationData[0]);
+                setSigungu(locationData[1]);
+              }
+            }
           }}
         >
           <BackIcon />

diff --git a/src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.module.scss b/src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 .container {
   min-width: 90px;
   height: 33px;
@@ -9,5 +9,7 @@
   justify-content: center;
   align-items: center;
 
+  @include typography(tabLabel);
+
   cursor: pointer;
 }
diff --git a/src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.tsx b/src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.tsx
@@ -28,16 +28,18 @@ function Tab({forSearch, thisCategory, wishFilter, setCategoryChange}: PropsType
   }, [forSearch, wishFilter]);
 
   function handleCategory(key: number) {
-    setCategoryChange(true);
-    setTimeout(() => {
-      setCategoryChange(false);
-    }, 150);
     if (forSearch) {
+      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}`,
       );
     } else if (wishFilter) {
-      navigate(`/wishes?category=${key}&placeID=${wishFilter.placeID}&tripDate=${wishFilter.tripDate}`);
+      navigate(
+        `/wishes?category=${key}&location=${wishFilter.location}&sort=${wishFilter.sort}&placeID=${wishFilter.placeID}&tripDate=${wishFilter.tripDate}`,
+      );
     }
   }
 

diff --git a/src/components/SlideButton/SlideButton.tsx b/src/components/SlideButton/SlideButton.tsx
@@ -1,9 +1,9 @@
-import styles from "./SlideButton.module.scss";
+import styles from './SlideButton.module.scss';
 
-import LeftButton from "./LeftButton/LeftButton";
-import RightButton from "./RightButton/RightButton";
+import LeftButton from './LeftButton/LeftButton';
+import RightButton from './RightButton/RightButton';
 
-import { SlideButtonPropsType } from "@/types/home";
+import {SlideButtonPropsType} from '@/types/home';
 
 function SlideButton({
   slideLocation,
@@ -17,7 +17,7 @@ function SlideButton({
   return (
     <div
       className={styles.container}
-      style={{ display: window.innerWidth < 450 ? "none" : "block" }}
+      style={{display: window.innerWidth < 450 || itemWidth * itemNumber < 450 ? 'none' : 'block'}}
     >
       <LeftButton
         slideLocation={slideLocation}

diff --git a/src/components/WishItem/WishItem.module.scss b/src/components/WishItem/WishItem.module.scss
@@ -2,24 +2,23 @@
 
 .container {
   width: 100%;
-  max-height: 70px;
+  min-height: 64px;
 
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
 
-  padding: 16px 0;
-
   .itemBox {
-    max-height: 70px;
+    min-height: 64px;
 
     display: flex;
+    align-items: center;
     gap: 12px;
 
     img {
-      width: 4rem;
-      height: 4rem;
+      width: 64px;
+      height: 64px;
 
       border-radius: 0.8rem;
 

diff --git a/src/components/WishItem/WishItem.tsx b/src/components/WishItem/WishItem.tsx
@@ -11,12 +11,7 @@ import titleCaseChange from '@/utils/titleCaseChange';
 import {translateCategoryToStr} from '@/utils/translateSearchData';
 
 import {SearchItemType} from '@/types/home';
-
-interface WishFilterType {
-  category: number;
-  placeID: string;
-  tripDate: string;
-}
+import {WishFilterType} from '@/types/wish';
 
 interface PropsType {
   filter: WishFilterType;

diff --git a/src/components/WishItem/WishesHeader/WishesHeader.module.scss b/src/components/WishItem/WishesHeader/WishesHeader.module.scss
@@ -0,0 +1,18 @@
+@use '@/sass' as *;
+
+.container {
+  width: 14rem;
+  min-height: 5.6rem;
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  padding: 0 20px;
+
+  text-align: center;
+
+  color: $neutral900;
+
+  @include typography(button);
+}
diff --git a/src/components/WishItem/WishesHeader/WishesHeader.tsx b/src/components/WishItem/WishesHeader/WishesHeader.tsx
@@ -0,0 +1,18 @@
+import styles from './WishesHeader.module.scss';
+
+import BackIcon from '@/assets/homeIcons/search/backInHome.svg?react';
+
+function WishesHeader() {
+  function offMap() {
+    history.back();
+  }
+
+  return (
+    <button className={styles.container} onClick={offMap}>
+      <BackIcon />
+      <span>장소 검색</span>
+    </button>
+  );
+}
+
+export default WishesHeader;