feat: middleware 적용, 오류페이지 추가, 일부 컴포넌트 파일명 변경, 리펙토링

.gitignore

@@ -42,3 +42,4 @@ next-env.d.ts
 
 # editor
 .cursor
+GEMINI.md

src/app/(main)/layout.tsx

@@ -13,7 +13,7 @@ export default function RootLayout({
         </div>
       </header>
       <main className="flex-1 overflow-auto">
-        <div className="max-w-6xl w-full mx-auto">{children}</div>
+        <div className="max-w-6xl w-full mx-auto h-full">{children}</div>
       </main>
     </div>
   );

src/app/(main)/ui-preview/auction/page.test.tsx

@@ -13,7 +13,7 @@ Object.defineProperty(window, "localStorage", {
 });
 
 // Mock components
-jest.mock("@/components/page/auction/category", () => {
+jest.mock("@/components/page/auction/Category", () => {
   return function MockAuctionCategory({
     selectedId,
     onSelect,
@@ -30,13 +30,13 @@ jest.mock("@/components/page/auction/category", () => {
   };
 });
 
-jest.mock("@/components/page/auction/search", () => {
+jest.mock("@/components/page/auction/Search", () => {
   return function MockAuctionSearch() {
     return <span data-testid="auction-search" />;
   };
 });
 
-jest.mock("@/components/page/auction/list", () => {
+jest.mock("@/components/page/auction/List", () => {
   return function MockAuctionList() {
     return <span data-testid="auction-list" />;
   };

src/app/(main)/ui-preview/auction/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import AuctionCategory from "@/components/page/auction/category";
-import AuctionList from "@/components/page/auction/list";
-import AuctionSearch from "@/components/page/auction/search";
+import React, { useState, useEffect, useMemo } from "react";
+import AuctionCategory from "@/components/page/auction/Category";
+import AuctionList from "@/components/page/auction/List";
+import AuctionSearch from "@/components/page/auction/Search";
 import { ItemCategory, itemCategories } from "@/data/item-category";
 import { mockItems } from "@/data/mock-items";
 
@@ -13,7 +13,6 @@ export default function Page() {
   const [selectedId, setSelectedId] = useState<string>("all");
   const [isClient, setIsClient] = useState(false);
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
-  const [categoryPath, setCategoryPath] = useState<ItemCategory[]>([]);
 
   const findCategoryPath = (
     categories: ItemCategory[],
@@ -58,6 +57,21 @@ export default function Page() {
     });
   };
 
+  // selectedId가 변경될 때마다 categoryPath와 expandedIds 업데이트
+  const categoryPath = useMemo(
+    () => findCategoryPath(itemCategories, selectedId),
+    [selectedId],
+  );
+
+  // 기존에 열려있던 카테고리들을 유지하면서 선택된 카테고리 경로 추가
+  useEffect(() => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      categoryPath.slice(0, -1).forEach((c) => next.add(c.id));
+      return next;
+    });
+  }, [categoryPath]);
+
   // 웹페이지 재접속시에도 기존 카테고리 선택 유지
   useEffect(() => {
     setIsClient(true);
@@ -67,21 +81,6 @@ export default function Page() {
     }
   }, []);
 
-  // selectedId가 변경될 때마다 categoryPath와 expandedIds 업데이트
-  useEffect(() => {
-    const path = findCategoryPath(itemCategories, selectedId);
-    setCategoryPath(path);
-
-    // 기존에 열려있던 카테고리들을 유지하면서 선택된 카테고리 경로 추가
-    setExpandedIds((prev) => {
-      const newSet = new Set([
-        ...prev,
-        ...path.slice(0, -1).map((category) => category.id),
-      ]);
-      return newSet;
-    });
-  }, [selectedId]);
-
   return (
     <div className="select-none flex flex-col h-full">
       <div className="flex-shrink-0 px-4 py-2">

src/app/(main)/ui-preview/error-test/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { useState, useTransition } from "react";
+
+export default function ErrorTestPage() {
+  const [error, setError] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  if (error) {
+    throw new Error("의도적으로 발생시킨 에러입니다!");
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full space-y-4">
+      <h1 className="text-2xl font-bold">에러 테스트 페이지</h1>
+      <div className="flex space-x-4">
+        <button
+          onClick={() => {
+            startTransition(() => {
+              notFound();
+            });
+          }}
+          className="px-4 py-2 font-bold text-white bg-yellow-500 rounded"
+          disabled={isPending}
+        >
+          {isPending ? "로딩 중…" : "404 Not Found 페이지 보기"}
+        </button>
+        <button
+          onClick={() => setError(true)}
+          className="px-4 py-2 font-bold text-white bg-red-500 rounded"
+        >
+          일반 에러 페이지 보기
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/error.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import ErrorPage from "@/components/errors/ErrorPage";
+
+export default ErrorPage;

src/app/login/page.test.tsx

@@ -178,6 +178,7 @@ describe("LoginPage", () => {
   it("로그인 성공 후 이전 페이지 이동 테스트", async () => {
     // 이전 페이지 referrer 설정
     Object.defineProperty(document, "referrer", {
+      configurable: true,
       value: "/auction",
       writable: true,
     });

src/app/not-found.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import NotFoundPage from "@/components/errors/NotFoundPage";
+
+export default NotFoundPage;

src/components/errors/ErrorPage.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import ErrorPage from "./ErrorPage";
+
+describe("ErrorPage", () => {
+  const mockReset = jest.fn();
+  const mockError = new Error("Test Error");
+
+  beforeEach(() => {
+    mockReset.mockClear();
+    jest.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("렌더링 테스트", () => {
+    render(<ErrorPage error={mockError} reset={mockReset} />);
+
+    expect(
+      screen.getByRole("heading", { name: "문제가 발생했습니다!" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "다시 시도" }),
+    ).toBeInTheDocument();
+  });
+
+  it("reset 버튼 동작 테스트", () => {
+    render(<ErrorPage error={mockError} reset={mockReset} />);
+
+    const retryButton = screen.getByRole("button", { name: "다시 시도" });
+    fireEvent.click(retryButton);
+
+    expect(mockReset).toHaveBeenCalledTimes(1);
+  });
+});

src/components/errors/ErrorPage.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full text-center">
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">문제가 발생했습니다!</h2>
+        <button
+          onClick={() => reset()}
+          className="inline-block px-4 py-2 font-medium text-white bg-gray-800 rounded-md hover:bg-gray-700"
+        >
+          다시 시도
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/errors/NotFoundPage.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import NotFoundPage from "./NotFoundPage";
+
+describe("NotFoundPage", () => {
+  it("렌더링 테스트", () => {
+    render(<NotFoundPage />);
+
+    expect(screen.getByText("404")).toBeInTheDocument();
+    expect(screen.getByText("페이지를 찾을 수 없습니다.")).toBeInTheDocument();
+
+    const homeLink = screen.getByRole("link", { name: "홈으로 돌아가기" });
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink).toHaveAttribute("href", "/");
+  });
+});

src/components/errors/NotFoundPage.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export default function NotFoundPage() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full text-center">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">404</h1>
+        <p className="text-lg">페이지를 찾을 수 없습니다.</p>
+        <Link
+          href="/"
+          className="inline-block px-4 py-2 font-medium text-white bg-gray-800 rounded-md hover:bg-gray-700"
+        >
+          홈으로 돌아가기
+        </Link>
+      </div>
+    </div>
+  );
+}

src/components/page/auction/category.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from "@testing-library/react";
-import AuctionCategory from "./category";
+import AuctionCategory from "./Category";
 
 const createMockProps = () => ({
   selectedId: "",

src/components/page/auction/category.tsx

@@ -71,7 +71,7 @@ const RecursiveCategoryItem = ({
   );
 };
 
-const AuctionCategory = ({
+export default function AuctionCategory({
   selectedId,
   onSelect,
   expandedIds,
@@ -81,7 +81,7 @@ const AuctionCategory = ({
   onSelect: (id: string) => void;
   expandedIds: Set<string>;
   onToggleExpand: (id: string) => void;
-}) => {
+}) {
   return (
     <div className="flex flex-1 flex-col h-full">
       <div className="text-center border border-gray-600 rounded-xs">
@@ -103,6 +103,4 @@ const AuctionCategory = ({
       </div>
     </div>
   );
-};
-
-export default AuctionCategory;
+}

src/components/page/auction/list.tsx

@@ -42,7 +42,7 @@ const ListItem = ({ item }: { item: AuctionItem }) => (
   </div>
 );
 
-function AuctionList({ items }: { items: AuctionItem[] }) {
+export default function AuctionList({ items }: { items: AuctionItem[] }) {
   return (
     <div className="flex-1 flex flex-col">
       <ListHeader />
@@ -54,5 +54,3 @@ function AuctionList({ items }: { items: AuctionItem[] }) {
     </div>
   );
 }
-
-export default AuctionList;

src/components/page/auction/search.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from "@testing-library/react";
-import AuctionSearch from "./search";
+import AuctionSearch from "./Search";
 import { ItemCategory } from "@/data/item-category";
 
 const createMockPath = (): ItemCategory[] => [

src/components/page/auction/search.tsx

@@ -5,7 +5,7 @@ import { Label } from "@/components/ui/label";
 import { ItemCategory } from "@/data/item-category";
 import React from "react";
 
-function AuctionSearch({
+export default function AuctionSearch({
   path,
   onCategorySelect,
 }: {
@@ -42,5 +42,3 @@ function AuctionSearch({
     </div>
   );
 }
-
-export default AuctionSearch;

src/middleware.ts

@@ -0,0 +1,10 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export function middleware(request: NextRequest) {
+  // TODO: 추후 확인 후 수정 필요
+  if (request.nextUrl.pathname === "/") {
+    return NextResponse.redirect(new URL("/ui-preview/auction", request.url));
+  }
+
+  return NextResponse.next();
+}