[FE] refactor: 카카오 로그인 버튼 svg 파일 대신 직접 디자인

frontend/src/assets/icons/index.ts

@@ -20,7 +20,7 @@ export { ReactComponent as PencilIcon } from './pencil.svg';
 export { ReactComponent as WritingIcon } from './writing.svg';
 export { ReactComponent as ImportIcon } from './import.svg';
 export { ReactComponent as PlusIcon } from './plus.svg';
-export { ReactComponent as KakaoLoginIcon } from './kakao-login.svg';
+export { ReactComponent as KakaoSymbol } from './kakao-symbol.svg';
 export { ReactComponent as DefaultUserProfileIcon } from './default-user-profile.svg';
 export { ReactComponent as NotionIcon } from './notion.svg';
 export { ReactComponent as DonggleIcon } from './donggle-logo.svg';

frontend/src/components/Login/KakaoLoginButton.tsx

@@ -1,16 +1,41 @@
-import { KakaoLoginIcon } from 'assets/icons';
+import { KakaoSymbol } from 'assets/icons';
 import { OauthPlatforms, getOauthPlatformURL } from 'constants/components/oauth';
+import { styled } from 'styled-components';
 
 const KakaoLoginButton = () => {
   const redirectToKakao = () => {
     window.location.href = getOauthPlatformURL(OauthPlatforms.kakao);
   };
 
   return (
-    <button onClick={redirectToKakao} aria-label='카카오 로그인 화면으로 이동'>
-      <KakaoLoginIcon aria-label='카카오 로그인 아이콘' />
-    </button>
+    <S.KakaoLoginButton onClick={redirectToKakao} aria-label='카카오 로그인 화면으로 이동'>
+      <KakaoSymbol width='18px' height='18px' />
+      <S.KakaoLoginText>카카오로 시작하기</S.KakaoLoginText>
+    </S.KakaoLoginButton>
   );
 };
 
 export default KakaoLoginButton;
+
+const S = {
+  KakaoLoginButton: styled.button`
+    display: flex;
+    width: 300px;
+    height: 45px;
+    justify-content: center;
+    align-items: center;
+    padding: 12px;
+    background-color: #fee500;
+    border-radius: 6px;
+    font-size: 1.4rem;
+    font-weight: 600;
+
+    &:hover {
+      background-color: #ffe000;
+    }
+  `,
+
+  KakaoLoginText: styled.span`
+    flex: 1;
+  `,
+};