feature/#228 - 404 페이지, 에러 컴포넌트

components/ErrorMessage.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { useRouter } from 'next/router';
+import Button from './Button';
+import { SITE_NAME } from 'constants/terms';
+
+interface Props {
+  code?: string;
+  title: string;
+  children: ReactNode;
+}
+
+export default function ErrorMessage({ code, title, children }: Props) {
+  const router = useRouter();
+
+  return (
+    <div>
+      {code?.trim() && (
+        <div className="my-2 flex items-end gap-3">
+          <span className="text-8xl font-bold text-green-200">{code}</span>
+          <span className="text-32b">ERROR</span>
+        </div>
+      )}
+      <h1 className="mb-4 text-32b mo:text-24b">{title}</h1>
+
+      <p className="mb-8 text-balance break-keep text-18sb">{children}</p>
+
+      <div className="flex gap-4 mo:justify-center">
+        <Button onClick={router.back} variant="secondary" className="w-[140px]">
+          이전 페이지
+        </Button>
+        <Button href="/" variant="primary" className="w-[140px]">
+          {SITE_NAME} 홈
+        </Button>
+      </div>
+    </div>
+  );
+}

components/Svg/IconFaceDizzy.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default function IconFaceDizzy({
+  width = 32,
+  height = 32,
+  fill = 'currentColor',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill={fill}
+      width={width}
+      height={height}
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
+        transform="translate(0)"
+      />
+      <polygon points="24.41 11 23 9.59 21 11.59 19 9.59 17.59 11 19.59 13 17.59 15 19 16.41 21 14.41 23 16.41 24.41 15 22.41 13 24.41 11" />
+      <polygon points="14.41 11 13 9.59 11 11.59 9 9.59 7.59 11 9.59 13 7.59 15 9 16.41 11 14.41 13 16.41 14.41 15 12.41 13 14.41 11" />
+      <path d="M16,19a3,3,0,1,0,3,3,3,3,0,0,0-3-3Z" transform="translate(0)" />
+      <rect fill="none" width="32" height="32" />
+    </svg>
+  );
+}

pages/404.tsx

@@ -0,0 +1,20 @@
+import IconFaceDizzy from '@/components/Svg/IconFaceDizzy';
+import ErrorMessage from '@/components/ErrorMessage';
+
+export default function PageNotFound() {
+  return (
+    <div className="min-h-screen">
+      <div className="container flex min-h-screen items-center justify-center">
+        <div className="inline-flex gap-8 px-4 mo:flex-col mo:gap-2">
+          <IconFaceDizzy width={180} height={180} className="mo:mx-auto" />
+
+          <ErrorMessage title="페이지를 찾을 수 없습니다." code="404">
+            페이지가 존재하지 않거나, 사용할 수 없는 페이지입니다.
+            <br />
+            입력하신 주소가 정확한지 다시 한 번 확인해주세요.
+          </ErrorMessage>
+        </div>
+      </div>
+    </div>
+  );
+}