style: 404 페이지 스타일 수정

sopt-makers · Oct 19, 2023 · 80a3abf · 80a3abf
1 parent 6a141ac
commit 80a3abf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 24 deletions.
diff --git a/src/assets/images/sopt_404.png b/src/assets/images/sopt_404.png
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,33 +1,21 @@
 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();
 
   const handleButtonClick = () => {
     router.push('/');
   };
-  const isDesktop = useIsDesktop();
 
   return (
     <>
       <Header />
       <Styled.Root>
-        <Image
-          src={Sopt404.src}
-          width={isDesktop ? 296 : 196}
-          height={isDesktop ? 78 : 52}
-          alt="솝트 공식 로고"
-          blurDataURL={Sopt404.src}
-          placeholder="blur"
-        />
-        <span>잘못된 경로예요!</span>
+        <span>잘못된 경로예요</span>
         <RoundButton onClick={handleButtonClick} isReverse={true}>
           홈으로 가기
         </RoundButton>
@@ -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;
     }
   `,
 };