fix: (#795) 서버의 repsonse 값이 UI에 보이지 않도록 response 를 가공하여 보여주도록 수정

woowacourse-teams · Oct 19, 2023 · 86b03de · 86b03de
1 parent f312b9c
commit 86b03de
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/frontend/src/api/report.ts b/frontend/src/api/report.ts
@@ -1,14 +1,15 @@
 import { PendingReportActionList, ReportActionRequest, ReportRequest } from '@type/report';
 import { StringDate } from '@type/time';
 
+import { REPORT_MESSAGE } from '@constants/policyMessage';
 import { REPORT_TYPE } from '@constants/report';
 
 import { getFetch, postFetch } from '@utils/fetch';
 
 export interface PendingReportActionResponse {
   id: number;
   type: keyof typeof REPORT_TYPE;
-  reasons: string[];
+  reasons: (keyof typeof REPORT_MESSAGE)[];
   createdAt: StringDate;
   target: string;
 }
@@ -34,7 +35,12 @@ export const getPendingReportActionList = async (
   const { reports, ...rest } = pendingReportActionList;
   const reportList = reports.map(report => {
     const { type, reasons, ...rest } = report;
-    return { ...rest, typeName: REPORT_TYPE[report.type], reason: reasons.join(', ') };
+    const transformedReasonList = reasons.map(reason => REPORT_MESSAGE[reason]);
+    return {
+      ...rest,
+      typeName: REPORT_TYPE[report.type],
+      reason: transformedReasonList.join(', '),
+    };
   });
 
   return { ...rest, reportList };

diff --git a/frontend/src/mocks/mockData/report.ts b/frontend/src/mocks/mockData/report.ts
@@ -7,21 +7,21 @@ export const MOCK_PENDING_REPORT_LIST: PendingReportActionListResponse = {
     {
       id: 0,
       type: 'POST',
-      reasons: ['스팸성입니다', '도배성입니다'],
+      reasons: ['BEHAVIOR', 'ADVERTISING'],
       target: '보투게더는 바보라고 생각하는 게시글',
       createdAt: '2023-10-12 12:20',
     },
     {
       id: 1,
       type: 'COMMENT',
-      reasons: ['스팸성입니다', '도배성입니다', '홍보성입니다'],
+      reasons: ['BEHAVIOR', 'ADVERTISING', 'SPAMMING'],
       target: '보투게더는 바보라고 생각하는 댓글',
       createdAt: '2023-10-12 12:21',
     },
     {
       id: 3,
       type: 'NICKNAME',
-      reasons: ['스팸성입니다', '도배성입니다'],
+      reasons: ['BEHAVIOR', 'ADVERTISING'],
       target: '보투게더바보',
       createdAt: '2023-10-12 12:22',
     },

diff --git a/frontend/src/pages/admin/PendingReportPage/index.tsx b/frontend/src/pages/admin/PendingReportPage/index.tsx
@@ -26,7 +26,7 @@ export default function PendingReportPage() {
   const params = useParams() as { page: string };
   const currentPageNumber = params.page ? Number(params.page) : 1;
 
-  const columnList = ['Id', '사유', '일시', '내용', '종류', '수정/삭제', '신고 해제'];
+  const columnList = ['Id', '내용', '일시', '종류', '사유', '수정/삭제', '신고 해제'];
   const { data } = usePendingReportActionList(currentPageNumber - 1);
   const { mutate: reportAction } = useReportAction();
 
@@ -79,7 +79,7 @@ export default function PendingReportPage() {
               <Table
                 columns={columnList}
                 rows={reportListWithAction}
-                columnTemplate="1fr 3fr 3fr 2fr 3fr 2fr 2fr"
+                columnTemplate="1fr 2fr 3fr 2fr 4fr 2fr 2fr"
               />
               <S.PaginationContainer>
                 <S.MovePageButton