390 lines
9.7 KiB
JavaScript
390 lines
9.7 KiB
JavaScript
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;
|
|
`;
|