From d90df9365b2468501dd3c511bcafc4686a4e1d33 Mon Sep 17 00:00:00 2001
From: Kim Da Eun <midekuna@gmail.com>
Date: Thu, 22 Aug 2024 17:44:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ErrorPage/style.ts | 38 +++++++++++++++++++++++++++
 frontend/src/styles/theme.ts          |  6 ++---
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/ErrorPage/style.ts b/frontend/src/pages/ErrorPage/style.ts
index e56919b25..d0421c5b0 100644
--- 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
index 7b074af98..014c50dfa 100644
--- 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 = {