[FEAT] 관리자 게시판 미리보기 컴포넌트 추가

package.json

@@ -18,8 +18,9 @@
     "chromatic": "npx chromatic --project-token=chpt_4df1876da1b9766"
   },
   "dependencies": {
-    "@mantine/core": "^7.11.1",
-    "@mantine/hooks": "^7.11.1",
+    "@mantine/core": "^7.11.2",
+    "@mantine/hooks": "^7.11.2",
+    "@mantine/styles": "^6.0.22",
     "@tabler/icons-react": "^3.11.0",
     "next": "14.2.4",
     "react": "^18",
@@ -59,7 +60,7 @@
     "postcss": "^8.4.39",
     "postcss-preset-mantine": "^1.15.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "storybook": "^8.2.2",
     "storybook-dark-mode": "^4.0.2",
     "ts-jest": "^29.2.2",

src/components/common/AdminNoticePreview/AdminNoticePreview.module.css

@@ -0,0 +1,42 @@
+.container {
+  width: 600px;
+  border: 0.5px solid var(--mantine-color-dimmed-border);
+}
+
+.title_bar {
+  width: 100%;
+  height: 70px;
+  border-bottom: 1px solid #888888;
+
+  background-color: var(--color-surfaceVariant);
+
+  border-radius: 8px 8px 0px 0px;
+}
+
+.col_icon {
+  width: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.col_title {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.row_container {
+  width: 100%;
+}
+
+.pagination {
+  padding: 20px 10px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}

src/components/common/AdminNoticePreview/AdminNoticePreview.story.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AdminNoticePreview } from "./AdminNoticePreview";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "AdminNoticePreview",
+  component: AdminNoticePreview,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // More on Action Args : https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof AdminNoticePreview>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Usage: Story = {
+  args: {
+    title: "공지사항",
+    pagingData: [
+      {
+        data: [
+          { pinned: true, title: "S-TOP 리뉴얼 안내", writer: "SCG", registeredDate: new Date() },
+          {
+            pinned: true,
+            title: "S-TOP 리뉴얼 안내 재공지",
+            writer: "SCG",
+            registeredDate: new Date(),
+          },
+          {
+            pinned: true,
+            title: "S-TOP 리뉴얼 안내 22",
+            writer: "SCG",
+            registeredDate: new Date(),
+          },
+          {
+            pinned: false,
+            title: "공지사항 제목입니다. 엄청 긴 제목입니다. 더 긴 제목",
+            writer: "행정실",
+            registeredDate: new Date(),
+          },
+          {
+            pinned: false,
+            title: "공지사항 제목입니다.",
+            writer: "소프트웨어융합대학 행정실",
+            registeredDate: new Date(),
+          },
+        ],
+      },
+      {
+        data: [
+          {
+            pinned: false,
+            title: "공지사항 제목입니다.",
+            writer: "행정실",
+            registeredDate: new Date(),
+          },
+          {
+            pinned: false,
+            title: "공지사항 제목입니다. 2",
+            writer: "소프트웨어융합대학 행정실",
+            registeredDate: new Date(),
+          },
+        ],
+      },
+    ],
+  },
+};

src/components/common/AdminNoticePreview/AdminNoticePreview.tsx

@@ -0,0 +1,54 @@
+import { Stack, Pagination, Flex } from "@mantine/core";
+import { useState } from "react";
+import { AdminNoticePreviewRow } from "./AdminNoticePreviewRow/AdminNoticePreviewRow";
+import classes from "./AdminNoticePreview.module.css";
+import { IconTable } from "@tabler/icons-react";
+import { DummyRow } from "./DummyRow/DummyRow";
+
+export interface IAdminNoticePreviewRow {
+  pinned: boolean;
+  title: string;
+  writer: string;
+  registeredDate: Date;
+  onClickRow?: () => void;
+}
+
+interface Props {
+  title: string;
+  pagingData: {
+    data: IAdminNoticePreviewRow[];
+  }[];
+}
+
+export function AdminNoticePreview({ title, pagingData }: Props) {
+  const [activePage, setPage] = useState(1);
+  const data: IAdminNoticePreviewRow[] = pagingData[activePage - 1].data;
+
+  // 페이지네이션 위치 고정
+  const firstPageDataCount = pagingData[0].data.length;
+  const lastPageDataCount = pagingData[pagingData.length - 1].data.length;
+
+  const dummyRowsCount = firstPageDataCount - lastPageDataCount;
+
+  return (
+    <Stack gap={0} align="flex-start" justify="flex-start" className={classes.container}>
+      <Flex className={classes.title_bar}>
+        <div className={classes.col_icon}>
+          <IconTable size={24} />
+        </div>
+        <div className={classes.col_title}>{title}</div>
+      </Flex>
+      <div className={classes.row_container}>
+        {data.map((item, index) => (
+          <AdminNoticePreviewRow key={index} {...item} />
+        ))}
+        {activePage === pagingData.length &&
+          Array.from({ length: dummyRowsCount }, (_, index) => <DummyRow key={`dummy-${index}`} />)}
+      </div>
+
+      <div className={classes.pagination}>
+        <Pagination total={pagingData.length} value={activePage} onChange={setPage} />
+      </div>
+    </Stack>
+  );
+}

src/components/common/AdminNoticePreview/AdminNoticePreviewRow/AdminNoticePreviewRow.module.css

@@ -0,0 +1,69 @@
+.row {
+  border-bottom: 0.5px solid #afb1b6;
+  height: 70px;
+  width: 100%;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.row:hover {
+  background-color: var(--color-background);
+}
+
+.column_pinned {
+  width: 10%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.column_title {
+  width: 50%;
+  height: 100%;
+  text-align: left;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 10px;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.column_writer {
+  width: 20%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 10px;
+
+  min-width: 0;
+
+  color: #888888;
+}
+
+.text_ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.column_date {
+  width: 20%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  color: #888888;
+}
+
+.pin_icon {
+  color: var(--color-primary);
+}

src/components/common/AdminNoticePreview/AdminNoticePreviewRow/AdminNoticePreviewRow.tsx

@@ -0,0 +1,42 @@
+import { Flex, Text } from "@mantine/core";
+import classes from "./AdminNoticePreviewRow.module.css";
+import { IAdminNoticePreviewRow } from "../AdminNoticePreview";
+import { IconPinFilled } from "@tabler/icons-react";
+
+export function AdminNoticePreviewRow({
+  pinned,
+  title,
+  writer,
+  registeredDate,
+  onClickRow,
+}: IAdminNoticePreviewRow) {
+  function formatDate(date: Date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0"); // getMonth()는 0부터 시작하므로 +1
+    const day = String(date.getDate()).padStart(2, "0");
+
+    return `${year}.${month}.${day}`;
+  }
+  return (
+    <Flex
+      gap={0}
+      align="center"
+      justify="flex-start"
+      direction="row"
+      wrap="nowrap"
+      className={classes.row}
+      onClick={onClickRow}
+    >
+      <div className={classes.column_pinned}>
+        {pinned && <IconPinFilled size={24} className={classes.pin_icon} />}
+      </div>
+      <div className={classes.column_title}>
+        <Text className={classes.text_ellipsis}>{title}</Text>
+      </div>
+      <div className={classes.column_writer}>
+        <Text className={classes.text_ellipsis}>{writer}</Text>
+      </div>
+      <div className={classes.column_date}>{formatDate(registeredDate)}</div>
+    </Flex>
+  );
+}

src/components/common/AdminNoticePreview/DummyRow/DummyRow.module.css

@@ -0,0 +1,6 @@
+.row {
+  height: 70px;
+  width: 100%;
+  font-size: 16px;
+  line-height: 24px;
+}

src/components/common/AdminNoticePreview/DummyRow/DummyRow.tsx

@@ -0,0 +1,15 @@
+import { Flex } from "@mantine/core";
+import classes from "./DummyRow.module.css";
+
+export function DummyRow() {
+  return (
+    <Flex
+      gap={0}
+      align="center"
+      justify="flex-start"
+      direction="row"
+      wrap="nowrap"
+      className={classes.row}
+    ></Flex>
+  );
+}