7/30 TIL (행성 정보 불러오기)

📖 행성 정보 불러오기

2번째 섹션에서 supabase planets 테이블에 등록돼있는 img와 tours 테이블에 등록돼있는 price를 갖다 쓰기 위해서 hooks 폴더 내에 useFetchTourDetail 커스텀 훅을 만들었습니다.
useFetchTourDetail.tsx

import { createClient } from '@/supabase/client';
import { useEffect, useState } from 'react'

type Planet = {
  id: string;
  name: string;
  description: string;
  planet_img: string;
  english_name: string | null;
  title: string | null;
}

type TourPrice = {
  id: string;
  price: number;
}

const useFetchTourDetail = () => {
  const [planets, setPlanets] = useState<Planet[]>([]);
  const [tourPrices, setTourPrices] = useState<TourPrice[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchDetails = async () => {
      try {
        const supabase = createClient();

        const { data: planetData, error: planetError } = await supabase
          .from('planets')
          .select('*');

        if (planetError) {
          setError(planetError.message);
          return;
        } else {
          setPlanets(planetData || []);
        }

        const { data: tourData, error: tourError } = await supabase
          .from('tours')
          .select('id, price');

        if (tourError) {
          setError(tourError.message);
          return;
        } else {
          setTourPrices(tourData || []);
        }

      } catch (error) {
        setError((error as Error).message);
      } finally {
        setLoading(false);
      }
    };

    fetchDetails();
  }, []);

  return { planets, tourPrices, loading, error };
}

export default useFetchTourDetail;