[Feature] 클라이언트 페이지 not-found, error 페이지 추가 (#53)

* feat: wowds-ui 최신 버전 설치

* feat: client not-found 페이지 추가

* feat: ui 패키지 스타일 변경사항 반영

* feat: not-found 버튼 aria-label 추가

* feat: 클라이언트 에러 페이지 추가

* feat: 어드민 화면 에러페이지 추가

* fix: 빌드에러 해결

* chore: error html, body 태그 삭제

* feat: pnpm lock 파일 변경사항 반영

---------

Co-authored-by: Eugene Kim <eugene02876@gmail.com>

apps/admin/app/error.tsx

@@ -1,6 +1,47 @@
 "use client";
-const ErrorPage = () => {
-  return <div>error</div>;
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Header, Text } from "@wow-class/ui";
+import Image from "next/image";
+import Button from "wowds-ui/Button";
+
+const ErrorPage = ({ reset }: { reset: () => void }) => {
+  const handleClickResetButton = () => {
+    reset();
+  };
+
+  return (
+    <Flex direction="column" minHeight="100vh">
+      <Header />
+      <main className={errorPageContentStyle}>
+        <Image alt="error" height={344} src="/images/error.svg" width={358} />
+        <Text as="h2" typo="display2">
+          에러가 발생했어요
+        </Text>
+        <Button
+          aria-label="다시 시도"
+          style={buttonStyle}
+          onClick={handleClickResetButton}
+        >
+          다시 시도
+        </Button>
+      </main>
+    </Flex>
+  );
 };
 
 export default ErrorPage;
+
+const errorPageContentStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "48px",
+  height: "100%",
+});
+
+const buttonStyle = {
+  width: 328,
+};

apps/admin/app/global.css

@@ -6,4 +6,5 @@ body {
   font-family: "SUIT" !important;
   display: flex;
   flex-direction: row;
+  min-height: 100vh;
 }

apps/admin/app/not-found.tsx

@@ -1,5 +1,54 @@
-const NotFound = () => {
-  return <div>요청하신 페이지를 찾을 수 없어요.</div>;
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Header, Text } from "@wow-class/ui";
+import { routerPath } from "constants/router/routerPath";
+import Image from "next/image";
+import Link from "next/link";
+import Button from "wowds-ui/Button";
+
+const NotFoundPage = () => {
+  return (
+    <Flex direction="column" minHeight="100vh">
+      <Header />
+      <main className={notFoundPageContentStyle}>
+        <Image
+          alt="not-found"
+          height={344}
+          src="/images/not-found.svg"
+          width={358}
+        />
+        <Flex direction="column" gap="md">
+          <Text as="h2" typo="display2">
+            오류가 발생했어요
+          </Text>
+          <Text color="sub" typo="body0">
+            요청하신 페이지를 찾을 수 없어요
+          </Text>
+        </Flex>
+        <Button
+          aria-label="홈으로 이동"
+          asProp={Link}
+          href={routerPath.root.href}
+          style={buttonStyle}
+        >
+          홈으로 이동
+        </Button>
+      </main>
+    </Flex>
+  );
 };
 
-export default NotFound;
+export default NotFoundPage;
+
+const notFoundPageContentStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "48px",
+  height: "100%",
+});
+
+const buttonStyle = {
+  width: 328,
+};

apps/client/app/error.tsx

@@ -1,6 +1,47 @@
 "use client";
-const ErrorPage = () => {
-  return <div>error</div>;
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Header, Text } from "@wow-class/ui";
+import Image from "next/image";
+import Button from "wowds-ui/Button";
+
+const ErrorPage = ({ reset }: { reset: () => void }) => {
+  const handleClickResetButton = () => {
+    reset();
+  };
+
+  return (
+    <Flex direction="column" minHeight="100vh">
+      <Header />
+      <main className={errorPageContentStyle}>
+        <Image alt="error" height={344} src="/images/error.svg" width={358} />
+        <Text as="h2" typo="display2">
+          에러가 발생했어요
+        </Text>
+        <Button
+          aria-label="다시 시도"
+          style={buttonStyle}
+          onClick={handleClickResetButton}
+        >
+          다시 시도
+        </Button>
+      </main>
+    </Flex>
+  );
 };
 
 export default ErrorPage;
+
+const errorPageContentStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "48px",
+  height: "100%",
+});
+
+const buttonStyle = {
+  width: 328,
+};

apps/client/app/global.css

@@ -6,4 +6,5 @@ body {
   font-family: "SUIT" !important;
   display: flex;
   flex-direction: row;
+  min-height: 100vh;
 }

apps/client/app/not-found.tsx

@@ -0,0 +1,54 @@
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Header, Text } from "@wow-class/ui";
+import { routePath } from "constants/routePath";
+import Image from "next/image";
+import Link from "next/link";
+import Button from "wowds-ui/Button";
+
+const NotFoundPage = () => {
+  return (
+    <Flex direction="column" minHeight="100vh">
+      <Header />
+      <main className={notFoundPageContentStyle}>
+        <Image
+          alt="not-found"
+          height={344}
+          src="/images/not-found.svg"
+          width={358}
+        />
+        <Flex direction="column" gap="md">
+          <Text as="h2" typo="display2">
+            오류가 발생했어요
+          </Text>
+          <Text color="sub" typo="body0">
+            요청하신 페이지를 찾을 수 없어요
+          </Text>
+        </Flex>
+        <Button
+          aria-label="홈으로 이동"
+          asProp={Link}
+          href={routePath.landing}
+          style={buttonStyle}
+        >
+          홈으로 이동
+        </Button>
+      </main>
+    </Flex>
+  );
+};
+
+export default NotFoundPage;
+
+const notFoundPageContentStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "48px",
+  height: "100%",
+});
+
+const buttonStyle = {
+  width: 328,
+};

apps/client/package.json

@@ -16,7 +16,7 @@
     "react-dom": "^18.3.1",
     "wowds-icons": "^0.1.3",
     "wowds-tokens": "^0.1.1",
-    "wowds-ui": "^0.1.8"
+    "wowds-ui": "^0.1.14"
   },
   "devDependencies": {
     "@types/node": "^20",