feat: notFound page (#60)

public/locales/en.yml

@@ -14,3 +14,9 @@ home:
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 signIn: Sign In
 signOut: Sign Out
+
+error:
+  notFound:
+    title: Oops!
+    content: Sorry, an unexpected error has occurred.
+    button: Go back to the home page

public/locales/ko.yml

@@ -12,3 +12,9 @@ home:
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 signIn: 로그인
 signOut: 로그아웃
+
+error:
+  notFound:
+    title: 이런!
+    content: 죄송합니다, 예기치 못한 오류가 발생했습니다.
+    button: 홈페이지로 돌아가기

src/pages/404.tsx

@@ -1,8 +1,24 @@
+import { Button } from '@/components/ui/button';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
 export default function NotFound() {
+  const { t } = useTranslation();
+
   return (
     <div id="error-page">
-      <h1>Oops!</h1>
-      <p>Sorry, an unexpected error has occurred.</p>
+      <div className="relative overflow-hidden before:absolute before:start-1/2 before:top-0">
+        <div className="mx-auto max-w-[85rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8">
+          <div className="mx-auto mt-5 max-w-2xl text-center">
+            <h2>{t('error.notFound.title')}</h2>
+            <p>{t('error.notFound.content')}</p>
+            <Link to="/">
+              <Button className="mt-4">{t('error.notFound.button')}</Button>
+            </Link>
+          </div>
+        </div>
+
+      </div>
     </div>
   );
 }