{
- 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 (
-
+
-
등록순
+
{forSearch.sort}
+
+ {filterData.map((data) => (
+ {
+ selectSort(data);
+ }}
+ >
+ {data}
+
+ ))}
+
);
}
diff --git a/src/components/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx b/src/components/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx
index db343e43..b75da888 100644
--- a/src/components/SearchFromHome/SearchList/LocationFilter/LocationFliterPage/LocationFliterPage.tsx
+++ b/src/components/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`,
}}
diff --git a/src/components/SearchFromHome/SearchList/Map/Map.tsx b/src/components/SearchFromHome/SearchList/Map/Map.tsx
index 10e974fd..e43b5669 100644
--- a/src/components/SearchFromHome/SearchList/Map/Map.tsx
+++ b/src/components/SearchFromHome/SearchList/Map/Map.tsx
@@ -45,7 +45,7 @@ function Map({data, categoryChange}: PropsType) {
const markerImage = new window.kakao.maps.MarkerImage(image, imageSize, imageOption);
const marker = new window.kakao.maps.Marker({
- position: new window.kakao.maps.LatLng(data.location.latitude, data.location.longtitude),
+ position: new window.kakao.maps.LatLng(data.location.latitude, data.location.longitude),
image: markerImage,
});
return marker;
@@ -121,6 +121,7 @@ function Map({data, categoryChange}: PropsType) {
level: 4,
};
setMap(new window.kakao.maps.Map(container, options));
+ console.log(data);
}, [data]);
// 맵 생성 시 현재 데이터 좌표들의 바운드를 만들어 중심점 생성
@@ -130,7 +131,7 @@ function Map({data, categoryChange}: PropsType) {
setSmallPin(data);
setBigPin(data);
data.map((data) => {
- bounds.extend(new window.kakao.maps.LatLng(data.location.latitude, data.location.longtitude));
+ bounds.extend(new window.kakao.maps.LatLng(data.location.latitude, data.location.longitude));
});
map.setBounds(bounds);
}
diff --git a/src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.tsx b/src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.tsx
index 20b0c8ed..293e84d6 100644
--- a/src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.tsx
+++ b/src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.tsx
@@ -1,36 +1,26 @@
-import { Link } from "react-router-dom";
+import {Link} from 'react-router-dom';
-import styles from "./MapItem.module.scss";
+import styles from './MapItem.module.scss';
-import areas from "@/utils/areas.json";
+import {translateCategoryToStr} from '@/hooks/Search/useSearch';
-import { SearchItemType } from "@/types/home";
+import areas from '@/utils/areas.json';
+
+import {SearchItemType} from '@/types/home';
interface PropsType {
data: SearchItemType;
categoryChange: boolean;
}
-function MapItem({ data, categoryChange }: PropsType) {
- const location = areas.filter(
- (area) => area.areaCode === data.location.areaCode,
- )[0].name;
- const category =
- data.category === "관광지" ||
- data.category === "문화시설" ||
- data.category === "레포츠" ||
- data.category === "쇼핑"
- ? "관광"
- : data.category;
+function MapItem({data, categoryChange}: PropsType) {
+ const location = areas.filter((area) => area.areaCode === data.location.areaCode)[0].name;
+ const category = translateCategoryToStr(data.contentTypeId);
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 && (
- {data &&
- data.map((data, i) => (
-
- ))}
+ {data && data.map((data, i) => )}
- {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();
- const [filterData, setFilterData] = useState();
+function SearchList({forSearch}: PropsType) {
+ const [data, setData] = useState();
+ const [filterData, setFilterData] = useState();
const [categoryChange, setCategoryChange] = useState(false);
const navigate = useNavigate();
- const [searchParams] = useSearchParams();
useEffect(() => {
- if (!keywordClick) {
- getData('api/home/search/search', setData);
+ if (forSearch.hot === 'true') {
+ keywordSearch(forSearch.keyword, forSearch.location, forSearch.sort, setData);
} else {
- getData('api/home/search/search', setData);
+ search(forSearch.keyword, forSearch.location, forSearch.sort, setData);
}
- }, [searchParams]);
+ }, [forSearch.keyword, forSearch.location, forSearch.sort, forSearch.hot]);
useEffect(() => {
if (data) {
@@ -52,20 +50,20 @@ function SearchList({forSearch, keywordClick}: PropsType) {
function onMap() {
navigate(
- `/home/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=true&location=${forSearch.location}&sort=${forSearch.sort}`,
+ `/home/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=true&location=${forSearch.location}&sort=${forSearch.sort}&hot=${forSearch.hot}`,
);
}
return (
-
+ {forSearch.hot === 'false' &&
}
{forSearch.map === 'true' && filterData ? (
) : (
<>
-
+