feat(community): 학부소식 페이지 추가

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

@@ -5,8 +5,7 @@ export function GET(request: Request) {
   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 category = url.searchParams.get('category') || '';
 
   const filteredBoards = board.filter((board) => {
     const matchesKeyword = board.title

apps/community/src/app/board/news/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/news/page.tsx

@@ -0,0 +1,46 @@
+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 NewsPage(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({
+    page: currentPage,
+    size: 10,
+    keyword,
+    category: 'DEPT_NEWS',
+  });
+
+  return (
+    <section>
+      <PageHeader
+        title="학부소식"
+        description="기사, 활동 및 수상 소식 등을 소개해요."
+      />
+      <section className={styles.boardWrapper}>
+        <SearchBar placeholder="검색어를 입력하세요" />
+        <BoardList data={data.contents} />
+        <Pagination
+          totalPage={data.pagable.totalPage}
+          currentPage={currentPage}
+        />
+      </section>
+    </section>
+  );
+}

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

@@ -5,11 +5,11 @@ 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';
+import { getBoards } from '../remote';
 
 export const dynamic = 'force-dynamic';
 
-export default async function BoardPage(props: {
+export default async function NoticePage(props: {
   searchParams?: Promise<{
     category?: string;
     page?: string;
@@ -20,7 +20,12 @@ export default async function BoardPage(props: {
   const currentPage = Number(searchParams?.page) || 0;
   const keyword = searchParams?.keyword || '';
 
-  const { data } = await getBoards(currentPage, 10, keyword, '공지사항');
+  const { data } = await getBoards({
+    page: currentPage,
+    size: 10,
+    keyword,
+    category: 'DEPT_INFO',
+  });
 
   return (
     <section>
@@ -33,7 +38,6 @@ export default async function BoardPage(props: {
         <BoardList data={data.contents} />
         <Pagination
           totalPage={data.pagable.totalPage}
-          pageCount={5}
           currentPage={currentPage}
         />
       </section>

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

@@ -15,12 +15,14 @@ interface Board {
   createAt: string;
 }
 
-async function getBoards(
-  page: number,
-  size: number,
-  keyword: string,
-  category: string,
-) {
+interface BoardParams {
+  page: number;
+  size: number;
+  keyword?: string;
+  category: string;
+}
+
+async function getBoards({ page, size, keyword = '', category }: BoardParams) {
   const params = new URLSearchParams({
     page: page.toString(),
     size: size.toString(),

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

@@ -4,7 +4,7 @@ import { Eye, Paperclip, Pin } from '@aics-client/design-system/icons';
 
 import { MOCK_END_POINT } from '~/constants/api';
 
-import type { Board } from '~/app/board/notice/remote';
+import type { Board } from '~/app/board/remote';
 
 import * as styles from '~/components/board/board-list.css';
 

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

@@ -9,11 +9,11 @@ import * as styles from '~/components/board/pagination.css';
 
 interface Props {
   totalPage: number; // 총 페이지 수
-  pageCount: number; // 보여줄 페이지 장 수
   currentPage: number; // 현재 페이지
+  pageCount?: number; // 보여줄 페이지 장 수
 }
 
-function Pagination({ totalPage, pageCount, currentPage }: Props) {
+function Pagination({ totalPage, pageCount = 5, currentPage }: Props) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();