feat: 로그인 페이지 ui 변경 (#366)

Java-and-Script · Nov 29, 2023 · 7e12e54 · 7e12e54
1 parent aedc819
commit 7e12e54
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/src/pages/LoginPage/LoginPage.style.ts b/src/pages/LoginPage/LoginPage.style.ts
@@ -1,19 +1,21 @@
 import styled from '@emotion/styled';
 
+import { Flex } from '@components/shared/Flex';
 import { Image } from '@components/shared/Image';
 
-export const LoginContainer = styled.div`
+export const LoginContainer = styled(Flex)`
   ${({ theme }) => theme.STYLES.LAYOUT}
   min-height: 100dvh;
   background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
 `;
 
 export const Main = styled.div`
   height: 100%;
+  flex-grow: 1;
   ${({ theme }) => theme.STYLES.FLEX_ALIGN_CENTER};
   flex-direction: column;
   justify-content: center;
-  gap: 20px;
+  gap: 30px;
 `;
 
 export const MainImage = styled(Image)`
@@ -29,3 +31,10 @@ export const LogoImage = styled(Image)`
 export const KakaoLoginImage = styled(Image)`
   max-width: 767px;
 `;
+
+export const KakaoLogin = styled(Flex)`
+  height: 60px;
+  width: 100%;
+  background-color: #ffe617;
+  border-radius: 10px;
+`;
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
@@ -1,18 +1,9 @@
 import { Header } from '@components/Header';
+import { Text } from '@components/shared/Text';
 
-import KAKAO_LOGIN_SRC from '@assets/kakao_login_large_wide.png';
 import LOGO_SRC from '@assets/logoSvg.svg';
 
-import {
-  KakaoLoginImage,
-  LoginContainer,
-  LogoImage,
-  Main,
-  MainImage,
-} from './LoginPage.style';
-
-const LOGIN_MAIN =
-  'https://github.com/Java-and-Script/pickple-front/assets/87280835/1134921d-2e91-4b47-b99a-4095c91f0a6d';
+import { KakaoLogin, LoginContainer, LogoImage, Main } from './LoginPage.style';
 
 export const LoginPage = () => {
   const BASE_URL = import.meta.env.VITE_BASE_URL;
@@ -22,23 +13,19 @@ export const LoginPage = () => {
   };
 
   return (
-    <LoginContainer>
+    <LoginContainer direction="column">
       <Header isLogo={false} title="로그인" isRightContainer={false} />
       <Main>
-        <LogoImage src={LOGO_SRC} width="35%" height="auto" alt="pickle logo" />
-        <MainImage
-          src={LOGIN_MAIN}
-          width="100%"
-          height="55%"
-          alt="login main banner"
-        />
-        <KakaoLoginImage
-          src={KAKAO_LOGIN_SRC}
-          width="100%"
-          height="auto"
-          alt="kakao login"
+        <LogoImage src={LOGO_SRC} width="50%" height="auto" alt="pickle logo" />
+        <KakaoLogin
+          justify="center"
+          align="center"
           onClick={() => onClickKakaoLogin()}
-        />
+        >
+          <Text nowrap weight={700} color="#47292A">
+            카카오 아이디로 로그인
+          </Text>
+        </KakaoLogin>
       </Main>
     </LoginContainer>
   );