🏋️ 온핏(on-fit) 번개 모임 등록 기능 완성 (Next.js + Supabase + Axios)

오늘은 온핏 서비스에서

사용자가 직접 “모임을 등록”할 수 있는 기능을 완성했다.

프론트 → 백엔드 → DB까지 흐름을 직접 연결하면서,

Next.js의 Route Handler와 Supabase, 그리고 axios의 역할을 확실히 이해할 수 있었다.

---

🎯 목표

• 번개 모임 작성 폼 구현
• axios로 서버(/api/post) 요청
• 서버에서 Supabase를 통해 DB에 데이터 저장
• 폼 초기화 및 에러 처리

---

🧩 1. 전체 구조

오늘 만든 구조는 Next.js App Router 기반의 완전한 풀스택 흐름이다.

📦 on-fit
 ┣ 📂 app
 ┃ ┣ 📂 post
 ┃ ┃ ┣ 📂 create
 ┃ ┃ ┃ ┗ 📜 page.tsx        ← 클라이언트 폼 (axios 요청)
 ┃ ┗ 📂 api
 ┃   ┗ 📂 post
 ┃     ┗ 📜 route.ts         ← 서버 Route Handler (Supabase DB 저장)
 ┣ 📂 lib
 ┃ ┣ 📜 axios.ts             ← axios 공통 인스턴스
 ┃ ┗ 📜 supabase-admin.ts    ← 서버용 Supabase 클라이언트
 ┗ 📂 components/common       ← Input, DropBox, Button 등 UI 컴포넌트

---

🧱 2. 프론트엔드 (폼 페이지)

사용자가 작성하는 페이지 /post/create

이 폼의 핵심은 FormData → axios.post() 조합이다.

'use client'
import { useState } from 'react'
import { Card, CardHeader, CardContent } from '@/components/common/Card'
import { Input } from '@/components/common/Input'
import { TextArea } from '@/components/common/TextArea'
import DropBox from '@/components/common/DropBox'
import { Button } from '@/components/common/Button'
import { api } from '@/lib/axios'

const sportOption = ['배드민턴', '축구', '야구']
const levelOption = ['브론즈', '실버', '골드']

export default function Page() {
  const [sport, setSport] = useState(sportOption[0])
  const [level, setLevel] = useState(levelOption[0])
  const [loading, setLoading] = useState(false)

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const fd = new FormData(e.currentTarget)

    const payload = {
      sport: fd.get('sport'),
      title: fd.get('title'),
      description: fd.get('description') || '',
      location: fd.get('location'),
      date: fd.get('date'),
      time: fd.get('time'),
      level: fd.get('level'),
      maxParticipants: Number(fd.get('maxParticipants') || 0),
      currentParticipants: 1,
      status: '모집중',
      author: '테스트유저',
      equipment: fd.get('equipment') || '',
      fee: fd.get('fee') || '',
    }

    try {
      setLoading(true)
      const res = await api.post('/api/post', payload)
      console.log('성공:', res.data.item)
      alert('모임이 생성되었습니다!')
      e.currentTarget.reset() // 폼 초기화
    } catch (err: any) {
      console.log('SERVER ERROR:', err.response?.data)
      alert(`생성 실패: ${err.response?.data?.error ?? err.message}`)
    } finally {
      setLoading(false)
    }
  }

  return (
    <main className="container mx-auto px-4 py-8 max-w-2xl">
      <Card>
        <CardHeader>
          <h3 className="text-2xl font-semibold">번개 모임 만들기</h3>
          <p className="text-sm text-muted-foreground">함께 운동할 사람들을 모집해보세요!</p>
        </CardHeader>

        <CardContent>
          <form onSubmit={onSubmit} className="space-y-6">
            <DropBox name="sport" value={sport} onChange={setSport} options={sportOption} />
            <Input name="title" placeholder="예: 강남 배드민턴 초급자 모집!" required />
            <TextArea name="description" placeholder="모임에 대해 간단히 소개해주세요" />
            <Input name="location" placeholder="예: 강남구 역삼동 체육관" required />
            <Input name="date" type="date" required />
            <Input name="time" type="time" required />
            <Input name="maxParticipants" type="number" placeholder="예: 6" required />
            <DropBox name="level" value={level} onChange={setLevel} options={levelOption} />
            <Input name="equipment" placeholder="예: 라켓(대여 가능), 운동화" />
            <Input name="fee" placeholder="예: 15,000원 (시설비 포함)" />
            <div className="flex gap-3 pt-4">
              <Button type="button" variant="outline" fullWidth>취소</Button>
              <Button type="submit" variant="hero" fullWidth disabled={loading}>
                {loading ? '등록 중…' : '모임 만들기'}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </main>
  )
}

이 코드에서는 사용자 입력을 수집해서 axios로 서버에 POST 요청을 보낸다.

FormData로 key/value를 추출해서 payload로 전송하는 구조다.

---

⚙️ 3. 백엔드 (Next.js Route Handler)

이제 /app/api/post/route.ts 에서 서버가 Supabase DB에 데이터 삽입을 담당한다.

import { sbAdmin } from '@/lib/supabase-admin'
import { NextResponse } from 'next/server'

export async function POST(req: Request) {
  try {
    const body = await req.json()

    const { data, error } = await sbAdmin
      .from('fits')
      .insert({
        ...body,
        created_at: new Date().toISOString(),
      })
      .select()
      .single()

    if (error) throw error
    return NextResponse.json({ ok: true, item: data })
  } catch (err: any) {
    console.error(err)
    return NextResponse.json(
      { ok: false, error: err.message ?? '서버 오류' },
      { status: 500 }
    )
  }
}

여기서 sbAdmin은 서버 전용 Supabase 클라이언트로,

Service Role Key를 사용하기 때문에 클라이언트에서는 절대 쓸 수 없다.

---

🧰 4. lib/axios.ts — 공통 axios 인스턴스

axios를 프로젝트 전역에서 통일된 형태로 쓰기 위해 아래처럼 설정했다.

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)
  }
)

이렇게 하면 에러 로그나 토큰 주입, 공통 헤더 설정 등을 쉽게 관리할 수 있다.

---

🔄 5. 데이터 흐름 (두 단계 통신 구조)

오늘 구현한 흐름은 이렇게 두 번의 통신으로 이뤄진다.

(1) 클라이언트 → axios → /api/post
(2) 서버(Route Handler) → sbAdmin → Supabase(PostgreSQL)

📍 1단계: 클라이언트 → 서버

• 사용자가 폼 작성 후 제출
• axios.post('/api/post') 실행
• Next.js 서버(Route Handler)로 데이터 전송

📍 2단계: 서버 → Supabase

• 서버(route.ts)가 요청 본문을 받고
• sbAdmin.from('fits').insert() 로 Supabase DB에 저장
• 성공 시 { ok: true, item: {...} } 응답

---

🔒 왜 두 단계를 거치나?

이유	설명
보안	Service Role Key를 브라우저에 노출하면 안 됨
검증	서버에서 데이터 유효성 검사 및 필터링 가능
확장성	나중에 알림, 캐시, 파일 업로드 등 쉽게 추가 가능

즉, 이 구조는 안전하고 확장 가능한 표준적인 Next.js 백엔드 패턴이다.

---

🧠 6. Supabase SDK만 썼을 때와 비교

방식	장점	단점
Supabase SDK만 사용	빠르고 간단함	Service Role 못 씀, 로직 추가 어려움
axios → route.ts → sbAdmin	보안/검증/확장성 탁월	구조 한 단계 더 복잡

---

✅ 7. 오늘의 결과

✔️ /post/create 페이지에서 폼 작성 후 “모임 만들기” 클릭 시

Supabase DB에 새로운 게시글 생성

✔️ axios → Route → Supabase 흐름 완전 연결

✔️ 로딩 상태, 폼 초기화, 에러 처리 구현 완료

---

🧭 오늘 배운 핵심 요약

개념	설명
axios	클라이언트 → Next.js Route 통신용 HTTP 클라이언트
Supabase sbAdmin	서버(Route) → PostgreSQL 연결용 SDK
두 단계 통신	(1) axios 요청 → (2) sbAdmin DB 요청
보안 구조	브라우저는 anon key, 서버는 service role key 사용
FormData	<form>에서 key/value 추출하는 기본 Web API

---

✍️ 마무리

오늘은 처음으로 Next.js 내부 API(Route Handler) 와

Supabase(PostgreSQL) 를 직접 연결해봤다.

처음엔 axios와 Supabase의 역할이 겹쳐보였지만,

지금은 완전히 이해됐다 👇

axios는 “내 앱 서버까지”,

sbAdmin(Supabase) 은 “서버에서 DB까지”.

이제 이 구조를 기반으로

다음 단계 — 게시글 목록/상세 조회 기능을 만들 예정이다.