[myCart] 홈페이지의 주요 제품 가져오기 및 바로구매 클릭 시 제품 상세 페이지로 이동

 

대표 상품을 가져오기 위한 주소는 아래와 같다. 

[GET] 대표 상품 가져오기 - http://localhost:5000/api/products/featured

 

그리고 주요 제품은 3개가 들어있다. 

 

 

 

현재는 위와 같이 주요 제품들이 표시 되는데 

 

useData를 사용해서 백엔드에서 주요 제품을 받아온 다음에 ProductCard로 넘겨주면 되겠다. 

import useData from "../../Hook/useData";

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

import ProductCardSkeleton from "../Products/ProductCardSkeleton";

import "./FeaturedProducts.css";

const FeaturedProducts = () => {

  const { data: featured, error, isLoading } = useData("/products/featured");

  const skeletons = [1, 2, 3];

  return (

    <section className="featured_products">

      <h2>주요제품</h2>

      <div className="align_center featured_products_list">

        {error && <em className="form_error">{error}</em>}

        {isLoading && skeletons.map((n) => <ProductCardSkeleton key={n} />)}

        {featured &&

          featured.map((product) => <ProductCard product={product} />)}

      </div>

    </section>

  );

};

export default FeaturedProducts;

 

 

 

 

 

 

그리고 홈페이지의 HeroSection을 보면 바로구매 버튼이 있다.

 

이 버튼을 클릭하면 광고하고 있는 상품의 상세 페이지로 이동하게 만들거임 

 

HomePage.jsx 에 link를 수정한다. 

상품 상세보기는 /product/제품id가 들어가기 때문에 

광고하고 있는 제품의 id를 넣어줬다. 

import HeroSection from "./HeroSection";

import iphone from "../../assets/iphone-14-pro.webp";

import mac from "../../assets/mac-system-cut.jfif";

import FeaturedProducts from "./FeaturedProducts";

const HomePage = () => {

  return (

    <div>

      <HeroSection

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

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

        link="/product/658234e22518230f6cfd4209"

        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="/product/658234e22518230f6cfd4211"

        image={mac}

      />

    </div>

  );

};

export default HomePage;

 

그러면 바로구매 클릭 시 해당 상품의 상세보기 페이지로 이동한다.