Merge pull request #112 from KUIT-Space/feat#99-chat-file

Feat#111 카카오 로그인
KUIT-Space · Aug 20, 2024 · 1191be4 · 1191be4
2 parents 823dd08 + d8c5856
commit 1191be4
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 88 deletions.
diff --git a/.github/workflows/github_pages.yml b/.github/workflows/github_pages.yml
@@ -43,8 +43,16 @@ jobs:
         run: |
           touch .env
           echo "VITE_API_BACK_URL=$VITE_API_BACK_URL" >> .env
+          echo "VITE_API_REST_API=$VITE_API_REST_API" >> .env
+          echo "VITE_API_CLIENT_SECRET" >> .env
+          echo "VITE_API_REDIRECT_URI=$VITE_API_BACK_URL" >> .env
+
+
         env:
           VITE_API_BACK_URL: ${{ secrets.VITE_API_BACK_URL }}
+          VITE_API_REST_API: ${{ secrets.VITE_API_REST_API }}
+          VITE_API_CLIENT_SECRET: ${{ secrets.VITE_API_CLIENT_SECRET }}
+          VITE_API_REDIRECT_URI: ${{ secrets.VITE_API_REDIRECT_URI }}
 
       - name: Build
         run: npm run build

diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@ dist-ssr
 localhost-key.pem
 localhost.pem
 *_mockChat.tsx
+.env
diff --git a/src/App.tsx b/src/App.tsx
@@ -40,6 +40,7 @@ import { theme } from "@/styles/Theme";
 
 import BoardDetailPage from "./pages/BoardPage/BoardDetailpage/BoardDetailPage";
 import BoardRegisterPage from "./pages/BoardPage/BoardRegisterPage/BoardRegisterPage";
+import KakaoRedirection from "./pages/LoginPage/KakaoRedirection";
 import LoginModal from "./pages/LoginPage/LoginModal";
 import InviteSpace from "./pages/SpacePage/InviteSpace";
 import HomePageMemberPage from "./pages/HomePage/HomePageMember";
@@ -141,6 +142,7 @@ function App() {
   const routes_children_login = [
     { path: "/login", element: <LoginPage />, hasBottombar: false },
     { path: "/signup", element: <SignUpPage />, hasBottombar: false },
+    { path: "/oauth/callback/kakao", element: <KakaoRedirection />, hasBottombar: true },
   ];
 
   const routes_children_home = [

diff --git a/src/apis/LoginApi.ts b/src/apis/LoginApi.ts
@@ -37,3 +37,17 @@ export const loginApi = async (email: string, password: string) => {
     return res;
   });
 };
+
+export const kakaoLoginApi = async (code: string) => {
+  const requestOptions = createRequestOptionsJSON("GET");
+
+  return await fetchLoginApi(
+    `${import.meta.env.VITE_API_BACK_URL}/oauth/callback/kakao?code=${code}`,
+    requestOptions,
+  ).then((res) => {
+    if (res.result?.userId) {
+      localStorage.setItem("userId", res.result.userId.toString());
+    }
+    return res;
+  });
+};
diff --git a/src/pages/LoginPage/KakaoRedirection.tsx b/src/pages/LoginPage/KakaoRedirection.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { kakaoLoginApi } from "@/apis";
+
+const KakaoRedirection = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const code = new URL(document.location.toString()).searchParams.get("code");
+    kakaoLoginApi(code ?? "").then((res) => {
+      console.log(res);
+      if (res.status === "OK") {
+        navigate("/space");
+      } else {
+        alert("login 실패! : " + res.message);
+        navigate("/login");
+      }
+    });
+  }, [navigate]);
+
+  return <div>카카오 로그인 중...</div>;
+};
+
+export default KakaoRedirection;
diff --git a/src/pages/LoginPage/LoginPage.styled.ts b/src/pages/LoginPage/LoginPage.styled.ts
@@ -1,115 +1,115 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	width: 100%;
-	max-width: 40rem;
-	margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 40rem;
+  margin: 0 auto;
 `;
 
 export const Logo = styled.div`
-	display: flex;
-	width: 38.89%;
-	margin-top: 10rem;
+  display: flex;
+  width: 38.89%;
+  margin-top: 10rem;
 `;
 
 export const Input = styled.input`
-	display: flex;
-	width: calc(100% - 2.5rem);
-	height: 3.25rem;
-	box-sizing: border-box;
-	border-radius: 0.75rem;
-	padding: 0.9375rem;
-	padding-left: 1rem;
-	border: 1px solid transparent;
-	background-color: #222226;
-	font-family: Freesentation;
-	font-size: 1rem;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 140%;
-	letter-spacing: 0.04rem;
-	color: #ffffff;
-	caret-color: #48ffbd;
-	margin-top: 0.75rem;
+  display: flex;
+  width: calc(100% - 2.5rem);
+  height: 3.25rem;
+  box-sizing: border-box;
+  border-radius: 0.75rem;
+  padding: 0.9375rem;
+  padding-left: 1rem;
+  border: 1px solid transparent;
+  background-color: #222226;
+  font-family: Freesentation;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.04rem;
+  color: #ffffff;
+  caret-color: #48ffbd;
+  margin-top: 0.75rem;
 
-	&::placeholder {
-		color: #767681;
-	}
+  &::placeholder {
+    color: #767681;
+  }
 
-	&:focus {
-		border-color: #48ffbd;
-		outline: none;
-	}
+  &:focus {
+    border-color: #48ffbd;
+    outline: none;
+  }
 `;
 
 interface LoginButtonProps {
-	$isActive: boolean;
+  $isActive: boolean;
 }
 
 export const LoginButton = styled.button<LoginButtonProps>`
-	display: flex;
-	width: calc(100% - 2.5rem);
-	height: 3.25rem;
-	padding: 0.875rem 0 0.8125rem 0;
-	box-sizing: border-box;
-	justify-content: center;
-	align-items: center;
-	margin-top: 2rem;
-	background-color: ${({ $isActive }) => ($isActive ? "#48FFBD" : "#45454B")};
-	color: ${({ $isActive }) => ($isActive ? "#171719" : "#ACACB5")};
-	border-radius: 0.75rem;
-	font-family: Freesentation;
-	font-size: 1.125rem;
-	font-style: normal;
-	font-weight: 700;
-	line-height: 140%;
-	letter-spacing: 0.045rem;
-	cursor: ${({ $isActive }) => ($isActive ? "pointer" : "default")};
+  display: flex;
+  width: calc(100% - 2.5rem);
+  height: 3.25rem;
+  padding: 0.875rem 0 0.8125rem 0;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+  background-color: ${({ $isActive }) => ($isActive ? "#48FFBD" : "#45454B")};
+  color: ${({ $isActive }) => ($isActive ? "#171719" : "#ACACB5")};
+  border-radius: 0.75rem;
+  font-family: Freesentation;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 140%;
+  letter-spacing: 0.045rem;
+  cursor: ${({ $isActive }) => ($isActive ? "pointer" : "default")};
 `;
 
 export const BtContainer = styled.div`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-top: 0.25rem;
-	width: 83.33%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.25rem;
+  width: 83.33%;
 `;
 
 export const Button = styled.button`
-	display: flex;
-	width: 6.25rem;
-	height: 2.75rem;
-	justify-content: center;
-	align-items: center;
-	color: #767681;
-	text-align: center;
-	font-family: Freesentation;
-	font-size: 0.875rem;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 140%;
-	letter-spacing: 0.035rem;
-	cursor: pointer;
+  display: flex;
+  width: 6.25rem;
+  height: 2.75rem;
+  justify-content: center;
+  align-items: center;
+  color: #767681;
+  text-align: center;
+  font-family: Freesentation;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.035rem;
+  cursor: pointer;
 `;
 
 export const ScContainer = styled.div`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-top: 1.6875rem;
-	width: 45.56%;
-	gap: 1rem;
-	margin-bottom: 1.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.6875rem;
+  width: 45.56%;
+  gap: 1rem;
+  margin-bottom: 1.75rem;
 `;
 
 export const Social = styled.button`
-	display: flex;
-	width: 2.75rem;
-	height: 2.75rem;
-	cursor: pointer;
-	border-radius: 0.5rem;
-	overflow: hidden;
+  display: flex;
+  width: 2.75rem;
+  height: 2.75rem;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  overflow: hidden;
 `;
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { c } from "vite/dist/node/types.d-aGj9QkWt";
 
 import { loginApi } from "@/apis";
 import google from "@/assets/Login/icon_google.svg";
@@ -45,6 +46,11 @@ const LoginPage = () => {
     );
   };
 
+  const handleKakaoLogin = () => {
+    const link = `https://kauth.kakao.com/oauth/authorize?client_id=${import.meta.env.VITE_API_REST_API}&redirect_uri=${import.meta.env.VITE_API_REDIRECT_URI}&response_type=code`;
+    window.location.href = link;
+  };
+
   return (
     <>
       <Container>
@@ -74,13 +80,13 @@ const LoginPage = () => {
           <Button onClick={() => navigate("/signup")}>회원가입</Button>
         </BtContainer>
         <ScContainer>
-          <Social>
+          <Social onClick={handleKakaoLogin}>
             <img src={kakao} alt="kakao" />
           </Social>
-          <Social>
+          <Social style={{ opacity: 0.5, cursor: "default" }} disabled>
             <img src={google} alt="google" />
           </Social>
-          <Social>
+          <Social style={{ opacity: 0.5, cursor: "default" }} disabled>
             <img src={naver} alt="naver" />
           </Social>
         </ScContainer>