feat: Login Button 개선

Here-You · Feb 17, 2024 · cc9d3cc · cc9d3cc
1 parent 142b7fe
commit cc9d3cc
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/src/components/login/GoogleLoginButton.jsx b/src/components/login/GoogleLoginButton.jsx
@@ -27,7 +27,7 @@ const GoogleLoginButton = () => {
   });
 
   return (
-    <S.LoginButton onClick={login} style={{ backgroundColor: 'white' }}>
+    <S.LoginButton onClick={login}>
       <S.Icon src={GoogleIcon} />
       <h3>구글 로그인 </h3>
     </S.LoginButton>

diff --git a/src/components/login/KakaoLoginButton.jsx b/src/components/login/KakaoLoginButton.jsx
@@ -11,12 +11,10 @@ const KakaoLoginButton = () => {
   };
   return (
     <>
-      <S.LoginButton
-        style={{ backgroundColor: '#FEE500' }}
-        onClick={handleLogin}>
+      <S.KLoginButton onClick={handleLogin}>
         <S.Icon src={KakaoIcon} />
         <h3>카카오 로그인 </h3>
-      </S.LoginButton>
+      </S.KLoginButton>
     </>
   );
 };

diff --git a/src/components/login/SnsLoginButton.style.js b/src/components/login/SnsLoginButton.style.js
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import { FONT_SIZE } from '@/constants/size';
+import theme from '@/theme';
 
 const LoginButton = styled.button`
   display: flex;
@@ -13,12 +14,42 @@ const LoginButton = styled.button`
   padding: 10px 11px;
   margin-bottom: 26px;
   border-radius: 100px;
+  background-color: ${theme.COLOR.MAIN.WHITE};
   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
   font-size: ${FONT_SIZE.BASE};
+  cursor: pointer;
 
   &:hover {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    transform: scale(1.05);
+    transform: scale(0.99);
+  }
+
+  h3 {
+    font-family: 'Pretendard-semibold';
+    font-size: 16px;
+    width: 90%;
+  }
+`;
+
+const KLoginButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 35%;
+  color: black;
+  border: none;
+  padding: 10px 11px;
+  margin-bottom: 26px;
+  border-radius: 100px;
+  background-color: #fae100;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
+  font-size: ${FONT_SIZE.BASE};
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transform: scale(0.99);
   }
 
   h3 {
@@ -33,4 +64,4 @@ const Icon = styled.img`
   margin-left: 10px;
   width: 25px;
 `;
-export { LoginButton, Icon };
+export { LoginButton, KLoginButton, Icon };