diff --git a/src/assets/icons/ab-logo.svg b/src/assets/icons/ab-logo.svg new file mode 100644 index 0000000..0a5495f --- /dev/null +++ b/src/assets/icons/ab-logo.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/apple-login.svg b/src/assets/icons/apple-login.svg deleted file mode 100644 index fbf3c24..0000000 --- a/src/assets/icons/apple-login.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/icons/apple.svg b/src/assets/icons/apple.svg new file mode 100644 index 0000000..ec2ec43 --- /dev/null +++ b/src/assets/icons/apple.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/google-login.svg b/src/assets/icons/google-login.svg deleted file mode 100644 index 113056f..0000000 --- a/src/assets/icons/google-login.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/icons/google.svg b/src/assets/icons/google.svg new file mode 100644 index 0000000..0829b36 --- /dev/null +++ b/src/assets/icons/google.svg @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 6d6353c..7181bbf 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -1,10 +1,11 @@ +import ABLogoIcon from './ab-logo.svg?react'; import ABIcon from './ab.svg?react'; import AlarmIcon from './alarm-default.svg?react'; import NewAlarmIcon from './alarm-new.svg?react'; -import AppleLoginIcon from './apple-login.svg?react'; -import GoogleLoginIcon from './google-login.svg?react'; +import AppleIcon from './apple.svg?react'; +import GoogleIcon from './google.svg?react'; import SelectedHomeIcon from './home-selected.svg?react'; -import KakaoLoginIcon from './kakao-login.svg?react'; +import KakaoIcon from './kakao.svg?react'; import LeftDoubleArrowIcon from './left-double-arrow.svg?react'; import MeatballIcon from './meatball.svg?react'; import PlusBoxIcon from './plus-box.svg?react'; @@ -14,18 +15,19 @@ import RightDoubleArrowIcon from './right-double-arrow.svg?react'; import WriteBoxIcon from './write-box.svg?react'; export { - SelectedHomeIcon, ABIcon, - PlusBoxIcon, - WriteBoxIcon, - ProfileIcon, + ABLogoIcon, AlarmIcon, + AppleIcon, + GoogleIcon, + KakaoIcon, + LeftDoubleArrowIcon, + MeatballIcon, NewAlarmIcon, + PlusBoxIcon, + ProfileIcon, RightChevronIcon, - KakaoLoginIcon, - AppleLoginIcon, - GoogleLoginIcon, - LeftDoubleArrowIcon, RightDoubleArrowIcon, - MeatballIcon, + SelectedHomeIcon, + WriteBoxIcon, }; diff --git a/src/assets/icons/kakao-login.svg b/src/assets/icons/kakao-login.svg deleted file mode 100644 index 01481e5..0000000 --- a/src/assets/icons/kakao-login.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/icons/kakao.svg b/src/assets/icons/kakao.svg new file mode 100644 index 0000000..d4fa6d9 --- /dev/null +++ b/src/assets/icons/kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/components/commons/Flex/Flex.tsx b/src/components/commons/Flex/Flex.tsx new file mode 100644 index 0000000..1da5aa4 --- /dev/null +++ b/src/components/commons/Flex/Flex.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import styled, { css } from 'styled-components'; + +interface FlexProps { + justifyContent?: React.CSSProperties['justifyContent']; + alignItems?: React.CSSProperties['alignItems']; + gap?: React.CSSProperties['gap']; + padding?: React.CSSProperties['padding']; + margin?: React.CSSProperties['margin']; + borderRadius?: React.CSSProperties['borderRadius']; + children: React.ReactNode; +} + +export const Row = (props: FlexProps) => { + const { children, justifyContent = 'space-between', alignItems = 'center', ...rest } = props; + + return ( + + {children} + + ); +}; + +export const Col = (props: FlexProps) => { + const { children, justifyContent = 'space-between', alignItems = 'center', ...rest } = props; + + return ( + + {children} + + ); +}; + +interface StyledFlexProps extends Omit { + flexDirection: React.CSSProperties['flexDirection']; +} + +const Flex = styled.div` + display: flex; + flex-direction: ${(props) => props.flexDirection}; + align-items: ${(props) => props.alignItems}; + justify-content: ${(props) => props.justifyContent}; + ${({ gap }) => + gap && + css` + gap: ${gap}; + `} + ${({ padding }) => + padding && + css` + padding: ${padding}; + `} + ${({ margin }) => + margin && + css` + margin: ${margin}; + `} + ${({ borderRadius }) => + borderRadius && + css` + border-radius: ${borderRadius}; + `} +`; diff --git a/src/components/commons/Layout/Layout.styles.tsx b/src/components/commons/Layout/Layout.styles.tsx index 7f3e3b4..6461b97 100644 --- a/src/components/commons/Layout/Layout.styles.tsx +++ b/src/components/commons/Layout/Layout.styles.tsx @@ -8,7 +8,6 @@ export const Main = styled.main` height: 100vh; margin: 0 auto; overflow-y: scroll; - background-color: #fff; &::-webkit-scrollbar { display: none; diff --git a/src/components/commons/Text/Text.tsx b/src/components/commons/Text/Text.tsx index 93d2e5c..6c81943 100644 --- a/src/components/commons/Text/Text.tsx +++ b/src/components/commons/Text/Text.tsx @@ -2,13 +2,14 @@ import React from 'react'; import styled, { css } from 'styled-components'; export interface TextProps { + size: number; + children: React.ReactNode; tagName?: keyof JSX.IntrinsicElements; - color?: React.CSSProperties['color']; weight?: React.CSSProperties['fontWeight']; - size?: number; + color?: React.CSSProperties['color']; align?: React.CSSProperties['textAlign']; lineHeight?: React.CSSProperties['lineHeight']; - children: React.ReactNode; + noWrap?: boolean; } const getFontSize = (sizeInPx: number) => `${sizeInPx / 10}rem`; @@ -18,8 +19,9 @@ const Text = React.memo((props: TextProps) => { tagName = 'div', color = '#ffffff', align = 'start', - lineHeight = 'normal', - weight, + lineHeight = '140%', + noWrap = false, + weight = 400, size, children, } = props; @@ -32,6 +34,7 @@ const Text = React.memo((props: TextProps) => { size={size} align={align} lineHeight={lineHeight} + noWrap={noWrap} > {children} @@ -39,7 +42,6 @@ const Text = React.memo((props: TextProps) => { }); const Tag = styled.div` - line-height: 140%; ${({ lineHeight }) => lineHeight && css` @@ -65,6 +67,11 @@ const Tag = styled.div` css` font-size: ${getFontSize(size)}; `} + ${({ noWrap }) => + noWrap && + css` + white-space: nowrap; + `} `; export default Text; diff --git a/src/routes/Auth/login/Login.styles.tsx b/src/routes/Auth/login/Login.styles.tsx index 0d70dbe..117693d 100644 --- a/src/routes/Auth/login/Login.styles.tsx +++ b/src/routes/Auth/login/Login.styles.tsx @@ -5,19 +5,33 @@ export const Container = styled.div` background-color: ${(props) => props.theme.colors.navy}; `; -export const LoginButtonContainer = styled.button` +export const LogoContainer = styled.div` + display: flex; + justify-content: center; + padding-top: 118px; + padding-bottom: 35px; +`; + +export const Divider = styled.div` + width: 100%; + height: 1px; + background-color: ${(props) => props.theme.colors.white_60}; +`; + +export const LoginButtonContainer = styled.div` position: absolute; - bottom: 150px; + bottom: 104px; display: flex; flex-direction: column; - gap: 15px; + gap: 17px; justify-content: flex-end; width: 100%; + padding: 0 20px; cursor: pointer; `; export const LoginButton = styled.button` width: 100%; - height: 57px; cursor: pointer; + border-radius: 10px; `; diff --git a/src/routes/Auth/login/Login.tsx b/src/routes/Auth/login/Login.tsx index b4be034..2024e21 100644 --- a/src/routes/Auth/login/Login.tsx +++ b/src/routes/Auth/login/Login.tsx @@ -1,8 +1,20 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { AppleLoginIcon, GoogleLoginIcon, KakaoLoginIcon } from '@icons/index'; +import { Row } from '@components/commons/Flex/Flex'; +import Layout from '@components/commons/Layout/Layout'; +import Text from '@components/commons/Text/Text'; -import { Container, LoginButton, LoginButtonContainer } from './Login.styles'; +import { colors } from '@styles/theme'; + +import { ABLogoIcon, AppleIcon, GoogleIcon, KakaoIcon } from '@icons/index'; + +import { + Container, + Divider, + LoginButton, + LoginButtonContainer, + LogoContainer, +} from './Login.styles'; const Login = () => { const KakaoRestApiKey = import.meta.env.VITE_KAKAO_OAUTH_KEY; @@ -22,19 +34,55 @@ const Login = () => { }; return ( - - - - - - - - - - - - - + + +
+ + + + + 세상의 모든 질문, +
AB로 답하다 + +
+ + + + + 간편 가입하기 + + + + + + + + 카카오로 계속하기 + +
+ + + + + + + 구글로 계속하기 + +
+ + + + + + + 애플로 계속하기 + +
+ + + + + ); }; export default Login; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index cf5c95f..a61963d 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { RouteObject, RouterProvider, createBrowserRouter } from 'react-router-dom'; -import Layout from '@components/commons/Layout/Layout'; - import GoogleLogin from './Auth/google/GoogleLogin'; import KakaoLogin from './Auth/kakao/KakaoLogin'; import Login from './Auth/login/Login';