🚩detailPage의 route path 값은 path="/product/:id” 이다.

각각의 item의 id 값을 상세페이지 주소로 넘겨줘야하는데

productCard 내부에서 map 함수를 돌려주었더니 각 item을 넘겨받기가 어려웠다.

📌

<div className="products_contents">
	{productList.map((item, idx) => (
	   <ProductCard item={item} key={idx} />
   ))}
</div>

export default function ProductCard({ item }) {
  const navigate = useNavigate();
  const goToDetail = () => {
    navigate(`/product/${item.id}`);
  };
  return (
    <div className="products_wrap" onClick={goToDetail}>
      <img className="products_img" src={item?.img}></img>
      <h4>{item?.title}</h4>
      <p>{item && `￦${item.price}`}</p>
      <p>{item?.size.map((size) => `${size} / `)}</p>
      {item.new ? <NewBtn /> : <></>}
      {item.choice ? <PickBtn /> : <></>}
    </div>
  );
}

props로 전달받은 item을 통해 data를 전달받기 수월해졌다.