🏋️‍♀️ 온핏(on-fit) Supabase + Next.js로 운동 모임 게시글 불러오기 기능을 구현

오늘은 On-Fit 프로젝트에서

운동 번개(모임) 게시글을 DB에서 불러오는 기능을 구현했다.

이전 글에서는 게시글을 등록하는 POST API를 만들었고,

이번에는 GET 요청으로 목록을 가져와

메인 화면에서 카드 형태로 보여주는 작업을 했다.

---

1️⃣ Supabase 테이블

우선 Supabase Dashboard에서

운동 모임 데이터를 저장할 테이블을 새로 만들었다.

create table public.fits (
  id uuid primary key default gen_random_uuid(),
  sport text not null,
  title text not null,
  description text,
  location text not null,
  date_time timestamptz not null,
  level text not null,
  max_participants int not null,
  current_participants int default 1,
  status text default '모집중',
  author text,
  equipment text,
  fee text,
  inserted_at timestamptz default now()
);

---

2️⃣ 서버 라우트(/api/posts)

Next.js의 Route Handlers를 이용해서

서버에서 Supabase 데이터를 직접 조회하는 API를 만들었다.

// app/api/posts/route.ts
import { NextResponse } from 'next/server'
import { sbAdmin } from '@/lib/supabase-admin'

export async function GET() {
  try {
    const { data, error } = await sbAdmin
      .from('fit')
      .select('*')
      .order('inserted_at', { ascending: false })

    if (error) throw error

    return NextResponse.json({ ok: true, items: data })
  } catch (err: any) {
    console.error('SERVER ERROR:', err)
    return NextResponse.json({ ok: false, error: err.message }, { status: 500 })
  }
}

이 코드로 /api/posts에 GET 요청을 보내면

DB에서 모든 운동 모임 데이터를 JSON으로 받을 수 있다.

Next.js의 route.ts 파일은

파일명이 곧 엔드포인트가 되는 구조라서

/api/posts 경로로 자동 연결된다.

---

3️⃣ Axios를 설정

Axios를 매번 직접 import하는 대신,

공용 인스턴스를 만들어두었다.

// lib/axios.ts
import axios from 'axios'

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: { 'Content-Type': 'application/json' },
})

api.interceptors.response.use(
  (res) => res,
  (err) => {
    console.error('API Error:', err.response?.data || err.message)
    return Promise.reject(err)
  }
)

이렇게 만들어두면

api.get('/api/posts') 한 줄로 서버 요청을 간단하게 보낼 수 있다.

에러가 발생했을 때도 인터셉터에서 한 번에 잡아준다.

---

4️⃣ 클라이언트에서 데이터 불러오기

홈 화면(page.tsx)에서

useEffect를 사용해 Supabase 데이터를 가져오도록 했다.

'use client'
import { useEffect, useMemo, useState } from 'react'
import { api } from '@/lib/axios'
import FitCard from '@/components/main/FitCard'
import { toKstDate, toKstTime } from '@/lib/utils'

export default function Home() {
  const [items, setItems] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await api.get('/api/posts')
        if (res.data.ok) setItems(res.data.items)
      } catch (err) {
        console.error('불러오기 실패:', err)
      }
    }
    fetchData()
  }, [])

  // 데이터 가공
  const fits = useMemo(
    () =>
      items.map((r) => ({
        id: r.id,
        sport: r.sport,
        title: r.title,
        location: r.location,
        date: toKstDate(r.date_time),
        time: toKstTime(r.date_time),
        currentParticipants: r.current_participants,
        maxParticipants: r.max_participants,
        level: r.level,
        status: r.status,
        author: r.author ?? '익명',
      })),
    [items]
  )

  return (
    <main className="container mx-auto px-4 py-10">
      <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
        {fits.map((fit) => (
          <FitCard key={fit.id} {...fit} />
        ))}
      </div>
    </main>
  )
}

이제 /api/posts에서 데이터를 불러와

FitCard 컴포넌트로 카드 형태로 렌더링했다.

---

5️⃣ useMemo로 불필요한 계산 줄이기

처음엔 단순히 items.map()으로 바로 렌더링했는데,

렌더링할 때마다 다시 map()이 실행되는 게 마음에 걸렸다.

그래서 useMemo를 사용했다.

const fits = useMemo(() => items.map(...), [items])

이렇게 하면 items가 바뀌지 않는 한

이 map() 계산은 다시 수행되지 않는다.

데이터가 동일할 때는 이전 결과를 그대로 재사용하므로

불필요한 렌더링 비용을 줄일 수 있었다.

---

6️⃣ 결과 확인

이제 메인 페이지에 접속하면

Supabase에 저장된 운동 모임 게시글이 카드로 렌더링된다.

콘솔에는 다음과 같이 성공 로그가 찍힌다.

GET /api/posts 200 OK

---

🧭 오늘의 정리

구분	역할
/app/api/posts/route.ts	Supabase에서 데이터 가져오는 서버 엔드포인트
/lib/axios.ts	공용 axios 인스턴스
/app/page.tsx	클라이언트에서 GET 요청 + UI 렌더링
useMemo	map 결과 캐싱, 렌더링 최적화

---

🧠 오늘 배운 점

• route.ts는 Next.js에서 자동으로 REST API 엔드포인트로 인식된다.
• useMemo는 서버 캐시가 아니라 렌더링 중 계산 결과 캐시이다.
• Axios 인스턴스를 만들어두면 API 호출 구조가 훨씬 깔끔해진다.