From 428da50ddd1fe96fa426035ab90224db152d600e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= <gino9940@gmail.com>
Date: Mon, 22 Jan 2024 16:11:05 +0900
Subject: [PATCH 1/2] fix: add width height to ThumbsIcon

---
 src/components/Home/Comment/Thumbs.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Home/Comment/Thumbs.tsx b/src/components/Home/Comment/Thumbs.tsx
index ccde91f..a639b82 100644
--- a/src/components/Home/Comment/Thumbs.tsx
+++ b/src/components/Home/Comment/Thumbs.tsx
@@ -22,6 +22,8 @@ const Thumbs = ({ type, count, hasClicked, onClick }: ThumbsProps) => {
     <button onClick={onClick}>
       <Row gap={3} justifyContent={'space-between'} alignItems={'center'}>
         <ThumbsIcon
+          width={22}
+          height={22}
           fill={fill}
           stroke={stroke}
           style={{ transform: type === 'down' ? 'rotate(180deg)' : 'rotate(0deg)' }}

From 2ddc70f5fc6835f751d7ed0e0eb4b9f5f67d92d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= <gino9940@gmail.com>
Date: Mon, 22 Jan 2024 17:12:19 +0900
Subject: [PATCH 2/2] fix: login ui

---
 src/components/Login/LoginButton.tsx   | 35 +++++++++++
 src/routes/Auth/login/Login.styles.tsx |  4 +-
 src/routes/Auth/login/Login.tsx        | 87 +++++++++++---------------
 3 files changed, 73 insertions(+), 53 deletions(-)
 create mode 100644 src/components/Login/LoginButton.tsx

diff --git a/src/components/Login/LoginButton.tsx b/src/components/Login/LoginButton.tsx
new file mode 100644
index 0000000..270bb38
--- /dev/null
+++ b/src/components/Login/LoginButton.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Row } from '@components/commons/Flex/Flex';
+import Text from '@components/commons/Text/Text';
+import { LoginButton as Button } from '@routes/Auth/login/Login.styles';
+
+import { colors } from '@styles/theme';
+
+interface LoginButtonProps {
+  onClick: () => void;
+  backgroundColor: string;
+  color?: string;
+  Icon: () => React.ReactNode;
+  buttonText: string;
+}
+
+const LoginButton = ({
+  onClick,
+  backgroundColor,
+  color = colors.black,
+  Icon,
+  buttonText,
+}: LoginButtonProps) => (
+  <Button onClick={onClick} style={{ backgroundColor }}>
+    <Row padding={'15px 20px'} justifyContent={'space-between'}>
+      <Icon />
+      <Text size={16} color={color} weight={'bold'}>
+        {buttonText}
+      </Text>
+      <div style={{ width: 18, height: 18 }} />
+    </Row>
+  </Button>
+);
+
+export default LoginButton;
diff --git a/src/routes/Auth/login/Login.styles.tsx b/src/routes/Auth/login/Login.styles.tsx
index 117693d..e8f7c6d 100644
--- a/src/routes/Auth/login/Login.styles.tsx
+++ b/src/routes/Auth/login/Login.styles.tsx
@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 
 export const Container = styled.div`
-  height: 100vh;
+  height: 100%;
   background-color: ${(props) => props.theme.colors.navy};
 `;
 
@@ -19,8 +19,6 @@ export const Divider = styled.div`
 `;
 
 export const LoginButtonContainer = styled.div`
-  position: absolute;
-  bottom: 104px;
   display: flex;
   flex-direction: column;
   gap: 17px;
diff --git a/src/routes/Auth/login/Login.tsx b/src/routes/Auth/login/Login.tsx
index 002695a..966d8da 100644
--- a/src/routes/Auth/login/Login.tsx
+++ b/src/routes/Auth/login/Login.tsx
@@ -1,20 +1,15 @@
 import React from 'react';
 
-import { Row } from '@components/commons/Flex/Flex';
+import { Col, Row } from '@components/commons/Flex/Flex';
 import Layout from '@components/commons/Layout/Layout';
 import Text from '@components/commons/Text/Text';
+import LoginButton from '@components/Login/LoginButton';
 
-import { colors } from '@styles/theme';
+import { colors, theme } from '@styles/theme';
 
 import { ABLogoIcon, AppleIcon, GoogleIcon, KakaoIcon } from '@icons/index';
 
-import {
-  Container,
-  Divider,
-  LoginButton,
-  LoginButtonContainer,
-  LogoContainer,
-} from './Login.styles';
+import { Container, Divider, LoginButtonContainer, LogoContainer } from './Login.styles';
 
 const Login = () => {
   const KakaoRestApiKey = import.meta.env.VITE_KAKAO_OAUTH_KEY;
@@ -36,51 +31,43 @@ const Login = () => {
   return (
     <Layout hasBottomNavigation={false}>
       <Container>
-        <div>
-          <LogoContainer>
+        <Col justifyContent="center" gap={80} style={{ height: '100%' }}>
+          <Col gap={35} alignItems="center">
             <ABLogoIcon />
-          </LogoContainer>
-          <Text size={24} weight={600} align={'center'}>
-            세상의 모든 질문,
-            <br /> AB로 답하다
-          </Text>
-        </div>
-        <LoginButtonContainer>
-          <Row padding={'0 20px'} gap={17}>
-            <Divider />
-            <Text size={15} noWrap={true}>
-              간편 가입하기
+            <Text size={24} weight={600} align={'center'} color={theme.colors.white}>
+              세상의 모든 질문,
+              <br /> AB로 답하다
             </Text>
-            <Divider />
-          </Row>
-          <LoginButton onClick={handleKaKaoLogin} style={{ backgroundColor: '#FEE500' }}>
-            <Row padding={'15px 20px'}>
-              <KakaoIcon />
-              <Text size={16} color={colors.black} weight={'bold'}>
-                카카오로 계속하기
+          </Col>
+          <LoginButtonContainer>
+            <Row gap={17} alignItems={'center'} justifyContent={'space-between'}>
+              <Divider />
+              <Text size={15} noWrap={true} weight={400} color={theme.colors.white}>
+                간편 가입하기
               </Text>
-              <div style={{ width: 18, height: 18 }} />
+              <Divider />
             </Row>
-          </LoginButton>
-          <LoginButton onClick={handleGoogleLogin} style={{ backgroundColor: colors.white }}>
-            <Row padding={'15px 20px'}>
-              <GoogleIcon />
-              <Text size={16} color={colors.black} weight={'bold'}>
-                구글로 계속하기
-              </Text>
-              <div style={{ width: 18, height: 18 }} />
-            </Row>
-          </LoginButton>
-          <LoginButton onClick={handleGoogleLogin} style={{ backgroundColor: colors.black }}>
-            <Row padding={'15px 20px'}>
-              <AppleIcon />
-              <Text size={16} color={colors.white} weight={'bold'}>
-                애플로 계속하기
-              </Text>
-              <div style={{ width: 18, height: 18 }} />
-            </Row>
-          </LoginButton>
-        </LoginButtonContainer>
+            <LoginButton
+              onClick={handleKaKaoLogin}
+              backgroundColor="#FEE500"
+              Icon={() => <KakaoIcon />}
+              buttonText="카카오로 계속하기"
+            />
+            <LoginButton
+              onClick={handleGoogleLogin}
+              backgroundColor={colors.white}
+              Icon={() => <GoogleIcon />}
+              buttonText="구글로 계속하기"
+            />
+            <LoginButton
+              onClick={handleGoogleLogin}
+              backgroundColor={colors.black}
+              color={colors.white}
+              Icon={() => <AppleIcon />}
+              buttonText="애플로 계속하기"
+            />
+          </LoginButtonContainer>
+        </Col>
       </Container>
     </Layout>
   );