쇼핑몰 프로젝트 # 6 상품 클릭 시 상품 상세페이지 이동

상세페이지로 이동 시키기 위해서 REST API 부터 만들겠습니다.

 

ProductController 에서 각 productCode에 맞는 주소를 맵핑했습니다.

    @GetMapping("/getProduct/{productCode}") // 새로운 엔드포인트 추가
    public ResponseEntity<Product> getProduct(@PathVariable("productCode") Long productCode) {
        Product product = productService.findByProductCode(productCode);
        if (product != null) {
            return new ResponseEntity<>(product, HttpStatus.OK);
        } else {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
    }

 

ProdcutService 에서는

    @Transactional(readOnly = true)
    public Product findByProductCode(Long productCode) {
        return productRepository.findByProductCode(productCode);
    }

 

JPA를 이용하여 해당값의 productCode와 일치하는 데이터를 가져옵니다.

 

이제 리액트 코드를 보면

 

import './Product.css'; // 외부 스타일 시트 불러오기
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';

const Product = () => {
  const { productCode } = useParams();
  const [product, setProduct] = useState(null);
  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await axios.get(
          `http://localhost:8000/getProduct/${productCode}`,
        );
        setProduct(response.data);
      } catch (error) {
        console.error('상품을 불러오는 중 오류 발생:', error);
      }
    };

    fetchProduct();
  }, [productCode]);

  // 등록 날짜를 년월일 형식으로 변환하는 함수
  const formatRegisterDate = (dateString) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  if (!product) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {/* 메인 이미지 칸 */}
      <div className="container">
        <aside>
          <div className="property-card">
            <img
              src={`http://localhost:8000/getProductImage/${parseInt(
                product.productCode,
              )}`}
              alt={product.productName}
              className="property-image"
            />
          </div>
        </aside>

        <section id="description-card">
          <div className="description-card">
            <div className="grid-item">상품 명 : {product.productName}</div>
            <div className="grid-item">판매가 : {product.productPrice}</div>
            <div className="grid-item">제조사 : {product.companyName}</div>
            <div className="grid-item">SIZE : {product.productSize}</div>
            <div className="grid-item">상품 재고 : {product.productStuck}</div>
            <div className="grid-item">
              등록 날짜 : {formatRegisterDate(product.registerDate)}
            </div>
            <div className="grid-item">별점 : {product.userPoint}</div>

            {/* 버튼 추가 */}
            <div className="buttons">
              <button className="purchase-btn">구매하기</button>
              <button className="like-btn" onClick={handleLikeClick}>
                찜하기
              </button>
              <button className="like-btn" onClick={handleAddToCartClick}>
                장바구니 담기
              </button>
            </div>
            <br></br>
          </div>
        </section>
      </div>
      <hr></hr>

      {/* 상품 재고 라인 */}
      <div class="product-container">
        <section>
          <div class="product-card">
            <div class="grid-item">상품 설명</div>
          </div>
        </section>
      </div>

      <div class="review">
        <section id="review">
          <div class="review-card">
            <div class="grid-item">상품 리뷰</div>
          </div>
        </section>
      </div>

      <footer>
        <p>© 기타 문의 바람.</p>
      </footer>
    </div>
  );
};

export default Product;

 

useParam으로 해당 제품의 productCode를 받아 저장하고

백엔드와 데이터를 주고 받아 product에 data를 저장하고

등록 날짜를 년, 월, 일만 나오도록 코드를 추가한 후에

productCode 별로 해당 제품의 데이터들을 출력했습니다.