diff --git a/src/pages/RedirectPage/RedirectPage.styles.ts b/src/pages/RedirectPage/RedirectPage.styles.ts new file mode 100644 index 00000000..3e9f6d3e --- /dev/null +++ b/src/pages/RedirectPage/RedirectPage.styles.ts @@ -0,0 +1,19 @@ +import styled from '@emotion/styled'; + +import { Flex } from '@components/shared/Flex'; +import { Image } from '@components/shared/Image'; + +export const PageWrapper = styled.div` + ${({ theme }) => theme.STYLES.LAYOUT} + min-height: 100dvh; + background-color: ${({ theme }) => theme.PALETTE.GRAY_100}; +`; + +export const PageContent = styled(Flex)` + height: 100%; + padding: 40px 0 20px 0; +`; + +export const LogoImage = styled(Image)` + padding-bottom: 40px; +`; diff --git a/src/pages/RedirectPage/RedirectPage.tsx b/src/pages/RedirectPage/RedirectPage.tsx index eae071ee..ae1002a6 100644 --- a/src/pages/RedirectPage/RedirectPage.tsx +++ b/src/pages/RedirectPage/RedirectPage.tsx @@ -1,13 +1,22 @@ import { useCallback, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; +import { Flex } from '@components/shared/Flex'; +import { Text } from '@components/shared/Text'; + import { useLoginQuery } from '@hooks/queries/useLoginQuery'; +import { theme } from '@styles/theme'; + import { useTokenStore } from '@stores/accessToken.store'; import { useLoginInfoStore } from '@stores/loginInfo.store'; import { Authenticated, Registration } from '@type/models'; +import LOGO_SRC from '@assets/logoSvg.svg'; + +import { LogoImage, PageContent, PageWrapper } from './RedirectPage.styles'; + export const RedirectPage = () => { const navigate = useNavigate(); @@ -49,5 +58,20 @@ export const RedirectPage = () => { fetchLoginInfo(); }, [fetchLoginInfo]); - return
로그인 중입니다.
; + return ( + + + + + + 로그인중... + + + 잠시만 + 기다려주세요 + + + + + ); };