🚀 온핏(on-fit) Supabase RLS 기반 API 구조 개선기 — sbAdmin 제거 & SSR 클라이언트 모듈화

1️⃣ 배경 — 왜 sbAdmin을 걷어내기로 했나?

처음엔 서버 라우트에서 Supabase를 다룰 때 sbAdmin (Service Role Key 기반 관리자 클라이언트) 을 썼다.

이 방식은 RLS(Row Level Security)를 완전히 우회하기 때문에,

로그인 여부나 author_id 같은 체크를 서버에서 직접 처리해야 했다.

const { data, error } = await sbAdmin.from('posts').insert({
  title,
  author_id: user.id, // 직접 지정
})

물론 잘 작동하긴 하지만,

Service Role Key는 모든 권한을 가진 슈퍼 관리자 키이기 때문에

잘못 쓰면 일반 사용자가 전체 데이터를 지워버릴 수도 있는 위험한 구조였다.

---

2️⃣ 목표 — “안전한 RLS 구조로 전환하자”

Supabase의 장점 중 하나는 RLS(행 수준 보안) 이다.

이걸 제대로 활용하면 DB 자체에서 “누가 어떤 데이터를 볼 수 있는지” 제어할 수 있다.

그래서 아래처럼 정책을 추가했다 👇

-- 누구나 게시글 조회 가능
create policy "Anyone can read posts"
on posts for select
to public using (true);

-- 로그인 유저만 자신의 글 작성 가능
create policy "Authenticated users can insert own posts"
on posts for insert
to authenticated
with check (auth.uid() = author_id);

-- 작성자 본인만 수정/삭제 가능
create policy "Authors can update/delete own posts"
on posts
for update using (auth.uid() = author_id)
with check (auth.uid() = author_id);

이제부터는 DB가 자동으로 auth.uid()를 검사해주기 때문에

서버 코드에서 직접 user.id를 비교할 필요도 없고,

Service Role Key(sbAdmin) 도 필요 없어졌다 ✅

---

3️⃣ Supabase SSR 클라이언트 구조로 전환

Next.js의 Route Handler (app/api/...) 에서는

@supabase/ssr의 createServerClient()를 이용해 SSR용 클라이언트를 만들 수 있다.

이 클라이언트는 cookies()를 통해 사용자 세션을 자동으로 인식하고

로그인 상태를 기반으로 Supabase 쿼리를 실행한다.

예전에는 이렇게 작성했던 코드가 👇

// sbAdmin (관리자 권한)
const { data, error } = await sbAdmin.from('posts').select('*')

이제는 이렇게 바뀌었다 👇

// ✅ SSR Client (RLS 적용)
const supabase = createServerClient(url, anonKey, { cookies })
const { data } = await supabase.from('posts').select('*')

이제는 anon key만으로도

RLS 정책 덕분에 로그인된 사용자만 안전하게 쿼리할 수 있다.

---

4️⃣ 공통 로직을 모듈화 — route-helpers.ts

profiles, posts 등 여러 API 라우트에서

쿠키 핸들링과 인증 로직이 반복되길래,

이를 src/lib/supabase/route-helpers.ts로 분리했다.

// src/lib/supabase/route-helpers.ts
import { cookies } from "next/headers";
import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { NextResponse } from "next/server";

export async function createSSRClient() {
  const cookieStore = await cookies();
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        async get(name: string) {
          const all = await cookieStore;
          return all.get(name)?.value;
        },
        async set(name: string, value: string, options: CookieOptions) {
          const all = await cookieStore;
          all.set({ name, value, ...options });
        },
        async remove(name: string, options: CookieOptions) {
          const all = await cookieStore;
          all.delete({ name, ...options });
        },
      },
    }
  );
}

/** 로그인 유저 강제 체크 */
export async function requireUserOr401(supabase: Awaited<ReturnType<typeof createSSRClient>>) {
  const { data: { user }, error } = await supabase.auth.getUser();
  if (error || !user) {
    return {
      ok: false as const,
      response: NextResponse.json({ ok: false, error: "UNAUTHORIZED" }, { status: 401 }),
    };
  }
  return { ok: true as const, user };
}

/** 응답 헬퍼 */
export function ok<T extends Record<string, any>>(data: T, init?: ResponseInit) {
  return NextResponse.json({ ok: true, ...data }, init);
}
export function fail(message: string, status = 400) {
  return NextResponse.json({ ok: false, error: message }, { status });
}

/** KST(date+time) → ISO 변환 */
export function toISOFromKST(date: string, time: string) {
  const d = new Date(`${date}T${time}:00+09:00`);
  if (isNaN(d.getTime())) return null;
  return d.toISOString();
}

이 파일 하나로 모든 API 라우트가 깔끔해졌다.

---

5️⃣ posts 라우트 예시

app/api/posts/route.ts는 이제 이렇게 단순해졌다 👇

import { createSSRClient, requireUserOr401, ok, fail, toISOFromKST } from "@/lib/supabase/route-helpers";

export const runtime = "nodejs";

export async function GET() {
  const supabase = await createSSRClient();
  const { data, error } = await supabase.from("posts").select("*").order("created_at", { ascending: false });
  if (error) return fail(error.message, 500);
  return ok({ items: data });
}

export async function POST(req: Request) {
  const supabase = await createSSRClient();
  const auth = await requireUserOr401(supabase);
  if (!auth.ok) return auth.response;

  const b = await req.json();
  const required = ["title", "sport", "location", "date", "time"];
  const missing = required.filter((k) => !b[k]);
  if (missing.length) return fail(`필수값 누락: ${missing.join(", ")}`, 400);

  const dateISO = toISOFromKST(b.date, b.time);
  if (!dateISO) return fail("잘못된 날짜/시간 형식", 400);

  const payload = {
    title: b.title,
    sport: b.sport,
    location: b.location,
    date_time: dateISO,
    author_id: auth.user.id,
    level: b.level ?? "브론즈",
    status: b.status ?? "모집중",
  };

  const { data, error } = await supabase.from("posts").insert(payload).select().single();
  if (error) return fail(error.message, 400);
  return ok({ item: data }, { status: 201 });
}

✅ RLS 정책에 맞게 안전하게 작동

✅ 쿠키/토큰 자동 처리

✅ 중복 로직 제거로 깔끔한 코드 유지

---

6️⃣ 클라이언트에서는 axios로 /api/posts 호출

axios 인스턴스(src/lib/axios.ts)는 그대로 유지된다.

단, 브라우저에서 /api/...를 호출할 때만 사용한다.

'use client'
import { useEffect, useState } from 'react'
import { api } from '@/lib/axios'

export default function Home() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    api.get('/api/posts').then((res) => setPosts(res.data.items))
  }, [])

  return <div>{posts.map(p => <div key={p.id}>{p.title}</div>)}</div>
}

이 구조로

React(axios) → Next API(Route Handler) → Supabase(RLS) → DB

이렇게 안전하고 일관된 파이프라인이 완성됐다.

---

✅ 마무리

이번 리팩터링으로 얻은 것 👇

항목	효과
sbAdmin 제거	RLS 기반 보안 확립
createSSRClient 사용	자동 쿠키 인증 처리
route-helpers.ts 공통화	중복 제거, 유지보수 편의성
클라이언트 axios 호출 분리	브라우저–서버–DB 명확한 계층 구조

---

📘 정리

“이제는 Supabase의 RLS 정책에 맡기고,

서버는 인증된 요청만 안전하게 흘려보내는 역할만 하면 된다.”