회원가입

utils/supabase/client.ts

@@ -0,0 +1,19 @@
+import { createBrowserClient } from "@supabase/ssr";
+
+/**
+ * [클라이언트 컴포넌트용 Supabase 클라이언트 생성 함수]
+ * 
+ * 이 함수는 브라우저(Front-end)에서 동작하는 컴포넌트(useEffect, onClick 등)에서 사용합니다.
+ * @supabase/ssr 패키지의 createBrowserClient를 사용하면 알아서 브라우저 쿠키를 관리해줍니다.
+ */
+export function createClient() {
+  /**
+   * createBrowserClient: 브라우저 환경에 최적화된 싱글톤(Singleton) 클라이언트를 반환합니다.
+   * - 브라우저는 보안상 'service_role' 같은 비밀 키를 절대 사용하면 안 됩니다.
+   * - 반드시 'NEXT_PUBLIC_'으로 시작하는 URL과 ANON KEY만 사용해야 합니다.
+   */
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+}

utils/supabase/middleware.ts

@@ -0,0 +1,67 @@
+import { createServerClient } from "@supabase/ssr";
+import { NextResponse, type NextRequest } from "next/server";
+import { PUBLIC_AUTH_PAGES, AUTH_ROUTES } from "@/features/auth/constants";
+
+/**
+ * [미들웨어용 세션 업데이트 및 라우트 보호 함수]
+ *
+ * 모든 페이지 요청이 서버에 도달하기 전에 가장 먼저 실행됩니다.
+ *
+ * 주요 기능:
+ * 1. 만료된 로그인 토큰 자동 갱신 (Refresh)
+ * 2. 인증 상태에 따른 라우트 보호
+ */
+export async function updateSession(request: NextRequest) {
+  // ========== 초기 응답 생성 ==========
+  let supabaseResponse = NextResponse.next({ request });
+
+  // ========== Supabase 클라이언트 생성 ==========
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll();
+        },
+        setAll(cookiesToSet) {
+          // 요청 객체에 쿠키 업데이트
+          cookiesToSet.forEach(({ name, value }) =>
+            request.cookies.set(name, value),
+          );
+          // 응답 객체 재생성
+          supabaseResponse = NextResponse.next({ request });
+          // 응답에 쿠키 설정
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options),
+          );
+        },
+      },
+    },
+  );
+
+  // ========== 사용자 인증 정보 확인 ==========
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  const { pathname } = request.nextUrl;
+  const isAuthPage = PUBLIC_AUTH_PAGES.some((page) =>
+    pathname.startsWith(page),
+  );
+
+  // ========== 라우트 보호 ==========
+
+  // 비로그인 사용자 → 보호된 페이지 접근 시 로그인으로 리다이렉트
+  if (!user && !isAuthPage) {
+    return NextResponse.redirect(new URL(AUTH_ROUTES.LOGIN, request.url));
+  }
+
+  // 로그인 사용자 → 인증 페이지 접근 시 홈으로 리다이렉트
+  // 단, 비밀번호 재설정 페이지는 예외
+  if (user && isAuthPage && pathname !== AUTH_ROUTES.RESET_PASSWORD) {
+    return NextResponse.redirect(new URL(AUTH_ROUTES.HOME, request.url));
+  }
+
+  return supabaseResponse;
+}

utils/supabase/server.ts

@@ -0,0 +1,47 @@
+import { createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+
+/**
+ * [서버 컴포넌트용 Supabase 클라이언트 생성 함수]
+ * 
+ * 이 함수는 Next.js의 SSR(서버 사이드 렌더링) 환경에서 Supabase에 접근할 때 사용합니다.
+ * 서버 컴포넌트, 서버 액션(Server Actions), 라우트 핸들러(Route Handlers)에서 호출됩니다.
+ */
+export async function createClient() {
+  // Next.js의 쿠키 저장소에 접근합니다. (await 필수)
+  const cookieStore = await cookies();
+
+  /**
+   * createServerClient: 서버 환경에서 안전하게 Supabase 클라이언트를 생성합니다.
+   * 첫 번째 인자: Supabase 프로젝트 URL
+   * 두 번째 인자: Supabase 익명(Anon) 키 (공개되어도 안전한 키)
+   * 세 번째 인자: 쿠키 제어 옵션
+   */
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        // 1. Supabase가 쿠키를 읽어야 할 때 실행됩니다.
+        // 현재 요청(Request)에 있는 모든 쿠키를 가져와서 Supabase에 전달합니다.
+        getAll() {
+          return cookieStore.getAll();
+        },
+        
+        // 2. Supabase가 쿠키를 새로 써야 할 때(로그인, 로그아웃, 토큰 갱신 등) 실행됩니다.
+        setAll(cookiesToSet) {
+          try {
+            // Supabase가 요청한 쿠키들을 하나씩 브라우저에 저장하도록 설정합니다.
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            );
+          } catch {
+            // [주의] 이 부분은 '서버 컴포넌트'에서 쿠키를 쓰려고 할 때 발생하는 에러를 무시하기 위함입니다.
+            // Next.js 규칙상 '서버 컴포넌트'는 렌더링 중에 쿠키를 직접 쓸 수 없습니다.
+            // 대신 미들웨어(middleware)가 토큰 갱신을 담당하므로 여기서는 에러를 무시해도 안전합니다.
+          }
+        },
+      },
+    }
+  );
+}