[Design]OAuth로그인창 디자인 변경

버튼에 마우스 올릴 시 밝은 회색으로 덮기 구글로 로그인, 카카오로 로그인 한글로 변경 Issues #15
codestates-seb · Sep 17, 2023 · d475330 · d475330
1 parent b4cad46
commit d475330
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 21 deletions.
diff --git 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<Props> = ({ 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<Props> = ({ 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
@@ -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<Props> = ({ 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<Props> = ({ 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
@@ -12,8 +12,14 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ 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<LoginModalProps> = ({ onClose, onEmailLoginClick
                 <TokenHandler />
                 <CloseButton onClick={onClose}>&times;</CloseButton>
                 <Title>{titleText}</Title>
-                <GoogleLoginButton backendURL="http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/google" />
-                <KakaoLoginButton backendURL="http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/kakao" />
+                <GoogleLoginButton backendURL={GOOGLE_BACKEND_URL} />
+                <KakaoLoginButton backendURL={KAKAO_BACKEND_URL} />
                 <OrText>{orText}</OrText>
                 <EmailButtonsContainer>
                     <EmailButton onClick={onEmailLoginClick}>{emailLoginText}</EmailButton>
@@ -39,15 +45,19 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ 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,20 +106,33 @@ const OrText = styled.span`
     color: grey;
 `;
 
+// 버튼 컨테이너 스타일
 const EmailButtonsContainer = styled.div`
     display: flex;
     justify-content: space-around;
     width: 100%;
     margin: 5px 0;
 `;
 
+
+//이메일 로그인, 이메일 회원가입 버튼 스타일
 const EmailButton = styled.button`
     margin: 5px 0;
     padding: 10px 20px;
     background-color: #FFFFFF;
     border: 1px solid lightgray;
     border-radius: 5px;
     cursor: pointer;
+
+    &:hover {
+        background-color: #f2f2f2;  // 호버 시 밝은 회색 배경 적용
+    }
 `;
 
-export default OAuthLoginModal;
+
+
+
+
+
+
+