From 81c54df9550b6b360841060f040c9b2e60fc8a87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=EA=B8=B0=EB=B2=94?=
 <bomi@gwongibeom-ui-MacBookAir.local>
Date: Wed, 8 Nov 2023 03:02:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20#54=20-=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/login/page.tsx        |  8 +++++-
 src/components/Login/Login.tsx         | 37 ++++++++++++++++++++++++++
 src/components/Login/hooks/useLogin.ts |  9 +++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Login/Login.tsx
 create mode 100644 src/components/Login/hooks/useLogin.ts

diff --git a/src/app/(routes)/login/page.tsx b/src/app/(routes)/login/page.tsx
index 4d955cce..d4aa356f 100644
--- a/src/app/(routes)/login/page.tsx
+++ b/src/app/(routes)/login/page.tsx
@@ -1,5 +1,11 @@
+import Login from '@/components/Login/Login'
+
 const LoginPage = () => {
-  return <></>
+  return (
+    <div>
+      <Login />
+    </div>
+  )
 }
 
 export default LoginPage
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
new file mode 100644
index 00000000..d508a75d
--- /dev/null
+++ b/src/components/Login/Login.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { LinkIcon } from '@heroicons/react/20/solid'
+import { ChatBubbleOvalLeftIcon } from '@heroicons/react/24/solid'
+import Button from '../common/Button/Button'
+import { useLogin } from './hooks/useLogin'
+
+const Login = () => {
+  const { loginKakao } = useLogin()
+
+  //Todo: 카카오 로그인 토큰을 받아서 토큰이 db에 존재하면 로그인, 존재하지 않으면 회원가입
+
+  return (
+    <div className="flex h-screen translate-y-[-9%] flex-col justify-center gap-10 pl-4 pr-4">
+      <div className="flex flex-col items-center justify-center gap-3">
+        <div>
+          <LinkIcon className="h-10 w-10 text-emerald5" />
+        </div>
+        <div className="text-4xl font-normal leading-10 text-emerald5">
+          LinkHub
+        </div>
+      </div>
+      <Button
+        type="button"
+        className="button button-md flex w-full items-center justify-center border-none bg-yellow-400 px-3 py-2.5">
+        <ChatBubbleOvalLeftIcon className="h-6 w-6 text-gray-800" />
+        <div
+          onClick={() => loginKakao()}
+          className="text-sm font-bold text-gray-800">
+          카카오로 시작하기
+        </div>
+      </Button>
+    </div>
+  )
+}
+
+export default Login
diff --git a/src/components/Login/hooks/useLogin.ts b/src/components/Login/hooks/useLogin.ts
new file mode 100644
index 00000000..da8b3847
--- /dev/null
+++ b/src/components/Login/hooks/useLogin.ts
@@ -0,0 +1,9 @@
+const useLogin = () => {
+  const loginKakao = () => {
+    console.log('카카오 로그인 로직')
+  }
+
+  return { loginKakao }
+}
+
+export { useLogin }