✅ 목표 기능

• 회원가입 / 로그인 / 로그아웃
• 로그인된 사용자 정보 가져오기 (auth.uid())
• 사용자 세션 유지 (cookies, headers)
• 보호된 페이지 (로그인 사용자만 접근)

✅ 1. 패키지 설치

pnpm add @supabase/auth-helpers-nextjs @supabase/supabase-js

✅ 2. 환경변수 (.env.local)

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Supabase → Project Settings → API 탭에서 URL, anon 키 확인

✅ 3. lib/supabase.ts 수정

'use client'

import { createBrowserClient } from '@supabase/auth-helpers-nextjs'
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'

export const supabase = createBrowserClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

export const createClientComponentClient = () => supabase

export const createServerClient = () => {
  return createServerComponentClient({ cookies })
}

✅ 4. 인증 페이지 추가

/src/app/auth/login/page.tsx

'use client'
import { useState } from 'react'
import { supabase } from '@/lib/supabase'
import { useRouter } from 'next/navigation'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const router = useRouter()

  const handleLogin = async () => {
    const { error } = await supabase.auth.signInWithPassword({ email, password })
    if (!error) router.push('/')
    else alert(error.message)
  }

  return (
    <div className="p-6 max-w-sm mx-auto">
      <h1 className="text-xl font-bold mb-4">로그인</h1>
      <input
        type="email"
        placeholder="이메일"
        className="mb-2 w-full p-2 border"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="비밀번호"
        className="mb-4 w-full p-2 border"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <button className="w-full bg-black text-white p-2" onClick={handleLogin}>
        로그인
      </button>
    </div>
  )
}

회원가입은 supabase.auth.signUp(...)만 바꾸면 됩니다.