feat : 신고 검토에서 신고 카테고리 API 연결

Author: layout-SY

src/components/admin/adminUserReport/AdminReportDetail.tsx

@@ -12,6 +12,7 @@ import { formatDate } from '../../../util/formatDate';
 import { useHandleUser } from '../../../hooks/admin/useHandleUser';
 import { useModal } from '../../../hooks/useModal';
 import Modal from '../../common/modal/Modal';
+import { REPORT_CATEGORY_LIST } from '../../../constants/admin/adminReportCategoryList';
 
 export default function AdminReportDetail() {
   const { id: reportId } = useParams();
@@ -65,8 +66,8 @@ export default function AdminReportDetail() {
               <Link to={`/admin/users/${reportDetailData.reporter.userId}`}>
                 <Avatar
                   image={
-                    reportDetailData.reporter.img
-                      ? reportDetailData.reporter.img
+                    reportDetailData.reporter.profileImg
+                      ? reportDetailData.reporter.profileImg
                       : defaultImg
                   }
                   size='50px'
@@ -81,8 +82,8 @@ export default function AdminReportDetail() {
               <Link to={`/admin/users/${reportDetailData.reportedUser.userId}`}>
                 <Avatar
                   image={
-                    reportDetailData.reportedUser.img
-                      ? reportDetailData.reportedUser.img
+                    reportDetailData.reportedUser.profileImg
+                      ? reportDetailData.reportedUser.profileImg
                       : defaultImg
                   }
                   size='47px'
@@ -97,13 +98,9 @@ export default function AdminReportDetail() {
             <S.ContentHeader>
               <ReportCheckBox
                 isAdmin={true}
-                selectedCheckbox={[
-                  '욕설/비속어',
-                  '성적내용/음란물',
-                  '광고/스팸',
-                  '저작권 침해',
-                  '기타',
-                ]}
+                selectedCheckbox={reportDetailData.category.map(
+                  (num) => REPORT_CATEGORY_LIST[num - 1]
+                )}
               />
               <S.Date>{formatDate(reportDetailData.reportedAt)}</S.Date>
             </S.ContentHeader>

src/constants/admin/adminReportCategoryList.ts

@@ -0,0 +1,13 @@
+export const REPORT_CATEGORY_LIST = [
+  '욕설/비속어',
+  '성적내용/음란물',
+  '광고/스팸',
+  '사기/부정행위',
+  '도배/스팸',
+  '혐오/차별발언',
+  '사생활 침해',
+  '저작권 침해',
+  '기타',
+] as const;
+
+export type ReportCategory = (typeof REPORT_CATEGORY_LIST)[number];

src/models/admin/userDetail/reportDetail.ts

@@ -3,7 +3,7 @@ import { ApiCommonType } from '../../apiCommon';
 export interface UserData {
   userId: number;
   nickname: string;
-  img: string;
+  profileImg: string;
 }
 
 export interface ReportDetail {
@@ -12,7 +12,7 @@ export interface ReportDetail {
   reportedUser: UserData;
   reportedAt: string;
   reason: string;
-  category: 'ALL' | 'ABUSE' | 'SEXUAL' | 'AD' | 'COPYRIGHT' | 'ETC';
+  category: number[];
   location: 'USER' | 'PROJECT' | 'COMMENT' | 'RECOMMENT';
   locationId: number;
 }

src/models/report.ts

@@ -18,7 +18,7 @@ export interface AllReports {
   nickname: string;
   profileImg: string;
   warning: number;
-  category: string;
+  category: number[];
   reportedAt: string;
   imposed: boolean;
 }

src/pages/admin/adminReports/AdminReports.styled.ts

@@ -46,9 +46,12 @@ export const Item = styled(Link)`
 `;
 
 export const ProfileImg = styled.div`
-  flex-shrink: 0;
-  text-align: center;
+  width: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   margin-right: 16px;
+  flex-shrink: 0;
 `;
 
 export const NickName = styled.p`
@@ -60,14 +63,17 @@ export const NickName = styled.p`
 export const ContentArea = styled.div`
   display: flex;
   flex: 1;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: flex-start;
   margin-left: 35px;
-  margin-bottom: 30px;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export const Category = styled.p`
+  padding: 5px 10px;
   ${({ theme }) => theme.heading.small};
   opacity: 50%;
 `;

src/pages/admin/adminReports/AdminReports.tsx

@@ -6,14 +6,13 @@ import * as S from './AdminReports.styled';
 import defaultImg from '../../../assets/defaultImg.png';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import Pagination from '../../../components/common/pagination/Pagination';
-
 import { useModal } from '../../../hooks/useModal';
 import Modal from '../../../components/common/modal/Modal';
-
 import { useGetAllReports } from '../../../hooks/admin/useGetAllReports';
 import { Spinner } from '../../../components/common/loadingSpinner/LoadingSpinner.styled';
 import { useHandleUser } from '../../../hooks/admin/useHandleUser';
 import { ADMIN_MODAL_MESSAGE } from '../../../constants/admin/adminModal';
+import { REPORT_CATEGORY_LIST } from '../../../constants/admin/adminReportCategoryList';
 
 export default function AdminReports() {
   const { searchUnit, value, handleChangePagination, handleGetKeyword } =
@@ -67,7 +66,11 @@ export default function AdminReports() {
                 <S.NickName>{data.nickname}</S.NickName>
               </S.ProfileImg>
               <S.ContentArea>
-                <S.Category>{data.category}</S.Category>
+                {data.category.map((category) => (
+                  <S.Category>
+                    "{REPORT_CATEGORY_LIST[category - 1]}"
+                  </S.Category>
+                ))}
               </S.ContentArea>
               <S.ButtonArea>
                 <S.WarningButton