From 86b03de8feeae9d62a2d1a8f76d65d9e17fa8b99 Mon Sep 17 00:00:00 2001
From: inyeong-kang <tomatorkd@naver.com>
Date: Thu, 19 Oct 2023 17:30:49 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20(#795)=20=EC=84=9C=EB=B2=84=EC=9D=98=20r?=
 =?UTF-8?q?epsonse=20=EA=B0=92=EC=9D=B4=20UI=EC=97=90=20=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20response=20=EB=A5=BC?=
 =?UTF-8?q?=20=EA=B0=80=EA=B3=B5=ED=95=98=EC=97=AC=20=EB=B3=B4=EC=97=AC?=
 =?UTF-8?q?=EC=A3=BC=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/report.ts                           | 10 ++++++++--
 frontend/src/mocks/mockData/report.ts                |  6 +++---
 frontend/src/pages/admin/PendingReportPage/index.tsx |  4 ++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/api/report.ts b/frontend/src/api/report.ts
index facbc5b7e..42f9c5d03 100644
--- a/frontend/src/api/report.ts
+++ b/frontend/src/api/report.ts
@@ -1,6 +1,7 @@
 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';
@@ -8,7 +9,7 @@ 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
index 746a08ac1..963d5032e 100644
--- 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
index 69a54b9c2..500c53166 100644
--- 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