init
This commit is contained in:
389
src/pages/DataManage/GameLogView.js
Normal file
389
src/pages/DataManage/GameLogView.js
Normal file
@@ -0,0 +1,389 @@
|
||||
import { Fragment, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Button from '../../components/common/button/Button';
|
||||
import Pagination from '../../components/common/Pagination/Pagination';
|
||||
|
||||
import DatePicker, { registerLocale } from 'react-datepicker';
|
||||
import { ko } from 'date-fns/esm/locale';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
import { getMonth, getYear } from 'date-fns';
|
||||
import range from 'lodash/range';
|
||||
|
||||
import { Title, SelectInput, BtnWrapper, TableStyle, TableInfo, ListCount, ListOption, ButtonClose, ModalText } from '../../styles/Components';
|
||||
import { styled } from 'styled-components';
|
||||
|
||||
import ItemLogSearchBar from '../../components/DataManage/ItemLogSearchBar';
|
||||
import GoodsLogSearchBar from '../../components/DataManage/CreditLogSearchBar';
|
||||
import TradeLogSerchBar from '../../components/DataManage/TradeLogSearchBar';
|
||||
import Modal from '../../components/common/modal/Modal';
|
||||
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { authList } from '../../store/authList';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
registerLocale('ko', ko);
|
||||
|
||||
const ItemLogContent = () => {
|
||||
const mokupData = [
|
||||
{
|
||||
date: '2023-08-05 12:11:32',
|
||||
name: '칼리버스',
|
||||
id: '16CD2ECD-4798-46CE-9B6B-F952CF11F196',
|
||||
action: '획득',
|
||||
route: '아이템 제작',
|
||||
itemName: 'Item_name',
|
||||
serialNumber: 'Serial_number',
|
||||
itemCode: 'Item_code',
|
||||
count: 1,
|
||||
key: 'User_trade_key',
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<ItemLogSearchBar />
|
||||
<TableInfo>
|
||||
<ListCount>총 : 117건 / 000 건</ListCount>
|
||||
<ListOption>
|
||||
<SelectInput name="" id="" className="input-select">
|
||||
<option value="up">오름차순</option>
|
||||
<option value="down">내림차순</option>
|
||||
</SelectInput>
|
||||
<SelectInput name="" id="" className="input-select">
|
||||
<option value="up">50개</option>
|
||||
<option value="down">100개</option>
|
||||
</SelectInput>
|
||||
<Button theme="line" text="엑셀 다운로드" />
|
||||
</ListOption>
|
||||
</TableInfo>
|
||||
<TableWrapper>
|
||||
<TableStyle>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="150">일자</th>
|
||||
<th width="200">아바타명</th>
|
||||
<th width="300">GUID</th>
|
||||
<th width="100">액션</th>
|
||||
<th width="150">획득/소진경로</th>
|
||||
<th width="200">아이템명</th>
|
||||
<th width="200">시리얼 넘버</th>
|
||||
<th width="200">고유코드</th>
|
||||
<th width="80">개수</th>
|
||||
<th width="300">거래 key</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mokupData.map((data, index) => (
|
||||
<Fragment key={index}>
|
||||
<tr>
|
||||
<td>{new Date(data.date).toLocaleString()}</td>
|
||||
<td>{data.name}</td>
|
||||
<td>{data.id}</td>
|
||||
<td>{data.action}</td>
|
||||
<td>{data.route}</td>
|
||||
<td>{data.itemName}e</td>
|
||||
<td>{data.serialNumber}</td>
|
||||
<td>{data.itemCode}</td>
|
||||
<td>{data.count}</td>
|
||||
<td>{data.key}</td>
|
||||
</tr>
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</TableWrapper>
|
||||
<Pagination />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const GoodsLogContent = () => {
|
||||
const mokupData = [
|
||||
{
|
||||
date: '2023-08-05 12:11:32',
|
||||
name: '홍길동',
|
||||
id: '16CD2ECD-4798-46CE-9B6B-F952CF11F196',
|
||||
gold: '99800',
|
||||
blue: '400',
|
||||
black: '500',
|
||||
red: '500',
|
||||
action: '소진',
|
||||
location: '유저 거래',
|
||||
goldchange: '-',
|
||||
bluechange: '-100',
|
||||
blackchange: '-',
|
||||
redchange: '-',
|
||||
key: 'User_trade_key',
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<GoodsLogSearchBar />
|
||||
<TableInfo>
|
||||
<ListCount>총 : 117건 / 000 건</ListCount>
|
||||
<ListOption>
|
||||
<SelectInput name="" id="" className="input-select">
|
||||
<option value="up">오름차순</option>
|
||||
<option value="down">내림차순</option>
|
||||
</SelectInput>
|
||||
<SelectInput name="" id="" className="input-select">
|
||||
<option value="up">50개</option>
|
||||
<option value="down">100개</option>
|
||||
</SelectInput>
|
||||
<Button theme="line" text="엑셀 다운로드" />
|
||||
</ListOption>
|
||||
</TableInfo>
|
||||
<TableWrapper>
|
||||
<TableStyle>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="150">일자</th>
|
||||
<th width="200">아바타명</th>
|
||||
<th width="300">GUID</th>
|
||||
<th width="100">
|
||||
(Total)
|
||||
<br />
|
||||
골드
|
||||
</th>
|
||||
<th width="100">
|
||||
(Total)
|
||||
<br />
|
||||
사파이어
|
||||
</th>
|
||||
<th width="100">
|
||||
(Total)
|
||||
<br />
|
||||
칼리움
|
||||
</th>
|
||||
<th width="100">
|
||||
(Total)
|
||||
<br />
|
||||
오닉시움
|
||||
</th>
|
||||
<th width="80">액션</th>
|
||||
<th width="100">획득 / 소진처</th>
|
||||
<th width="100">
|
||||
(변화량)
|
||||
<br />
|
||||
골드
|
||||
</th>
|
||||
<th width="100">
|
||||
(변화량)
|
||||
<br />
|
||||
사파이어
|
||||
</th>
|
||||
<th width="100">
|
||||
(변화량)
|
||||
<br />
|
||||
칼리움
|
||||
</th>
|
||||
<th width="100">
|
||||
(변화량)
|
||||
<br />
|
||||
오닉시움
|
||||
</th>
|
||||
<th width="300">거래 Key</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mokupData.map((data, index) => (
|
||||
<Fragment key={index}>
|
||||
<tr>
|
||||
<td>{new Date(data.date).toLocaleString()}</td>
|
||||
<td>{data.name}</td>
|
||||
<td>{data.id}</td>
|
||||
<td>{data.gold}</td>
|
||||
<td>{data.blue}</td>
|
||||
<td>{data.black}</td>
|
||||
<td>{data.red}</td>
|
||||
<td>{data.action}</td>
|
||||
<td>{data.location}</td>
|
||||
<td>{data.goldchange}</td>
|
||||
{/* 변화량 0보다 작을 경우 StateDecrease 적용 */}
|
||||
<td>
|
||||
<StateDecrease>{data.bluechange}</StateDecrease>
|
||||
</td>
|
||||
<td>{data.blackchange}</td>
|
||||
<td>{data.redchange}</td>
|
||||
<td>{data.key}</td>
|
||||
</tr>
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</TableWrapper>
|
||||
<Pagination />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const TradeLogContent = () => {
|
||||
const mokupData = [
|
||||
{
|
||||
date: '2023-08-05 12:11:32',
|
||||
name: '홍길동',
|
||||
trader: '칼리버스',
|
||||
id: '16CD2ECD-4798-46CE-9B6B-F952CF11F196',
|
||||
key: 'User_trade_key',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<TradeLogSerchBar />
|
||||
<TableInfo>
|
||||
<ListCount>
|
||||
총 : 117건 / <span>000</span> 건
|
||||
</ListCount>
|
||||
<ListOption>
|
||||
<SelectInput name="" id="" className="input-select">
|
||||
<option value="up">오름차순</option>
|
||||
<option value="down">내림차순</option>
|
||||
</SelectInput>
|
||||
<SelectInput name="" id="" className="input-select">
|
||||
<option value="up">50개</option>
|
||||
<option value="down">100개</option>
|
||||
</SelectInput>
|
||||
<Button theme="line" text="엑셀 다운로드" />
|
||||
</ListOption>
|
||||
</TableInfo>
|
||||
<TableWrapper>
|
||||
<TableStyle>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="150">일자</th>
|
||||
<th width="150">조회 아바타명</th>
|
||||
<th width="150">거래 대상 아바타명</th>
|
||||
<th width="300">거래 대상 GUID</th>
|
||||
<th width="300">거래 Key</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mokupData.map((data, index) => (
|
||||
<Fragment key={index}>
|
||||
<tr>
|
||||
<td>{new Date(data.date).toLocaleString()}</td>
|
||||
<td>{data.name}</td>
|
||||
<td>{data.trader}</td>
|
||||
<td>{data.id}</td>
|
||||
<td>{data.key}</td>
|
||||
</tr>
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</TableWrapper>
|
||||
<Pagination />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const GameLogView = () => {
|
||||
const navigate = useNavigate();
|
||||
const userInfo = useRecoilValue(authList);
|
||||
const [activeTab, setActiveTab] = useState('itemlog');
|
||||
|
||||
const handleTab = (e, content) => {
|
||||
e.preventDefault();
|
||||
setActiveTab(content);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 14) ? (
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={'view'}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={() => navigate(-1)} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">
|
||||
해당 메뉴에 대한 조회 권한이 없습니다.
|
||||
<br />
|
||||
권한 등급을 변경 후 다시 이용해주세요.
|
||||
</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={() => navigate(-1)} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
) : (
|
||||
<>
|
||||
<Title>게임로그조회</Title>
|
||||
<TabWrapper>
|
||||
<li>
|
||||
<TabItem $state={activeTab === 'itemlog' ? 'active' : 'none'} onClick={e => handleTab(e, 'itemlog')}>
|
||||
아이템 로그
|
||||
</TabItem>
|
||||
</li>
|
||||
<li>
|
||||
<TabItem $state={activeTab === 'goodslog' ? 'active' : 'none'} onClick={e => handleTab(e, 'goodslog')}>
|
||||
재화 로그
|
||||
</TabItem>
|
||||
</li>
|
||||
<li>
|
||||
<TabItem $state={activeTab === 'tradelog' ? 'active' : 'none'} onClick={e => handleTab(e, 'tradelog')}>
|
||||
거래 로그
|
||||
</TabItem>
|
||||
</li>
|
||||
</TabWrapper>
|
||||
{activeTab === 'itemlog' && <ItemLogContent />}
|
||||
{activeTab === 'goodslog' && <GoodsLogContent />}
|
||||
{activeTab === 'tradelog' && <TradeLogContent />}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GameLogView;
|
||||
|
||||
const TabItem = styled(Link)`
|
||||
display: inline-flex;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f9f9f9;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
&:hover {
|
||||
background: #888;
|
||||
color: #fff;
|
||||
}
|
||||
${props =>
|
||||
props.$state === 'active' &&
|
||||
`
|
||||
background: #888;
|
||||
color: #fff;`}
|
||||
`;
|
||||
|
||||
const TabWrapper = styled.ul`
|
||||
display: flex;
|
||||
li:first-child {
|
||||
${TabItem} {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const TableWrapper = styled.div`
|
||||
width: 100%;
|
||||
min-width: 680px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
${TableStyle} {
|
||||
width: 100%;
|
||||
min-width: max-content;
|
||||
}
|
||||
`;
|
||||
|
||||
const StateDecrease = styled.span`
|
||||
color: #d60000;
|
||||
`;
|
||||
Reference in New Issue
Block a user