+
diff --git a/backend/streetdrop-admin/streetdrop-admin-web/src/components/items/ItemReportPage.js b/backend/streetdrop-admin/streetdrop-admin-web/src/components/items/ItemReportPage.js
new file mode 100644
index 00000000..801587d1
--- /dev/null
+++ b/backend/streetdrop-admin/streetdrop-admin-web/src/components/items/ItemReportPage.js
@@ -0,0 +1,97 @@
+import React, {useEffect, useState} from "react";
+import UserBlockApi from "../../api/domain/user/UserBlockApi";
+import BasicLayout from "../../layout/BasicLayout";
+import {Table} from "antd";
+
+function ItemReportPage() {
+ const [data, setData] = useState([]);
+
+ const exampleData ={
+
+ }
+
+ const [tableParams, setTableParams] = useState({
+ pagination: {
+ current: 1,
+ pageSize: 30
+ },
+ });
+
+ useEffect(() => {
+ fetchData();
+ }, [JSON.stringify(tableParams)]);
+
+
+ const fetchData = async () => {
+ const response = await UserBlockApi.getAllBlockList(tableParams.pagination.current - 1, tableParams.pagination.pageSize);
+ setData(response.data['data']);
+ setTableParams({
+ ...tableParams,
+ pagination: {
+ ...tableParams.pagination,
+ total: response.data['meta']['totalElements'],
+ },
+ });
+ }
+
+ const columns = [
+ {
+ title: 'ID',
+ dataIndex: 'id',
+ key: 'id',
+ },
+ {
+ title: '차단 요청 유저 ID',
+ dataIndex: 'userId',
+ },
+ {
+ title: '차단 요청 유저 닉네임',
+ dataIndex: 'userNickname',
+ },
+ {
+ title: '아이템 정보',
+ dataIndex: 'blockUserId',
+ },
+ {
+ title: '차단 대상 유저 닉네임',
+ dataIndex: 'blockUserNickname',
+ },
+ {
+ title: '차단 일자',
+ dataIndex: 'createdAt',
+ }
+ ];
+
+ const handleTableChange = (
+ pagination,
+ ) => {
+ setTableParams({
+ pagination,
+ });
+
+
+ if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+ setData([]);
+ }
+ };
+
+
+ return (
+ <>
+
+ 아이템 신고 관리
+ 아이템의 신고내역과 신고 처리를 관리할 수 있습니다.
+ record.id}
+ pagination={tableParams.pagination}
+ dataSource={data}
+ onChange={handleTableChange}
+ />
+
+
+ )
+}
+
+export default ItemReportPage;
\ No newline at end of file
diff --git a/backend/streetdrop-admin/streetdrop-admin-web/src/layout/BasicLayout.js b/backend/streetdrop-admin/streetdrop-admin-web/src/layout/BasicLayout.js
index 911e8699..1b806a2a 100644
--- a/backend/streetdrop-admin/streetdrop-admin-web/src/layout/BasicLayout.js
+++ b/backend/streetdrop-admin/streetdrop-admin-web/src/layout/BasicLayout.js
@@ -1,38 +1,28 @@
-import MenuComponent from "./common/Menu";
-import {Layout, theme} from "antd";
-import React, {useState} from "react";
+import {theme} from "antd";
+import React from "react";
import {Content} from "antd/es/layout/layout";
-import Sider from "antd/es/layout/Sider";
-import CommonHeader from "./common/CommonHeader";
+import DefaultLayout from "./DefaultLayout";
function BasicLayout({children}) {
const {token: {colorBgContainer},} = theme.useToken();
- const [collapsed, setCollapsed] = useState(false);
return (
<>
-
- setCollapsed(value)}>
-
-
-
-
-
-
-
- {children}
-
-
-
-
+
+ {children}
+
+ }
+ />
)
}
diff --git a/backend/streetdrop-admin/streetdrop-admin-web/src/layout/DashboardLayout.js b/backend/streetdrop-admin/streetdrop-admin-web/src/layout/DashboardLayout.js
index a82057f9..ab2ff1ef 100644
--- a/backend/streetdrop-admin/streetdrop-admin-web/src/layout/DashboardLayout.js
+++ b/backend/streetdrop-admin/streetdrop-admin-web/src/layout/DashboardLayout.js
@@ -1,101 +1,128 @@
-import React, {useState} from "react";
-import {Col, Layout, Row, theme} from "antd";
-import Sider from "antd/es/layout/Sider";
-import MenuComponent from "./common/Menu";
+import React from "react";
+import {theme} from "antd";
import {Content} from "antd/es/layout/layout";
-import CommonHeader from "./common/CommonHeader";
+import DefaultLayout from "./DefaultLayout";
-function DashboardLayout({children, children2, children3, children4}) {
+function DashboardLayout({indexContentList, longContent, graphContent, firstHalfContent, secondHalfContent}) {
const {
- token: {colorBgContainer},
+ token: { colorBgContainer },
} = theme.useToken();
- const [collapsed, setCollapsed] = useState(false);
+
+ const indexContents = (indexContentList) => (
+ <>
+ {indexContentList.slice(0, 4).map(content => (
+
+
+ {content}
+
+
+ ))}
+
+ );
+
+
+ const fifteenSizeContent = (content) => (
+ <>
+
+ {content}
+
+
+ );
+
+ const nineSizeHalfContent = (content) => (
+ <>
+
+ {content}
+
+
+ );
+
+ const twelveSizeContent = (content) => (
+ <>
+
+ {content}
+
+
+ );
return (
<>
-
- setCollapsed(value)}>
-
-
-
-
-
-
-
-
+
+
-
- {children}
-
-
-
-
-
-
- {children2}
-
-
-
-
-
-
-
-
- {children3}
-
-
-
-
-
+
-
- {children4}
-
-
-
-
-
-
+ {longContent()}
+