인증 UI: 로그인/회원가입/소셜 로그인

// src/app/(auth)/login/page.tsx
import { Metadata } from 'next'
import Link from 'next/link'
import { LoginForm } from './login-form'
import { GoogleButton } from './google-button'

export const metadata: Metadata = { title: '로그인' }

export default function LoginPage() {
  return (
    <div className="container max-w-md py-12">
      <h1 className="text-2xl font-bold mb-6">로그인</h1>
      <GoogleButton />
      <div className="my-6 flex items-center gap-3">
        <div className="flex-1 h-px bg-border" />
        <span className="text-sm text-muted-foreground">또는</span>
        <div className="flex-1 h-px bg-border" />
      </div>
      <LoginForm />
      <p className="mt-6 text-sm text-muted-foreground">
        계정이 없나요?{' '}
        <Link href="/signup" className="text-primary hover:underline">회원가입</Link>
      </p>
    </div>
  )
}

// src/app/(auth)/login/actions.ts
'use server'
import { z } from 'zod'
import { redirect } from 'next/navigation'
import { createClient } from '@/lib/supabase/server'

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

export async function loginAction(formData: FormData) {
  const parsed = schema.safeParse({
    email: formData.get('email'),
    password: formData.get('password'),
  })
  if (!parsed.success) return { error: '입력값을 확인하세요.' }

  const supabase = await createClient()
  const { error } = await supabase.auth.signInWithPassword(parsed.data)
  if (error) return { error: error.message }

  redirect('/dashboard')
}

// src/app/(auth)/login/login-form.tsx
'use client'
import { useFormState, useFormStatus } from 'react-dom'
import { loginAction } from './actions'

export function LoginForm() {
  const [state, formAction] = useFormState(loginAction, null)
  return (
    <form action={formAction} className="space-y-4">
      <div>
        <label className="block text-sm mb-1">이메일</label>
        <input name="email" type="email" required
          className="w-full px-3 py-2 border rounded-md" />
      </div>
      <div>
        <label className="block text-sm mb-1">비밀번호</label>
        <input name="password" type="password" required
          className="w-full px-3 py-2 border rounded-md" />
      </div>
      {state?.error && <p className="text-sm text-red-500">{state.error}</p>}
      <SubmitBtn />
    </form>
  )
}

function SubmitBtn() {
  const { pending } = useFormStatus()
  return (
    <button disabled={pending} className="w-full bg-primary text-primary-foreground py-2 rounded-md">
      {pending ? '로그인 중...' : '로그인'}
    </button>
  )
}

// src/app/(auth)/login/google-button.tsx
'use client'
import { createClient } from '@/lib/supabase/client'

export function GoogleButton() {
  const supabase = createClient()
  const handleClick = async () => {
    await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: { redirectTo: `${location.origin}/auth/callback` },
    })
  }
  return (
    <button onClick={handleClick} className="w-full border py-2 rounded-md flex items-center justify-center gap-2">
      <GoogleIcon /> Google로 로그인
    </button>
  )
}

// src/app/auth/callback/route.ts
import { NextResponse } from 'next/server'
import { createClient } from '@/lib/supabase/server'

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')

  if (code) {
    const supabase = await createClient()
    await supabase.auth.exchangeCodeForSession(code)
  }
  return NextResponse.redirect(`${origin}/dashboard`)
}

// src/middleware.ts
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
  let response = NextResponse.next({ request })
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() { return request.cookies.getAll() },
        setAll(cookies) {
          cookies.forEach(({ name, value, options }) => {
            response.cookies.set(name, value, options)
          })
        },
      },
    }
  )
  await supabase.auth.getUser()  // 세션 갱신
  return response
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}