diff --git a/src/assets/images/sopt_404.png b/src/assets/images/sopt_404.png
deleted file mode 100644
index cd4b47e3..00000000
Binary files a/src/assets/images/sopt_404.png and /dev/null differ
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index a789cab9..cddaba92 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,11 +1,8 @@
import styled from '@emotion/styled';
-import Image from 'next/image';
import { useRouter } from 'next/router';
-import Sopt404 from '@src/assets/images/sopt_404.png';
import { Header } from '@src/components';
import RoundButton from '@src/components/common/RoundButton';
-import { useIsDesktop } from '@src/hooks/useDevice';
-import { mainColor } from '@src/lib/styles/colors';
+import { colors } from '@src/lib/styles/colors';
function Wrong() {
const router = useRouter();
@@ -13,21 +10,12 @@ function Wrong() {
const handleButtonClick = () => {
router.push('/');
};
- const isDesktop = useIsDesktop();
return (
<>
-
- 잘못된 경로예요!
+ 잘못된 경로예요
홈으로 가기
@@ -44,20 +32,18 @@ const Styled = {
flex-direction: column;
align-items: center;
justify-content: center;
+ gap: 48px;
+
width: 100%;
height: 100vh;
& span {
- margin-top: 99px;
- margin-bottom: 99px;
- line-height: 56px;
- color: ${mainColor.soptWhite};
- font-size: 45px;
- font-weight: 400;
- font-style: normal;
- @media (max-width: 769px) {
- font-size: 24px;
- }
+ color: ${colors.gray10};
+
+ font-size: 48px;
+ font-weight: 600;
+ line-height: 150%; /* 72px */
+ letter-spacing: -0.96px;
}
`,
};