로그인 및 로그아웃 구현

import { signIn } from 'next-auth/react';

// GitHub 로그인 버튼 클릭 시
<button onClick={() => signIn('github')}>GitHub로 로그인</button>

// 로그인 성공 후 특정 페이지로 리다이렉트
<button onClick={() => signIn('google', { callbackUrl: '/dashboard' })}>Google로 로그인</button>

// 자격 증명(Credentials) 로그인 (사용자 이름/비밀번호)
// credentialsProvider는 별도의 설정이 필요하며, 일반적으로 폼 데이터를 전달합니다.
// signIn('credentials', { username: 'testuser', password: 'password123', callbackUrl: '/dashboard' });

// src/app/auth/AuthButtons.tsx
"use client";

import { useSession, signIn, signOut } from 'next-auth/react';

export default function AuthButtons() {
  const { data: session } = useSession();

  if (session) {
    // 로그인 상태일 때는 로그아웃 버튼 표시
    return (
      <button
        onClick={() => signOut({ callbackUrl: '/' })}
        style={{
          padding: '12px 25px',
          backgroundColor: '#dc3545',
          color: 'white',
          border: 'none',
          borderRadius: '8px',
          cursor: 'pointer',
          fontSize: '1.1em',
          transition: 'background-color 0.3s ease'
        }}
      >
        로그아웃
      </button>
    );
  }

  // 로그아웃 상태일 때는 로그인 버튼 표시
  return (
    <button
      onClick={() => signIn('github', { callbackUrl: '/auth' })} // GitHub 로그인, 로그인 후 /auth 페이지로 리다이렉트
      style={{
        padding: '12px 25px',
        backgroundColor: '#007bff',
        color: 'white',
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
        fontSize: '1.1em',
        transition: 'background-color 0.3s ease'
      }}
    >
      GitHub로 로그인
    </button>
  );
}

import { signOut } from 'next-auth/react';

// 로그아웃 버튼 클릭 시
<button onClick={() => signOut()}>로그아웃</button>

// 로그아웃 후 홈 페이지로 리다이렉트
<button onClick={() => signOut({ callbackUrl: '/' })}>로그아웃</button>

// src/app/auth/UserInfo.tsx
"use client";

import { useSession } from 'next-auth/react';

export default function UserInfo() {
  const { data: session, status } = useSession(); // status도 함께 가져옴

  if (status === 'loading') {
    return <p>세션 정보를 로딩 중입니다...</p>; // 로딩 상태 처리
  }

  if (session) {
    // 로그인된 사용자 정보 표시
    return (
      <div style={{ padding: '15px', backgroundColor: '#e6ffe6', borderRadius: '8px', border: '1px solid #b3ffb3' }}>
        <p style={{ fontWeight: 'bold', color: '#28a745', marginBottom: '10px' }}>로그인됨!</p>
        <p>이름: {session.user?.name}</p>
        <p>이메일: {session.user?.email}</p>
        {session.user?.image && (
          <img src={session.user.image} alt="User Avatar" style={{ width: '50px', height: '50px', borderRadius: '50%', marginTop: '10px' }} />
        )}
        <p style={{ marginTop: '10px', fontSize: '0.9em', color: '#555' }}>
          (이 정보는 클라이언트 컴포넌트에서 `useSession` 훅으로 가져왔습니다.)
        </p>
      </div>
    );
  }

  // 로그인되지 않은 상태 메시지 표시
  return (
    <p style={{ padding: '15px', backgroundColor: '#ffe6e6', borderRadius: '8px', border: '1px solid #ffb3b3', color: '#dc3545' }}>
      로그아웃되었습니다.
      <p style={{ fontSize: '0.9em', color: '#555', marginTop: '5px' }}>
        (클라이언트 컴포넌트에서 세션이 없습니다.)
      </p>
    </p>
  );
}

// src/app/dashboard/page.tsx (클라이언트 컴포넌트 예시)
"use client";

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function DashboardPage() {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === 'loading') return; // 세션 로딩 중에는 아무것도 하지 않음
    if (!session) {
      // 로그인되지 않았다면 로그인 페이지로 리다이렉트
      router.push('/api/auth/signin'); // NextAuth.js 기본 로그인 페이지로
      // 또는 router.push('/login'); // 커스텀 로그인 페이지로
    }
  }, [session, status, router]);

  if (status === 'loading') {
    return <p>대시보드를 로딩 중입니다...</p>;
  }

  if (!session) {
    return <p>이 페이지에 접근하려면 로그인해야 합니다.</p>;
  }

  // 로그인된 경우 대시보드 콘텐츠 렌더링
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', border: '1px solid #28a745', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', textAlign: 'center' }}>
      <h1 style={{ color: '#28a745', marginBottom: '20px' }}>대시보드</h1>
      <p>환영합니다, {session.user?.name}님! 이곳은 보호된 대시보드 페이지입니다.</p>
      <p style={{ marginTop: '10px', fontSize: '0.9em', color: '#555' }}>
        (이 페이지는 로그인된 사용자만 접근할 수 있습니다.)
      </p>
    </div>
  );
}

// src/app/admin/page.tsx (서버 컴포넌트 예시)
import { getServerSession } from 'next-auth';
import { redirect } from 'next/navigation'; // Next.js 서버 컴포넌트에서 리다이렉트
import { authOptions } from '../api/auth/[...nextauth]/route'; // 인증 옵션 임포트

export default async function AdminPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    // 로그인되지 않았다면 로그인 페이지로 즉시 리다이렉트
    redirect('/api/auth/signin?callbackUrl=/admin'); // 로그인 후 다시 admin 페이지로 오도록 callbackUrl 설정
  }

  // 선택적으로 사용자 역할 확인 (예: 'admin' 역할만 허용)
  // if (session.user?.role !== 'admin') {
  //   redirect('/unauthorized'); // 권한 없음 페이지로 리다이렉트
  // }

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', border: '1px solid #ffc107', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', textAlign: 'center' }}>
      <h1 style={{ color: '#ffc107', marginBottom: '20px' }}>관리자 페이지</h1>
      <p>환영합니다, {session.user?.name}님! 이곳은 관리자만 접근할 수 있는 페이지입니다.</p>
      <p style={{ marginTop: '10px', fontSize: '0.9em', color: '#555' }}>
        (이 페이지는 서버 컴포넌트에서 인증 상태를 확인하여 보호됩니다.)
      </p>
    </div>
  );
}