From 8e00d4ace4fa14fbabdadf312fcdd2b779bf2e71 Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 5 Oct 2023 15:57:11 +0900 Subject: [PATCH 1/2] =?UTF-8?q?chore:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=EC=8B=AC=EB=B3=BC=20svg=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B8=B0=EC=A1=B4=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20svg=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/icons/index.ts | 2 +- frontend/src/assets/icons/kakao-login.svg | 1 - frontend/src/assets/icons/kakao-symbol.svg | 2 ++ 3 files changed, 3 insertions(+), 2 deletions(-) delete mode 100644 frontend/src/assets/icons/kakao-login.svg create mode 100644 frontend/src/assets/icons/kakao-symbol.svg diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts index 4df980262..337fc0f6f 100644 --- a/frontend/src/assets/icons/index.ts +++ b/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'; diff --git a/frontend/src/assets/icons/kakao-login.svg b/frontend/src/assets/icons/kakao-login.svg deleted file mode 100644 index 6152f8073..000000000 --- a/frontend/src/assets/icons/kakao-login.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/assets/icons/kakao-symbol.svg b/frontend/src/assets/icons/kakao-symbol.svg new file mode 100644 index 000000000..c7f9b5091 --- /dev/null +++ b/frontend/src/assets/icons/kakao-symbol.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file From cbb36b6a200e5e08b1908ac8c00edbbded6884f9 Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 5 Oct 2023 15:57:40 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=EC=A0=9C?= =?UTF-8?q?=EC=9E=91=20=EB=B0=8F=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Login/KakaoLoginButton.tsx | 33 ++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Login/KakaoLoginButton.tsx b/frontend/src/components/Login/KakaoLoginButton.tsx index e099a3546..87b4c01ef 100644 --- a/frontend/src/components/Login/KakaoLoginButton.tsx +++ b/frontend/src/components/Login/KakaoLoginButton.tsx @@ -1,5 +1,6 @@ -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 = () => { @@ -7,10 +8,34 @@ const KakaoLoginButton = () => { }; return ( - + + + 카카오로 시작하기 + ); }; 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; + `, +};