MyExperienceCard - FE14-Part4-Team5/reser-on-do GitHub Wiki

• “내 체험” 페이지에서 사용자의 예약 또는 완료된 체험 정보를 카드 형태로 보여주는 컴포넌트입니다.
• 체험 제목, 평점, 리뷰 수, 가격 정보를 표시하며, ‘수정하기’, ‘삭제하기’ 버튼이 함께 제공됩니다.
• 버튼 클릭 시 각각 수정 페이지 이동, 삭제 모달 호출과 같은 동작을 구현할 수 있도록 구성되어 있습니다.

• 카드 내부에서는 버튼 UI만 렌더링하며, 실제 동작은 부모 컴포넌트에서 전달받은 버튼에 onClick 이벤트를 통해 처리됩니다.
• 예를 들어 editButton에 onClick={() => navigate('/edit')}을 주입하면 수정 페이지로 이동하게 됩니다.
• price는 toLocaleString()을 활용해 1000 단위마다 콤마(,)로 구분하여 출력됩니다. (예: ₩35,000 /인)
• alt 속성은 접근성을 고려하여 "체험 배너 - [제목]" 형식으로 설정됩니다.

모바일 기준 카드

태블릿 기준 카드

피시 기준 카드

<MyExperienceCard
  bannerImageUrl={mockActivity.bannerImageUrl}
  title={mockActivity.title}
  rating={mockActivity.rating}
  reviewCount={mockActivity.reviewCount}
  currencySymbol={'₩'}
  price={mockActivity.price}
  priceUnit={'/인'}
  editButton={
    <Button onClick={handleEdit} color="#ffffff">
      수정하기
    </Button>
  }
  deleteButton={
    <Button onClick={handleDelete} color="#EDEEF2">
      삭제하기
    </Button>
  }
/>

* 버튼 컴포넌트는 임의로 작성한것입니다~