refactor(member): 커뮤니티 게시판 상세 페이지 UI 개선 (#86)

kgu-clab · Apr 8, 2024 · 1f7925b · 1f7925b
1 parent ba6cce3
commit 1f7925b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 44 deletions.
diff --git a/apps/member/src/constants/head.ts b/apps/member/src/constants/head.ts
@@ -3,4 +3,5 @@ export const TABLE_HEAD = {
   ACTIVITY_GROUP_APPLIES: ['번호', '학번', '이름', '상태', '기능'],
   SUPPORT_HISTORY: ['번호', '상태', '구분', '요청자', '신청일'],
   BOOK_LOAN_RECORD: ['대여자', '대여일', '반납일', '상태'],
+  COMMUNITY_DETAIL: ['번호', '제목', '작성자', '작성일'],
 } as const;
diff --git a/apps/member/src/pages/CommunityDetailPage/CommunityDetailPage.tsx b/apps/member/src/pages/CommunityDetailPage/CommunityDetailPage.tsx
@@ -3,13 +3,17 @@ import Header from '@components/common/Header/Header';
 import { useNavigate, useParams } from 'react-router-dom';
 import Section from '@components/common/Section/Section';
 import Pagination from '@components/common/Pagination/Pagination';
-import { useState } from 'react';
+import { useCallback } from 'react';
 import { PATH_FINDER } from '@constants/path';
 import { toYYMMDD } from '@utils/date';
 import { useBoardsList } from '@hooks/queries/useBoardsList';
 import { categoryToTitle, isCommunityCategoryType } from '@utils/community';
 import { COMMUNITY_MESSAGE } from '@constants/message';
 import { Table } from '@clab/design-system';
+import { toDecodeHTMLEntities } from '@utils/string';
+import { TABLE_HEAD } from '@constants/head';
+import { SERVICE_NAME } from '@constants/environment';
+import { usePagination } from '@hooks/common/usePagination';
 import type { CommunityCategoryType } from '@type/community';
 
 const CommunityDetailPage = () => {
@@ -20,72 +24,62 @@ const CommunityDetailPage = () => {
   }
 
   const navigate = useNavigate();
-
-  const [pagination, setPagination] = useState({
-    page: 0,
-    size: 20,
-  });
-
-  const { page, size } = pagination;
-  const name = categoryToTitle(type);
+  const { page, size, handlePageChange } = usePagination();
   const { data } = useBoardsList({ category: type, page, size });
 
-  const handlePageChange = (page: number) => {
-    setPagination({ ...pagination, page: page - 1 });
-  };
-
-  const onClickTitle = (id: string) => {
-    navigate(PATH_FINDER.COMMUNITY_POST(type, id), {
-      state: { sort: type, id: id },
-    });
-  };
+  const handleBoardClick = useCallback(
+    (id: number) => {
+      navigate(PATH_FINDER.COMMUNITY_POST(type, id));
+    },
+    [navigate, type],
+  );
 
   return (
     <Content>
-      <Header title={['커뮤니티', name]}>
+      <Header title={['커뮤니티', categoryToTitle(type)]}>
         <p>
           총 <span className="font-semibold">{data.totalItems}개</span>의
           게시글이 있어요
         </p>
       </Header>
-      <Section>
-        <Table head={['번호', '제목', '작성자', '작성일']}>
+      <Section className="space-y-2">
+        <Table head={TABLE_HEAD.COMMUNITY_DETAIL}>
           {data.totalItems === 0 ? (
             <Table.Row>
-              <td colSpan={4} className="py-4">
+              <Table.Cell colSpan={4}>
                 {COMMUNITY_MESSAGE.NO_ARTICLE}
-              </td>
+              </Table.Cell>
             </Table.Row>
           ) : (
-            data.items.map(({ id, title, writer, createdAt }, index) => (
+            data.items.map(({ id, title, writerName, createdAt }, index) => (
               <Table.Row
                 key={id}
-                className="text-center"
-                onClick={() => onClickTitle(String(id))}
+                className="text-center text-nowrap"
+                onClick={() => handleBoardClick(id)}
               >
-                <td className="py-2">
+                <Table.Cell className="w-1/12">
                   {data.totalItems - (index + page * size)}
-                </td>
-                <td className="py-2 text-left">{title}</td>
-                <td className="py-2">{writer ? writer : '-'}</td>
-                <td className="py-2">
-                  {createdAt ? toYYMMDD(createdAt) : '-'}
-                </td>
+                </Table.Cell>
+                <Table.Cell className="w-7/12 text-left truncate">
+                  {toDecodeHTMLEntities(title)}
+                </Table.Cell>
+                <Table.Cell className="w-3/12">
+                  {writerName || SERVICE_NAME}
+                </Table.Cell>
+                <Table.Cell className="w-1/12">
+                  {toYYMMDD(createdAt)}
+                </Table.Cell>
               </Table.Row>
             ))
           )}
         </Table>
-        {data.totalItems > 0 && (
-          <Pagination
-            className="flex justify-center"
-            totalItems={data.totalItems}
-            pageLimit={5}
-            postLimit={size}
-            setPage={handlePageChange}
-            page={page}
-            sort={type}
-          />
-        )}
+        <Pagination
+          className="justify-center"
+          totalItems={data.totalItems}
+          postLimit={size}
+          onChange={handlePageChange}
+          page={page}
+        />
       </Section>
     </Content>
   );