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

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

@@ -1,7 +1,11 @@
 import Image from 'next/image';
-import SearchBar from './SearchBar';
+import SearchBar from '@/app/(with-header)/components/SearchBar';
 
-export default function BannerSection() {
+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'>
       {/* 배경 이미지 */}
@@ -27,7 +31,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 cn from '@/lib/cn';
+import Button from '@/components/Button';
+import { ACTIVITY_CATEGORIES, ActivityCategory } from '@/constants/categories';
+
+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}
+          variant='category'
+          selected={selectedCategory === category}
+          onClick={() => onChange(category)}
+          className='flex-shrink-0 max-w-80 max-h-41 py-12 text-[16px] rounded-[15px]'
+        >
+          {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
+          src={imageUrl}
+          alt={title}
+          fill
+          className='object-cover'
+        />
+      </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,98 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import CategoryFilter from '@/app/(with-header)/components/CategoryFilter';
+import ExperienceCard from '@/app/(with-header)/components/ExperienceCard';
+import Pagination from '@components/Pagination';
+import Dropdown from '@components/Dropdown';
+import { ACTIVITY_CATEGORIES, ActivityCategory } from '@/constants/categories';
+import { SORT_OPTIONS, SortOption } from '@/constants/SortPrices';
+import { Experience } from '@/types/experienceListTypes';
+import { getExperiences } from '@/app/api/experiences/getExperiences';
+
+interface ExperienceListProps {
+  keyword?: string;
+}
+
+export default function ExperienceList({ keyword }: ExperienceListProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedCategory, setSelectedCategory] = useState<ActivityCategory>(ACTIVITY_CATEGORIES[0]);
+  const [sortOption, setSortOption] = useState<SortOption | ''>('');
+  const [experiences, setExperiences] = useState<Experience[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // API 호출
+  useEffect(() => {
+    const fetchExperiences = async () => {
+      const res = await getExperiences({
+        page: currentPage,
+        sort: sortOption,
+        keyword, // 검색어
+      });
+
+      setExperiences(res.experiences);
+      setTotalCount(res.totalCount);
+    };
+
+    fetchExperiences();
+  }, [currentPage, sortOption, keyword]);
+
+  useEffect(() => {
+    if (keyword) {
+      setSelectedCategory(ACTIVITY_CATEGORIES[0]);
+      setSortOption('');
+      setCurrentPage(1);
+    }
+  }, [keyword]);
+
+  const totalPage = Math.ceil(totalCount / 8); // 한 페이지당 8개 기준
+
+  return (
+    <section className='max-w-1200 m-auto px-24 md:px-0 pb-83'>
+      {/* 필터 + 드롭다운 라인 */}
+      <div className='flex justify-between items-center mb-40'>
+        <CategoryFilter
+          selectedCategory={selectedCategory}
+          onChange={(category) => {
+            setSelectedCategory(category);
+            setCurrentPage(1); // 필터 변경 시 페이지 초기화
+          }}
+        />
+        <Dropdown
+          options={SORT_OPTIONS}
+          placeholder='가격'
+          value={sortOption}
+          onChange={(sort) => {
+            setSortOption(sort);
+            setCurrentPage(1); // 정렬 변경 시 페이지 초기화
+          }}
+          className='w-120 h-41 text-[14px]'
+        />
+      </div>
+
+      {/* 카드 리스트 */}
+      <div className='m-0'>
+        <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) => (
+            <ExperienceCard
+              key={exp.id}
+              imageUrl={exp.bannerImageUrl}
+              title={exp.title}
+              rating={exp.rating}
+              reviews={exp.reviewCount}
+              price={exp.price}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* 페이지네이션 */}
+      <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
+        src={imageUrl}
+        alt={title}
+        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'>⭐ {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>
+  );
+}

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

@@ -1,33 +1,48 @@
 'use client';
 
-import { useRef } from 'react';
-import ExperienceCard from '@/app/(with-header)/components/ExperienceCard';
+import { useEffect, useRef, useState } from 'react';
 import IconArrowRight from '@assets/svg/right-arrow';
 import IconArrowLeft from '@assets/svg/left-arrow';
+import PopularCard from '@/app/(with-header)/components/PopularCard';
+import { getPopularExperiences } from '../../api/experiences/getPopularExperiences';
+import { Experience } from '@/types/experienceListTypes';
 
 export default function PopularExperiences() {
-  // 카드 슬라이더를 참조할 DOM ref
   const sliderRef = useRef<HTMLDivElement>(null);
 
-  // 좌우 버튼 클릭 시 한 장씩 슬라이드 이동
+  const [popularExperiences, setPopularExperiences] = useState<Experience[]>([]);
+
+  // ✅ 좌우 버튼 클릭 시 한 장씩 슬라이드 이동
   const scrollByCard = (direction: 'left' | 'right') => {
     if (!sliderRef.current) return;
 
-    // 첫 번째 카드 요소를 찾아서 너비 측정
     const card = sliderRef.current.querySelector('.card');
     if (!(card instanceof HTMLElement)) return;
 
-    const cardWidth = card.offsetWidth; // 카드 너비
-    const gap = parseInt(getComputedStyle(sliderRef.current).gap) || 0; // gap 값
-    const distance = cardWidth + gap; // 한 번에 이동할 거리
+    const cardWidth = card.offsetWidth;
+    const gap = parseInt(getComputedStyle(sliderRef.current).gap) || 0;
+    const distance = cardWidth + gap;
 
-    // 슬라이더 스크롤 이동 (좌/우 방향에 따라)
     sliderRef.current.scrollBy({
       left: direction === 'left' ? -distance : distance,
       behavior: 'smooth',
     });
   };
 
+  // ✅ 인기 체험 목록 불러오기
+  useEffect(() => {
+    const fetchPopular = async () => {
+      try {
+        const res = await getPopularExperiences({ cursorId: 0 });
+        setPopularExperiences(res.activities);
+      } catch (error) {
+        console.error('인기 체험을 불러오는 데 실패했습니다:', error);
+      }
+    };
+
+    fetchPopular();
+  }, []);
+
   return (
     <section className='pt-24 md:pt-34 pl-24 lg:pl-0 pb-40 lg:pb-33 lg:max-w-1200 lg:w-full mx-auto'>
       {/* 섹션 제목 + 좌우 화살표 버튼 */}
@@ -44,10 +59,15 @@ export default function PopularExperiences() {
         ref={sliderRef}
         className='flex gap-16 md:gap-32 lg:gap-24 overflow-x-auto scroll-smooth no-scrollbar'
       >
-        {[...Array(4)].map((_, idx) => (
-          // 카드 wrapper: flex-shrink-0으로 크기 고정 + 'card' 클래스로 식별
-          <div key={idx} className='flex-shrink-0 card'>
-            <ExperienceCard />
+        {popularExperiences.map((exp) => (
+          <div key={exp.id} className='flex-shrink-0 card'>
+            <PopularCard
+              imageUrl={exp.bannerImageUrl}
+              title={exp.title}
+              rating={exp.rating}
+              reviews={exp.reviewCount}
+              price={exp.price}
+            />
           </div>
         ))}
       </div>

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

@@ -4,12 +4,17 @@ import { useState, FormEvent } from 'react';
 import Input from '@components/Input';
 import Button from '@components/Button';
 
-export default function SearchBar() {
+interface SearchBarProps {
+  onSearch: (keyword: string) => void;
+}
+
+export default function SearchBar({ onSearch }: SearchBarProps) {
   const [searchValue, setSearchValue] = useState('');
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
-    console.log('검색어:', searchValue); // 검색 로직은 추후 API 연동
+    onSearch(searchValue);       // 부모(HomePage)로 검색어 전달
+    setSearchValue('');          // 선택 사항: 검색어 초기화
   };
 
   return (

src/app/(with-header)/page.tsx

@@ -1,11 +1,18 @@
+'use client';
+
+import { useState } from 'react';
 import BannerSection from '@/app/(with-header)/components/BannerSection';
 import PopularExperiences from '@/app/(with-header)/components/PopularExperiences';
+import ExperienceList from './components/ExperienceList';
 
 export default function HomePage() {
+  const [searchKeyword, setSearchKeyword] = useState('');
+
   return (
     <main>
-      <BannerSection />
+      <BannerSection onSearch={setSearchKeyword} />
       <PopularExperiences />
+      <ExperienceList />
     </main>
   );
 }