add coc page

src/App.tsx

@@ -8,6 +8,8 @@ import {
 import { QueryClient, QueryClientProvider } from "react-query";
 import Layout from "@/components/Layout/Layout.tsx";
 import { IRoute, Pages } from "@/types/route.ts";
+import NotFound from "@/pages/404";
+
 const pages: Pages = import.meta.glob("./pages/**/*.tsx", { eager: true });
 const routes: IRoute[] = [];
 
@@ -41,13 +43,19 @@ const router = createBrowserRouter([
   {
     path: "/", // Layout의 루트 경로
     element: <Layout />,
-    children: routes.map(({ Element, ErrorBoundary, ...rest }) => ({
-      ...rest,
-      element: <Element />,
-      ...(ErrorBoundary && {
-        errorElement: React.createElement(ErrorBoundary),
-      }),
-    })),
+    children: [
+      ...routes.map(({ Element, ErrorBoundary, ...rest }) => ({
+        ...rest,
+        element: <Element />,
+        ...(ErrorBoundary && {
+          errorElement: React.createElement(ErrorBoundary),
+        }),
+      })),
+      {
+        path: "*",
+        element: <NotFound />,
+      },
+    ],
   },
 ]);
 

src/components/AboutTable/AboutTable.tsx

@@ -1,27 +1,38 @@
 import { useNavigate } from "react-router-dom";
+import { FaThumbtack } from "react-icons/fa";
 
 interface Column {
   label: string;
   value: string;
+  size:  string;
 }
 
-interface AboutTableProps<T> {
+interface AboutTableProps<T extends object> {
   columns: Column[];
   data: T[];
+  moveToDetail: (row: T) => void;
 }
 
-export const AboutTable = <T extends { id: number }>({
+export const AboutTable = <T extends object>({
   columns,
   data,
+  moveToDetail,
 }: AboutTableProps<T>) => {
-  const nav = useNavigate();
-  const moveToDetail = (row: T) => {
-    nav(`/board/notice/${row.id}`);
-  };
+
+  // 고정된 항목과 일반 항목을 분리
+  const pinnedItems = data.filter((item: any) => item.is_pinned);
+  const normalItems = data.filter((item: any) => !item.is_pinned);
+
 
   return (
     <div className="w-full overflow-x-auto">
       <table className="w-full border-collapse border-black/50">
+          <colgroup>
+          {columns.map((column, index) => (
+              <col style={{width: column.size}} key={column.value + "_col_" + index}/>
+            ))}
+        </colgroup>
+
         <thead className="bg-white text-lg font-medium text-[#343434]">
           <tr className="border-b border-black/50">
             {columns.map((column, index) => (
@@ -35,9 +46,27 @@ export const AboutTable = <T extends { id: number }>({
           </tr>
         </thead>
         <tbody className="bg-white">
-          {data.map((row, rowIndex) => (
+          {/* 고정된 항목 먼저 표시 */}
+          {pinnedItems.map((row, rowIndex) => (
+            <tr
+              key={`pinned-${rowIndex}`}
+              className="border-b border-black/20 hover:cursor-pointer bg-gray-50"
+              onClick={() => moveToDetail(row)}
+            >
+              {columns.map((column, index) => (
+                <td
+                  key={index}
+                  className="p-[9px] text-left text-lg font-normal text-[#343434]"
+                >
+                  {column.value === "pin" ? <FaThumbtack className="text-hellopy-purple-200" /> : String(row[column.value as keyof T] ?? "-")}
+                </td>
+              ))}
+            </tr>
+          ))}
+          {/* 일반 항목 표시 */}
+          {normalItems.map((row, rowIndex) => (
             <tr
-              key={rowIndex}
+              key={`normal-${rowIndex}`}
               className="border-b border-black/20 hover:cursor-pointer"
               onClick={() => moveToDetail(row)}
             >

src/components/Header/Header.tsx

@@ -26,6 +26,11 @@ const menuItems = [
       { label: "MD", path: "/about/md" },
     ],
   },
+  {
+    label: "COC",
+    hasDropdown: false,
+    path: "/coc",
+  },
   /*  { label: "NEWS", hasDropdown: false },
   { label: "SUPPORT", hasDropdown: false },
   { label: "COC", hasDropdown: false },*/
@@ -63,13 +68,17 @@ const Header = ({ backgroundColor, textColor }: HeaderProps) => {
 
         {/* 데스크탑 네비게이션 */}
         <nav className="relative z-[999] hidden gap-2 md:flex md:gap-10">
-          {menuItems.map(({ label, hasDropdown, subItems }) => (
+          {menuItems.map(({ label, hasDropdown, subItems, path }) => (
             <div
               key={label}
               className="relative flex cursor-pointer items-center gap-2"
-              onClick={() =>
-                setOpenDropdown(openDropdown === label ? null : label)
-              }
+              onClick={() => {
+                if (hasDropdown) {
+                  setOpenDropdown(label);
+                } else {
+                  goToMenu(path)
+                }
+              }}
             >
               <HeaderMenu label={label} textColor={textColor} />
               {hasDropdown && (
@@ -117,9 +126,9 @@ const Header = ({ backgroundColor, textColor }: HeaderProps) => {
               <div key={label} className="relative">
                 <div
                   className="flex cursor-pointer items-center justify-between"
-                  onClick={() =>
-                    setOpenDropdown(openDropdown === label ? null : label)
-                  }
+                  onClick={() => {
+                    setOpenDropdown(openDropdown === label ? null : label);
+                  }}
                 >
                   <span className="text-lg font-medium">{label}</span>
                   {hasDropdown && <FaChevronDown className="text-gray-600" />}

src/pages/404.tsx

@@ -0,0 +1,25 @@
+import { useNavigate } from "react-router-dom";
+
+const NotFound = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-8">
+      <div className="text-center">
+        <h1 className="mb-4 text-6xl font-bold text-hellopy-purple-200">404</h1>
+        <p className="mb-2 text-2xl font-medium text-black">페이지를 찾을 수 없습니다</p>
+        <p className="text-base text-gray-600">
+          요청하신 페이지가 삭제되었거나 잘못된 경로입니다.
+        </p>
+      </div>
+      <button
+        onClick={() => navigate("/")}
+        className="rounded-full bg-hellopy-purple-200 px-8 py-3 text-white transition-all hover:bg-hellopy-purple-300"
+      >
+        홈으로 돌아가기
+      </button>
+    </div>
+  );
+};
+
+export default NotFound; 

src/pages/board/notice/index.tsx

@@ -12,9 +12,10 @@ import { Container } from "@/components/Container";
 import { useState } from "react";
 
 const tableColumns = [
-  { label: "번호", value: "id" },
+  { label: "번호", value: "id", size:"10%"},
   /* { label: "태그", value: "tag" },*/
-  { label: "제목", value: "title" },
+  { label: "제목", value: "title", size:"80%"},
+  { label: "고정", value: "pin", size:"10%"},
   /*{ label: "작성일", value: "date" },*/
 ];
 
@@ -42,6 +43,10 @@ export const Notice: React.FC = () => {
     setPage(val);
   };
 
+  const moveToDetail = (row: any) => {
+    nav(`/board/notice/${row.id}`);
+  };
+
   return (
     <>
       <div className="align-center dark flex flex-col">
@@ -71,7 +76,7 @@ export const Notice: React.FC = () => {
             onTabChange={tabMockData.onTabChange}
           />
           {/* REVIEW: "총 N개의 공지가 있습니다" 레이블 어떻게 표시할 건지? */}
-          <AboutTable columns={tableColumns} data={noticeList} />
+          <AboutTable columns={tableColumns} data={noticeList} moveToDetail={moveToDetail} />
           {/* XXX: AboutTable 테이블 높이가 고정되어 있어서 Pagination 위치가 부자연스러움 */}
           {noticeList && noticeList.length > 0 && (
             <Pagination