diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 7584f0a..ff4efb8 100644 --- a/.github/workflows/main.yml +++ b/.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 }} 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 ( @@ -24,7 +32,9 @@ export default function Login() { - 네이버로 로그인하기 + + 네이버로 로그인하기 + 카카오톡으로 로그인하기 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: }, { path: '/oauth', - children: [{ path: 'kakao', element: }], + children: [ + { path: 'kakao', element: }, + { path: 'naver', element: }, + ], }, ], },