diff --git a/src/components/SearchFromHome/SearchHome/HotForTrip/HotForTrip.module.scss b/src/components/SearchFromHome/SearchHome/HotForTrip/HotForTrip.module.scss new file mode 100644 index 0000000..941806b --- /dev/null +++ b/src/components/SearchFromHome/SearchHome/HotForTrip/HotForTrip.module.scss @@ -0,0 +1,14 @@ +@use '@/sass' as *; + +.container { + width: 100%; + height: 100%; + + display: flex; + flex-direction: column; + gap: 32px; + + overflow: scroll; + + padding: 0 20px 24px 20px; +} diff --git a/src/components/SearchFromHome/SearchHome/HotForTrip/HotForTrip.tsx b/src/components/SearchFromHome/SearchHome/HotForTrip/HotForTrip.tsx new file mode 100644 index 0000000..71f77cb --- /dev/null +++ b/src/components/SearchFromHome/SearchHome/HotForTrip/HotForTrip.tsx @@ -0,0 +1,34 @@ +import {useEffect, useState} from 'react'; + +import styles from './HotForTrip.module.scss'; + +import {keywordSearch} from '@/api/search'; + +import SearchItem from '../../SearchList/SearchItem/SearchItem'; + +import {ForSearchType, SearchItemType} from '@/types/home'; + +interface PropsType { + forSearch: ForSearchType; +} + +function HotForTrip({forSearch}: PropsType) { + const [data, setData] = useState(); + + async function getData() { + const fetchData = await keywordSearch('문화관광축제', '전국', '인기순', 1, 10); + setData(fetchData); + } + + useEffect(() => { + getData(); + }, []); + + return ( +
+ {data && data.map((data) => )} +
+ ); +} + +export default HotForTrip; diff --git a/src/components/SearchFromHome/SearchHome/SearchHome.tsx b/src/components/SearchFromHome/SearchHome/SearchHome.tsx index f404875..56b00ba 100644 --- a/src/components/SearchFromHome/SearchHome/SearchHome.tsx +++ b/src/components/SearchFromHome/SearchHome/SearchHome.tsx @@ -1,5 +1,8 @@ import styles from './SearchHome.module.scss'; +import AddToCandidateButton from '@/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton'; + +import HotForTrip from './HotForTrip/HotForTrip'; import HotItems from './HotItems/HotItems'; import SearchKeyword from './SearchKeyword/SearchKeyword'; @@ -16,14 +19,24 @@ function SearchHome({forSearch}: PropsType) {

인기 검색 키워드

-
-

최근 30일간 인기 장소

- -
-
-

최근 30일간 인기 숙소

- -
+ {forSearch.placeID !== 'undefined' ? ( +
+

최근 30일간 인기 장소

+ +
+ ) : ( + <> +
+

최근 30일간 인기 장소

+ +
+
+

최근 30일간 인기 숙소

+ +
+ + )} + {forSearch.placeID !== 'undefined' && } ); } diff --git a/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.tsx b/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.tsx index 74bfcb9..576fa68 100644 --- a/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.tsx +++ b/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.tsx @@ -14,10 +14,10 @@ import {ForSearchType, SearchItemType} from '@/types/home'; interface PropsType { forSearch: ForSearchType; data: SearchItemType; - categoryChange: boolean; + categoryChange?: boolean; } -function SearchItem({forSearch, data, categoryChange}: PropsType) { +function SearchItem({forSearch, data, categoryChange = undefined}: PropsType) { const title = titleCaseChange(data.title); const location = areas.filter((area) => area.areaCode === data.location.areaCode)[0].name; const category = translateCategoryToStr(data.contentTypeId);