상세 페이지 전체적인 구조 🟢
1)
2)
3)
4)
상세 페이지 주요 로직 🟢
useParams()를 통해 url에 부여된 id를 가져온다. useLocation()을 통해 url에 대한 정보를 담고 있는 location 객체를 가져오는데, navigate를 통해 페이지를 이동함과 동시에 state를 전달할 수 있다는 점이 핵심이다.
쇼핑 페이지에서 띄우는 modal에 포함된 navigate 로직이다. state라는 key에 category라는 value를 담아서 전달하고 있음을 확인할 수 있다. getCardData는 잘 못 작성한 것이니 무시해도 되겠다.
location 객체에서 state라는 key를 찾을 수 있다.
결국 MapData는 기존에 작성한 shoppingData에서 category라는 키를 변수로서 접근해서 얻은, 개별 '배열 데이터'가 된다.
DetailData는 MapData 배열에 있는 개별 객체의 id와 useParams로부터 얻은 id가 일치할 때 획득 가능한 하나의 객체 데이터이다. 가령 id가 1인 돼지 상품이 useParams의 id인 1과 일치한다면, 해당 상품은 DetailData가 되고, 이러한 DetailData를 활용하여 필요한 정보를 보여주게 된다.
상세 페이지 현재 모습 🟢
회고 🟢
부족한 부분
1) 구조를 잡느라 반응형을 전혀 신경쓰지 않았다. 반응형을 구현할 것
2) 바로구매와 장바구니 버튼 각각을 눌렀을 떄의 페이지 이동이 반영되지 않았다. 버튼을 눌렀을 때 어떤 페이지로 이동해야 하는지 고민할 것
3) 옵션과 수량에서 사용할 슬라이더에 대해 고민할 것
