Feat: not found 페이지 퍼블리싱 및 401, 404 에러 전역 처리 (#182)

* feat: 401, 404 에러 전역 처리

* feat: not-found 페이지 추가

* refactor: 코드리뷰 반영

Author: seueooo

app/not-found.css.ts

@@ -0,0 +1,37 @@
+import { style } from "@vanilla-extract/css";
+import { themeVars } from "@/shared/styles/base/theme.css";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  height: "100%",
+});
+
+export const title = style({
+  ...themeVars.text.F17,
+  color: themeVars.color.white[100],
+  marginTop: "2rem",
+  marginBottom: "0.6rem",
+});
+
+export const description = style({
+  ...themeVars.text.F16,
+  color: themeVars.color.white[40],
+});
+
+export const button = style({
+  marginTop: "1.6rem",
+  ...themeVars.text.F14,
+  color: themeVars.color.black[100],
+  backgroundColor: themeVars.color.white[100],
+  borderRadius: "8px",
+  padding: "0.8rem 1.2rem",
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeVars.color.white[70],
+    },
+  },
+});

app/not-found.tsx

@@ -0,0 +1,26 @@
+'use client'
+import NoneImage from "@/shared/assets/2D-illust/none.svg";
+import * as styles from "./not-found.css";
+
+import { PATH } from "@/shared/constants/path";
+import { useRouter } from "next/navigation";
+
+export default function NotFound() {
+  const router = useRouter();
+  
+  return (
+    <div className={styles.container}>
+      <NoneImage width={120} height={65} />
+      <p className={styles.title}>페이지를 찾을 수 없습니다.</p>
+      <p className={styles.description}>
+        찾으시는 페이지가 존재하지 않거나 </p>
+        <p className={styles.description}>이동되었을 수 있습니다.</p>
+      <button 
+        onClick={() => router.push(PATH.HOME)} 
+        className={styles.button}
+      >
+        홈으로 돌아가기
+      </button>
+    </div>
+  );
+}

shared/api/api-client.ts

@@ -1,4 +1,7 @@
 import ky, { type Options as KyOptions, type ResponsePromise } from "ky";
+import { HTTP_STATUS_CODE } from "@/shared/constants/api";
+import { HTTPError } from "ky";
+import { PATH } from "@/shared/constants/path";
 
 const API_BASE_URL =
   process.env.NODE_ENV === "development"
@@ -13,6 +16,26 @@ const http = ky.create({
     "Content-Type": "application/json",
   },
   credentials: "include",
+  hooks: {
+    beforeError: [
+      async (error) => {
+        if (error instanceof HTTPError) {
+          const { response } = error;
+          switch (response.status) {
+            case HTTP_STATUS_CODE.UNAUTHORIZED: {
+              window.location.replace(PATH.LOGIN);
+              break;
+            }
+            case HTTP_STATUS_CODE.NOT_FOUND: {
+              window.location.replace("/404");
+              break;
+            }
+          }
+        }
+        return error;
+      },
+    ],
+  },
 });
 
 async function parseResponse<T>(res: ResponsePromise): Promise<T> {

shared/api/mutations/capsule.ts

@@ -51,6 +51,7 @@ export const useLeaveCapsule = () => {
         }),
         queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.lists() }),
         queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.my() }),
+        queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.all() }),
       ]);
     },
   });

shared/constants/api.ts

@@ -0,0 +1,9 @@
+export const HTTP_STATUS_CODE = {
+  SUCCESS: 200,
+  CREATED: 201,
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  NOT_FOUND: 404,
+  CONFLICT: 409,
+  INTERNAL_SERVER_ERROR: 500,
+} as const;

shared/constants/endpoints.ts

@@ -17,9 +17,7 @@ export const ENDPOINTS = {
     `api/v1/capsules/search?keyword=${encodeURIComponent(keyword)}&page=${page}&size=${size}`,
 
   LEAVE_CAPSULE: (id: string) => `api/v1/capsules/${id}/leave`,
-
   LIKE_TOGGLE: (id: string) => `api/v1/capsules/${id}/like`,
-
   MY_CAPSULE_LIST: (
     page = 0,
     size = 20,