[Day4] 5-3. ItemCard 가격, 할인율 표시

 

아이템카드에

할인율, 할인가격 등을 추가로 표시할것이다!

---

 

✔️ 할인율 표시하기

목표는 할인율을 이미지 위에 표시하는것!

참고 : H&M 홈페이지

 

---

# 할인율 표시하기

✔️ ItemCard.jsx 코드

// ItemCard.jsx
import React from 'react';

export default function ImageCard({ imageUrl, title, price, discountPercentage }) {
  return (
    <div className="item_card">
      <img src={imageUrl} alt={title} />
      <div>{title}</div>
      <p>{price}원</p>
      {discountPercentage && (
        <div>
          <span>{discountPercentage}% 할인</span>
        </div>
      )}
    </div>
  );
}

 

✔️ CategoryBox.jsx 코드

//CategoryBox.jsx
import React from 'react';
import ItemCard from './ItemCard';

export default function CategoryBox({ items }) {
    return (
        <div className="items_container">
            {items.map((item) => (
                <ItemCard
                    key={item.id}
                    imageUrl={item.imageUrl}
                    title={item.title}
                    price={item.price}
                    discountPercentage={item.discountPercentage}
                />
            ))}
        </div>
    );
}

여기까지 하면 기존 사진, 품목, 가격아래에 할인율이 표시된다!

---

# 최종 구현코드 

여러가지 기능들을 구현한 최종 ItemCard 구현화면

 

• 할인율 : 이미지카드 위에 삽입 (.toLocaleString('ko-KR') 사용)
• 할인전 가격: 계산식 이용 (아래코드)
• const discountedPrice = Math.floor(price * (1 - discountPercentage / 100));

 

의외로 CSS적용이 오래 걸렸다. 

균일한 크기를 위해서 <div>태그를 지정했다.

마트료시카인형처럼...😄

 

✔️ ItemCard.jsx 구조

전체 구조를 그림으로 나타냈다.

저번코드는 css요소를 너무 여러군데에서 지정해서 수정이 너무 힘들었다.

그래서 div에 classname을 지정해서 App.css 한곳에서 css를 수정하게끔 했다.

생각보다 css가 시간이 오래걸렸다. 

 

✔️  ItemCard.jsx 코드

//ItemCard.jsx
import React from 'react';

export default function ImageCard({ imageUrl, title, price, discountPercentage }) {
  const discountedPrice = Math.floor(price * (1 - discountPercentage / 100));

  return (
    <div className="item_card">
      <div className="image-wrapper">
        <img src={imageUrl} alt={title} />
        {discountPercentage && (
          <div className="discount-badge">
            <span>- {discountPercentage} %</span>
          </div>
        )}
      </div>
      <div className="item_titleprice">
        <div className='item_title'>{title}</div>
        <div className='item_cal'>
          <div className='item_price'>{price.toLocaleString('ko-KR')}원</div>
          <div className='sale_price'>
            {discountedPrice.toLocaleString('ko-KR')}원
          </div>
        </div>
      </div>
    </div>
  );
}

 

 

할인율은 함수 Math.floor 사용,

금액을 1000원 ➡️ 1,000원 으로 표기하기 위해 .toLocaleString('ko-KR')사용했다.

 

 

✔️ App.css 부분코드

ItemCard에 해당하는 css파일의 부분코드이다.

 

...
.item_card {
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
  align-items: center;
  width: 300px;
  height: 500px;
  white-space: pre-wrap;
  overflow: hidden;  
  border: 1px solid blue;
  /* padding: 30px; */
}

.item_card .image-wrapper {
  width: 250px;
  position: relative;
  border: 2px solid grey;
  height: 300px;
  overflow: hidden;
  margin-bottom : 20px;
}

.item_card .discount-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #2c01b8;
  color: #ffffff;
  padding: 5px;
  font-size: 18px;
  font-weight: bold;
}
.item_title{
  font-weight: bold;
  font-size: 18px;
}

.item_titleprice {
  margin : 0px;
  border: 2px solid red;
  text-align: left;
  font-size : 15px;
  width: 250px;
  font-size: 18px;
}

.item_cal{
  display: flex;
  flex-direction: row; 
}
.item_price{
  /* border: 2px solid #00ff00; */
  margin-top:5px;
  text-decoration: line-through;
  color: #2c01b8;
  font-size: 18px;

}
.sale_price{
  margin-top:5px;
  margin-left: 10px;
  font-weight: bold;
}

.item_card img {
  object-fit: cover;
  width: 100%; 
  height: 300px; 
  margin: auto;
  object-fit: cover;

}
...

 

---

이부분은 금방 해결할거라 생각했는데...

아주 아주 아주 큰 오산이었다...🤦🏻‍♀️

글 다적고 다시 보니까... 세일가격이랑 원래가격 폰트 색깔이 바뀜 ㅎㅎ;;;

.....🤫

끝!