From 02300aaca95510c755ac4f67581cea4c26738774 Mon Sep 17 00:00:00 2001 From: hwna00 Date: Tue, 19 Sep 2023 19:46:38 +0900 Subject: [PATCH] =?UTF-8?q?Feat(user):=20=EB=84=A4=EC=9D=B4=EB=B2=84=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 네이버 아이디 로그인 기능 연결 - 버튼 이미지 추가 ref: #67 --- .../NaverLoginButton/NaverLoginButton.js | 20 ++++++++++++++++++ .../components/NaverLoginButton/package.json | 3 +++ .../apps/user/src/images/btnG_icon_circle.png | Bin 0 -> 9714 bytes .../apps/user/src/views/Auth/LogIn/LogIn.js | 14 +++++------- 4 files changed, 28 insertions(+), 9 deletions(-) create mode 100644 packages/apps/user/src/components/NaverLoginButton/NaverLoginButton.js create mode 100644 packages/apps/user/src/components/NaverLoginButton/package.json create mode 100644 packages/apps/user/src/images/btnG_icon_circle.png diff --git a/packages/apps/user/src/components/NaverLoginButton/NaverLoginButton.js b/packages/apps/user/src/components/NaverLoginButton/NaverLoginButton.js new file mode 100644 index 00000000..dc3d13b1 --- /dev/null +++ b/packages/apps/user/src/components/NaverLoginButton/NaverLoginButton.js @@ -0,0 +1,20 @@ +import { Image } from '@chakra-ui/react'; +import logo from '../../images/btnG_icon_circle.png'; +import { useCallback } from 'react'; + +const NaverForm = function () { + const base_url = 'https://nid.naver.com/oauth2.0/authorize'; + const REDIRECT_URI = `http://localhost:8080/auth/login/naver-callback`; + const STATE = 'slfjsdf'; + const NAVER_AUTH_URL = `${base_url}?response_type=code&client_id=${ + process.env.REACT_APP_NAVER_CLIENT_ID + }&redirect_uri=${encodeURI(REDIRECT_URI)}&state=${STATE}`; + + const onLoginClick = useCallback(() => { + window.location.href = NAVER_AUTH_URL; + }, [NAVER_AUTH_URL]); + + return ; +}; + +export default NaverForm; diff --git a/packages/apps/user/src/components/NaverLoginButton/package.json b/packages/apps/user/src/components/NaverLoginButton/package.json new file mode 100644 index 00000000..c14e1c8e --- /dev/null +++ b/packages/apps/user/src/components/NaverLoginButton/package.json @@ -0,0 +1,3 @@ +{ + "main": "NaverLoingButton.js" +} diff --git a/packages/apps/user/src/images/btnG_icon_circle.png b/packages/apps/user/src/images/btnG_icon_circle.png new file mode 100644 index 0000000000000000000000000000000000000000..e3c3242f1d100239bd4c5a7fea39a50484b1e5be GIT binary patch literal 9714 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 Ar~m)} literal 0 HcmV?d00001 diff --git a/packages/apps/user/src/views/Auth/LogIn/LogIn.js b/packages/apps/user/src/views/Auth/LogIn/LogIn.js index b7d12bff..37dbcf72 100644 --- a/packages/apps/user/src/views/Auth/LogIn/LogIn.js +++ b/packages/apps/user/src/views/Auth/LogIn/LogIn.js @@ -1,12 +1,8 @@ import { useCallback, useState } from 'react'; -import { useNavigate , Link as ReactRouterLink } from 'react-router-dom'; +import { useNavigate, Link as ReactRouterLink } from 'react-router-dom'; import { FaUserAlt, FaLock } from 'react-icons/fa'; -import { - AiFillGithub, - AiFillGoogleCircle, - AiFillTwitterCircle, -} from 'react-icons/ai'; +import { AiFillGoogleCircle, AiFillTwitterCircle } from 'react-icons/ai'; import { useForm } from 'react-hook-form'; import { Box, @@ -26,6 +22,7 @@ import { } from '@chakra-ui/react'; import { logIn, googleLogin, auth, provider } from '../../../../firebase'; +import NaverLoginButton from '../../../components/NaverLoginButton/NaverLoginButton'; function LogIn() { const [showPassword, setShowPassword] = useState(false); @@ -101,9 +98,7 @@ function LogIn() { alignItems="center" padding="15px" > - + +