feat(community): 공지사항 페이지

apps/community/src/app/api/mock/board/route.ts

@@ -0,0 +1,38 @@
+import { board } from './data';
+
+export function GET(request: Request) {
+  const url = new URL(request.url);
+  const page = Number(url.searchParams.get('page')) || 0;
+  const size = Number(url.searchParams.get('size')) || 10;
+  const keyword = url.searchParams.get('keyword') || '';
+  const category =
+    url.searchParams.get('category')?.toLowerCase().replace(/\s+/g, '') || '';
+
+  const filteredBoards = board.filter((board) => {
+    const matchesKeyword = board.title
+      .toLowerCase()
+      .replace(/\s+/g, '')
+      .includes(keyword);
+    const matchesCategory = category ? board.category === category : true;
+    return matchesKeyword && matchesCategory;
+  });
+
+  const totalElements = filteredBoards.length;
+  const totalPage = Math.ceil(totalElements / size);
+  const pagedBoards = filteredBoards.slice(page * size, (page + 1) * size);
+
+  const pageable = {
+    page,
+    size,
+    totalPage,
+    totalElements,
+    isEnd: page >= totalPage - 1,
+  };
+
+  return Response.json({
+    data: {
+      contents: pagedBoards,
+      pagable: pageable,
+    },
+  });
+}

apps/community/src/app/board/notice/page.css.ts

@@ -0,0 +1,11 @@
+import { themeVars } from '@aics-client/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+const boardWrapper = style({
+  display: themeVars.display.flex,
+  flexDirection: themeVars.flexDirection.column,
+  alignItems: themeVars.alignItems.center,
+  gap: '2rem',
+});
+
+export { boardWrapper };

apps/community/src/app/board/notice/page.tsx

@@ -0,0 +1,42 @@
+import { PageHeader } from '~/components/page-header';
+
+import { BoardList } from '~/components/board/board-list';
+import { SearchBar } from '~/components/board/search-bar';
+
+import * as styles from '~/app/board/notice/page.css';
+import { Pagination } from '~/components/board/pagination';
+import { getBoards } from './remote';
+
+export const dynamic = 'force-dynamic';
+
+export default async function BoardPage(props: {
+  searchParams?: Promise<{
+    category?: string;
+    page?: string;
+    keyword?: string;
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  const currentPage = Number(searchParams?.page) || 0;
+  const keyword = searchParams?.keyword || '';
+
+  const { data } = await getBoards(currentPage, 10, keyword, '공지사항');
+
+  return (
+    <section>
+      <PageHeader
+        title="공지사항"
+        description="학부와 관련된 중요한 공지사항을 안내해드려요."
+      />
+      <section className={styles.boardWrapper}>
+        <SearchBar placeholder="검색어를 입력하세요" />
+        <BoardList data={data.contents} />
+        <Pagination
+          totalPage={data.pagable.totalPage}
+          pageCount={5}
+          currentPage={currentPage}
+        />
+      </section>
+    </section>
+  );
+}

apps/community/src/app/board/notice/remote.ts

@@ -0,0 +1,25 @@
+import { http } from '~/utils/http';
+
+import { MOCK_END_POINT } from '~/constants/api';
+
+import type { PaginationResponse } from '~/types/api';
+
+async function getBoards(
+  page: number,
+  size: number,
+  keyword: string,
+  category: string,
+) {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    size: size.toString(),
+    keyword: keyword,
+    category: category,
+  });
+
+  const url = `${MOCK_END_POINT.BOARD}?${params.toString()}`;
+
+  return await http.get<PaginationResponse>(url);
+}
+
+export { getBoards };

apps/community/src/components/board/board-list.css.ts

@@ -0,0 +1,91 @@
+import { screen, themeVars } from '@aics-client/design-system/styles';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+const boardListWrapper = style({
+  display: themeVars.display.flex,
+  flexDirection: themeVars.flexDirection.column,
+  width: themeVars.width.full,
+  borderTop: '1px solid',
+  borderColor: themeVars.color.gray300,
+});
+
+const row = style({
+  display: themeVars.display.flex,
+  alignItems: themeVars.alignItems.center,
+  minWidth: themeVars.width.full,
+  maxHeight: '4rem',
+  gap: themeVars.spacing.md,
+  paddingTop: '1rem',
+  paddingBottom: '1rem',
+  borderBottom: '1px solid',
+  borderColor: themeVars.color.gray300,
+  textOverflow: 'ellipsis',
+  selectors: {
+    '&:hover': {
+      backgroundColor: themeVars.color.gray100,
+    },
+  },
+
+  ...screen.xl({
+    minHeight: '3.5rem',
+  }),
+});
+
+globalStyle(`${row} > * + *`, {
+  textAlign: 'center',
+});
+
+const pin = style({
+  display: themeVars.display.flex,
+  justifyContent: themeVars.justifyContent.center,
+  width: '5%',
+});
+
+const rowTitle = style({
+  display: themeVars.display.flex,
+  justifyContent: themeVars.justifyContent.center,
+  alignItems: themeVars.alignItems.center,
+  width: '90%',
+  gap: themeVars.spacing.sm,
+  fontWeight: themeVars.fontWeight.semibold,
+
+  ...screen.md({
+    width: '60%',
+    justifyContent: themeVars.justifyContent.start,
+  }),
+});
+
+const information = style({
+  width: '0%',
+  visibility: 'hidden',
+
+  ...screen.md({
+    display: themeVars.display.flex,
+    justifyContent: themeVars.justifyContent.end,
+    alignItems: themeVars.alignItems.center,
+    width: '35%',
+    visibility: 'visible',
+    fontSize: themeVars.fontSize.xs,
+    gap: '0.75rem',
+    paddingRight: '1.5rem',
+  }),
+});
+
+const view = style({
+  display: themeVars.display.flex,
+  justifyContent: themeVars.justifyContent.center,
+  alignItems: themeVars.alignItems.center,
+  gap: themeVars.spacing.xs,
+});
+
+const author = style({
+  width: '0%',
+  visibility: 'hidden',
+
+  ...screen.xl({
+    visibility: 'visible',
+    width: 'auto',
+  }),
+});
+
+export { boardListWrapper, row, pin, rowTitle, information, view, author };

apps/community/src/components/board/board-list.tsx

@@ -0,0 +1,55 @@
+import Link from 'next/link';
+
+import { Eye, Paperclip, Pin } from '@aics-client/design-system/icons';
+
+import { MOCK_END_POINT } from '~/constants/api';
+
+import type { Board } from '~/types/board';
+
+import * as styles from '~/components/board/board-list.css';
+
+async function BoardList({ data }: { data: Board[] }) {
+  return (
+    <>
+      {data.length > 0 ? (
+        <ul className={styles.boardListWrapper}>
+          {data.map((row) => (
+            <Row key={row.postId} data={row} />
+          ))}
+        </ul>
+      ) : (
+        <p>게시물이 존재하지 않습니다.</p>
+      )}
+    </>
+  );
+}
+
+function Row({ data }: { data: Board }) {
+  return (
+    <Link href={`${MOCK_END_POINT.BOARD_DETAIL}/${data.postId}`}>
+      <li className={styles.row}>
+        <div className={styles.pin}>
+          {data.isPinned ? (
+            <Pin fill="black" size={'1.25rem'} />
+          ) : (
+            <span>{data.postId}</span>
+          )}
+        </div>
+        <div className={styles.rowTitle}>
+          <h2>{data.title}</h2>
+          {data.hasAttachment && <Paperclip color="grey" size={'1rem'} />}
+        </div>
+        <div className={styles.information}>
+          <div className={styles.view}>
+            <Eye size={'1rem'} />
+            <span>{data.views}</span>
+          </div>
+          <div className={styles.author}>{data.author}</div>
+          <div>{data.createAt}</div>
+        </div>
+      </li>
+    </Link>
+  );
+}
+
+export { BoardList };

apps/community/src/components/board/pagination.css.ts

@@ -0,0 +1,35 @@
+import { themeVars } from '@aics-client/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+const controllerWrapper = style({
+  display: themeVars.display.flex,
+  justifyContent: themeVars.justifyContent.center,
+  alignItems: themeVars.alignItems.center,
+  minWidth: '30%',
+  gap: '0.75rem',
+  userSelect: 'none',
+});
+
+const buttonList = style({
+  display: themeVars.display.flex,
+  alignItems: themeVars.alignItems.center,
+});
+
+const pageButton = style({
+  width: '2rem',
+  height: '2rem',
+  borderRadius: themeVars.borderRadius.lg,
+  textAlign: 'center',
+});
+
+const active = style({
+  fontWeight: themeVars.fontWeight.semibold,
+  color: themeVars.color.white,
+  backgroundColor: themeVars.color.black,
+});
+
+const hidden = style({
+  visibility: 'hidden',
+});
+
+export { controllerWrapper, buttonList, pageButton, active, hidden };

apps/community/src/components/board/pagination.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { Fragment, useMemo, useState } from 'react';
+
+import { ChevronLeft, ChevronRight } from '@aics-client/design-system/icons';
+
+import * as styles from '~/components/board/pagination.css';
+
+interface Props {
+  totalPage: number; // 총 페이지 수
+  pageCount: number; // 보여줄 페이지 장 수
+  currentPage: number; // 현재 페이지
+}
+
+function Pagination({ totalPage, pageCount, currentPage }: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const initialListStart = Math.floor(currentPage / pageCount) * pageCount + 1;
+  const [listStart, setListStart] = useState(initialListStart);
+
+  const noPrev = listStart === 1;
+  const noNext = listStart + pageCount - 1 >= totalPage;
+
+  const handleMovePage = (pageNum: number) => {
+    const newListStart =
+      Math.ceil(pageNum / pageCount) * pageCount - (pageCount - 1);
+
+    if (newListStart !== listStart) {
+      setListStart(newListStart > 0 ? newListStart : 1);
+    }
+
+    const params = new URLSearchParams(searchParams);
+    params.set('page', (pageNum - 1).toString());
+
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  return (
+    <div className={styles.controllerWrapper}>
+      <button
+        type="button"
+        onClick={() => handleMovePage(listStart - 1)}
+        className={`${noPrev && styles.hidden}`}
+      >
+        <ChevronLeft />
+      </button>
+      {[...Array(pageCount)].map((_, i) => (
+        <Fragment key={`page-${listStart + i}`}>
+          {listStart + i <= totalPage && (
+            <button
+              type="button"
+              className={`${styles.pageButton} ${
+                currentPage + 1 === listStart + i && styles.active
+              }`}
+              onClick={() => handleMovePage(listStart + i)}
+            >
+              {listStart + i}
+            </button>
+          )}
+        </Fragment>
+      ))}
+      <button
+        type="button"
+        onClick={() => handleMovePage(listStart + pageCount)}
+        className={`${noNext && styles.hidden}`}
+      >
+        <ChevronRight />
+      </button>
+    </div>
+  );
+}
+
+export { Pagination };