인기 검색 키워드
-최근 30일간 인기 장소
diff --git a/src/components/SearchFromHome/SearchHome/SearchKeyword/SearchKeyword.tsx b/src/components/SearchFromHome/SearchHome/SearchKeyword/SearchKeyword.tsx index 9e28494c..dcb4b35e 100644 --- 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{ - 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 index e90ca855..8ecbb00c 100644 --- 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 index 3db7424d..e26c4bc0 100644 --- 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 ( -
+
+
{data.title}
{category}·{location}
diff --git a/src/components/SearchFromHome/SearchList/Map/MapItems/MapItems.tsx b/src/components/SearchFromHome/SearchList/Map/MapItems/MapItems.tsx
index 60940f27..ef32a661 100644
--- a/src/components/SearchFromHome/SearchList/Map/MapItems/MapItems.tsx
+++ b/src/components/SearchFromHome/SearchList/Map/MapItems/MapItems.tsx
@@ -1,14 +1,14 @@
-import { useEffect, useState } from "react";
+import {useEffect, useState} from 'react';
-import styles from "./MapItems.module.scss";
+import styles from './MapItems.module.scss';
-import useComponentSize from "@/hooks/useComponetSize";
+import useComponentSize from '@/hooks/useComponetSize';
-import SlideButton from "@/components/SlideButton/SlideButton";
+import SlideButton from '@/components/SlideButton/SlideButton';
-import MapItem from "./MapItem/MapItem";
+import MapItem from './MapItem/MapItem';
-import { SearchItemType } from "@/types/home";
+import {SearchItemType} from '@/types/home';
interface PropsType {
data: SearchItemType[];
@@ -32,14 +32,12 @@ function MapItems({
const [throttle, setThrottle] = useState(true);
function setCurrentIndex() {
- const criterion = document.querySelector("#map_slide_container");
- const elements = document.querySelectorAll("#map_slide");
+ const criterion = document.querySelector('#map_slide_container');
+ const elements = document.querySelectorAll('#map_slide');
const childrenArray = Array.from(elements[0].children);
for (const item of childrenArray) {
- const currentLeft =
- criterion &&
- item.getBoundingClientRect().x - criterion.getBoundingClientRect().x;
+ const currentLeft = criterion && item.getBoundingClientRect().x - criterion.getBoundingClientRect().x;
if (currentLeft) {
if (0 < currentLeft && currentLeft < 150) {
const index = childrenArray.indexOf(item);
@@ -65,10 +63,11 @@ function MapItems({
useEffect(() => {
if (size.width < 449) {
- componentRef.current?.scrollTo({ left: 0, behavior: "smooth" });
+ componentRef.current?.scrollTo({left: 0, behavior: 'smooth'});
} else {
setSlideLocation(0);
}
+ console.log(data);
}, [data, size, componentRef]);
useEffect(() => {
@@ -96,7 +95,7 @@ function MapItems({
}, [throttle]);
return (
-
- {data.title}
+
+ {title}
{category}·{location}
diff --git a/src/components/SearchFromHome/SearchList/SearchList.module.scss b/src/components/SearchFromHome/SearchList/SearchList.module.scss
index 5836bbf5..6688c567 100644
--- a/src/components/SearchFromHome/SearchList/SearchList.module.scss
+++ b/src/components/SearchFromHome/SearchList/SearchList.module.scss
@@ -1,8 +1,6 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
.container {
- position: relative;
-
width: 100%;
display: flex;
diff --git a/src/components/SearchFromHome/SearchList/SearchList.tsx b/src/components/SearchFromHome/SearchList/SearchList.tsx
index b27d2703..8de7683e 100644
--- a/src/components/SearchFromHome/SearchList/SearchList.tsx
+++ b/src/components/SearchFromHome/SearchList/SearchList.tsx
@@ -1,9 +1,9 @@
import {useEffect, useState} from 'react';
-import {useNavigate, useSearchParams} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
import styles from './SearchList.module.scss';
-import {getData} from '@/mocks/handlers/home';
+import {keywordSearch, search} from '@/hooks/Search/useSearch';
import DateFilter from './DateFilter/DateFilter';
import LocationFilter from './LocationFilter/LocationFilter';
@@ -16,23 +16,21 @@ import {ForSearchType, SearchItemType} from '@/types/home';
interface PropsType {
forSearch: ForSearchType;
- keywordClick: boolean;
}
-function SearchList({forSearch, keywordClick}: PropsType) {
- const [data, setData] = useState
-
{filterData &&
diff --git a/src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.tsx b/src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.tsx
index f0fdbbdf..5e0a150d 100644
--- a/src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.tsx
+++ b/src/components/SearchFromHome/SearchList/Tabs/Tab/Tab.tsx
@@ -21,7 +21,7 @@ function Tab({forSearch, thisCategory, setCategoryChange}: PropsType) {
setCategoryChange(false);
}, 150);
navigate(
- `/home/search?keyword=${forSearch.keyword}&category=${key}&map=${forSearch.map}&location=${forSearch.location}&sort=${forSearch.sort}`,
+ `/home/search?keyword=${forSearch.keyword}&category=${key}&map=${forSearch.map}&location=${forSearch.location}&sort=${forSearch.sort}&hot=${forSearch.hot}`,
);
}
diff --git a/src/hooks/Search/useSearch.ts b/src/hooks/Search/useSearch.ts
index 5a26a491..4f5dead0 100644
--- a/src/hooks/Search/useSearch.ts
+++ b/src/hooks/Search/useSearch.ts
@@ -1,5 +1,10 @@
-import {getSearchData} from '@/api/search';
+import axios from 'axios';
+import {Dispatch} from 'react';
+
import areaData from '@/utils/areas.json';
+import categoryData from '@/utils/categories.json';
+
+import {SearchItemType} from '@/types/home';
function translateLocation(location: string) {
const searchLocation = location.split(' ');
@@ -92,18 +97,58 @@ export function translateCategoryToStr(category: number) {
return categoryCode;
}
-export function search(keyword: string, location: string, sort: string) {
- const searchLocation = translateLocation(location);
+export function translateCategoryCode(name: string) {
+ const categoryCode = categoryData.filter((data) => data.name === name)[0];
+ return categoryCode.code;
+}
- const searchData = getSearchData(
- 0,
- searchLocation.areaCode,
- searchLocation.sigunguCode,
- 0,
- keyword,
- translateSort(sort),
- 'A05020900',
- );
+export async function search(
+ keyword: string,
+ location: string,
+ sort: string,
+ set: Dispatch