내일배움캠프 12주차 월요일 TIL

// API 호출 및 리뷰 목록 가져오기
async function fetchReviews(restaurantId) {
  try {
    const response = await fetch(
      `/api/users/me/restaurants/${restaurantId}/reviews`,
    );
    if (!response.ok) {
      throw new Error('네트워크 응답이 좋지 않습니다.');
    }
    const data = await response.json();
    const reviews = data.data; // 

    // 리뷰가 배열인지 확인
    if (!Array.isArray(reviews)) {
      throw new Error('리뷰 데이터가 배열이 아닙니다.');
    }

    displayReviews(reviews);
  } catch (error) {
    console.error('리뷰를 가져오는 중 오류 발생:', error);
  }
}

// 리뷰 목록을 HTML로 표시
function displayReviews(reviews) {
  const reviewsContainer = document.getElementById('reviewsContainer');
  reviewsContainer.innerHTML = ''; // 기존 내용 초기화

  reviews.forEach((review) => {
    const reviewElement = document.createElement('main');
    reviewElement.className = 'container';
    reviewElement.innerHTML = `
      <div class="reviewContainer">
          <article id="image">
              <img src="${review.media}" alt="Review Image" style="width: 100%; height: 100%;">
          </article>
      </div>
      <div class="content">
          <article id="star">${'★'.repeat(review.star)}</article>
          <article id="content">${review.content}</article>
      </div>
    `;
    reviewsContainer.appendChild(reviewElement);
  });
}

// 페이지 로드 시 리뷰 가져오기
window.onload = () => {
  const restaurantId = '1'; // 실제 음식점 ID로 변경
  fetchReviews(restaurantId);
};

현재는 테스트를 위해 레스토랑 ID를 하드코딩해놓았지만 파라미터를 통해 받을 예정.
내리뷰는 추가적인 테스트 필요. API 호출 자체가 안된다. 로그인 API를 활용한 html에서 토큰값만 쿠키로 전달되서 추가적인 정보 전달이 되도록 필요할 것 같고...