Merge pull request #280 from Strong-Potato/248-fix-vote-slide

Fix: search home

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;
+}

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<SearchItemType[]>();
+
+  async function getData() {
+    const fetchData = await keywordSearch('문화관광축제', '전국', '인기순', 1, 10);
+    setData(fetchData);
+  }
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      {data && data.map((data) => <SearchItem data={data} forSearch={forSearch} key={data.id} />)}
+    </div>
+  );
+}
+
+export default HotForTrip;

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) {
         <p className={styles.title}>인기 검색 키워드</p>
         <SearchKeyword forSearch={forSearch} />
       </div>
-      <div className={styles.column_8px}>
-        <p className={styles.title}>최근 30일간 인기 장소</p>
-        <HotItems type={12} />
-      </div>
-      <div className={styles.column_8px}>
-        <p className={styles.title}>최근 30일간 인기 숙소</p>
-        <HotItems type={32} />
-      </div>
+      {forSearch.placeID !== 'undefined' ? (
+        <div className={styles.column_8px}>
+          <p className={styles.title}>최근 30일간 인기 장소</p>
+          <HotForTrip forSearch={forSearch} />
+        </div>
+      ) : (
+        <>
+          <div className={styles.column_8px}>
+            <p className={styles.title}>최근 30일간 인기 장소</p>
+            <HotItems type={12} />
+          </div>
+          <div className={styles.column_8px}>
+            <p className={styles.title}>최근 30일간 인기 숙소</p>
+            <HotItems type={32} />
+          </div>
+        </>
+      )}
+      {forSearch.placeID !== 'undefined' && <AddToCandidateButton />}
     </div>
   );
 }

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);