Development

.github/workflows/main.yml

@@ -11,6 +11,8 @@ jobs:
   build:
     runs-on: ubuntu-20.04
     env:
+      REACT_APP_NAVER_CLIENT_ID: ${{ secrets.NAVER_CLIENT_ID }}
+      REACT_APP_NAVER_REDIRECT_URI: ${{ secrets.NAVER_REDIRECT_URI }}
       REACT_APP_KAKAO_CLIENT_ID: ${{ secrets.KAKAO_CLIENT_ID }}
       REACT_APP_KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }}
       AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -41,6 +43,8 @@ jobs:
           echo "REACT_APP_REGION=$REACT_APP_REGION" >> .env.production
 
         env:
+          REACT_APP_NAVER_CLIENT_ID: ${{ secrets.NAVER_CLIENT_ID }}
+          REACT_APP_NAVER_REDIRECT_URI: ${{ secrets.NAVER_REDIRECT_URI }}
           REACT_APP_KAKAO_CLIENT_ID: ${{ secrets.KAKAO_CLIENT_ID }}
           REACT_APP_KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }}
           REACT_APP_ACCESS_KEY: ${{ secrets.AWS_ACCESS_KEY_ID }}

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 <>카카오 리다이렉트 페이지</>;
 }

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 <>네이버 리다이렉트 페이지</>;
+}

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>

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 /> },
+        ],
       },
     ],
   },