diff --git a/src/components/Home/VoteAtHome/VoteAtHome.tsx b/src/components/Home/VoteAtHome/VoteAtHome.tsx index 9319d4ac..cc39930f 100644 --- 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 (
- {data && data.voteResponse.length > 0 ? ( + {userData && data && data.voteResponse.length > 0 ? (

{userData} 님
diff --git a/src/components/Home/VoteAtHome/VoteCard/CardHaveVote/CardHaveVote.tsx b/src/components/Home/VoteAtHome/VoteCard/CardHaveVote/CardHaveVote.tsx index 19de378d..3aad2b76 100644 --- 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 (

diff --git a/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx b/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx index 465db15f..50134c90 100644 --- 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 (
- {forSearch.sort} + {sort}
{filterData.map((data) => ( { - 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) { {buttonName}
- + ); } diff --git a/src/components/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx b/src/components/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx index 6f39db95..4e36cea7 100644 --- a/src/components/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx +++ b/src/components/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(); 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) { + ); +} + +export default WishesHeader; diff --git a/src/pages/Wishes/Wishes.module.scss b/src/pages/Wishes/Wishes.module.scss index c9625f09..99c50944 100644 --- a/src/pages/Wishes/Wishes.module.scss +++ b/src/pages/Wishes/Wishes.module.scss @@ -4,13 +4,19 @@ width: 100%; height: calc(100% - 56px); + -ms-overflow-style: none; + scrollbar-width: none; + ::-webkit-scrollbar { + display: none; + } + .header { position: relative; width: 100%; height: 6rem; - @include typography(subTitle); + @include typography(titleSmall); span { position: absolute; top: 50%; @@ -19,8 +25,19 @@ transform: translate(-50%, -50%); } } + .filter { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 24px 20px; + } .slide { - padding: 24px 20px 0 20px; + display: flex; + flex-direction: column; + gap: 24px; + + padding: 0 20px; } .nullBox { display: flex; diff --git a/src/pages/Wishes/Wishes.tsx b/src/pages/Wishes/Wishes.tsx index 86a178e7..6abddc46 100644 --- a/src/pages/Wishes/Wishes.tsx +++ b/src/pages/Wishes/Wishes.tsx @@ -4,7 +4,10 @@ import {useSearchParams} from 'react-router-dom'; import styles from './Wishes.module.scss'; import AddToCandidateButton from '@/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton'; +import DateFilter from '@/components/SearchFromHome/SearchList/DateFilter/DateFilter'; +import LocationFilter from '@/components/SearchFromHome/SearchList/LocationFilter/LocationFilter'; import Tabs from '@/components/SearchFromHome/SearchList/Tabs/Tabs'; +import WishesHeader from '@/components/WishItem/WishesHeader/WishesHeader'; import {getUserWishes} from '@/api/wishes'; import SearchNull from '@/assets/homeIcons/search/searchNull.svg?react'; @@ -21,25 +24,46 @@ function Wishes() { const [searchParams] = useSearchParams(); const [filter, setFilter] = useState({ category: 0, + location: '전국', placeID: 'undefined', tripDate: 'undefinde', + sort: '등록순', }); useEffect(() => { const querystring = { + category: searchParams.get('category'), + location: searchParams.get('location'), placeID: searchParams.get('placeID'), tripDate: searchParams.get('tripDate'), + sort: searchParams.get('sort'), }; - if (querystring.placeID && !querystring.tripDate) { + if ( + querystring.category && + querystring.placeID && + querystring.location && + querystring.sort && + !querystring.tripDate + ) { setFilter({ - category: filter.category, + category: parseInt(querystring.category), + location: querystring.location, + sort: querystring.sort, placeID: querystring.placeID, tripDate: filter.tripDate, }); } - if (querystring.placeID && querystring.tripDate) { + if ( + querystring.category && + querystring.placeID && + querystring.location && + querystring.sort && + querystring.tripDate + ) { setFilter({ - category: filter.category, + category: parseInt(querystring.category), + location: querystring.location, + sort: querystring.sort, placeID: querystring.placeID, tripDate: querystring.tripDate, }); @@ -68,10 +92,18 @@ function Wishes() { return (
-

- 찜 목록 -

+ {filter.placeID === 'undefined' ? ( +

+ 찜 목록 +

+ ) : ( + + )} {data && } +
+ + +
    {filterData && filterData?.length > 0 ? ( filterData.map((data) => ) diff --git a/src/types/wish.ts b/src/types/wish.ts index a18aff37..9025c1a8 100644 --- a/src/types/wish.ts +++ b/src/types/wish.ts @@ -21,6 +21,8 @@ export interface Wishes { export interface WishFilterType { category: number; + location: string; placeID: string; tripDate: string; + sort: string; }