feat: 카카오 로그인 인가 코드 발급

ssu-Recipable · May 8, 2024 · a1ccb0f · a1ccb0f
1 parent b0fe134
commit a1ccb0f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Env
+.env
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -9,14 +9,16 @@ import AddIngredient from "./pages/addIngredient/AddIngredient";
 import ScanReceipt from "./pages/scanReceipt/ScanReceipt";
 import IngredientInput from "./pages/ingredientInput/IngredientInput";
 import ResultScanReceipt from "./pages/resultScanReceipt/ResultScanReceipt";
+import LoginHandler from "./pages/login/components/LoginHandler";
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/test" element={<Test />} />
         <Route path="/survey" element={<Survey />} />
-        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<Login />} />
+        <Route path="/login/oauth2/callback/kakao" element={<LoginHandler />} />
         <Route path="/main" element={<Main />} />
         <Route path="/mypage" element={<MyPage />} />
         <Route path="/editprofile" element={<EditProfile />} />

diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -6,13 +6,23 @@ import Button from "@/components/commonComponents/Button";
 import { theme } from "@/styles/theme";
 
 const Login = () => {
+  const REST_API_KEY: string = import.meta.env.VITE_REST_API_KEY;
+  const REDIRECT_URI: string = import.meta.env.VITE_REDIRECT_URI;
+  const link: string = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`;
+
+  const loginWithKakao = () => {
+    window.location.href = link;
+  };
+
   return (
     <LoginContainer>
       <MainLogoImg src={MainLogo} alt="Recipable 만들어 먹는 재미!" />
-      <section>
+      <TitleSection>
         <Text font={"title3"}>로그인하고 원하는 레시피를 추천 받아봐요</Text>
-      </section>
-      <KakaoLoginImg src={KakaoLogin} alt="KaKao Login" />
+      </TitleSection>
+      <KakaoLoginSection onClick={loginWithKakao}>
+        <KakaoLoginImg src={KakaoLogin} alt="KaKao Login" />
+      </KakaoLoginSection>
       <Button typeState={"defaultBtn"}>
         <Text font={"button1"}>이메일로 로그인하기</Text>
       </Button>
@@ -33,27 +43,36 @@ const LoginContainer = styled.main`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  section {
-    width: 16rem;
-    text-align: center;
-    margin-top: 8rem;
-  }
 `;
+
+const TitleSection = styled.section`
+  width: 16rem;
+  text-align: center;
+  margin-top: 8rem;
+`;
+
+const KakaoLoginSection = styled.div`
+  cursor: pointer;
+`;
+
 const MainLogoImg = styled.img`
   width: 25rem;
   margin-top: 15rem;
 `;
+
 const KakaoLoginImg = styled.img`
   width: 25rem;
   height: 4rem;
   margin-top: 5rem;
   margin-bottom: 2rem;
 `;
+
 const HelpContainer = styled.div`
   width: 25rem;
   padding: 1rem;
   margin-top: 1.2rem;
   display: flex;
   justify-content: space-between;
 `;
+
 export default Login;
diff --git a/src/pages/login/components/LoginHandler.tsx b/src/pages/login/components/LoginHandler.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+const LoginHandler = () => {
+  const AUTHORIZE_CODE: string | null = new URLSearchParams(
+    window.location.search
+  ).get("code");
+
+  useEffect(() => {
+    console.log(AUTHORIZE_CODE);
+  }, [AUTHORIZE_CODE]);
+
+  return <div>로그인중입니다.</div>;
+};
+
+export default LoginHandler;
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,6 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    # Env
+    .env