[myCart] 상품 상세 페이지

ProductCard.jsx

  <Link to={`/product/${id}`}>

          <img

            src={`http://localhost:5000/products/${image}`}

            // {image}만 넣으면 제대로 불러오지 못함

            // 백엔드 서버 주소로 요청하면 됨

            alt="product image"

          />

        </Link>

 

 

현재 상품 목록에서 상품 하나를 클릭하면 상세페이지로 넘어간다. 

 

 

 

라우팅에 아래와 같이 id가 들어가면 아래의 페이지(상세페이지)로 이동

      <Route path="/product/:id" element={<SingleProductPage />} />

 

 

SingleProductPage.jsx

import { useState } from "react";

import "./SingleProductPage.css";

import QuantityInput from "./QuantityInput";

import { useParams } from "react-router-dom";

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

const SingleProductPage = () => {

  //처음 시작 이미지 번호는 0임 -> product.images[0] = image1 을 의미함

  const [selectedImage, setSelectedImage] = useState(0);

  const { id } = useParams(); //주소 변수 path variable받기

  const { data: product, error, isLoading } = useData(`/products/${id}`); //특정 아이디 제품만 가져오게함

  return (

    <section className="align_center single_product">

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

      {product._id && (

        <>

          <div className="align_center">

            <div className="single_product_thumbnails">

              {/* product 안의 images를 map 반복한다. */}

              {product.images.map((image, index) => (

                <img

                  src={`http://localhost:5000/products/${image}`}

                  alt={product.title}

                  // css 는 selectedImage state가 index일 경우 selected_image 적용한다.

                  className={selectedImage === index ? "selected_image" : ""}

                  // 클릭하면 index로 스테이트 저장

                  onClick={() => setSelectedImage(index)}

                />

              ))}

            </div>

            <img

              // 이미지는 선택된 index의 이미지로 출력한다.

              src={`http://localhost:5000/products/${product.images[selectedImage]}`}

              alt={product.title}

              className="single_product_display"

            />

          </div>

          {/* 상품 디테일 */}

          <div className="single_product_details">

            <h1 className="single_product_title">{product.title}</h1>

            <p className="single_product_description">{product.description}</p>

            <p className="single_product_price">

              {/* 우리나라 원화와 맞게 toLocaleString으로 변환 */}￦{" "}

              {product.price.toLocaleString("ko-KR")} 원

            </p>

            <h2 className="quantity_title">구매개수:</h2>

            <div className="align_center quantity_input">

              <QuantityInput />

            </div>

            <button className="search_button add_cart">장바구니 추가</button>

          </div>

        </>

      )}

    </section>

  );

};

export default SingleProductPage;

 

 

기존에 있던 const products 객체는 삭제한다. 

 

그리고 useData로 아이템 하나의 정보를 가져오는데,

 

에러가 날 경우에는 error에 담아서 error출력을 해주고

 

product가 있을 경우에는 반복문으로 product안의 내용을 출력한다.

 

이미지의 경우 백엔드 주소를 사용해야해서 주소 전체를 입력해서 받아온다.