[myCart] FeaturedProducts 컴포넌트 및 ProductCard 컴포넌트 재사용

 

 

히어로 섹션 사이에 주요 제품들을 보여줄 FeaturedProducts 컴포넌트를 생성한다. 

 

FeaturedProducts.jsx

import "./FeaturedProducts.css";

const FeaturedProducts = () => {

  return (

    <section className="featured_products">

      <h2>주요제품</h2>

      <div className="align_center featured_products_list">

        <article className="product_card">상품</article>

      </div>

    </section>

  );

};

export default FeaturedProducts;

 

 

FeaturedProducts.css

.featured_products {

  margin: 65px;

}

.featured_products > h2 {

  font-size: 48px;

  text-align: center;

  margin-bottom: 65px;

}

.featured_products_list {

  justify-content: space-evenly;

  margin-bottom: 65px;

}

 

HomePage.jsx에 적용한다. 

const HomePage = () => {

  return (

    <div>

      <HeroSection

        title="아이폰 14 프로 그 이상"

        subtitle="Experience the power of the latest iPhone 14 with our most Pro camera ever."

        link="/"

        image={iphone}

      />

      <FeaturedProducts />

      <HeroSection

        title="궁극의 장비를 세팅하세요"

        subtitle="You can add Studio Display and colour-matched Magic accessories to your bag after configure your Mac mini."

        link="/"

        image={mac}

      />

    </div>

  );

};

 

 

 

 

 

 

이제 저 공간에 제품을 채워 넣을 거다.

여러 개의 제품이 들어가니 재사용을 하기위해서 컴포넌트로 만들어준다. 

 

 

ProductCard.jsx

import "./ProductCard.css";

import iphone from "../../assets/iphone.jpg";

import star from "../../assets/white-star.png";

import basket from "../../assets/basket.png";

const ProductCard = () => {

  return (

    <article className="product_card">

      <div className="product_image">

        <a href="product/1">

          <img src={iphone} alt="product image" />

        </a>

      </div>

      <div className="product_details">

        <h3 className="product_price">120만원</h3>

        <p className="product_title">iPhone 14 PRO</p>

        <footer className="align_center product_info_footer">

          <div className="align_center">

            <p className="align_center product_rating">

              <img src={star} alt="star" /> 5.0

            </p>

            <p className="product_review_count">120</p>

          </div>

          <button className="add_to_cart">

            <img src={basket} alt="basket button" />

          </button>

        </footer>

      </div>

    </article>

  );

};

export default ProductCard;

 

 

 

ProductCard.css

.product_card {

  width: 275px;

  height: 330px;

  margin: 20px;

  border-radius: 12px;

  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  background-color: #fff;

  overflow: hidden;

}

.product_image {

  height: 200px;

  text-align: center;

  border-bottom: 1px solid #e5e5e5;

}

.product_image img {

  height: 100%;

}

.product_details {

  padding: 10px 20px;

}

.product_price {

  font-size: 21px;

  font-weight: 700;

}

.product_title {

  font-size: 18px;

  margin-top: 4px;

}

.product_info_footer {

  justify-content: space-between;

  margin: 10px 0;

}

.product_rating {

  height: 30px;

  padding: 4px 8px;

  font-weight: 600;

  border-radius: 5px;

  background-color: #fca311;

  color: #fff;

}

.product_rating img {

  width: 20px;

  margin-right: 5px;

}

.product_review_count {

  font-size: 16px;

  margin-left: 10px;

  color: grey;

  padding: 0 10px;

  border-left: 2px solid #dcdcdc;

}

.add_to_cart {

  width: 40px;

  height: 40px;

  border: none;

  border-radius: 100%;

  background: transparent;

  cursor: pointer;

}

.add_to_cart img {

  width: 100%;

  height: 100%;

}

 

 

FeaturedProducts.jsx 에 ProductCard 컴포넌트를 세 개 추가한다. 

import ProductCard from "../Products/ProductCard";

import "./FeaturedProducts.css";

const FeaturedProducts = () => {

  return (

    <section className="featured_products">

      <h2>주요제품</h2>

      <div className="align_center featured_products_list">

        <ProductCard />

        <ProductCard />

        <ProductCard />

      </div>

    </section>

  );

};

export default FeaturedProducts;