'use client';
import Link from 'next/link';
import type { Dispatch, SetStateAction } from 'react';
 
/*
Client 사이드에서 실행 될 곳에서는 process.env가 사용 불가능하기 때문에 전역 변수로 생성
해당 변수들은 유출되어도 문제가 없는 변수들이다.
*/
const CLIENT_ID = 'Ov23liRzfTkgNGuuHNdQ';
const GITHUB_LOGIN_ENDPOINT = 'https://github.com/login/oauth/authorize';
const REDIRECT_URI =
  process.env.NODE_ENV === 'development'
    ? 'http://localhost:3000/api/OAuth'
    : 'https://abonglog.me/api/OAuth';
const scopes = 'public_repo read:discussion write:discussion';
 
export const Login = ({ postId }: { postId: number }) => {
  const randomState = Math.floor(Math.random() * 10000);
  const authorizationUrl = `${GITHUB_LOGIN_ENDPOINT}?client_id=${CLIENT_ID}&state=${randomState}_${postId}&redirect_uri=${REDIRECT_URI}&scope=${scopes}`;
 
  return (
    <Link
      href={authorizationUrl}
      className='px-2 py-2 bg-indigo-800 text-white rounded-xl hover:bg-indigo-500'
    >
      Github로 로그인하기
    </Link>
  );
};

import { NextRequest, NextResponse } from 'next/server';
 
const GithubAuthorization = 'https://github.com/login/oauth/access_token';
const BASE_URI =
  process.env.NODE_ENV === 'development'
    ? 'http://localhost:3000'
    : 'https://abonglog.me';
 
export const GET = async (req: NextRequest) => {
  const { searchParams } = req.nextUrl;
  const code = searchParams.get('code') as string;
  const callbackPostId = searchParams.get('state')?.split('_')[1] as string;
 
  try {
    /* abonglog backend -> Github Autorization server */
    const response = await fetch(GithubAuthorization, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Accept: 'application/json',
      },
      body: new URLSearchParams({
        client_id: process.env.CLIENT_ID as string,
        client_secret: process.env.CLIENT_SECRET as string,
        code: code,
      }).toString(),
    });
 
    const data = await response.json();
    if (!data.access_token) {
      throw new Error('토큰이 발급되지 않았습니다.');
    }
 
    const { access_token } = data;
 
    /* abonglog backend -> abonglog frontend */
    const res = NextResponse.redirect(
      `${BASE_URI}/post/${callbackPostId}#page-footer`,
    );
    res.cookies.set('token', access_token, {
      // ! Access token을 프론트엔드에서 localStorage에 저장하기 위해 httpOnly false
      httpOnly: false,
      secure: process.env.NODE_ENV !== 'development',
      sameSite: 'lax',
      path: '/post',
    });
 
    return res;
  } catch (error) {
    console.error(error);
    return NextResponse.redirect(`${BASE_URI}/post/${callbackPostId}`, {
      status: 302,
    });
  }
};

Accept: application/json
{
  "access_token":"gho_16C7e42F292c6912E7710c838347Ae178B4a",
  "scope":"repo,gist",
  "token_type":"bearer"
}

export const getCookie = (cookieName: string): string | null => {
  if (typeof document === 'undefined') {
    return null;
  }
 
  const cookies = document.cookie.split(';').map((cookie) => cookie.trim());
  const cookie = cookies.find((cookie) => cookie.startsWith(`${cookieName}=`));
 
  return cookie ? cookie.split('=')[1] : null;
};
 
export const deleteCookie = (cookieName: string) => {
  if (typeof document === 'undefined') {
    return;
  }
  document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
};

const CommentForm = ({
  setComments,
  postId,
  issueNumber,
}: {
  setComments: Dispatch<SetStateAction<Comment[]>>;
  postId: PostMeta['postId'];
  issueNumber: PostMeta['issueNumber'];
}) => {
  const [token, setToken] = useState(() => {
    return getCookie('token');
  });
 
  /* 댓글 달기와 관련된 비즈니스 로직 생략 */
 
  return (
    <section className='mt-4 rounded-2xl overflow-hidden' data-comment-theme>
      <div className='px-4 py-4'>
        {token ? <Logout setToken={setToken} /> : <Login postId={postId} />}
      </div>
      {/* 댓글 달기와 관련된 비즈니스 로직 생략 */}
    </section>
  );
};

export const Logout = ({
  setToken,
}: {
  setToken: Dispatch<SetStateAction<string | null>>;
}) => {
  const handleLogout = () => {
    deleteCookie('token');
    setToken(null);
  };
 
  return (
    <button
      onClick={handleLogout}
      className='px-2 py-1 bg-indigo-800 text-white rounded-xl hover:bg-indigo-500'
    >
      로그아웃 하기
    </button>
  );
};