[feat] 로그인

components/Loading.tsx

@@ -1,11 +1,11 @@
-import { type ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 export default function Loading(): ReactElement {
   return (
-    <div className='flex flex-col justify-center items-center h-screen'>
-      <div className='text-[100px] animate-bounce'>👀</div>
+    <div className='flex h-screen flex-col items-center justify-center'>
+      <div className='animate-bounce text-[100px]'>👀</div>
       <div className='text-5xl font-bold text-gray-900'>로딩중...💻</div>
-      <div className='underline text-gray-600 mt-2'>현재 API를 요청하고 있는 것 같네요...</div>
+      <div className='mt-2 text-gray-600 underline'>현재 API를 요청하고 있는 것 같네요...</div>
     </div>
   );
 }

pages/_app.tsx

@@ -2,12 +2,11 @@ import Loading from '@/components/Loading';
 import Layout from '@/components/layout/Layout';
 import { type AppProps } from 'next/app';
 import Head from 'next/head';
-// import axios from 'axios';
 import { Router } from 'next/router';
-import React, { type ReactElement, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
 
 import '../styles/globals.css';
-import Login from './login';
 
 export default function MyApp({ Component, pageProps }: AppProps): ReactElement {
   // const router = useRouter();
@@ -34,28 +33,6 @@ export default function MyApp({ Component, pageProps }: AppProps): ReactElement
   //   };
   // }, []);
 
-  // useEffect(() => {
-  //   const url = new URL(window.location.href);
-
-  //   const postData = async () => {
-  //     const code = url.searchParams.get('code');
-  //     try {
-  //       await axios
-  //         .post('/api/auth/42login', null, {
-  //           params: { code: code },
-  //         })
-  //         .then(() => setLoading(false))
-  //         .then(() => router.push('/'));
-  //     } catch (error) {
-  //       console.error(error);
-  //     }
-  //   };
-
-  //   if (url.asPath === '/auth/callback') {
-  //     void postData();
-  //     setLoading(true);
-  //   }
-  // });
   const login = false;
   return (
     <>

pages/login.tsx

@@ -1,14 +1,8 @@
-import Btn from '@/components/common/Btn';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import type { ReactElement } from 'react';
 
 export default function Login(): ReactElement {
-  const router = useRouter();
-  const onSignIn = (): void => {
-    router.push('/');
-  };
   return (
     <div className='flex flex-col items-center justify-center space-x-10 space-y-10 lg:flex-row'>
       <div className=' absolute left-40 top-40 -z-10 aspect-square h-60 w-60 rounded-full bg-yellow-400 bg-opacity-70 blur-[80px]' />
@@ -31,7 +25,12 @@ export default function Login(): ReactElement {
         className='lg:animate-bounce'
       />
       <div className='flex w-full min-w-max flex-col items-center justify-center space-y-10 lg:w-1/3'>
-        <Btn fontSize='xl' px='44' py='2' text='Sign in' onClick={onSignIn} />
+        <Link
+          href='https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-f90f9eeac95b368279b59a8f0eb2e43a8b348db52752754f2aa249ded96390aa&redirect_uri=https%3A%2F%2F42check-in.kr%2Foauth%2Flogin&response_type=code'
+          className='px-44 py-2'
+        >
+          <p className='text-xl'>Sign in</p>
+        </Link>
         <div className='h-[1px] w-[400px] bg-[#DFDFDF]' />
         <span className='relative -top-[51px] bg-white px-10 text-[#ACADAC]'>42 Check - in</span>
       </div>

pages/oauth/login/index.tsx

@@ -0,0 +1,23 @@
+import Loading from '@/components/Loading';
+import useCallApi from '@/utils/useCallApi';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import type { ReactElement } from 'react';
+
+export default function Login(): ReactElement {
+  const callApi = useCallApi();
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchData = async (): Promise<void> => {
+      const config = {
+        url: router.asPath,
+      };
+      await callApi(config);
+      await router.push('/');
+    };
+    void fetchData();
+  }, []);
+
+  return <Loading />;
+}

styles/globals.css

@@ -10,6 +10,10 @@ div#__next > div {
   height: 100%;
 }
 
+.button {
+  @apply rounded-[20px] bg-[#6A70FF] font-bold text-white hover:bg-[#6AA6FF];
+}
+
 .category {
   @apply relative flex flex-col items-center justify-between rounded-3xl shadow-xl hover:scale-105;
 }