MainCard

🧩 MainCard

• 메인 페이지에서 노출되는 체험 리스트용 카드 컴포넌트입니다.
• 유저가 클릭하면 해당 체험의 상세 페이지로 이동할 수 있으며, 썸네일 이미지, 체험명, 별점, 후기 수, 가격 정보를 시각적으로 한 눈에 볼 수 있게 구성되어 있습니다.

---

✅ Props

이름	타입	필수	설명
bannerImageUrl	string	✅	카드 상단에 표시될 체험 이미지 URL
title	string	✅	체험 제목
rating	number	✅	체험 평점 (소수점 첫째 자리까지 표시됨)
reviewCount	number	✅	후기 개수
currencySymbol	string	✅	통화 기호 (예: ₩)
price	number	✅	체험 가격
priceUnit	string	✅	가격 단위 (예: /인, /병 등)
onClick	() => void	✅	카드 클릭 시 실행되는 함수 (상세 페이지 이동 등)

---

⚙️ 동작 방식

• onClick props로 부모 컴포넌트에서 상세 페이지 이동 로직을 주입받습니다.
• 평점은 toFixed(1)을 사용하여 항상 소수점 첫째 자리까지 표시됩니다.
• 가격 옆에는 currencySymbol과 priceUnit 조합으로 금액 표현이 이루어집니다. (예: ₩35,000 /인)
• 이미지의 alt 속성은 접근성을 고려해 "체험 배너 - [제목]" 형식으로 표시됩니다.

---

🖥️ 사용예시

모바일 기준 카드

태블릿 기준 카드

피시 기준 카드

호영님이 제안해주신 텍스트 박스 위쪽 마진 제거 버전

<MainCard
  bannerImageUrl={mockActivity.bannerImageUrl}
  title={mockActivity.title}
  rating={mockActivity.rating}
  reviewCount={mockActivity.reviewCount}
  currencySymbol={'₩'}
  price={mockActivity.price}
  priceUnit={'/인'}
  onClick={() => navigate(`/activities/${mockActivity.id}`)}
/>


* 위 예시는 mockActivity라는 임시 목 데이터를 기준으로 작성된 예시이며,
실제로는 fetch 또는 API 요청을 통해 받아온 데이터를 props로 내려주어야 합니다.