From a21a8a4b3b4037e2f567b550d961c719b8c8a65e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=86=E1=85=B5=E1=86=AB?=
 =?UTF-8?q?=E1=84=80=E1=85=A7=E1=86=BC?= <sparrowscout.0000@gmail.com>
Date: Thu, 14 Dec 2023 23:15:50 +0900
Subject: [PATCH] Feat : add naver social login

---
 src/component/home/KakaoOauth.tsx |  2 --
 src/component/home/NaverOauth.tsx |  9 +++++++++
 src/pages/Login.tsx               | 16 +++++++++++++---
 src/routes/Router.tsx             |  6 +++++-
 4 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 src/component/home/NaverOauth.tsx

diff --git a/src/component/home/KakaoOauth.tsx b/src/component/home/KakaoOauth.tsx
index 3b5a525..8dee543 100644
--- a/src/component/home/KakaoOauth.tsx
+++ b/src/component/home/KakaoOauth.tsx
@@ -5,7 +5,5 @@ export default function KakaoOauth() {
   const urlParams = new URLSearchParams(location.search);
   const codeValue = urlParams.get('code');
 
-  console.log(codeValue);
-
   return <>카카오 리다이렉트 페이지</>;
 }
diff --git a/src/component/home/NaverOauth.tsx b/src/component/home/NaverOauth.tsx
new file mode 100644
index 0000000..01ce972
--- /dev/null
+++ b/src/component/home/NaverOauth.tsx
@@ -0,0 +1,9 @@
+import { useLocation } from 'react-router';
+
+export default function NaverOauth() {
+  const location = useLocation();
+  const urlParams = new URLSearchParams(location.search);
+  const codeValue = urlParams.get('code');
+
+  return <>네이버 리다이렉트 페이지</>;
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 574f940..8537ec5 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -6,9 +6,17 @@ export default function Login() {
     window.location.href = kakaoLoginURL;
   };
 
-  const kakaoClientId = process.env.REACT_APP_KAKAO_CLIENT_ID;
+  const onClickNaverLogin = () => {
+    window.location.href = naverLoginURL;
+  };
+
+  const naverClientID = process.env.REACT_APP_NAVER_CLIENT_ID;
+  const naverRedirectURI = process.env.REACT_APP_NAVER_REDIRECT_URI;
+  const naverLoginURL = `https://nid.naver.com/oauth2.0/authorize?client_id=${naverClientID}&response_type=code&redirect_uri=${naverRedirectURI}`;
+
+  const kakaoClientID = process.env.REACT_APP_KAKAO_CLIENT_ID;
   const kakaoRedirectURI = process.env.REACT_APP_KAKAO_REDIRECT_URI;
-  const kakaoLoginURL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoClientId}&redirect_uri=${kakaoRedirectURI}&response_type=code`;
+  const kakaoLoginURL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoClientID}&redirect_uri=${kakaoRedirectURI}&response_type=code`;
 
   return (
     <LoginPageContainer>
@@ -24,7 +32,9 @@ export default function Login() {
       </LoginTitleContainer>
 
       <SocialLoginContainer>
-        <NaverLoginBtn>네이버로 로그인하기</NaverLoginBtn>
+        <NaverLoginBtn onClick={onClickNaverLogin}>
+          네이버로 로그인하기
+        </NaverLoginBtn>
         <KakaoLoginBtn onClick={onClickKakaoLogin}>
           카카오톡으로 로그인하기
         </KakaoLoginBtn>
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index db62c52..79d1e35 100644
--- a/src/routes/Router.tsx
+++ b/src/routes/Router.tsx
@@ -3,6 +3,7 @@ import DefaultLayout from 'layout/DefaultLayout';
 import Login from 'pages/Login';
 import Home from 'pages/Home';
 import KakaoOauth from 'component/home/KakaoOauth';
+import NaverOauth from 'component/home/NaverOauth';
 
 export const router = createBrowserRouter([
   {
@@ -15,7 +16,10 @@ export const router = createBrowserRouter([
       { path: '/login', element: <Login /> },
       {
         path: '/oauth',
-        children: [{ path: 'kakao', element: <KakaoOauth /> }],
+        children: [
+          { path: 'kakao', element: <KakaoOauth /> },
+          { path: 'naver', element: <NaverOauth /> },
+        ],
       },
     ],
   },