0222 ~ 0223 : 상세페이지

1. 인터파크 도서 상세 페이지를 참고해서 도서 상세 페이지에 필요한 정보 props로 가져오기
2. 마켓 컬리 디자인 참고해 CSS 적용

인터파크 도서 Search GET API 사용해 도서 정보 받아오기
✔ 요청 파라미터 :
1. query : 책제목
2. searchTarget, queryType 기본값 : 국내도서, 책제목
🤔 국내도서는 제목만으로 상세정보 받기 가능
🤔 해외도서, 음반, DVD인 경우 추가적 요청 파라미터 설정 필요
👍 searchTarget에 해외도서/음반/DVD 설정 & query 책제목 설정
✔ 응답 파라미터 :
1. props로 사용해 상세페이지 구성 : title, coverLargeUrl, author, publisher, pubDate, customerReviewRank, reviewCount, priceSales, discountRate, priceStandard, description, link

[02/22] 마켓컬리 컨셉으로 스타일링

국내도서 외 상세정보 API 요청 위해 수정

• 국내도서는 API의 기본값으로 별도의 추가적인 쿼리 필요 X
• 기타도서(외국도서, 음반, DVD)의 경우 categoryId와 searchTarget 쿼리 설정이 추가적으로 필요함
• 책을 클릭하며 얻는 categoryId에 따라 상세정보 요청API의 searchTarget 값을 할당받고 API에 요청하여 성공적으로 정보 받아옴
• 가끔 categoryId가 없어 searchTarget도 할당받지 못하는 책에 대한 요청은 오직 query 값인 책 제목만 요청 파라미터로 보냄

cateogoryId에 맞는 요청 파라미터 searchTarget값 할당 함수

function GetsearchTarget(key) {
  if (100 <= key && key < 500) {
    if (key < 200) return "book";
    else if (key < 300) return "foreign";
    else if (key < 400) return "cd";
    else return "dvd";
  } else {
    return;
  }
}

우선을 공식문서의 categoryId값인 숫자를 하드코딩으로 박았지만... shared folder에 있는 categoryId JSON을 활용해서 값을 부여하는 방식으로 수정하면 좋을 것 같다. 나중에 categoryId값이 바뀌는 경우 그것만 바꾸면 되니까..!!!

  useEffect(() => {
    async function getIsbnData() {
      let response = null;
      try {
        //응답 성공

        if (key && searchTarget) { 
          response = await axios.get(
            `https://book.interpark.com/api/search.api?key=89A91C143CDE9705B057F05F9A1F5B538CD290A7AD80599201DCE4401BEEFE8A&output=json&query=${title}&categoryId=${key}&searchTarget=${searchTarget}`
          );
        } else {
          response = await axios.get(
            `https://book.interpark.com/api/search.api?key=89A91C143CDE9705B057F05F9A1F5B538CD290A7AD80599201DCE4401BEEFE8A&output=json&query=${title}`
          );
        }
        setTitleData(response.data.item[0]);
        console.log(response.data.item[0]);
        //console.log("ISBN Detail DATA : ", TitleData);
      } catch (error) {
        //응답 실패
        console.log("ISBN Detail Error : ", error);
      }
    }
    getIsbnData();
  }, [key, title]);

• title 또는 catrgoryId인 key값이 변화함에 따라 새롭게 상세 정보를 가져와야하기 때문에 dependency를 title, key로 설정함
• 요청 파라미터 값이 공백이면 없는 것으로 API가 작동하면 요청 URL 주소를 더 깔금하게 작성할 수 있었겠지만... 공백인 경우 에러가 발생하기 때문에 요청 여부에 따라 다른 요청 URL을 작성함

✔ 보충해야 할 점
리뷰값에 따른 별 나오기
카카오 결제 API 붙여보면 어떨까 생각