Skip to content

Commit

Permalink
✨ feat(admin): fix main view and dashboard (#381)
Browse files Browse the repository at this point in the history
* ✨ feat(admin): fix main view and dashboard

* :feat: change dashboard view
  • Loading branch information
seonghun-dev authored Nov 18, 2023
1 parent 5a7c600 commit ddc69b8
Show file tree
Hide file tree
Showing 16 changed files with 561 additions and 209 deletions.
10 changes: 3 additions & 7 deletions backend/streetdrop-admin/streetdrop-admin-web/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Depromeet 13th Street Drop Admin Page"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="description" content="Depromeet 13th Street Drop Admin Page"/>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=">
</script>
<!--
Expand All @@ -26,7 +22,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Street Drop Admin</title>
<title>StreetDrop Admin</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file not shown.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"short_name": "Street Drop Admin",
"name": "Street Drop Admin page",
"short_name": "StreetDrop Admin",
"name": "StreetDrop Admin page",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"sizes": "16x16",
"type": "image/x-icon"
}
],
Expand Down
2 changes: 2 additions & 0 deletions backend/streetdrop-admin/streetdrop-admin-web/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import UserBlockPage from "./components/user/UserBlockPage";
import MemberListPage from "./components/member/MemberListPage";
import MemberLoginLogPage from "./components/member/MemberLoginLogPage";
import MemberSecuritySettingPage from "./components/member/MemberSecuritySettingPage";
import ItemReportPage from "./components/items/ItemReportPage";

const App = () => {
return (
Expand All @@ -28,6 +29,7 @@ const App = () => {
<Route element={<PrivateRoute/>}>
<Route exact path="/" element={<Dashboard/>}/>
<Route path="/items" element={<ItemListPage/>}/>
<Route path="/items/report" element={<ItemReportPage/>}/>
<Route path="/drop-music" element={<SearchDropMusic/>}/>
<Route path="/drop-music/details" element={<DropSingleMusic/>}/>
<Route path='/drop-music/result/success' element={<DropMusicSuccess/>}/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,26 @@
import UserLineGraph from "../graph/UserLineGraph";
import {useEffect, useState} from "react";
import UserSignUpStaticApi from "../../api/domain/dashboard/UserSignUpStaticApi";

function UserSignUpGraphDashboard() {

const [data, setData] = useState([]);
const [data, setData] = useState();

useEffect(() => {
fetchData();

}, []);

const fetchData = async () => {
const response = await UserSignUpStaticApi.getUserSignUpStaticCount();
const formattedData = response.data.map(data => ({
const response = [
{"date": "10.05", "count": 5},
{"date": "10.06", "count": 20},
{"date": "10.07", "count": 34},
{"date": "10.08", "count": 56},
{"date": "10.09", "count": 28},
{"date": "10.10", "count": 67},
{"date": "10.11", "count": 13}
];
const formattedData = response.map(data => ({
x: data.date,
y: data.count
}));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,72 +3,47 @@ import { ResponsiveLine } from '@nivo/line'

function UserLineGraph({data}) {
return (
<div style={{height: '330px'}}>
<div style={{height: '300px'}}>
<ResponsiveLine
data={[
{
id: '일자별 가입 유저',
color: 'hsl(210,98%,37%)',
data: data,
id: '일자별 가입 유저',
color: 'hsl(208,100%,26%)',
data: data,
}
]}
margin={{top: 50, right: 50, bottom: 50, left: 50}}
xScale={{type: 'point'}}
margin={{ top: 10, right: 30, bottom: 30, left: 30 }}
xScale={{ type: 'point' }}
yScale={{
type: 'linear',
min: 'auto',
max: 'auto',
min: '0',
max: '100',
reverse: false
}}
yFormat=" >-.2f"
curve="natural"
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickPadding: 6,
tickRotation: 0,
legend: '일자별',
legendOffset: 36,
legendPosition: 'middle'
}}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: '유저수',
legendOffset: -40,
legendPosition: 'middle'
}}
pointSize={6}
pointColor={{theme: 'background'}}
pointBorderWidth={1}
pointBorderColor={{from: 'serieColor'}}
axisLeft={null}
enableGridY={false}
colors={{ scheme: 'category10' }}
pointColor={{ from: 'color', modifiers: [] }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
legends={[
{
anchor: 'bottom',
direction: 'row',
justify: false,
translateX: 100,
translateY: 55,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: [
{
on: 'hover',
style: {
itemBackground: 'rgba(0, 0, 0, .03)',
itemOpacity: 1
}
}
]
}
]}
enablePointLabel={true}
pointLabel="y"
enableArea={true}
enableSlices="x"
crosshairType="top-left"
areaBaselineValue={0}
useMesh={true}
legends={[]}
motionConfig="default"
/>
</div>

Expand Down
Original file line number Diff line number Diff line change
@@ -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 (
<>
<BasicLayout>
<h3 style={{marginBottom: '10px'}}>아이템 신고 관리</h3>
<p style={{color: 'gray'}}>아이템의 신고내역과 신고 처리를 관리할 수 있습니다.</p>
<Table
style={{marginTop: '20px'}}
columns={columns}
rowKey={record => record.id}
pagination={tableParams.pagination}
dataSource={data}
onChange={handleTableChange}
/>
</BasicLayout>
</>
)
}

export default ItemReportPage;
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Layout className="view-container">
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
<div className="demo-logo-vertical"/>
<MenuComponent/>
</Sider>
<Layout>
<CommonHeader/>
<Content
style={{
margin: '24px 16px',
padding: 24,
minHeight: 1000,
background: colorBgContainer,
}}
>
<div>
{children}
</div>
</Content>
</Layout>
</Layout>
<DefaultLayout content={
<Content
style={{
margin: '20px 16px',
padding: 24,
background: colorBgContainer,
borderRadius: '0.3rem',
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', // 그림자 추가
}}
>
<div>{children}</div>
</Content>
}
/>
</>
)
}
Expand Down
Loading

0 comments on commit ddc69b8

Please sign in to comment.