[FEAT] 공지사항 & 이벤트 공지사항 전체 및 상세

src/app/(user)/event/notices/EventNoticesPage.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar";
+import { useSearchParams } from "next/navigation";
+import styles from "@/styles/UserBoard.module.css";
+import { UserBoard } from "@/components/pages/UserBoard";
+import { getUserBoardItems } from "@/utils/UserBoard/GetUserBoardItems";
+
+export default function EventNoticesPage() {
+  const params = useSearchParams();
+
+  const items = [
+    {
+      title: "Important Notice",
+      number: 1,
+      author: "admin",
+      date: new Date(),
+      view: 123,
+      pinned: true,
+      href: "#",
+      contentTxt: "안녕하세요 이건 아주 중요한 공지입니다. 꼭 확인해주세요.",
+    },
+    {
+      title: "Content Update",
+      number: 2,
+      author: "admin",
+      date: new Date(),
+      view: 456,
+      pinned: false,
+      href: "#",
+      contentTxt: "우리 동아리는 SCG. 중요한 업데이트가 있습니다.",
+    },
+    {
+      title: "Reminder",
+      number: 3,
+      author: "admin",
+      date: new Date(),
+      view: 789,
+      pinned: false,
+      href: "#",
+      contentTxt: "이 공지사항을 꼭 확인해 주세요.",
+    },
+    {
+      title: "Important Announcement",
+      number: 4,
+      author: "admin",
+      date: new Date(),
+      view: 321,
+      pinned: true,
+      href: "#",
+      contentTxt: "중요한 발표가 있습니다. 확인해 주세요.",
+    },
+  ];
+
+  return (
+    <>
+      <SubHeadNavbar title="Events" />
+      <div className={styles.container}>
+        <UserBoard
+          heading="이벤트 공지사항"
+          items={getUserBoardItems(items, params)}
+          paginShow={20}
+          paginJustify="end"
+          paginMarginTop="20px"
+        />
+      </div>
+    </>
+  );
+}

src/app/(user)/event/notices/[id]/GetUserEventDetail.ts

@@ -0,0 +1,29 @@
+type DynamicSegmentType = string | null;
+
+export function getUserEventDetail(id: DynamicSegmentType) {
+  console.log(id);
+  const item = {
+    title: "Title",
+    author: "admin",
+    created_date: new Date(),
+    edited_date: new Date(),
+    attachment: [
+      {
+        name: "File 1",
+        url: "/#",
+      },
+      {
+        name: "File 2",
+        url: "/#",
+      },
+    ],
+    pinned: true,
+    prev_page: undefined,
+    next_page: {
+      title: "Next",
+      url: "/2",
+    },
+    children: "Content",
+  };
+  return item;
+}

src/app/(user)/event/notices/[id]/page.tsx

@@ -1,3 +1,24 @@
+"use client";
+
+import { NoticeDetail } from "@/components/common/NoticeDetail";
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar";
+import styles from "@/styles/UserBoard.module.css";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { getUserEventDetail } from "./GetUserEventDetail";
+
 export default function EventNoticeDetailPage() {
-  return <main>Hello, world!</main>;
+  const segment = useSelectedLayoutSegment();
+
+  const { children, ...othersDetailProps } = getUserEventDetail(segment);
+
+  return (
+    <>
+      <SubHeadNavbar title="Events" />
+      <div className={styles.container}>
+        <NoticeDetail heading="이벤트 공지사항" {...othersDetailProps}>
+          <pre>{children}</pre>
+        </NoticeDetail>
+      </div>
+    </>
+  );
 }

src/app/(user)/event/notices/page.tsx

@@ -1,3 +1,10 @@
-export default function EventNoticesPage() {
-  return <main>Hello, world!</main>;
+import { Suspense } from "react";
+import EventNoticesPage from "./EventNoticesPage";
+
+export default function EventNoticesPageSuspense() {
+  return (
+    <Suspense>
+      <EventNoticesPage />
+    </Suspense>
+  );
 }

src/app/(user)/infodesk/notices/NoticesPage.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { UserBoard } from "@/components/pages/UserBoard";
+import { useSearchParams } from "next/navigation";
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar";
+import styles from "@/styles/UserBoard.module.css";
+import { getUserBoardItems } from "@/utils/UserBoard/GetUserBoardItems";
+
+export default function NoticesPage() {
+  const params = useSearchParams();
+
+  const items = [
+    {
+      title: "Important Notice",
+      number: 1,
+      author: "admin",
+      date: new Date(),
+      view: 123,
+      pinned: true,
+      href: "#",
+      contentTxt: "안녕하세요 이건 아주 중요한 공지입니다. 꼭 확인해주세요.",
+    },
+    {
+      title: "Content Update",
+      number: 2,
+      author: "admin",
+      date: new Date(),
+      view: 456,
+      pinned: false,
+      href: "#",
+      contentTxt: "우리 동아리는 SCG. 중요한 업데이트가 있습니다.",
+    },
+    {
+      title: "Reminder",
+      number: 3,
+      author: "admin",
+      date: new Date(),
+      view: 789,
+      pinned: false,
+      href: "#",
+      contentTxt: "이 공지사항을 꼭 확인해 주세요.",
+    },
+    {
+      title: "Important Announcement",
+      number: 4,
+      author: "admin",
+      date: new Date(),
+      view: 321,
+      pinned: true,
+      href: "#",
+      contentTxt: "중요한 발표가 있습니다. 확인해 주세요.",
+    },
+  ];
+
+  return (
+    <>
+      <SubHeadNavbar title="Info Desk" />
+      <div className={styles.container}>
+        <UserBoard
+          heading="공지사항"
+          items={getUserBoardItems(items, params)}
+          paginShow={20}
+          paginJustify="end"
+          paginMarginTop="20px"
+        />
+      </div>
+    </>
+  );
+}

src/app/(user)/infodesk/notices/[id]/GetUserNoticeDetail.ts

@@ -0,0 +1,29 @@
+type DynamicSegmentType = string | null;
+
+export function getUserNoticeDetail(id: DynamicSegmentType) {
+  console.log(id);
+  const item = {
+    title: "Title",
+    author: "admin",
+    created_date: new Date(),
+    edited_date: new Date(),
+    attachment: [
+      {
+        name: "File 1",
+        url: "/#",
+      },
+      {
+        name: "File 2",
+        url: "/#",
+      },
+    ],
+    pinned: true,
+    prev_page: undefined,
+    next_page: {
+      title: "Next",
+      url: "/2",
+    },
+    children: "Content",
+  };
+  return item;
+}

src/app/(user)/infodesk/notices/[id]/page.tsx

@@ -1,3 +1,24 @@
+"use client";
+
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar";
+import styles from "@/styles/UserBoard.module.css";
+import { NoticeDetail } from "@/components/common/NoticeDetail";
+import { getUserNoticeDetail } from "./GetUserNoticeDetail";
+import { useSelectedLayoutSegment } from "next/navigation";
+
 export default function NoticeDetailPage() {
-  return <main>Hello, world!</main>;
+  const segment = useSelectedLayoutSegment();
+
+  const { children, ...othersDetailProps } = getUserNoticeDetail(segment);
+
+  return (
+    <>
+      <SubHeadNavbar title="Info Desk" />
+      <div className={styles.container}>
+        <NoticeDetail heading="공지사항" {...othersDetailProps}>
+          <pre>{children}</pre>
+        </NoticeDetail>
+      </div>
+    </>
+  );
 }

src/app/(user)/infodesk/notices/page.tsx

@@ -1,3 +1,10 @@
-export default function NoticesPage() {
-  return <main>Hello, world!</main>;
+import { Suspense } from "react";
+import NoticesPage from "./NoticesPage";
+
+export default function NoticesPageSuspense() {
+  return (
+    <Suspense>
+      <NoticesPage />
+    </Suspense>
+  );
 }

src/components/common/Header/Header.module.css

@@ -118,16 +118,19 @@
     display: block;
   }
 
-  & > ul > li > ul > li {
-    padding: 12px 24px;
-    white-space: nowrap;
-    cursor: pointer;
-  }
   & > ul > li > ul > li:hover {
     /* background-color: var(--color-coverHover); */
     background-color: var(--color-surfaceVariant);
   }
 
+  & > ul > li > ul > li > a {
+    display: block;
+    padding: 12px 24px;
+    white-space: nowrap;
+    text-decoration: none;
+    color: var(--mantine-color-text);
+  }
+
   @media screen and (max-width: 1023px) {
     display: none;
   }
@@ -271,6 +274,11 @@
     visibility 0.2s,
     opacity 0.2s ease-in-out;
 
+  & a {
+    text-decoration: none;
+    color: var(--mantine-color-text);
+  }
+
   @media screen and (min-width: 1198px) {
     padding: 100px 180px;
   }

src/components/common/NoticeDetail/NoticeDetail.tsx

@@ -1,17 +1,13 @@
-import styles from "./NoticeDetail.module.css";
-import { IDetailHeadProps, NoticeDetailHead } from "./elements/NoticeDetailHead";
-import { IDetailStageProps, NoticeDetailStage } from "./elements/NoticeDetailStage";
-import { IDetailSprintProps, NoticeDetailSprint } from "./elements/NoticeDetailSprint";
+import { INoticeDetailItem } from "@/types/PageBoardTypes";
+import { NoticeDetailHead } from "./elements/NoticeDetailHead";
+import { NoticeDetailSprint } from "./elements/NoticeDetailSprint";
+import { NoticeDetailStage } from "./elements/NoticeDetailStage";
 import { NoticeDetailToolbar } from "./elements/NoticeDetailToolbar";
+import styles from "./NoticeDetail.module.css";
 
-interface IDetailHeadingProps {
+type NoticeDetailProps = INoticeDetailItem & {
   heading: string;
-}
-
-type NoticeDetailPropsType = IDetailHeadingProps &
-  IDetailHeadProps &
-  IDetailStageProps &
-  IDetailSprintProps;
+};
 
 export function NoticeDetail({
   heading,
@@ -24,7 +20,7 @@ export function NoticeDetail({
   prev_page,
   next_page,
   children,
-}: NoticeDetailPropsType) {
+}: NoticeDetailProps) {
   return (
     <>
       <div className={styles.noticedetail}>

src/components/common/NoticeDetail/elements/FileDropdownMenu.tsx

@@ -1,9 +1,9 @@
-import styles from "../NoticeDetail.module.css";
+import { IBoardAttachment } from "@/types/PageBoardTypes";
 import { Menu, Button, Group } from "@mantine/core";
 import { IconPaperclip, IconDownload } from "@tabler/icons-react";
-import { IFileInfo } from "./NoticeDetailStage";
+import styles from "../NoticeDetail.module.css";
 
-export function FileDropdownMenu({ attachment }: { attachment?: IFileInfo[] }) {
+export function FileDropdownMenu({ attachment }: { attachment?: IBoardAttachment[] }) {
   return (
     <Menu position="bottom-end" shadow="sm" offset={0} radius={0}>
       <Menu.Target>

src/components/common/NoticeDetail/elements/NoticeDetailHead.tsx

@@ -1,22 +1,15 @@
+import { INoticeDetailHead } from "@/types/PageBoardTypes";
 import { Group } from "@mantine/core";
-import styles from "../NoticeDetail.module.css";
 import { IconPinFilled } from "@tabler/icons-react";
-
-export interface IDetailHeadProps {
-  title: string;
-  author: string;
-  created_date: Date;
-  edited_date: Date;
-  pinned: boolean;
-}
+import styles from "../NoticeDetail.module.css";
 
 export function NoticeDetailHead({
   title,
   author,
   created_date,
   edited_date,
   pinned,
-}: IDetailHeadProps) {
+}: INoticeDetailHead) {
   const CreatedDate = formatDate(created_date);
   const EditedDate = formatDate(edited_date);