지도/코스 검색 API 연동 , UI 스타일 수정

README.md

@@ -1,7 +1,5 @@
 <div align='center'>
-    <img src="https://github.com/user-attachments/assets/b30a96fe-c822-499d-942c-88e7ece72fb3" width=600 alt="오늘의 길">
-<h3> 나만의 길을 따라 일상을 공유하다 🗺️ </h3>
-
+    <img src="https://github.com/user-attachments/assets/d1b124e0-682c-4665-a418-600e97d15a35" width=1000 alt="오늘의 길">
 </div>
 
 ---

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/Banner/BannerSlider.tsx

@@ -30,6 +30,7 @@ const BannerSlider: React.FC<BannerSliderProps> = ({
     speed: interval / 10,
     slidesToShow: 1,
     slidesToScroll: 1,
+    autoplay: true,
     autoplaySpeed: interval,
   };
 
@@ -39,6 +40,9 @@ const BannerSlider: React.FC<BannerSliderProps> = ({
         {banners.map((banner, index) => (
           <div key={index} className={'cursor-pointer'}>
             <img
+              className={
+                'box-sizing:border-box h-full w-full rounded-md border-[1.5px] border-c_border_gray'
+              }
               src={banner.imageUrl}
               alt={`Banner ${index}`}
               onClick={() => window.open(banner.redirectUrl, '_blank')}

frontend/src/components/Map/MapDetailBoard.tsx

@@ -10,7 +10,7 @@ import SideContainer from '@/components/common/SideContainer';
 import Marker from '@/components/Marker/Marker';
 import DeleteMapButton from './DeleteMapButton';
 import EditMapButton from './EditMapButton';
-import MapThumbnail from './MapThumbnail';
+import ListItemThumbnail from '@/components/common/List/ListItemThumbnail';
 
 type MapDetailBoardProps = {
   mapData: Map;
@@ -54,7 +54,7 @@ const MapDetailBoard = ({ mapData }: MapDetailBoardProps) => {
           )}
 
           {mapData.thumbnailUrl.startsWith('https://example') ? (
-            <MapThumbnail className="h-full w-full" />
+            <ListItemThumbnail className="h-full w-full" />
           ) : (
             <img src={mapData.thumbnailUrl} className="object-cover"></img>
           )}

frontend/src/components/common/List/Course/CourseItem.tsx

@@ -0,0 +1,12 @@
+import { MapItemType } from '@/types';
+import ListItem from '@/components/common/List/ListItem';
+
+type CourseItemProps = {
+  courseItem: MapItemType;
+};
+
+const CourseItem = ({ courseItem }: CourseItemProps) => {
+  return <ListItem item={courseItem} linkPrefix="course" />;
+};
+
+export default CourseItem;

frontend/src/components/common/List/Course/CourseListPanel.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { getCourseList } from '@/api/course';
+import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
+import { CourseList } from '@/types';
+
+import CourseItem from './CourseItem';
+import InfiniteListPanel from '@/components/common/List/InfiniteListPanel';
+
+interface CourseListPanelProps {
+  query?: string;
+}
+
+const CourseListPanel: React.FC<CourseListPanelProps> = ({ query }) => {
+  const { data, ref } = useInfiniteScroll<CourseList>({
+    queryKey: ['courseList'],
+    queryFn: ({ pageParam }) => getCourseList(pageParam, query),
+    getNextPageParam: (lastPage) =>
+      lastPage.currentPage < lastPage.totalPages
+        ? lastPage.currentPage + 1
+        : undefined,
+    fetchWithoutQuery: true,
+  });
+
+  const courseItems = data?.pages.flatMap((page) => page.courses) || [];
+
+  return (
+    <InfiniteListPanel
+      data={courseItems}
+      ref={ref}
+      renderItem={(course) => (
+        <CourseItem key={course.id} courseItem={course} />
+      )}
+      className="max-h-[700px] p-5"
+    />
+  );
+};
+
+export default CourseListPanel;

frontend/src/components/common/List/InfiniteListPanel.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import emptyImage from '../../../assets/empty.svg';
+
+interface InfiniteListPanelProps<T> {
+  data: T[] | undefined;
+  ref: React.Ref<HTMLDivElement>;
+  renderItem: (item: T) => React.ReactNode;
+  className?: string;
+}
+
+const InfiniteListPanel = <T,>({
+  data,
+  ref,
+  renderItem,
+  className,
+}: InfiniteListPanelProps<T>) => {
+  return (
+    <div
+      ref={ref}
+      className={`scrollbar-thumb-rounded-lg relative mt-2 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-200 hover:scrollbar-track-gray-400 hover:scrollbar-thumb-gray-400 ${className}`}
+    >
+      {data && data.length > 0 ? (
+        <div className="mt-1 grid h-full w-full grid-cols-5 gap-8">
+          {data.map((item, index) => (
+            <React.Fragment key={index}>{renderItem(item)}</React.Fragment>
+          ))}
+        </div>
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <img
+            src={emptyImage}
+            alt="리스트가 텅 비었습니다!"
+            className="w-100 object-contain py-10"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InfiniteListPanel;

frontend/src/components/common/List/ListItem.tsx

@@ -0,0 +1,57 @@
+import { Link } from 'react-router-dom';
+import PinIcon from '@/components/PinIcon';
+import React from 'react';
+import ListItemThumbnail from '@/components/common/List/ListItemThumbnail';
+
+type ListItemProps<T> = {
+  item: T;
+  linkPrefix: string;
+};
+
+const ListItem = <
+  T extends {
+    id: number;
+    title: string;
+    thumbnailUrl: string;
+    user: { profileImageUrl: string; nickname: string };
+    pinCount: number;
+  },
+>({
+  item,
+  linkPrefix,
+}: ListItemProps<T>) => {
+  return (
+    <Link to={`/${linkPrefix}/${item.id}`}>
+      <div className="h-50 flex flex-col gap-2 rounded-md border-[1.5px] border-gray-200 p-3">
+        <div className="aspect-[4/3] w-full overflow-hidden rounded-md bg-gray-100">
+          {item.thumbnailUrl.startsWith('https://example') ? (
+            <ListItemThumbnail className="h-full w-full object-cover" />
+          ) : (
+            <img
+              src={item.thumbnailUrl}
+              className="h-full w-full object-cover"
+              alt={item.title}
+            />
+          )}
+        </div>
+
+        <p className="truncate text-sm font-medium">{item.title}</p>
+
+        <div className="flex items-center gap-2">
+          <img
+            className="h-6 w-6 rounded-full"
+            src={item.user.profileImageUrl}
+            alt={item.user.nickname}
+          />
+          <p className="text-xs text-gray-700">{item.user.nickname}</p>
+          <PinIcon className="h-4 w-4" fill="#DC1414" />
+          <div className="flex w-5 justify-center rounded-md border-[0.5px] border-gray-400 text-xs text-gray-500">
+            <p>{item.pinCount}</p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default ListItem;