Feat : add naver social login

potenday-project · Dec 14, 2023 · a21a8a4 · a21a8a4
1 parent 86581d7
commit a21a8a4
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 /> },
+        ],
       },
     ],
   },