[Feat] login

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env

src/_shared/components/LandingLayout/LandingLayout.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+import Image from 'next/image';
+
+export const LandingLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <main className='flex flex-col w-screen h-full relative'>
+      <Image
+        src='/knocking_bg.png'
+        alt='knocking background'
+        priority
+        width={1920}
+        height={1080}
+        className='w-full h-full object-cover'
+      />
+      <div className='absolute top-0 left-0 w-full h-full bg-black bg-opacity-30 flex flex-col justify-center items-center'>
+        <div className='flex flex-col justify-center items-center bg-white px-20 py-12 rounded-md'>
+          {children}
+        </div>
+      </div>
+    </main>
+  );
+};

src/_shared/components/LandingLayout/index.ts

@@ -0,0 +1 @@
+export { LandingLayout } from './LandingLayout';

src/_shared/components/NavBar/NavBar.tsx

@@ -0,0 +1,28 @@
+import Link from 'next/link';
+
+interface Props {
+  isLogin: boolean;
+}
+
+export const NavBar = ({ isLogin }: Props) => {
+  return (
+    <nav className='bg-white flex justify-between items-center px-12 py-4'>
+      <Link href='/'>
+        <span>Knocking</span>
+      </Link>
+      {isLogin ? (
+        <div className='flex flex-row items-center'>
+          <button type='button'>내 이력서</button>
+          <button type='button'>내 계정</button>
+        </div>
+      ) : (
+        <button
+          type='button'
+          className=''
+        >
+          <span>로그인</span>
+        </button>
+      )}
+    </nav>
+  );
+};

src/_shared/components/NavBar/index.ts

@@ -0,0 +1 @@
+export { NavBar } from './NavBar';

src/_shared/services/httpClient.ts

@@ -0,0 +1,26 @@
+import { cookies } from 'next/headers';
+
+interface Props {
+  path: string;
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  body?: any;
+  headers?: any;
+}
+
+export async function httpClient({ path, method, body, headers }: Props) {
+  try {
+    const response = await fetch(process.env.NEXT_PUBLIC_SERVER_URL + path, {
+      method,
+      body,
+      headers: {
+        ...headers,
+        'Content-Type': 'application/json;charset=utf-8',
+      },
+      credentials: 'include',
+    });
+    const data = await response.text();
+    return data;
+  } catch (e) {
+    console.log(e);
+  }
+}

src/app/login/page.tsx

@@ -0,0 +1,31 @@
+import { LandingLayout } from '@/_shared/components/LandingLayout';
+import { NavBar } from '@/_shared/components/NavBar';
+import Image from 'next/image';
+
+export default function Login() {
+  return (
+    <>
+      <NavBar isLogin={false} />
+      <LandingLayout>
+        <a href={process.env.NEXT_PUBLIC_SERVER_URL + '/auth/google'}>
+          <Image
+            src='/google_signin.png'
+            alt='google login button'
+            width={200}
+            height={120}
+            className='h-auto mb-5'
+          />
+        </a>
+        <a href={process.env.NEXT_PUBLIC_SERVER_URL + '/auth/kakao'}>
+          <Image
+            src='/kakao_signin.png'
+            alt='kakao login button'
+            width={200}
+            height={120}
+            className='h-auto'
+          />
+        </a>
+      </LandingLayout>
+    </>
+  );
+}

src/app/main/page.tsx

@@ -0,0 +1,13 @@
+import { LandingLayout } from '@/_shared/components/LandingLayout';
+import { NavBar } from '@/_shared/components/NavBar';
+
+export default function Main() {
+  return (
+    <>
+      <NavBar isLogin={false} />
+      <LandingLayout>
+        <span>로그인 완료됐다구!!!</span>
+      </LandingLayout>
+    </>
+  );
+}

src/app/page.tsx

@@ -1,41 +1,37 @@
-import Image from 'next/image';
+import Link from 'next/link';
+import { cookies } from 'next/headers';
+
+import { NavBar } from '@/_shared/components/NavBar';
+import { LandingLayout } from '@/_shared/components/LandingLayout';
+import { httpClient } from '@/_shared/services/httpClient';
+
+export default async function Home() {
+  const data = await httpClient({
+    path: '/auth/test',
+    method: 'GET',
+    headers: {
+      Cookie: cookies().toString(),
+    },
+  });
+  console.log(data);
 
-export default function Home() {
   return (
     <>
-      {/* TODO: NavBar */}
-      <nav className='bg-white flex justify-between items-center px-12 py-4'>
-        <span>Knocking</span>
-        <button
-          type='button'
-          className=''
-        >
-          <span>로그인</span>
-        </button>
-      </nav>
-      <main className='flex flex-col w-screen h-full relative'>
-        <Image
-          src='/knocking_bg.png'
-          alt='knocking background'
-          width={1920}
-          height={1080}
-          className='w-full h-full object-cover'
-        />
-        <div className='absolute top-0 left-0 w-full h-full bg-black bg-opacity-30 flex flex-col justify-center items-center'>
-          <div className='flex flex-col justify-center items-center bg-white px-20 py-12 rounded-md'>
-            <span className='text-text-light-primary text-xl'>
-              Knocking과 함께 더 쉬워진 이력서 쓰러가기
-            </span>
-            <button
-              type='button'
-              className='bg-primary text-white w-40 h-12 mt-10 rounded-md hover:bg-secondary transition-colors'
-            >
-              {/* TODO: Button */}
-              <span>로그인</span>
-            </button>
-          </div>
-        </div>
-      </main>
+      <NavBar isLogin={false} />
+      <LandingLayout>
+        <span className='text-text-light-primary text-xl'>
+          Knocking과 함께 더 쉬워진 이력서 쓰러가기
+        </span>
+        <Link href='/login'>
+          <button
+            type='button'
+            className='bg-primary text-white w-40 h-12 mt-10 rounded-md hover:bg-secondary transition-colors'
+          >
+            {/* TODO: Button */}
+            <span>로그인</span>
+          </button>
+        </Link>
+      </LandingLayout>
     </>
   );
 }