triple-frontend icon indicating copy to clipboard operation
triple-frontend copied to clipboard

[react-contexts] images-api v2 적용

Open guswl98 opened this issue 6 months ago • 7 comments

PR 설명

images-api v2를 ImagesContext에 적용합니다. v2에서는 컨텐츠 이미지 API와 리뷰 이미지 API가 분리됨에 따라 상황에 맞게 엔드포인트를 설정해 fetch 합니다. API 문서

변경 내역

  • defaultImages 설정
    • 현재 대부분의 사용부에서는 ImagesProviderimages prop에 대표 이미지를 넣어주고 있습니다. 기존에는 API에 categoryOrder 쿼리가 없었기 때문에 모든 카테고리의 이미지를 불러왔었습니다. 따라서 ImagesProvider에 대표 이미지를 images에 넣어주어도 provider 내에서 실행되는 fetch의 응답에 포함되는 것을 막을 방법이 없었습니다. 하지만 V2에서는 categoryOrder을 설정할 수 있게 되었습니다. 따라서 기존 사용부의 코드를 변경하지 않으며 대표 이미지는 다시 fetch 하지 않을 수 있도록 기본 categoryOrder에는 대표 이미지를 제외하였습니다.
  • useFetchImages hook 분리
    • 데이터를 fetch해오는 부분을 hook으로 분리하여 이미지를 다루는 부분과 fetch하는 부분의 관심사를 나누었습니다. 따라서 Provider 내부에서는 fetch end point를 신경 쓸 필요 없이 fetchImages 함수를 사용하면 됩니다.

체크리스트

스크린샷 & URL

guswl98 avatar Aug 12 '24 02:08 guswl98