Merge pull request #154 from Strong-Potato/151-fix-change-search-api

Fix: change search api
Strong-Potato · Jan 23, 2024 · 1a64e9f · 1a64e9f
2 parents 6aa96a2 + 0d46501
commit 1a64e9f
Show file tree

Hide file tree

Showing 27 changed files with 737 additions and 581 deletions.
diff --git a/src/assets/homeIcons/search/nullImg.svg b/src/assets/homeIcons/search/nullImg.svg
diff --git a/src/components/Home/Onboarding/Onboarding.module.scss b/src/components/Home/Onboarding/Onboarding.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 @mixin keyframes($name) {
   @keyframes #{$name} {

diff --git a/src/components/Home/VoteAtHome/VoteCard/CardHaveVote/CardHaveVote.module.scss b/src/components/Home/VoteAtHome/VoteCard/CardHaveVote/CardHaveVote.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
   @include slide_button_container;
@@ -11,11 +11,11 @@
       min-height: 16.4rem;
 
       background: linear-gradient(
-        119deg,
-        #62aaff 35.27%,
-        rgba(98, 170, 255, 0.3) 142.38%
+        129deg,
+        #267dff 0.29%,
+        rgba(98, 170, 255, 0.95) 50.64%,
+        rgba(142, 255, 144, 0.88) 169.29%
       );
-
       border-radius: 1.6rem;
 
       box-sizing: border-box;

diff --git a/src/components/Home/VoteAtHome/VoteCard/CardNull/CardNull.module.scss b/src/components/Home/VoteAtHome/VoteCard/CardNull/CardNull.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .vote_box {
   width: 100%;
@@ -14,9 +14,10 @@
     align-items: center;
 
     background: linear-gradient(
-      119deg,
-      #62aaff 35.27%,
-      rgba(98, 170, 255, 0.3) 142.38%
+      129deg,
+      #267dff 0.29%,
+      rgba(98, 170, 255, 0.95) 50.64%,
+      rgba(142, 255, 144, 0.88) 169.29%
     );
 
     border-radius: 1.6rem;

diff --git a/src/components/SearchFromHome/SearchBar/SearchBar.tsx b/src/components/SearchFromHome/SearchBar/SearchBar.tsx
@@ -34,10 +34,9 @@ function SearchBar({forSearch, setForSearch}: PropsType) {
   }
 
   function search() {
-    const beforeData = forSearch;
-    beforeData.keyword = inputValue;
-    setForSearch(beforeData);
-    navigate(`/home/search?keyword=${inputValue}&category=0&map=false&location=${forSearch.location}&sort=등록순`);
+    navigate(
+      `/home/search?keyword=${inputValue}&category=0&map=false&location=${forSearch.location}&sort=등록순&hot=false`,
+    );
   }
 
   function removeValue() {
@@ -48,6 +47,7 @@ function SearchBar({forSearch, setForSearch}: PropsType) {
       setInputValue('');
       const beforeData = forSearch;
       beforeData.keyword = '';
+      beforeData.hot = 'false';
       setForSearch(beforeData);
     }
   }

diff --git a/src/components/SearchFromHome/SearchHome/HotItems/HotItem/HotItem.module.scss b/src/components/SearchFromHome/SearchHome/HotItems/HotItem/HotItem.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
   display: flex;
@@ -7,9 +7,11 @@
 
   img {
     min-width: 10.6rem;
-    min-height: 10.6rem;
+    height: 10.6rem;
 
     border-radius: 1.6rem;
+
+    background-color: $neutral200;
   }
   .text_box {
     display: flex;

diff --git a/src/components/SearchFromHome/SearchHome/HotItems/HotItem/HotItem.tsx b/src/components/SearchFromHome/SearchHome/HotItems/HotItem/HotItem.tsx
@@ -1,25 +1,33 @@
-import { Link } from "react-router-dom";
+import {Link} from 'react-router-dom';
 
-import styles from "./HotItem.module.scss";
+import styles from './HotItem.module.scss';
 
-import areas from "@/utils/areas.json";
+import {translateCategoryToStr} from '@/hooks/Search/useSearch';
 
-import { SearchHotItemType } from "@/types/home";
+import nullImg from '@/assets/homeIcons/search/nullImg.svg';
+import areas from '@/utils/areas.json';
+import titleCaseChange from '@/utils/titleCaseChange';
+
+import {SearchHotItemType} from '@/types/home';
 
 interface PropsData {
   data: SearchHotItemType;
 }
 
-function HotItem({ data }: PropsData) {
-  const location = areas.filter((area) => area.areaCode === data.areaCode)[0]
-    .name;
+function HotItem({data}: PropsData) {
+  const location = areas.filter((area) => area.areaCode === data.areaCode)[0].name;
+  const category = translateCategoryToStr(data.contentTypeId);
+  const title = titleCaseChange(data.title);
+  const imgSrc = data.thumbnail ? data.thumbnail : nullImg;
 
   return (
     <Link to={`/detail/${data.title}`} className={styles.container}>
-      <img src={data.thumbnail} alt={`${data.title}의 사진`} />
+      <img src={imgSrc} alt={`${data.title}의 사진`} style={{padding: data.thumbnail ? 0 : '30px'}} />
       <p className={styles.text_box}>
-        <span className={styles.title}>{data.title}</span>
-        <span className={styles.location}>{location}</span>
+        <span className={styles.title}>{title}</span>
+        <span className={styles.location}>
+          {category} · {location}
+        </span>
       </p>
     </Link>
   );

diff --git a/src/components/SearchFromHome/SearchHome/HotItems/HotItems.tsx b/src/components/SearchFromHome/SearchHome/HotItems/HotItems.tsx
@@ -9,32 +9,34 @@ import SlideButton from '@/components/SlideButton/SlideButton';
 
 import HotItem from './HotItem/HotItem';
 
-import {SearchHotItemType} from '@/types/home';
+import {Popular, SearchDataType, SearchHotItemType} from '@/types/home';
 
 interface PropsType {
   type: number;
 }
 
 function HotItems({type}: PropsType) {
-  const [data, setData] = useState<SearchHotItemType[]>();
+  const [data, setData] = useState<SearchHotItemType[] | undefined>();
   const [slideLocation, setSlideLocation] = useState<number>(0);
   const [componentRef, size] = useComponentSize();
 
   useEffect(() => {
-    async function getData<T>(apiURL: string, set: Dispatch<React.SetStateAction<T>>) {
+    async function getData(apiURL: string, set: Dispatch<React.SetStateAction<SearchHotItemType[] | undefined>>) {
       try {
         const fetchData = await axios.get(`${apiURL}`, {
           params: {
             size: 10,
             placeTypeId: type,
           },
         });
-        set(fetchData.data);
+        const data: SearchDataType<Popular> = fetchData.data;
+
+        set(data.data.places);
       } catch (error) {
         console.log(error);
       }
     }
-    getData<SearchHotItemType[] | undefined>('api/places/popular', setData);
+    getData('/api/places/popular', setData);
   }, [type]);
   return (
     <div className={styles.container}>

diff --git a/src/components/SearchFromHome/SearchHome/SearchHome.tsx b/src/components/SearchFromHome/SearchHome/SearchHome.tsx
@@ -3,16 +3,12 @@ import styles from './SearchHome.module.scss';
 import HotItems from './HotItems/HotItems';
 import SearchKeyword from './SearchKeyword/SearchKeyword';
 
-interface Propstype {
-  setKeywordClick: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-function SearchHome({setKeywordClick}: Propstype) {
+function SearchHome() {
   return (
     <div className={styles.lists_box}>
       <div className={styles.column_4px}>
         <p className={styles.title}>인기 검색 키워드</p>
-        <SearchKeyword setKeywordClick={setKeywordClick} />
+        <SearchKeyword />
       </div>
       <div className={styles.column_8px}>
         <p className={styles.title}>최근 30일간 인기 장소</p>

diff --git a/src/components/SearchFromHome/SearchHome/SearchKeyword/SearchKeyword.tsx b/src/components/SearchFromHome/SearchHome/SearchKeyword/SearchKeyword.tsx
@@ -1,4 +1,5 @@
-import {useEffect, useState} from 'react';
+import axios from 'axios';
+import {Dispatch, useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 
 import styles from './SearchKeyword.module.scss';
@@ -7,21 +8,26 @@ import useComponentSize from '@/hooks/useComponetSize';
 
 import SlideButton from '@/components/SlideButton/SlideButton';
 
-import {getData} from '@/mocks/handlers/home';
+import {Keywords, SearchDataType, SearchKeywordType} from '@/types/home';
 
-interface Propstype {
-  setKeywordClick: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-function SearchKeyword({setKeywordClick}: Propstype) {
-  const [data, setData] = useState<{name: string; code: string}[] | undefined>();
+function SearchKeyword() {
+  const [data, setData] = useState<SearchKeywordType[] | undefined>();
   const [listWidth, setListWidth] = useState<number>(0);
   const [slideLocation, setSlideLocation] = useState<number>(0);
   const [componentRef, size] = useComponentSize();
   const navigate = useNavigate();
 
   useEffect(() => {
-    getData<{name: string; code: string}[] | undefined>('api/places/popular/keywords', setData);
+    async function getData(apiURL: string, set: Dispatch<SearchKeywordType[] | undefined>) {
+      try {
+        const fetchData = await axios.get(`${apiURL}`);
+        const data: SearchDataType<Keywords> = fetchData.data;
+        set(data.data.keywords);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+    getData('/api/places/popular/keywords', setData);
   }, []);
 
   // 각 키워드의 너비를 모두 더한 값을 구함
@@ -66,11 +72,9 @@ function SearchKeyword({setKeywordClick}: Propstype) {
             <p
               key={keyword.name + i}
               onClick={() => {
-                setKeywordClick(true);
-                setTimeout(() => {
-                  setKeywordClick(false);
-                }, 2000);
-                navigate(`/home/search?keyword=${keyword.name}&category=0&map=false&location=전국&sort=등록순`);
+                navigate(
+                  `/home/search?keyword=${keyword.name}&category=0&map=false&location=전국&sort=등록순&hot=true`,
+                );
               }}
             >
               {keyword.name}

diff --git a/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.module.scss b/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.module.scss
@@ -1,6 +1,8 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
+  position: relative;
+
   width: 7.9rem;
   height: 2.4rem;
 
@@ -17,4 +19,30 @@
     width: 2.4rem;
     height: 2.4rem;
   }
+
+  .modal {
+    position: absolute;
+    top: 32px;
+    right: 0;
+
+    width: 10.8rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    padding: 20px 32px;
+
+    border-radius: 16px;
+
+    background-color: $neutral0;
+
+    box-shadow:
+      0px 1px 8px 2px rgba(20, 20, 20, 0.1),
+      0px 0px 1px 0px rgba(20, 20, 20, 0.04);
+
+    overflow: hidden;
+
+    transition: 0.5s all;
+  }
 }
diff --git a/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx b/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx
@@ -1,12 +1,50 @@
-import { BsFilterLeft } from "react-icons/bs";
+import {useEffect, useState} from 'react';
+import {BsFilterLeft} from 'react-icons/bs';
+import {useNavigate} from 'react-router-dom';
 
-import styles from "./DateFilter.module.scss";
+import styles from './DateFilter.module.scss';
+
+import {ForSearchType} from '@/types/home';
+
+interface PropsType {
+  forSearch: ForSearchType;
+}
+
+function DateFilter({forSearch}: PropsType) {
+  const [click, setClick] = useState(false);
+  const filterData = ['등록순', '이름순', '인기순'];
+  const navigate = useNavigate();
+
+  function handleModal() {
+    setClick((prev) => !prev);
+  }
+
+  function selectSort(sort: string) {
+    navigate(
+      `/home/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=${forSearch.map}&location=${forSearch.location}&sort=${sort}&hot=${forSearch.hot}`,
+    );
+  }
+
+  useEffect(() => {
+    setClick(false);
+  }, [forSearch.sort]);
 
-function DateFilter() {
   return (
-    <div className={styles.container}>
+    <div className={styles.container} onClick={handleModal}>
       <BsFilterLeft className={styles.icon} />
-      <span style={{ userSelect: "none" }}>등록순</span>
+      <span style={{userSelect: 'none'}}>{forSearch.sort}</span>
+      <div className={styles.modal} style={{height: click ? '136px' : 0, opacity: click ? 1 : 0}}>
+        {filterData.map((data) => (
+          <span
+            style={{opacity: click ? 1 : 0}}
+            onClick={() => {
+              selectSort(data);
+            }}
+          >
+            {data}
+          </span>
+        ))}
+      </div>
     </div>
   );
 }

diff --git a/...onents/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx b/...onents/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx
@@ -32,13 +32,18 @@ function LocationFliterPage({forSearch, click, handleClick}: PropsType) {
 
   useEffect(() => {
     const locationData = forSearch.location.split(' ');
-    setArea(locationData[0]);
-    setSigungu(locationData[1]);
+    if (locationData[0] === '전국') {
+      setArea('전국');
+      setSigungu('전체 지역');
+    } else {
+      setArea(locationData[0]);
+      setSigungu(locationData[1]);
+    }
   }, [forSearch.location]);
 
   function submit() {
     navigate(
-      `/home/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=${forSearch.map}&location=${area} ${sigungu}&sort=${forSearch.sort}`,
+      `/home/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=${forSearch.map}&location=${area} ${sigungu}&sort=${forSearch.sort}&hot=${forSearch.hot}`,
     );
     handleClick();
   }
@@ -48,7 +53,7 @@ function LocationFliterPage({forSearch, click, handleClick}: PropsType) {
       className={styles.container}
       style={{
         position: window.innerWidth > 450 ? 'absolute' : 'fixed',
-        top: window.innerWidth > 450 ? '-88px' : 0,
+        top: 0,
         right: click ? '-100%' : 0,
         height: `${vh * 100}px`,
       }}