From 9290b9c7a04607413051483954ddd2cc49bb5b36 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 24 Aug 2023 04:07:19 +0900
Subject: [PATCH] feat: add 404 page

---
 src/components/NotFound/NotFound.tsx          | 45 +++++++++++++++++++
 src/components/NotFound/index.ts              |  1 +
 .../NotFoundLayout/NotFound.layout.tsx        | 25 +++++++++++
 src/layouts/NotFoundLayout/index.ts           |  1 +
 src/pages/404.tsx                             | 24 ++++++++++
 5 files changed, 96 insertions(+)
 create mode 100644 src/components/NotFound/NotFound.tsx
 create mode 100644 src/components/NotFound/index.ts
 create mode 100644 src/layouts/NotFoundLayout/NotFound.layout.tsx
 create mode 100644 src/layouts/NotFoundLayout/index.ts
 create mode 100644 src/pages/404.tsx

diff --git a/src/components/NotFound/NotFound.tsx b/src/components/NotFound/NotFound.tsx
new file mode 100644
index 0000000..97cb7e9
--- /dev/null
+++ b/src/components/NotFound/NotFound.tsx
@@ -0,0 +1,45 @@
+import { uiConfigs } from '@/configs/ui.configs'
+import { Button, Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import Link from 'next/link'
+
+const NotFound = () => {
+  return (
+    <Container>
+      <Title genericFontFamily="serif" variant="h3">
+        Page not found
+      </Title>
+      <Description variant="body1">
+        Sorry, the page you are looking for doesn’t exist or has been moved.
+        <br />
+        Try searching our site.
+      </Description>
+      <Link href="/search">
+        <SearchButton size="large">Go to search</SearchButton>
+      </Link>
+    </Container>
+  )
+}
+
+export default NotFound
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: calc(120px + ${uiConfigs.navbarRenderedHeight}px);
+`
+
+const Title = styled(Typography)`
+  margin-bottom: 16px;
+`
+
+const Description = styled(Typography)`
+  margin-bottom: 48px;
+  max-width: 510px;
+  text-align: center;
+`
+
+const SearchButton = styled(Button)`
+  width: fit-content;
+`
diff --git a/src/components/NotFound/index.ts b/src/components/NotFound/index.ts
new file mode 100644
index 0000000..bdd8d42
--- /dev/null
+++ b/src/components/NotFound/index.ts
@@ -0,0 +1 @@
+export { default as NotFound } from './NotFound'
diff --git a/src/layouts/NotFoundLayout/NotFound.layout.tsx b/src/layouts/NotFoundLayout/NotFound.layout.tsx
new file mode 100644
index 0000000..c38c78f
--- /dev/null
+++ b/src/layouts/NotFoundLayout/NotFound.layout.tsx
@@ -0,0 +1,25 @@
+import { Main } from '@/components/Main'
+import { NavBarProps } from '@/components/NavBar/NavBar'
+import { PropsWithChildren, useMemo } from 'react'
+import { MainProps } from '../../components/Main/Main'
+import { AppBar } from '../../components/NavBar'
+
+interface Props {
+  navbarProps?: NavBarProps
+  mainProps?: Partial<MainProps>
+}
+
+export default function DefaultLayout(props: PropsWithChildren<Props>) {
+  const { mainProps = {}, navbarProps = {} } = props
+  const navbarDefaultState = useMemo(
+    () => navbarProps.defaultState ?? { showTitle: true },
+    [navbarProps],
+  )
+
+  return (
+    <>
+      <AppBar {...navbarProps} defaultState={navbarDefaultState} />
+      <Main {...mainProps}>{props.children}</Main>
+    </>
+  )
+}
diff --git a/src/layouts/NotFoundLayout/index.ts b/src/layouts/NotFoundLayout/index.ts
new file mode 100644
index 0000000..898a557
--- /dev/null
+++ b/src/layouts/NotFoundLayout/index.ts
@@ -0,0 +1 @@
+export { default as DefaultLayout } from './NotFound.layout'
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000..1943bc2
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,24 @@
+import { NotFound } from '@/components/NotFound'
+import { SEO } from '@/components/SEO'
+import NotFoundLayout from '@/layouts/NotFoundLayout/NotFound.layout'
+import { ReactNode } from 'react'
+
+const NotFoundPage = () => {
+  return (
+    <>
+      <SEO
+        title={'Not Found'}
+        description={'Description'}
+        imageUrl={undefined}
+        tags={[]}
+      />
+      <NotFound />
+    </>
+  )
+}
+
+NotFoundPage.getLayout = function getLayout(page: ReactNode) {
+  return <NotFoundLayout>{page}</NotFoundLayout>
+}
+
+export default NotFoundPage