fix-fe: fallback 페이지 QA (#613)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kim Da Eun <[email protected]>
woowacourse-teams · Aug 23, 2024 · af5a308 · af5a308
1 parent 946d15b
commit af5a308
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/frontend/src/pages/ErrorPage/index.tsx b/frontend/src/pages/ErrorPage/index.tsx
@@ -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',
       },
     ],

diff --git a/frontend/src/pages/ErrorPage/style.ts b/frontend/src/pages/ErrorPage/style.ts
@@ -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`
@@ -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`

diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
@@ -77,9 +77,9 @@ const colors: Colors = {
 };
 
 const breakpoints = {
-  mobile: '60rem',
-  tablet: '90rem',
-  desktop: '1800rem',
+  mobile: '48rem',
+  tablet: '76.8rem',
+  desktop: '120rem',
 };
 
 const typography = {