Feat/45-3 메인페이지 모든 체험 UI 구현 및 API 연동

src/app/(with-header)/components/BannerSection.tsx

@@ -1,16 +1,21 @@
 import Image from 'next/image';
-import SearchBar from './SearchBar';
 
-export default function BannerSection() {
+import SearchBar from '@/app/(with-header)/components/SearchBar';
+
+interface BannerSectionProps {
+  onSearch: (keyword: string) => void;
+}
+
+export default function BannerSection({ onSearch }: BannerSectionProps) {
   return (
     <section className='relative w-full h-240 md:h-550 mb-93'>
       {/* 배경 이미지 */}
       <Image
-        src='/test/image1.png'
-        alt='스트릿 댄스'
         fill
-        className='object-cover'
         priority
+        alt='스트릿 댄스'
+        className='object-cover'
+        src='/test/image1.png'
       />
 
       {/* 어두운 오버레이 */}
@@ -27,7 +32,7 @@ export default function BannerSection() {
         </p>
       </div>
       <div className='absolute -bottom-100 left-0 right-0'>
-        <SearchBar />
+        <SearchBar onSearch={onSearch} />
       </div>
     </section>
   );

src/app/(with-header)/components/CategoryFilter.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import Button from '@/components/Button';
+import { ACTIVITY_CATEGORIES, ActivityCategory } from '@/constants/categories';
+import cn from '@/lib/cn';
+
+interface CategoryFilterProps {
+  selectedCategory: ActivityCategory;
+  onChange: (category: ActivityCategory) => void;
+  className?: string;
+}
+
+export default function CategoryFilter({
+  selectedCategory,
+  onChange,
+  className,
+}: CategoryFilterProps) {
+  return (
+    <div className={cn('relative flex w-full gap-8 overflow-x-auto whitespace-nowrap no-scrollbar', className)}>
+      {ACTIVITY_CATEGORIES.map((category) => (
+        <Button
+          key={category}
+          className='flex-shrink-0 max-w-80 max-h-41 py-12 text-[16px] rounded-[15px]'
+          selected={selectedCategory === category}
+          variant='category'
+          onClick={() => onChange(category)}
+        >
+          {category}
+        </Button>
+      ))}
+      <div className='pointer-events-none absolute top-0 right-0 h-full w-100 bg-gradient-to-l from-white to-transparent' />
+    </div>
+  );
+}

src/app/(with-header)/components/ExperienceCard.tsx

@@ -1,25 +1,43 @@
 import Image from 'next/image';
 
-export default function ExperienceCard() {
+interface Props {
+  imageUrl: string;
+  title: string;
+  rating: number;
+  reviews: number;
+  price: number;
+}
+
+export default function ExperienceCard({
+  imageUrl,
+  title,
+  rating,
+  reviews,
+  price,
+}: Props) {
   return (
-    <div className='relative w-186 h-186 md:w-384 md:h-384 rounded-[20px] overflow-hidden shadow-md bg-white'>
-      {/* 배경 이미지 */}
-      <Image
-        src='/test/image1.png'
-        alt='체험 이미지'
-        className='w-full object-cover'
-        fill
-      />
-      {/* 어두운 오버레이 */}
-      <div className='absolute inset-0 bg-gradient-to-r from-black to-transparent' />
-      {/* 텍스트 정보 블록 (카드 하단 위치 고정) */}
-      <div className='absolute bottom-12 flex flex-col gap-6 md:gap-20 px-20 py-12 text-white'>
-        {/* 별점 정보 */}
-        <span className='text-md'>⭐ 4.9 (293)</span>
-        {/* 체험명 (줄바꿈 포함, 반응형 크기) */}
-        <p className='text-2lg md:text-3xl font-semibold'>함께 배우면 즐거운<br />스트릿 댄스</p>
-        {/* 가격 정보 */}
-        <p className='text-lg md:text-xl'>₩ 38,000 <span className='text-gray-600 text-md'>/ 인</span></p>
+    <div className='flex flex-col w-full gap-16'>
+      {/* 썸네일 */}
+      <div className='relative w-full h-168 md:h-221 lg:h-283 rounded-[20px] overflow-hidden'>
+        <Image
+          fill
+          alt={title}
+          className='object-cover'
+          src={imageUrl}
+        />
+      </div>
+
+      {/* 텍스트 정보 */}
+      <div className='flex flex-col'>
+        <span className='pb-10 text-lg text-black'>
+          ⭐ {rating} <span className='text-gray-700 text-lg'>({reviews})</span>
+        </span>
+        <p className='pb-15 text-2lg font-semibold text-black line-clamp-2'>
+          {title}
+        </p>
+        <p className='text-xl text-black font-bold'>
+          ₩ {price.toLocaleString()} <span className='text-gray-900 text-lg font-medium'>/ 인</span>
+        </p>
       </div>
     </div>
   );

src/app/(with-header)/components/ExperienceList.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import Dropdown from '@components/Dropdown';
+import Pagination from '@components/Pagination';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+import CategoryFilter from '@/app/(with-header)/components/CategoryFilter';
+import ExperienceCard from '@/app/(with-header)/components/ExperienceCard';
+import { getExperiences } from '@/app/api/experiences/getExperiences';
+import { ACTIVITY_CATEGORIES, ActivityCategory } from '@/constants/categories';
+import {
+  SORT_OPTIONS,
+  SORT_VALUE_MAP,
+  SORT_LABEL_MAP,
+} from '@/constants/SortPrices';
+import { Experience } from '@/types/experienceListTypes';
+
+interface ExperienceListProps {
+  keyword?: string;
+  isSearchMode?: boolean;
+}
+
+export default function ExperienceList({ keyword, isSearchMode }: ExperienceListProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedCategory, setSelectedCategory] = useState<ActivityCategory>(ACTIVITY_CATEGORIES[0]);
+  const [sortOption, setSortOption] = useState<string | undefined>('');
+  const [experiences, setExperiences] = useState<Experience[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+
+  useEffect(() => {
+    const resync = async () => {
+      const res = await getExperiences({
+        page: currentPage,
+        sort: sortOption,
+        category: selectedCategory,
+        keyword,
+      });
+
+      setExperiences(res.experiences);
+      setTotalCount(res.totalCount);
+    };
+
+    resync();
+  }, [currentPage, sortOption, selectedCategory, keyword]);
+
+  useEffect(() => {
+    if (keyword) {
+      setSelectedCategory(ACTIVITY_CATEGORIES[0]);
+      setSortOption('');
+      setCurrentPage(1);
+    }
+  }, [keyword]);
+
+  const totalPage = Math.ceil(totalCount / 8);
+
+  return (
+    <section className='max-w-1200 m-auto px-24 md:px-0 pb-83'>
+
+      {/* 🔍 검색 모드일 때 문구 표시 */}
+      {isSearchMode && keyword && (
+        <>
+          <p className="text-left text-lg font-semibold ml-4 md:ml-0 mt-32">
+            <span className="text-primary font-bold">"{keyword}"</span>
+            (으)로 검색한 결과입니다.
+          </p>
+
+          <p className="text-left text-sm font-normal ml-4 md:ml-0 mt-8 mb-16">
+            총 <span className="font-semibold">{totalCount}</span>개의 결과
+          </p>
+
+          {experiences.length === 0 && (
+            <p className="text-center text-gray-500 mt-32">검색 결과가 없습니다.</p>
+          )}
+        </>
+      )}
+
+      {/* 🧭 필터/정렬 UI (검색 모드 아닐 때만) */}
+      {!isSearchMode && (
+        <div className='flex justify-between items-center mb-40'>
+          <CategoryFilter
+            selectedCategory={selectedCategory}
+            onChange={(category) => {
+              setSelectedCategory(category);
+              setCurrentPage(1);
+            }}
+          />
+          <Dropdown
+            className='w-200'
+            placeholder='가격'
+            options={SORT_OPTIONS}
+            value={sortOption && SORT_LABEL_MAP[sortOption as keyof typeof SORT_LABEL_MAP] || ''}
+            onChange={(label: keyof typeof SORT_VALUE_MAP) => {
+              const value = SORT_VALUE_MAP[label];
+              setSortOption(value);
+              setCurrentPage(1);
+            }}
+          />
+        </div>
+      )}
+
+      <div className='m-0'>
+        {/* 🚂 모든 체험 제목 (검색 아닐 때만) */}
+        {!isSearchMode && (
+          <h2 className='text-xl md:text-3xl font-bold'>🛼 모든 체험</h2>
+        )}
+
+        {/* 체험 카드 목록 */}
+        <div className='grid grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-3 lg:grid-cols-4 lg:grid-rows-2 gap-8 md:gap-16 lg:gap-24 mt-24'>
+          {experiences.map((exp) => (
+            <Link
+              key={exp.id}
+              href={`/activities/${exp.id}`} // 아이디 기반 라우팅
+            >
+              <ExperienceCard
+                imageUrl={exp.bannerImageUrl}
+                price={exp.price}
+                rating={exp.rating}
+                reviews={exp.reviewCount}
+                title={exp.title}
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      {/* 페이지네이션: 결과 있을 때만 표시 */}
+      {experiences.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPage={totalPage}
+          onPageChange={setCurrentPage}
+        />
+      )}
+    </section>
+  );
+}

src/app/(with-header)/components/PopularCard.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+
+interface PopularCardProps {
+  imageUrl: string;
+  title: string;
+  rating: number;
+  reviews: number;
+  price: number;
+}
+
+export default function PopularCard({
+  imageUrl,
+  title,
+  rating,
+  reviews,
+  price,
+}: PopularCardProps) {
+  return (
+    <div className='relative w-186 h-186 md:w-384 md:h-384 rounded-[20px] overflow-hidden shadow-md bg-white'>
+      {/* 배경 이미지 */}
+      <Image
+        fill
+        alt={title}
+        className='w-full object-cover'
+        src={imageUrl}
+      />
+      {/* 어두운 오버레이 */}
+      <div className='absolute inset-0 bg-gradient-to-r from-black to-transparent' />
+      {/* 텍스트 정보 블록 (카드 하단 위치 고정) */}
+      <div className='absolute bottom-12 flex flex-col gap-6 md:gap-20 px-20 py-12 text-white'>
+        {/* 별점 정보 */}
+        <span className='text-md'>⭐ {rating} ({reviews})</span>
+        {/* 체험명 (줄바꿈 포함, 반응형 크기) */}
+        <p className='text-2lg md:text-3xl font-semibold'>{title}</p>
+        {/* 가격 정보 */}
+        <p className='text-lg md:text-xl'>₩ {price.toLocaleString()} <span className='text-gray-600 text-md'>/ 인</span></p>
+      </div>
+    </div>
+  );
+}