💄design: NotFoundPage 모바일 UI 추가 및 아이콘 색상 수정

grass-diary/src/pages/Error/NotFoundPage.tsx

@@ -1,13 +1,14 @@
 import Footer from '@components/Layout/Footer';
 import Header from '@components/Layout/Header';
+import useIsMobile from '@hooks/useIsMobile';
 import * as S from '@styles/Error/NotFoundPage.style';
 import { semantic } from '@styles/semantic';
-import errorIcon from '@svg/error_outline.svg';
 import { ReactComponent as Arrow } from '@svg/chevron_right.svg';
 import { useNavigate } from 'react-router-dom';
 
 const NotFoundPage = () => {
   const navigate = useNavigate();
+  const isMobile = useIsMobile();
   const linkToMain = () => {
     navigate('/main');
   };
@@ -16,9 +17,11 @@ const NotFoundPage = () => {
       <Header />
       <S.Container>
         <S.ErrorSection>
-          <img src={errorIcon} />
+          <img src="../src/assets/svg/error_outline.svg" alt="error_image" />
           <S.ErrorTextBox>
-            <S.HeaderText>페이지를 찾을 수 없어요</S.HeaderText>
+            <S.HeaderText>
+              페이지를{isMobile ? <br /> : ' '}찾을 수 없어요
+            </S.HeaderText>
             <S.GuideText>
               주소가 잘못 입력되었거나 변경되었을 수 있어요. <br />
               정확한 주소인지 다시 한 번 확인해 주세요!

grass-diary/src/styles/Error/NotFoundPage.style.tsx

@@ -42,14 +42,20 @@ export const ErrorTextBox = styled.div`
 `;
 
 export const HeaderText = styled.h1`
-  color: ${semantic.light.accent.solid.normal};
+  color: ${semantic.light.object.solid.hero};
 
   ${TYPO.display1}
+  @media screen and (max-width: 60em) {
+    ${TYPO.title3}
+  }
 `;
 
 export const GuideText = styled.span`
   color: ${semantic.light.object.transparent.neutral};
   ${TYPO.body4}
+  @media screen and (max-width: 60em) {
+    ${TYPO.body1}
+  }
 `;
 
 export const ErrorCode = styled.span`