관리자 신고 검토 페이지 구현 ( Feat/#327 )

src/api/admin/report.api.ts

@@ -0,0 +1,45 @@
+import type { ApiReportDetail } from '../../models/admin/userDetail/reportDetail';
+import type { ApiAllReports } from '../../models/report';
+import type { SearchType } from '../../models/search';
+import { httpClient } from '../http.api';
+
+export const postDeleteReport = async (id: number) => {
+  try {
+    await httpClient.delete(`/report/${id}`);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const getReportDetail = async (reportId: number) => {
+  try {
+    const response = await httpClient.get<ApiReportDetail>(
+      `/report/${reportId}`
+    );
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const getAllReports = async (params: SearchType) => {
+  try {
+    const response = await httpClient.get<ApiAllReports>(`/report`, { params });
+    return response.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const getAllReportsPreview = async () => {
+  try {
+    const response = await httpClient.get<ApiAllReports>(`/report`);
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/api/admin/user.api.ts

@@ -2,7 +2,7 @@ import type { ApiUserApplicantsData } from '../../models/admin/userDetail/userDe
 import type { ApiUserProjectDataResponse } from '../../models/admin/userDetail/userProjectData';
 import { httpClient } from '../http.api';
 
-export const postBanUser = async (id: string) => {
+export const postBanUser = async (id: number) => {
   try {
     await httpClient.post(`/ban/${id}`);
   } catch (e) {
@@ -11,7 +11,7 @@ export const postBanUser = async (id: string) => {
   }
 };
 
-export const postWarningUser = async (id: string) => {
+export const postWarningUser = async (id: number) => {
   try {
     await httpClient.post(`/warning/${id}`);
   } catch (e) {

src/api/customerService.api.ts

@@ -29,6 +29,17 @@ export const getNotice = async (params: NoticeSearch) => {
   }
 };
 
+export const getNoticePreview = async () => {
+  try {
+    const response = await httpClient.get<ApiNotice>(`/notice`);
+
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
 export const getNoticeDetail = async (id: string) => {
   try {
     const response = await httpClient.get<ApiNoticeDetail>(`/notice/${id}`);

src/api/report.api.ts

@@ -1,4 +1,4 @@
-import { type ApiAllReports, type ApiPostContent } from '../models/report';
+import type { ApiPostContent } from '../models/report';
 import { httpClient } from './http.api';
 
 export const postReport = async (formData: ApiPostContent) => {
@@ -13,13 +13,3 @@ export const postReport = async (formData: ApiPostContent) => {
     throw error;
   }
 };
-
-export const getAllReports = async () => {
-  try {
-    const response = await httpClient.get<ApiAllReports>(`/reports`);
-    return response.data.data;
-  } catch (e) {
-    console.error(e);
-    throw e;
-  }
-};

src/components/admin/adminUserReport/AdminReportDetail.styled.ts

@@ -0,0 +1,144 @@
+import styled from 'styled-components';
+import { ScrollArea } from '../../common/header/Notification/Notification.styled';
+import { SpinnerContainer } from '../../user/mypage/Spinner.styled';
+import { Link } from 'react-router-dom';
+import Button from '../../common/Button/Button';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 8rem 0 auto;
+`;
+
+export const Spinner = styled(SpinnerContainer)``;
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const HeaderContainer = styled.div`
+  width: 80%;
+  height: 100px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.color.border};
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
+`;
+
+export const UserContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const NickName = styled.p`
+  font-size: 0.8rem;
+  opacity: 40%;
+`;
+
+export const Category = styled.p``;
+
+export const Arrow = styled.div`
+  width: 50px;
+  height: 50px;
+  position: relative;
+  margin-bottom: 30px;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+  }
+
+  &::before {
+    width: 45%;
+    height: 45%;
+    top: 59%;
+    right: -10rem;
+    border: 1.5px solid ${({ theme }) => theme.color.primary};
+    border-right: 0;
+    border-bottom: 0;
+    transform: rotate(130deg);
+    }
+
+    &::after {
+      width: 24.3rem;
+      height: 1px;
+      top: 78%;
+      left: -11rem;
+      background-color: ${({ theme }) => theme.color.primary};
+      transform-origin: 0 100%;
+      transform: rotate(0deg);
+
+    }
+  }
+`;
+
+export const Date = styled.p`
+  opacity: 60%;
+`;
+
+export const ContentContainer = styled.div`
+  width: 80%;
+  height: 550px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.color.border};
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
+  margin-top: 30px;
+  padding: 40px;
+`;
+
+export const ContentHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Divider = styled.hr`
+  width: 400px;
+  height: 1px;
+  margin: 20px 0 20px 0;
+  opacity: 40%;
+`;
+
+export const Scroll = styled(ScrollArea)`
+  padding: 20px;
+`;
+
+export const Content = styled.p`
+  white-space: pre-wrap;
+`;
+
+export const ConfirmContainer = styled.div`
+  width: 80%;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30px;
+`;
+
+export const ConfirmArea = styled(Link)`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+export const ButtonArea = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+
+export const WarningButton = styled(Button)`
+  background-color: ${({ theme }) => theme.color.red};
+`;
+
+export const BanButton = styled(Button)``;
+
+export const ConfirmButton = styled(Button)``;