저장하기 버튼 누르면 중복 확인하고 로컬 스토리지에 저장하기
some 메서드 활용
로직
클릭 a
배열에 a가 있는 지 확인
없음 - 해당 데이터 a 를 배열에 넣음
클릭 b
배열에 a가 있는 지 확인
없음 - b를 배열에 넣음
클릭 a (중복)
배열에 a가 있는 지 확인
있음 - return;
Card 컴포넌트
-> 부모컴포넌트로부터 data를 프롭스로 받아옴
let BookedHotels: Hotel[] = []; // 배열
const Card = ({ data }: PropsType) => {
const HandleClickReserve = (newData: Hotel) => {
let isExisting = BookedHotels.some(
(data) => data.hotel_name === newData.hotel_name
); // 중복이면 true 반환
if (isExisting) {
alert('이미 저장된 호텔입니다.');
return;
}
if (!isExisting) {
BookedHotels.push(newData);
localStorage.setItem('hotels', JSON.stringify(BookedHotels));
}
};
return (
<div key={data.hotel_name} className='CardContainer'>
<section className='cardLeft'>
<div className='imgWrapper'>
<img src={IMAGE_URL} alt='hotel_image' />
</div>
<div className='hotelInfo'>
<h2>{data.hotel_name}</h2>
<p>{data.address}</p>
<p>기본 인원: {data.occupancy.base}</p>
<p>최대 인원: {data.occupancy.max}</p>
<div className='ratingReview'>
<span>평점: {data.rating} / 5 </span>
<span> 총 {data.review} 건의 리뷰</span>
</div>
</div>
</section>
<section className='cardRight'>
<p>{data.price}원</p>
<p className='tax'>세금 및 수수료 불포함</p>
<button onClick={() => HandleClickReserve(data)}>예약 하기</button>
</section>
</div>
);
};