Skip to content

Commit

Permalink
fix-fe: fallback 페이지 QA (#613)
Browse files Browse the repository at this point in the history
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kim Da Eun <[email protected]>
  • Loading branch information
github-actions[bot] and llqqssttyy authored Aug 22, 2024
1 parent 9a5d3c1 commit 46be784
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 5 deletions.
4 changes: 2 additions & 2 deletions frontend/src/pages/ErrorPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ const ErrorMessages: Record<number | string, ErrorMessageConfig> = {
buttons: [
{
label: '로그인',
to: '/login',
to: '/sign-in',
color: 'primary',
},
{
label: '회원가입',
to: '/signup',
to: '/sign-up',
color: 'white',
},
],
Expand Down
38 changes: 38 additions & 0 deletions frontend/src/pages/ErrorPage/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,16 @@ const Wrapper = styled.div`
padding: 0 16rem;
color: ${({ theme }) => theme.colors.text.default};
@media (max-width: ${({ theme }) => theme.breakpoints.tablet}) {
padding: 0 4rem;
gap: 2rem;
}
@media (max-width: ${({ theme }) => theme.breakpoints.mobile}) {
padding: 0 2.4rem;
gap: 1.6rem;
}
`;

const StatusCode = styled.h1`
Expand All @@ -20,16 +30,44 @@ const StatusCode = styled.h1`
font-weight: 700;
color: ${({ theme }) => theme.colors.brand.primary};
@media (max-width: ${({ theme }) => theme.breakpoints.tablet}) {
font-size: 10rem;
line-height: 10rem;
}
@media (max-width: ${({ theme }) => theme.breakpoints.mobile}) {
font-size: 8rem;
line-height: 8rem;
}
`;

const Title = styled.h2`
${({ theme }) => theme.typography.heading[900]};
@media (max-width: ${({ theme }) => theme.breakpoints.tablet}) {
${({ theme }) => theme.typography.heading[800]};
}
@media (max-width: ${({ theme }) => theme.breakpoints.mobile}) {
${({ theme }) => theme.typography.heading[600]};
}
`;

const Description = styled.p`
${({ theme }) => theme.typography.common.large};
white-space: pre-line;
line-height: 3rem; // 3rem = line-height of 2rem + paragraph spacing of 1rem
@media (max-width: ${({ theme }) => theme.breakpoints.tablet}) {
${({ theme }) => theme.typography.common.default};
line-height: 2.4rem; // 3rem = line-height of 1.4 + paragraph spacing of 1rem
}
@media (max-width: ${({ theme }) => theme.breakpoints.mobile}) {
${({ theme }) => theme.typography.common.small};
line-height: 2rem; // 3rem = line-height of 1.2 + paragraph spacing of 0.8rem
}
`;

const ButtonContainer = styled.div`
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/styles/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ const colors: Colors = {
};

const breakpoints = {
mobile: '60rem',
tablet: '90rem',
desktop: '1800rem',
mobile: '48rem',
tablet: '76.8rem',
desktop: '120rem',
};

const typography = {
Expand Down

0 comments on commit 46be784

Please sign in to comment.