[Design]소셜로그인 버튼 디자인

Issues #15
codestates-seb · Sep 16, 2023 · f109696 · f109696
1 parent b311505
commit f109696
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 7 deletions.
diff --git a/client/src/components/Logins/GoogleLoginButton.tsx b/client/src/components/Logins/GoogleLoginButton.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
 import { setLoginState } from '../../reducer/member/loginSlice';  
+import googleLogo from '../../asset/images/GoogleLogo.svg'; 
 
 interface Props {
   backendURL: string;
@@ -9,16 +11,39 @@ interface Props {
 const GoogleLoginButton: React.FC<Props> = ({ backendURL }) => {
   const dispatch = useDispatch();
 
+  const buttonText = "Login with Google";
+
   const handleLoginClick = () => {
     window.location.href = `${backendURL}`;
     dispatch(setLoginState());  // 로그인 상태를 변경합니다.
   };
 
   return (
-    <button onClick={handleLoginClick}>
-      Login with Google
-    </button>
+    <GoogleButton onClick={handleLoginClick}>
+      <LogoImage src={googleLogo} alt="Google Logo" />
+      {buttonText}
+    </GoogleButton>
   );
 }
 
+// Styled Components
+const GoogleButton = styled.button`
+  margin: 10px 0;
+  padding: 10px 20px;
+  background-color: #FFFFFF;
+  border: 1px solid lightgray;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+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,8 +1,10 @@
 // KakaoLoginButton.tsx
 
 import React from 'react';
+import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
-import { setLoginState } from '../../reducer/member/loginSlice'; 
+import { setLoginState } from '../../reducer/member/loginSlice';  
+import kakaoLogo from '../../asset/images/KakaoLogo.svg'; 
 
 interface Props {
   backendURL: string;
@@ -11,16 +13,39 @@ interface Props {
 const KakaoLoginButton: React.FC<Props> = ({ backendURL }) => {
   const dispatch = useDispatch();
 
+  const buttonText = "Login with Kakao";
+
   const handleLoginClick = () => {
     window.location.href = `${backendURL}`;
     dispatch(setLoginState());  // 로그인 상태를 변경합니다.
   };
 
   return (
-    <button onClick={handleLoginClick}>
-      Login with Kakao
-    </button>
+    <KakaoButton onClick={handleLoginClick}>
+      <LogoImage src={kakaoLogo} alt="Kakao Logo" />
+      {buttonText}
+    </KakaoButton>
   );
 }
 
+// Styled Components
+const KakaoButton = styled.button`
+  margin: 10px 0;
+  padding: 10px 20px;
+  background-color: #FFFFFF;
+  border: 1px solid lightgray;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const LogoImage = styled.img`
+  margin-right: 30px;
+  width: 60px;
+  height: auto;
+`;
+
 export default KakaoLoginButton;