From d475330ba301f2ef8e8d274baf733ffae5ec9143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?= Date: Sun, 17 Sep 2023 18:55:48 +0900 Subject: [PATCH] =?UTF-8?q?[Design]OAuth=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=EC=B0=BD=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=97=90=20=EB=A7=88=EC=9A=B0=EC=8A=A4=20?= =?UTF-8?q?=EC=98=AC=EB=A6=B4=20=EC=8B=9C=20=EB=B0=9D=EC=9D=80=20=ED=9A=8C?= =?UTF-8?q?=EC=83=89=EC=9C=BC=EB=A1=9C=20=EB=8D=AE=EA=B8=B0=20=EA=B5=AC?= =?UTF-8?q?=EA=B8=80=EB=A1=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20=EC=B9=B4?= =?UTF-8?q?=EC=B9=B4=EC=98=A4=EB=A1=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=95=9C=EA=B8=80=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20Issues=20#15?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Logins/GoogleLoginButton.tsx | 25 +++++++++----- .../components/Logins/KakaoLoginButton.tsx | 25 +++++++++----- client/src/components/Logins/OAuthLogin.tsx | 34 ++++++++++++++++--- 3 files changed, 63 insertions(+), 21 deletions(-) diff --git a/client/src/components/Logins/GoogleLoginButton.tsx b/client/src/components/Logins/GoogleLoginButton.tsx index db06750b..67f32b07 100644 --- a/client/src/components/Logins/GoogleLoginButton.tsx +++ b/client/src/components/Logins/GoogleLoginButton.tsx @@ -4,18 +4,15 @@ import { useDispatch } from 'react-redux'; import { setLoginState } from '../../reducer/member/loginSlice'; import googleLogo from '../../asset/images/GoogleLogo.svg'; -interface Props { - backendURL: string; -} - const GoogleLoginButton: React.FC = ({ backendURL }) => { const dispatch = useDispatch(); - const buttonText = "Login with Google"; + const buttonText = "구글로 로그인"; + //버튼 클릭시 로그인 상태를 1로 변경 const handleLoginClick = () => { window.location.href = `${backendURL}`; - dispatch(setLoginState()); // 로그인 상태를 변경합니다. + dispatch(setLoginState()); }; return ( @@ -26,7 +23,13 @@ const GoogleLoginButton: React.FC = ({ backendURL }) => { ); } -// Styled Components +export default GoogleLoginButton; + +interface Props { + backendURL: string; +} + +// 구글 버튼 스타일 const GoogleButton = styled.button` margin: 10px 0; padding: 10px 20px; @@ -38,12 +41,18 @@ const GoogleButton = styled.button` display: flex; align-items: center; justify-content: center; + + + &:hover { + background-color: #f2f2f2; // Light gray color on hover + } `; +//구글 로고 스타일 const LogoImage = styled.img` margin-right: 30px; width: 60px; height: auto; `; -export default GoogleLoginButton; + diff --git a/client/src/components/Logins/KakaoLoginButton.tsx b/client/src/components/Logins/KakaoLoginButton.tsx index 0edd64df..3956665e 100644 --- a/client/src/components/Logins/KakaoLoginButton.tsx +++ b/client/src/components/Logins/KakaoLoginButton.tsx @@ -1,20 +1,15 @@ -// KakaoLoginButton.tsx - import React from 'react'; import styled from 'styled-components'; import { useDispatch } from 'react-redux'; import { setLoginState } from '../../reducer/member/loginSlice'; import kakaoLogo from '../../asset/images/KakaoLogo.svg'; -interface Props { - backendURL: string; -} - const KakaoLoginButton: React.FC = ({ backendURL }) => { const dispatch = useDispatch(); - const buttonText = "Login with Kakao"; + const buttonText = "카카오로 로그인"; + // 버튼 클릭시 로그인 페이지로 리다이렉트 const handleLoginClick = () => { window.location.href = `${backendURL}`; dispatch(setLoginState()); // 로그인 상태를 변경합니다. @@ -28,7 +23,14 @@ const KakaoLoginButton: React.FC = ({ backendURL }) => { ); } -// Styled Components +export default KakaoLoginButton; + +//변수 타입 선언 +interface Props { + backendURL: string; +} + +// 카카오 버튼 스타일 const KakaoButton = styled.button` margin: 10px 0; padding: 10px 20px; @@ -40,12 +42,17 @@ const KakaoButton = styled.button` display: flex; align-items: center; justify-content: center; + + &:hover { + background-color: #f2f2f2; // 호버 시 밝은 회색 배경 적용 + } `; +//카카오 로고 이미지 스타일 const LogoImage = styled.img` margin-right: 30px; width: 60px; height: auto; `; -export default KakaoLoginButton; + diff --git a/client/src/components/Logins/OAuthLogin.tsx b/client/src/components/Logins/OAuthLogin.tsx index 0591a9b7..96fb0ea0 100644 --- a/client/src/components/Logins/OAuthLogin.tsx +++ b/client/src/components/Logins/OAuthLogin.tsx @@ -12,8 +12,14 @@ const OAuthLoginModal: React.FC = ({ onClose, onEmailLoginClick const emailLoginText = "이메일로 로그인"; const emailSignupText = "이메일로 회원가입"; + //소셜로그인 주소 + const GOOGLE_BACKEND_URL = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/google"; + const KAKAO_BACKEND_URL = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/kakao"; + + //로그인 전역변수 불러오기 const loginState = useSelector((state: RootState) => state.login); + // 이미 로그인상태라면 모달창 닫기 useEffect(() => { if (loginState === 1) { onLoginSuccess(); @@ -27,8 +33,8 @@ const OAuthLoginModal: React.FC = ({ onClose, onEmailLoginClick × {titleText} - - + + {orText} {emailLoginText} @@ -39,15 +45,19 @@ const OAuthLoginModal: React.FC = ({ onClose, onEmailLoginClick ); }; +export default OAuthLoginModal; + +//변수 타입 interface LoginModalProps { onClose: () => void; onEmailLoginClick: () => void; onEmailSignupClick: () => void; - onLoginSuccess: () => void; // 추가된 부분 + onLoginSuccess: () => void; onWatchListClick: () => void; onHoldingsClick: () => void; } +// 모달창 띄웠을 때 배경 스타일 const ModalBackground = styled.div` display: flex; justify-content: center; @@ -60,6 +70,7 @@ const ModalBackground = styled.div` background-color: rgba(0, 0, 0, 0.5); `; +//모달 컨테이너 스타일 const ModalContainer = styled.div` z-index:4000; position: relative; @@ -72,6 +83,7 @@ const ModalContainer = styled.div` align-items: center; `; +//닫기 버튼 스타일 const CloseButton = styled.button` position: absolute; top: 10px; @@ -82,6 +94,7 @@ const CloseButton = styled.button` cursor: pointer; `; +//제목 스타일 const Title = styled.h2` margin-bottom: 20px; font-size: 1.6rem; @@ -93,6 +106,7 @@ const OrText = styled.span` color: grey; `; +// 버튼 컨테이너 스타일 const EmailButtonsContainer = styled.div` display: flex; justify-content: space-around; @@ -100,6 +114,8 @@ const EmailButtonsContainer = styled.div` margin: 5px 0; `; + +//이메일 로그인, 이메일 회원가입 버튼 스타일 const EmailButton = styled.button` margin: 5px 0; padding: 10px 20px; @@ -107,6 +123,16 @@ const EmailButton = styled.button` border: 1px solid lightgray; border-radius: 5px; cursor: pointer; + + &:hover { + background-color: #f2f2f2; // 호버 시 밝은 회색 배경 적용 + } `; -export default OAuthLoginModal; + + + + + + +