From 1dc9b3f0f66c9cfec74e87def41408d5dfd5edcd Mon Sep 17 00:00:00 2001 From: Jihwan Kim Date: Tue, 20 Aug 2024 09:18:19 +0900 Subject: [PATCH 1/3] config: add kakao login secrets --- .github/workflows/github_pages.yml | 8 ++ .gitignore | 1 + src/pages/LoginPage/LoginPage.styled.ts | 170 ++++++++++++------------ src/pages/LoginPage/LoginPage.tsx | 9 +- 4 files changed, 100 insertions(+), 88 deletions(-) diff --git a/.github/workflows/github_pages.yml b/.github/workflows/github_pages.yml index eafe342..f830fe7 100644 --- 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 index 5cd412f..140bffb 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,4 @@ dist-ssr localhost-key.pem localhost.pem *_mockChat.tsx +.env diff --git a/src/pages/LoginPage/LoginPage.styled.ts b/src/pages/LoginPage/LoginPage.styled.ts index 2136657..ffb2bf9 100644 --- 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` - 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 index 109b091..8fdd332 100644 --- 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,8 @@ const LoginPage = () => { ); }; + const handleKakaoLogin = () => {}; + return ( <> @@ -74,13 +77,13 @@ const LoginPage = () => { - + kakao - + google - + naver From cc635c3150f52a1bedf55116487c328e54f04249 Mon Sep 17 00:00:00 2001 From: Jihwan Kim Date: Tue, 20 Aug 2024 09:31:18 +0900 Subject: [PATCH 2/3] feat: add kakao login --- src/App.tsx | 2 ++ src/apis/LoginApi.ts | 14 ++++++++++++++ src/pages/LoginPage/KakaoRedirection.tsx | 20 ++++++++++++++++++++ src/pages/LoginPage/LoginPage.tsx | 5 ++++- 4 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 src/pages/LoginPage/KakaoRedirection.tsx diff --git a/src/App.tsx b/src/App.tsx index 9987ecd..2810e9e 100644 --- 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"; @@ -139,6 +140,7 @@ function App() { const routes_children_login = [ { path: "/login", element: , hasBottombar: false }, { path: "/signup", element: , hasBottombar: false }, + { path: "/kakao/callback", element: , hasBottombar: true }, ]; const routes_children = [ diff --git a/src/apis/LoginApi.ts b/src/apis/LoginApi.ts index 86e3747..29eff89 100644 --- 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 new file mode 100644 index 0000000..c73c3d2 --- /dev/null +++ b/src/pages/LoginPage/KakaoRedirection.tsx @@ -0,0 +1,20 @@ +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); + navigate("/"); + }); + }, [navigate]); + + return
카카오 로그인 중...
; +}; + +export default KakaoRedirection; diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx index 8fdd332..84a3eb7 100644 --- a/src/pages/LoginPage/LoginPage.tsx +++ b/src/pages/LoginPage/LoginPage.tsx @@ -46,7 +46,10 @@ const LoginPage = () => { ); }; - const handleKakaoLogin = () => {}; + 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 ( <> From d8c5856455c033d1d1c629e1230e4f381b38f88d Mon Sep 17 00:00:00 2001 From: Jihwan Kim Date: Tue, 20 Aug 2024 09:39:03 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20navigate=20=EA=B2=BD=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/pages/LoginPage/KakaoRedirection.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2810e9e..0858224 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -140,7 +140,7 @@ function App() { const routes_children_login = [ { path: "/login", element: , hasBottombar: false }, { path: "/signup", element: , hasBottombar: false }, - { path: "/kakao/callback", element: , hasBottombar: true }, + { path: "/oauth/callback/kakao", element: , hasBottombar: true }, ]; const routes_children = [ diff --git a/src/pages/LoginPage/KakaoRedirection.tsx b/src/pages/LoginPage/KakaoRedirection.tsx index c73c3d2..22f2f9a 100644 --- a/src/pages/LoginPage/KakaoRedirection.tsx +++ b/src/pages/LoginPage/KakaoRedirection.tsx @@ -10,7 +10,12 @@ const KakaoRedirection = () => { const code = new URL(document.location.toString()).searchParams.get("code"); kakaoLoginApi(code ?? "").then((res) => { console.log(res); - navigate("/"); + if (res.status === "OK") { + navigate("/space"); + } else { + alert("login 실패! : " + res.message); + navigate("/login"); + } }); }, [navigate]);