// 생략

<Swiper
  className="h-full w-full"
  modules={[Autoplay, A11y]}
  autoplay={{ delay: SWIPER.DELAY, disableOnInteraction: false }}
  spaceBetween={bodyWidth < 390 ? bodyWidth : SWIPER.SPACE_BETWEEN}
  slidesPerView={SWIPER.SLIDES_PER_VIEW}
  loop={true}
  loopedSlides={SWIPER.LOOPED_SLIDES}
  onRealIndexChange={swiper => {
    setCurrentSlideIndex(swiper.realIndex);
  }}
>

// 생략

<SwiperSlide
  key={index}
  className="flex h-full w-full items-center justify-center"
  // NOTE: Swiper 컴포넌트의 display는 테일윈드 클래스를 적용할 수 없다.
  style={{ display: 'flex' }}
  onClick={() => {
    if (currentSlideIndex !== index) {
      return;
    }
    if (clickedSlideIndex !== index) {
      setClickedSlideIndex(index);
      return;
    }
    setClickedSlideIndex(-1);
  }}
>
// 생략

export class HttpClient {
  private baseUrl: string;
  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }

  fetch(path: string, options = {}) {
    return fetch(`${this.baseUrl}${path}`, {
      ...options,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }
}

import { HttpClient } from '../http';

export async function getRecommendations() {
  if (!process.env.NEXT_PUBLIC_BASE_API_URL) throw new Error('존재하지 않는 환경변수입니다.');

  const httpClient = new HttpClient(process.env.NEXT_PUBLIC_BASE_API_URL);
  const response = await httpClient.fetch('/recommendations');
  const json = await response.json();
  return json.body;
}