feat: 지도/코스 검색 API 연동 #217

#preview

frontend/src/api/course/index.ts

@@ -33,10 +33,11 @@ export const getCourse = async (courseId: number) => {
   return data;
 };
 
-export const getCourseList = async (pageParam: number) => {
+export const getCourseList = async (pageParam: number, query?: string) => {
   const { data } = await axiosInstance.get<CourseList>(END_POINTS.COURSES, {
     params: {
       page: pageParam,
+      query,
     },
     useAuth: false,
   });

frontend/src/api/map/index.ts

@@ -30,10 +30,11 @@ export const createMap = async (baseMapData: Omit<BaseMap, 'mode'>) => {
   return data.id;
 };
 
-export const getMapList = async (pageParam: number) => {
+export const getMapList = async (pageParam: number, query?: string) => {
   const { data } = await axiosInstance.get<MapList>(END_POINTS.MAPS, {
     params: {
       page: pageParam,
+      query,
     },
     useAuth: false,
   });

frontend/src/components/Map/CourseListPanel.tsx

@@ -6,10 +6,15 @@ import { CourseList, MapItemType } from '@/types';
 
 import CourseItem from './CourseItem';
 
-const CourseListPanel = () => {
+interface CourseListPanelProps {
+  query?: string;
+}
+
+const CourseListPanel: React.FC<CourseListPanelProps> = ({ query }) => {
   const infiniteScrollConfig = {
     queryKey: ['courseList'],
-    queryFn: ({ pageParam }: { pageParam: number }) => getCourseList(pageParam),
+    queryFn: ({ pageParam }: { pageParam: number }) =>
+      getCourseList(pageParam, query),
     getNextPageParam: (lastPage: CourseList) => {
       return lastPage.currentPage < lastPage.totalPages
         ? lastPage.currentPage + 1

frontend/src/components/Map/MapListPanel.tsx

@@ -7,11 +7,15 @@ import { MapItemType, MapList } from '@/types';
 import MapItem from '@/components/Map/MapItem';
 import Box from '../common/Box';
 
-const MapListPanel = () => {
+interface MapListPanelProps {
+  query?: string;
+}
+
+const MapListPanel: React.FC<MapListPanelProps> = ({ query }) => {
   const { data, isFetchingNextPage, hasNextPage, ref } =
     useInfiniteScroll<MapList>({
       queryKey: ['mapList'],
-      queryFn: ({ pageParam }) => getMapList(pageParam),
+      queryFn: ({ pageParam }) => getMapList(pageParam, query),
       getNextPageParam: (lastPage) => {
         return lastPage.currentPage < lastPage.totalPages
           ? lastPage.currentPage + 1

frontend/src/pages/SearchPage/SearchListPanel.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import CourseListPanel from '@/components/Map/CourseListPanel';
+import MapListPanel from '@/components/Map/MapListPanel';
+import ListToggleButtons from '@/components/common/ListToggleButtons';
+import { CreateMapType } from '@/types';
+
+interface SearchListPanelProps {
+  query?: string;
+}
+
+const SearchListPanel: React.FC<SearchListPanelProps> = ({ query }) => {
+  const [listTab, setListTab] = useState<CreateMapType>('MAP');
+
+  return (
+    <div className="flex w-full flex-col items-center">
+      <ListToggleButtons
+        options={[
+          { value: 'MAP', label: '지도' },
+          { value: 'COURSE', label: '코스' },
+        ]}
+        selected={listTab}
+        onSelect={(value) => setListTab(value as CreateMapType)}
+      />
+
+      <div className="mt-4">
+        {listTab === 'MAP' ? (
+          <MapListPanel query={query} />
+        ) : (
+          <CourseListPanel query={query} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SearchListPanel;

frontend/src/pages/SearchPage/SearchPage.tsx

@@ -1,10 +1,9 @@
 import Footer from '@/pages/HomePage/Footer';
 import Header from '@/pages/HomePage/Header';
-
-import MainListPanel from '../HomePage/MainListPanel';
 import SearchBar from '@/components/common/SearchBar';
 import { useSearchParams } from 'react-router-dom';
 import { useState } from 'react';
+import SearchListPanel from '@/pages/SearchPage/SearchListPanel';
 
 const SearchPage = () => {
   const [searchParams] = useSearchParams();
@@ -22,7 +21,7 @@ const SearchPage = () => {
         <div className="mb-4 flex w-[1080px] flex-col items-center justify-center p-4">
           <SearchBar onSearch={handleSearch} query={searchKeyword}></SearchBar>
         </div>
-        <MainListPanel />
+        <SearchListPanel query={query} />
       </div>
       <Footer />
     </>