feat: 메인페이지 인기 섹션 UI 구현 #45-2

Feat/45-2 메인페이지 인기 체험 섹션 UI 구현

Author: BokyungCodes

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

@@ -17,7 +17,7 @@ export default function BannerSection() {
       <div className='absolute inset-0 bg-gradient-to-r from-black to-transparent' />
 
       {/* 텍스트 콘텐츠 */}
-      <div className='relative z-10 flex flex-col items-start w-220 max-w-1152 md:w-440 lg:w-full pl-24 pt-74 md:pl-32 lg:pl-0 md:pt-144 lg:pt-159 lg:ml-auto lg:mr-auto gap-8 lg:gap-20 h-full text-white font-bold break-keep'>
+      <div className='relative z-10 flex flex-col items-start w-220 max-w-1200 md:w-440 lg:w-full pl-24 pt-74 md:pl-32 lg:pl-0 md:pt-144 lg:pt-159 lg:ml-auto lg:mr-auto gap-8 lg:gap-20 h-full text-white font-bold break-keep'>
         <h2 className='text-2xl md:text-[54px] md:leading-[64px] lg:text-[68px] lg:leading-[78px]'>
           함께 배우면 즐거운<br />
           스트릿 댄스

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

@@ -0,0 +1,26 @@
+import Image from 'next/image';
+
+export default function ExperienceCard() {
+  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>
+    </div>
+  );
+}

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { useRef } from 'react';
+import ExperienceCard from '@/app/(with-header)/components/ExperienceCard';
+import IconArrowRight from '@assets/svg/right-arrow';
+import IconArrowLeft from '@assets/svg/left-arrow';
+
+export default function PopularExperiences() {
+  // 카드 슬라이더를 참조할 DOM ref
+  const sliderRef = useRef<HTMLDivElement>(null);
+
+  // 좌우 버튼 클릭 시 한 장씩 슬라이드 이동
+  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; // 한 번에 이동할 거리
+
+    // 슬라이더 스크롤 이동 (좌/우 방향에 따라)
+    sliderRef.current.scrollBy({
+      left: direction === 'left' ? -distance : distance,
+      behavior: 'smooth',
+    });
+  };
+
+  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'>
+      {/* 섹션 제목 + 좌우 화살표 버튼 */}
+      <div className='flex justify-between items-center pb-16 md:pb-32 mb-6'>
+        <h2 className='text-xl md:text-3xl font-bold'>🔥 인기 체험</h2>
+        <div className='flex gap-2'>
+          <IconArrowLeft size={32} onClick={() => scrollByCard('left')} className='text-2xl px-3' />
+          <IconArrowRight size={32} onClick={() => scrollByCard('right')} className='text-2xl px-3' />
+        </div>
+      </div>
+
+      {/* 가로 슬라이드 카드 리스트 */}
+      <div
+        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 />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -13,7 +13,7 @@ export default function SearchBar() {
   };
 
   return (
-    <section className='flex lg:w-full lg:max-w-1152 lg:ml-auto lg:mr-auto justify-center px-16 lg:px-0'>
+    <section className='flex lg:w-full lg:max-w-1200 lg:ml-auto lg:mr-auto justify-center px-16 lg:px-0'>
       <div className='flex flex-col w-full gap-15 md:gap-32 px-24 py-16 md:px-24 md:py-32 rounded-[16px] bg-white shadow-md'>
         <div className='flex items-start gap-2 mb-4'>
           <h3 className='text-lg md:text-xl font-bold text-left'>

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

@@ -1,9 +1,11 @@
 import BannerSection from '@/app/(with-header)/components/BannerSection';
+import PopularExperiences from '@/app/(with-header)/components/PopularExperiences';
 
 export default function HomePage() {
   return (
     <main>
       <BannerSection />
+      <PopularExperiences />
     </main>
   );
 }

src/app/globals.css

@@ -131,3 +131,11 @@
 
   --spacing: 0.0625rem;
 }
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}