JRA-26 #done Implement 404 Page

src/__tests__/unit/app/__snapshots__/not-found.snapshot.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Not Found renders 404 page 1`] = `
+<div>
+  <div
+    class="outer_container"
+    data-testid="page-container"
+  >
+    <div
+      class="inner_container"
+    >
+      <section
+        class="container"
+      >
+        <img
+          alt="404, page not found"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <h1>
+          Not Found
+        </h1>
+      </section>
+    </div>
+  </div>
+</div>
+`;

src/__tests__/unit/app/not-found.snapshot.tsx

@@ -0,0 +1,11 @@
+import { render, cleanup } from '@testing-library/react';
+import NotFound from '@/app/not-found';
+
+describe('Not Found', () => {
+    afterEach(cleanup);
+
+    it('renders 404 page', () => {
+        const { container } = render(<NotFound />);
+        expect(container).toMatchSnapshot();
+    });
+});

src/app/not-found.module.scss

@@ -0,0 +1,8 @@
+.container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}

src/app/not-found.tsx

@@ -0,0 +1,15 @@
+import Image from 'next/image';
+import { PageContainer } from '@/components/utils/page-container';
+import notFound from '@/../public/static/images/pages/not-found/404.png';
+import styles from './not-found.module.scss';
+
+export default function NotFound() {
+    return (
+        <PageContainer>
+            <section className={styles.container}>
+                <Image src={notFound} alt="404, page not found" />
+                <h1>Not Found</h1>
+            </section>
+        </PageContainer>
+    );
+}

src/stories/pages/not-found.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import NotFound from '@/app/not-found';
+import { GlobalStylesProvider } from '@/stories/global-styles-provider';
+
+const meta: Meta<typeof NotFound> = { component: NotFound, parameters: { layout: 'fullscreen' } };
+
+export default meta;
+
+type Story = StoryObj<typeof NotFound>;
+
+export const Default: Story = {
+    render: () => {
+        return (
+            <GlobalStylesProvider>
+                <NotFound></NotFound>
+            </GlobalStylesProvider>
+        )
+    }
+};