bcjang/operationSystem-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

component 정리

Browse Source 
currencyLogSearchBar 생성
currencyLogCOntent 생성
excelExportButton api호출 방식 수정
This commit is contained in:
bcjang
2025-06-12 14:08:11 +09:00
parent dc7934d906
commit 6f9f0307ac
52 changed files with 791 additions and 1143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/components/DataManage/CreditLogSearchBar.js
View File

@@ -1,198 +0,0 @@
import { styled } from 'styled-components';
import { useState } from 'react';
import Button from '../../components/common/button/Button';
import DatePicker, { registerLocale } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { getMonth, getYear } from 'date-fns';
import range from 'lodash/range';
import { TextInput, SelectInput, DatePickerWrapper, InputLabel, BtnWrapper } from '../../styles/Components';
const GoodsLogSearchBar = () => {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const [selectData, setSelectData] = useState('default');
const years = range(1990, getYear(new Date()) + 1, 1);
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
const handleChange = e => {
setSelectData(e.target.value);
};
return (
<>
<SearchbarStyle2>
<SearchRow>
<SearchItem>
<InputLabel>조회 기간</InputLabel>
<DatePickerWrapper>
<InputGroup>
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
className="datepicker"
placeholderText="검색기간 선택"
calendarClassName="calendar"
dateFormat="yyyy - MM - dd"
locale="ko"
renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
<div className="calendar-top">
<button
className="btn-prev"
onClick={e => {
e.preventDefault();
decreaseMonth();
}}
disabled={prevMonthButtonDisabled}></button>
<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
{years.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
.
<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
{months.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button
className="btn-next"
onClick={e => {
e.preventDefault();
increaseMonth();
}}
disabled={nextMonthButtonDisabled}></button>
</div>
)}
/>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
</InputGroup>
<span>~</span>
<InputGroup>
<DatePicker
selected={endDate}
onChange={date => setEndDate(date)}
className="datepicker"
placeholderText="검색기간 선택"
calendarClassName="calendar"
dateFormat="yyyy - MM - dd"
minDate = {startDate}
locale="ko"
renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
<div className="calendar-top">
<button
className="btn-prev"
onClick={e => {
e.preventDefault();
decreaseMonth();
}}
disabled={prevMonthButtonDisabled}></button>
<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
{years.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
.
<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
{months.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button
className="btn-next"
onClick={e => {
e.preventDefault();
increaseMonth();
}}
disabled={nextMonthButtonDisabled}></button>
</div>
)}
/>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
</InputGroup>
</DatePickerWrapper>
</SearchItem>
</SearchRow>
<SearchRow>
<SearchItem>
<InputLabel>조회 대상</InputLabel>
<TextInput type="text" placeholder="조회 대상 유저의 GUID를 입력하세요." width="600px" />
</SearchItem>
<BtnWrapper $gap="8px">
<Button theme="reset" />
<Button theme="gray" text="검색" />
</BtnWrapper>
</SearchRow>
</SearchbarStyle2>
</>
);
};
export default GoodsLogSearchBar;
const SearchbarStyle = styled.div`
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 20px 0;
font-size: 14px;
padding: 20px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin-bottom: 40px;
`;
const SearchbarStyle2 = styled(SearchbarStyle)`
flex-flow: column;
gap: 20px;
`;
const SearchRow = styled.div`
display: flex;
flex-wrap: wrap;
gap: 20px 0;
`;
const InputGroup = styled.div`
display: flex;
align-items: center;
gap: 5px;
`;
const SearchItem = styled.div`
display: flex;
align-items: center;
gap: 20px;
margin-right: 50px;
${TextInput}, ${SelectInput} {
height: 35px;
}
${TextInput} {
padding: 0 10px;
max-width: 400px;
}
`;

172
src/components/DataManage/CurrencyLogContent.js Normal file
View File

@@ -0,0 +1,172 @@
import React, { Fragment, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
import {
CircularProgressWrapper,
DownloadContainer,
FormWrapper,
TableStyle,
TableWrapper,
} from '../../styles/Components';
import { amountDeltaType, CurrencyType } from '../../assets/data';
import { useTranslation } from 'react-i18next';
import { numberFormatter } from '../../utils';
import { TableSkeleton } from '../Skeleton/TableSkeleton';
import { useAlert } from '../../context/AlertProvider';
import { useLoading } from '../../context/LoadingProvider';
import { alertTypes } from '../../assets/data/types';
import { CurrencyLogSearchBar, useCurrencyLogSearch } from '../searchBar';
import { TopButton, ViewTableInfo } from '../common';
import Pagination from '../common/Pagination/Pagination';
import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
import ExcelExportButton from '../common/button/ExcelExportButton';
import CircularProgress from '../common/CircularProgress';
import { GameCurrencyLogExport } from '../../apis';
const CurrencyLogContent = ({ userInfo }) => {
const { t } = useTranslation();
const token = sessionStorage.getItem('token');
const {showModal, showToast} = useAlert();
const {withLoading} = useLoading();
const tableRef = useRef(null);
const [downloadState, setDownloadState] = useState({
loading: false,
progress: 0
});
const {
searchParams,
loading: dataLoading,
data: dataList,
handleSearch,
handleReset,
handlePageChange,
handleOrderByChange,
handlePageSizeChange,
updateSearchParams
} = useCurrencyLogSearch(token, 500);
const tableHeaders = useMemo(() => {
return [
// { id: 'logDay', label: '일자', width: '120px' },
{ id: 'logTime', label: '일시', width: '120px' },
{ id: 'accountId', label: 'account ID', width: '80px' },
{ id: 'userGuid', label: 'GUID', width: '200px' },
{ id: 'userNickname', label: '아바타명', width: '150px' },
{ id: 'tranId', label: '트랜잭션 ID', width: '200px' },
{ id: 'action', label: '액션', width: '150px' },
{ id: 'currencyType', label: '재화종류', width: '120px' },
{ id: 'amountDeltaType', label: '증감유형', width: '120px' },
{ id: 'deltaAmount', label: '수량', width: '120px' },
// { id: 'deltaAmount', label: '수량원본', width: '120px' },
];
}, []);
const handleSubmit = async (type, param = null) => {
let params = {};
switch (type) {
case "gmLevelChangeSubmit":
showModal('USER_GM_CHANGE', {
type: alertTypes.confirm,
onConfirm: () => handleSubmit('gmLevelChange', param)
});
break;
case "userKickSubmit":
showModal('USER_KICK_CONFIRM', {
type: alertTypes.confirm,
onConfirm: () => handleSubmit('userKick')
});
break;
}
}
return (
<>
<FormWrapper>
<CurrencyLogSearchBar
searchParams={searchParams}
onSearch={(newParams, executeSearch = true) => {
if (executeSearch) {
handleSearch(newParams);
} else {
updateSearchParams(newParams);
}
}}
onReset={handleReset}
/>
</FormWrapper>
<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all}>
<ExcelExportButton
functionName="GameCurrencyLogExport"
params={searchParams}
fileName={t('FILE_GAME_LOG_CURRENCY')}
onLoadingChange={setDownloadState}
dataSize={dataList?.total_all}
/>
{downloadState.loading && (
<CircularProgressWrapper>
<CircularProgress
progress={downloadState.progress}
size={36}
progressColor="#4A90E2"
/>
</CircularProgressWrapper>
)}
</ViewTableInfo>
{dataLoading ? <TableSkeleton width='100%' count={15} /> :
<>
<TableWrapper>
<TableStyle ref={tableRef}>
<thead>
<tr>
{tableHeaders.map(header => (
<th key={header.id} width={header.width}>{header.label}</th>
))}
</tr>
</thead>
<tbody>
{dataList?.currency_detail_list?.map((item, index) => (
<Fragment key={index}>
<tr>
<td>{item.logTime}</td>
<td>{item.accountId}</td>
<td>{item.userGuid}</td>
<td>{item.userNickname}</td>
<td>{item.tranId}</td>
<td>{item.action}</td>
<td>{CurrencyType.find(data => data.value === item.currencyType)?.name}</td>
<td>{amountDeltaType.find(data => data.value === item.amountDeltaType)?.name}</td>
<td>{numberFormatter.formatCurrency(item.deltaAmount)}</td>
{/*<td>{item.deltaAmount}</td>*/}
</tr>
</Fragment>
))}
</tbody>
</TableStyle>
</TableWrapper>
{dataList?.currency_detail_list &&
<Pagination
postsPerPage={searchParams.page_size}
totalPosts={dataList?.total_all}
setCurrentPage={handlePageChange}
currentPage={searchParams.page_no}
pageLimit={INITIAL_PAGE_LIMIT}
/>
}
<TopButton />
</>
}
</>
);
};
export default CurrencyLogContent;
const StatusCell = styled.td`
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
`;

219
src/components/DataManage/ItemLogSearchBar.js
View File

@@ -1,219 +0,0 @@
import { useState } from 'react';
import { styled } from 'styled-components';
import RadioInput from '../common/input/Radio';
import Button from '../common/button/Button';
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 { TextInput, SelectInput, DatePickerWrapper, InputLabel, BtnWrapper } from '../../styles/Components';
const ItemLogSearchBar = () => {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const [selectData, setSelectData] = useState('default');
const years = range(1990, getYear(new Date()) + 1, 1);
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
const handleChange = e => {
setSelectData(e.target.value);
};
return (
<>
<SearchbarStyle2>
<SearchRow>
<RadioGroup>
<RadioInput label="기본 조회" id="single" name="receiver" value="default" fontWeight="600" checked={selectData === 'default'} handleChange={handleChange} />
<RadioInput label="아이템 소유자 추적" id="multi" name="receiver" value="item" fontWeight="600" checked={selectData === 'item'} handleChange={handleChange} />
</RadioGroup>
</SearchRow>
<SearchRow>
<SearchItem>
<InputLabel>조회 기간</InputLabel>
<DatePickerWrapper>
<InputGroup>
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
className="datepicker"
placeholderText="검색기간 선택"
calendarClassName="calendar"
dateFormat="yyyy - MM - dd"
locale="ko"
renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
<div className="calendar-top">
<button
className="btn-prev"
onClick={e => {
e.preventDefault();
decreaseMonth();
}}
disabled={prevMonthButtonDisabled}></button>
<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
{years.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
.
<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
{months.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button
className="btn-next"
onClick={e => {
e.preventDefault();
increaseMonth();
}}
disabled={nextMonthButtonDisabled}></button>
</div>
)}
/>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
</InputGroup>
<span>~</span>
<InputGroup>
<DatePicker
selected={endDate}
onChange={date => setEndDate(date)}
className="datepicker"
placeholderText="검색기간 선택"
calendarClassName="calendar"
dateFormat="yyyy - MM - dd"
minDate = {startDate}
locale="ko"
renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
<div className="calendar-top">
<button
className="btn-prev"
onClick={e => {
e.preventDefault();
decreaseMonth();
}}
disabled={prevMonthButtonDisabled}></button>
<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
{years.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
.
<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
{months.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button
className="btn-next"
onClick={e => {
e.preventDefault();
increaseMonth();
}}
disabled={nextMonthButtonDisabled}></button>
</div>
)}
/>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
</InputGroup>
</DatePickerWrapper>
</SearchItem>
</SearchRow>
<SearchRow>
{selectData === 'default' ? (
<SearchItem>
<InputLabel>조회 대상</InputLabel>
<TextInput type="text" placeholder="조회 대상 유저의 GUID를 입력하세요." width="600px" />
</SearchItem>
) : (
<SearchItem>
<InputLabel>아이템 ID</InputLabel>
<TextInput type="text" placeholder="아이템의 GUID를 입력하세요." width="600px" />
</SearchItem>
)}
<BtnWrapper $gap="8px">
<Button theme="reset" />
<Button theme="gray" text="검색" />
</BtnWrapper>
</SearchRow>
</SearchbarStyle2>
</>
);
};
export default ItemLogSearchBar;
const SearchbarStyle = styled.div`
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 20px 0;
font-size: 14px;
padding: 20px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin-bottom: 40px;
`;
const SearchbarStyle2 = styled(SearchbarStyle)`
flex-flow: column;
gap: 20px;
`;
const SearchRow = styled.div`
display: flex;
flex-wrap: wrap;
gap: 20px 0;
`;
const InputGroup = styled.div`
display: flex;
align-items: center;
gap: 5px;
`;
const RadioGroup = styled(InputGroup)`
gap: 30px;
height: 35px;
`;
const SearchItem = styled.div`
display: flex;
align-items: center;
gap: 20px;
margin-right: 50px;
${TextInput}, ${SelectInput} {
height: 35px;
}
${TextInput} {
padding: 0 10px;
max-width: 400px;
}
`;

198
src/components/DataManage/TradeLogSearchBar.js
View File

@@ -1,198 +0,0 @@
import { styled } from 'styled-components';
import { useState } from 'react';
import Button from '../../components/common/button/Button';
import DatePicker, { registerLocale } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { getMonth, getYear } from 'date-fns';
import range from 'lodash/range';
import { TextInput, SelectInput, DatePickerWrapper, InputLabel, BtnWrapper } from '../../styles/Components';
const TradeLogSerchBar = () => {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const [selectData, setSelectData] = useState('default');
const years = range(1990, getYear(new Date()) + 1, 1);
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
const handleChange = e => {
setSelectData(e.target.value);
};
return (
<>
<SearchbarStyle2>
<SearchRow>
<SearchItem>
<InputLabel>조회 기간</InputLabel>
<DatePickerWrapper>
<InputGroup>
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
className="datepicker"
placeholderText="검색기간 선택"
calendarClassName="calendar"
dateFormat="yyyy - MM - dd"
locale="ko"
renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
<div className="calendar-top">
<button
className="btn-prev"
onClick={e => {
e.preventDefault();
decreaseMonth();
}}
disabled={prevMonthButtonDisabled}></button>
<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
{years.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
.
<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
{months.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button
className="btn-next"
onClick={e => {
e.preventDefault();
increaseMonth();
}}
disabled={nextMonthButtonDisabled}></button>
</div>
)}
/>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
</InputGroup>
<span>~</span>
<InputGroup>
<DatePicker
selected={endDate}
onChange={date => setEndDate(date)}
className="datepicker"
placeholderText="검색기간 선택"
calendarClassName="calendar"
dateFormat="yyyy - MM - dd"
minDate = {startDate}
locale="ko"
renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
<div className="calendar-top">
<button
className="btn-prev"
onClick={e => {
e.preventDefault();
decreaseMonth();
}}
disabled={prevMonthButtonDisabled}></button>
<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
{years.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
.
<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
{months.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button
className="btn-next"
onClick={e => {
e.preventDefault();
increaseMonth();
}}
disabled={nextMonthButtonDisabled}></button>
</div>
)}
/>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
<SelectInput>
<option value="">00</option>
<option value="">01</option>
</SelectInput>
</InputGroup>
</DatePickerWrapper>
</SearchItem>
</SearchRow>
<SearchRow>
<SearchItem>
<InputLabel>조회 대상</InputLabel>
<TextInput type="text" placeholder="조회 대상 유저의 GUID를 입력하세요." width="600px" />
</SearchItem>
<BtnWrapper $gap="8px">
<Button theme="reset" />
<Button theme="gray" text="검색" />
</BtnWrapper>
</SearchRow>
</SearchbarStyle2>
</>
);
};
export default TradeLogSerchBar;
const SearchbarStyle = styled.div`
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 20px 0;
font-size: 14px;
padding: 20px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin-bottom: 40px;
`;
const SearchbarStyle2 = styled(SearchbarStyle)`
flex-flow: column;
gap: 20px;
`;
const SearchRow = styled.div`
display: flex;
flex-wrap: wrap;
gap: 20px 0;
`;
const InputGroup = styled.div`
display: flex;
align-items: center;
gap: 5px;
`;
const SearchItem = styled.div`
display: flex;
align-items: center;
gap: 20px;
margin-right: 50px;
${TextInput}, ${SelectInput} {
height: 35px;
}
${TextInput} {
padding: 0 10px;
max-width: 400px;
}
`;

412
src/components/IndexManage/CreditContent.js
View File

@@ -1,312 +1,148 @@
import { useEffect, useState } from 'react';
import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import { CurrencyIndexExport, CurrencyIndexView } from '../../apis';
import { SelectInput, TableStyle, TableInfo, ListOption, InputLabel } from '../../styles/Components';
import {
SelectInput,
TableStyle,
TableInfo,
ListOption,
InputLabel,
FormWrapper,
DownloadContainer, TableWrapper,
} from '../../styles/Components';
import CreditSeacrhBar from '../../components/IndexManage/CreditSearchBar';
import { CreditSearchBar, CurrencyLogSearchBar, useCurrencyLogSearch } from '../searchBar';
import { uniqBy } from 'lodash';
import { sumBy } from 'lodash';
import { TopButton, ViewTableInfo } from '../common';
import { TableSkeleton } from '../Skeleton/TableSkeleton';
import { amountDeltaType, CurrencyType } from '../../assets/data';
import { numberFormatter } from '../../utils';
import Pagination from '../common/Pagination/Pagination';
import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
import { useAlert } from '../../context/AlertProvider';
import { useLoading } from '../../context/LoadingProvider';
import { alertTypes } from '../../assets/data/types';
const CreditContent = () => {
const token = sessionStorage.getItem('token');
let d = new Date();
const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
const END_DATE = new Date();
const CURRENCY_LIST = [
{ "key": "Gold", "name": "골드" },
{ "key": "Sapphire", "name": "사파이어" },
{ "key": "Calium", "name": "칼리움" },
{ "key": "Onyxium", "name": "오닉시움" }
];
const {showModal, showToast} = useAlert();
const {withLoading} = useLoading();
const tableRef = useRef(null);
const [sendDate, setSendDate] = useState(START_DATE);
const [finishDate, setFinishDate] = useState(END_DATE);
const [currencyType, setCurrencyType] = useState('Gold');
const [currencyText, setCurrencyText] = useState('골드');
const {
searchParams,
loading: dataLoading,
data: dataList,
handleSearch,
handleReset,
handlePageChange,
handleOrderByChange,
handlePageSizeChange,
updateSearchParams
} = useCurrencyLogSearch(token, 500);
const [dataList, setDataList] = useState([]);
const [routeData, setRouteData] = useState([]);
const tableHeaders = useMemo(() => {
return [
// { id: 'logDay', label: '일자', width: '120px' },
{ id: 'logTime', label: '일시', width: '120px' },
{ id: 'accountId', label: 'account ID', width: '80px' },
{ id: 'userGuid', label: 'GUID', width: '200px' },
{ id: 'userNickname', label: '아바타명', width: '150px' },
{ id: 'tranId', label: '트랜잭션 ID', width: '200px' },
{ id: 'action', label: '액션', width: '150px' },
{ id: 'currencyType', label: '재화종류', width: '120px' },
{ id: 'amountDeltaType', label: '증감유형', width: '120px' },
{ id: 'deltaAmount', label: '수량', width: '120px' },
];
}, []);
const handleSubmit = async (type, param = null) => {
let params = {};
useEffect(() => {
fetchData(sendDate, finishDate, currencyType);
}, [currencyType]);
switch (type) {
case "gmLevelChangeSubmit":
showModal('USER_GM_CHANGE', {
type: alertTypes.confirm,
onConfirm: () => handleSubmit('gmLevelChange', param)
});
break;
const fetchData = async (startDate, endDate) => {
const newStartDate = new Date(startDate);
const newEndDate = new Date(endDate);
case "userKickSubmit":
showModal('USER_KICK_CONFIRM', {
type: alertTypes.confirm,
onConfirm: () => handleSubmit('userKick')
});
break;
const startDateToLocal =
newStartDate.getFullYear() +
'-' +
(newStartDate.getMonth() + 1 < 9 ? '0' + (newStartDate.getMonth() + 1) : newStartDate.getMonth() + 1) +
'-' +
(newStartDate.getDate() < 9 ? '0' + newStartDate.getDate() : newStartDate.getDate());
const endDateToLocal =
newEndDate.getFullYear() +
'-' +
(newEndDate.getMonth() + 1 < 9 ? '0' + (newEndDate.getMonth() + 1) : newEndDate.getMonth() + 1) +
'-' +
(newEndDate.getDate() < 9 ? '0' + newEndDate.getDate() : newEndDate.getDate());
setDataList(await CurrencyIndexView(token, startDateToLocal, endDateToLocal, currencyType));
setSendDate(startDateToLocal);
setFinishDate(endDateToLocal);
setRoutArray(await CurrencyIndexView(token, startDateToLocal, endDateToLocal, currencyType));
};
const handleCurrencyChange = e => {
let value = e.target.value;
setCurrencyType(value);
CURRENCY_LIST.filter(data => data.key === value).map(data => {
setCurrencyText(data.name);
});
};
//route data
const setRoutArray = async (data) => {
let routeArray = [];
let routeAcqArr = [];
let routeConArr = [];
//생산량 route
data.list && data.list[0].daily_data.filter(routeData => routeData.delta_type === 'ACQUIRE').map(routeData => {
routeData.data.map(routeData => {
if(!routeAcqArr.includes(routeData.route) ){
routeAcqArr.push(routeData.route);
}
})
});
routeArray.ACQUIRE = routeAcqArr;
//소진량 route
data.list && data.list[0].daily_data.filter(routeData => routeData.delta_type === 'CONSUME').map(routeData => {
routeData.data.map(routeData => {
if(!routeConArr.includes(routeData.route) ){
routeConArr.push(routeData.route);
}
})
});
routeArray.CONSUME = routeConArr;
setRouteData(routeArray);
};
// 엑셀 다운로드
const handleXlsxExport = () => {
const fileName = 'Caliverse_Credit_Index.xlsx';
CurrencyIndexExport(token, fileName, sendDate, finishDate, currencyType);
};
}
}
return (
<>
<CreditSeacrhBar fetchData={fetchData} />
<TableInfo2>
<SelectInput onChange={handleCurrencyChange}>
{CURRENCY_LIST.map((item, index) => (
<option value={item.key} key={index}>
{item.name}
</option>
))}
</SelectInput>
<ListOption>
<Button theme="line" text="엑셀 다운로드" handleClick={handleXlsxExport} />
</ListOption>
</TableInfo2>
<TableWrapper>
<EconomicTable>
<thead>
<tr>
<th colSpan="2" className="text-center" width="300">
Product
</th>
{dataList.list && uniqBy(dataList.list, 'date').map(data =>
<th width="160" key={data.date}>{data.date}</th>
)}
</tr>
</thead>
<tbody>
<tr>
<TableTitle colSpan="2">(Total) {currencyText} 생산량</TableTitle>
{dataList.list &&
dataList.list.map((data) =>
(data.total).filter(totalData => data.date === totalData.date && totalData.delta_type === 'ACQUIRE')
.map((totalData, index) => (
<TableData key={index}
$state={totalData.dif !== "" && totalData.dif !== "Infinity" ? "danger" : ""}>
{totalData.quantity}
{
totalData.dif !== "" && totalData.dif !== "Infinity"
? (<span>({totalData.dif})</span>)
: ("")
}
</TableData>
)
))
}
</tr>
<tr>
<TableTitle colSpan="2">(Total) {currencyText} 소진량</TableTitle>
{dataList.list &&
dataList.list.map((data) =>
(data.total).filter(totalData => data.date === totalData.date && totalData.delta_type === 'CONSUME')
.map((totalData, index) => (
<TableData key={index}
$state={totalData.dif !== "" && totalData.dif !== "Infinity" ? "danger" : ""}>
{totalData.quantity}
{
totalData.dif !== "" && totalData.dif !== "Infinity"
? (<span>({totalData.dif})</span>)
: ("")
}
</TableData>
)
))
}
</tr>
<tr>
<TableTitle colSpan="2">(Total) {currencyText} 보유량</TableTitle>
{dataList.list &&
dataList.list.map((data, index) => (
<TableData key={index}>
{sumBy(
data.total.filter(totalData => data.date === totalData.date && totalData.delta_type === 'ACQUIRE'),
'quantity',
) -
sumBy(
data.total.filter(totalData => data.date === totalData.date && totalData.delta_type === 'CONSUME'),
'quantity',
)}
</TableData>
))
}
</tr>
{/* 획득 GET */}
{
routeData.ACQUIRE && routeData.ACQUIRE.map((route, index) => (
<tr key={index}>
<TableTitle>GET</TableTitle>
<TableTitle>{route}</TableTitle>
{dataList.list &&
dataList.list.map((data) =>
data.daily_data.filter(dailyData => data.date === dailyData.date && dailyData.delta_type === 'ACQUIRE')
.map(dailyData => (dailyData.data).filter(routeData => data.date === routeData.date && routeData.route === route)
.map((routeData, i) => (
<TableData key={i} data={routeData.date}>{routeData.quantity}</TableData>
)))
)
}
</tr>
))
<FormWrapper>
<CurrencyLogSearchBar
searchParams={searchParams}
onSearch={(newParams, executeSearch = true) => {
if (executeSearch) {
handleSearch(newParams);
} else {
updateSearchParams(newParams);
}
{/* 소진 USE CONSUME */}
{
routeData.CONSUME && routeData.CONSUME.map((route, index) => (
<tr key={index}>
<TableTitle>USE</TableTitle>
<TableTitle>{route}</TableTitle>
{dataList.list &&
dataList.list.map((data) =>
data.daily_data.filter(dailyData => data.date === dailyData.date && dailyData.delta_type === 'CONSUME')
.map(dailyData => (dailyData.data).filter(routeData => data.date === routeData.date && routeData.route === route)
.map((routeData, i) => (
<TableData key={i} data={routeData.date}>{routeData.quantity}</TableData>
)))
)
}
</tr>
))
}
</tbody>
</EconomicTable>
</TableWrapper>
}}
onReset={handleReset}
/>
</FormWrapper>
<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all}>
<DownloadContainer>
</DownloadContainer>
</ViewTableInfo>
{dataLoading ? <TableSkeleton width='100%' count={15} /> :
<>
<TableWrapper>
<TableStyle ref={tableRef}>
<thead>
<tr>
{tableHeaders.map(header => (
<th key={header.id} width={header.width}>{header.label}</th>
))}
</tr>
</thead>
<tbody>
{dataList?.currency_detail_list?.map((item, index) => (
<Fragment key={index}>
<tr>
<td>{item.logTime}</td>
<td>{item.accountId}</td>
<td>{item.userGuid}</td>
<td>{item.userNickname}</td>
<td>{item.tranId}</td>
<td>{item.action}</td>
<td>{CurrencyType.find(data => data.value === item.currencyType).name}</td>
<td>{amountDeltaType.find(data => data.value === item.amountDeltaType).name}</td>
<td>{numberFormatter.formatCurrency(item.deltaAmount)}</td>
</tr>
</Fragment>
))}
</tbody>
</TableStyle>
</TableWrapper>
{dataList?.currency_detail_list &&
<Pagination
postsPerPage={searchParams.page_size}
totalPosts={dataList?.total_all}
setCurrentPage={handlePageChange}
currentPage={searchParams.page_no}
pageLimit={INITIAL_PAGE_LIMIT}
/>
}
<TopButton />
</>
}
</>
);
};
export default CreditContent;
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: 900px;
th {
&.cell-nru {
background: #f0f0f0;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
}
}
td {
&.blank {
background: #f9f9f9;
}
&.cell-nru {
background: #fafafa;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
}
}
}
`;
const TableInfo2 = styled(TableInfo)`
justify-content: space-between;
${InputLabel} {
font-size: 12px;
}
${SelectInput} {
width: auto;
min-width: 100px;
height: 24px;
}
`;
const TableDate = styled.th`
color: ${props => (props.$state === 'danger' ? '#d60000' : '#2c2c2c')};
`;
const TableData = styled.td`
background: ${props => (props.$state === 'danger' ? '#d60000' : props.$state === 'blank' ? '#F9F9F9' : 'transparent')};
color: ${props => (props.$state === 'danger' ? '#fff' : '#2c2c2c')};
`;
const perData = styled.span`
display: ${props => (props.$view === 'hidden' ? 'none' : 'block')};
`;
const TableTitle = styled.td`
text-align: center;
`;
const EconomicTable = styled(TableStyle)`
${TableData} {
text-align: left;
}
tbody {
tr:nth-child(1),
tr:nth-child(2),
tr:nth-child(3) {
background: #f5fcff;
}
}
`;
export default CreditContent;

2
src/components/IndexManage/DecoContent.js
View File

@@ -1,7 +1,7 @@
import { styled } from 'styled-components';
import { useEffect, useState } from 'react';
import DecoSearchBar from '../../components/IndexManage/DecoSearchBar';
import DecoSearchBar from '../searchBar/DecoSearchBar';
import Button from '../../components/common/button/Button';
import { TableStyle, TableInfo, ListOption } from '../../styles/Components';

2
src/components/IndexManage/InstanceContent.js
View File

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
import { TableStyle, TableInfo, ListOption } from '../../styles/Components';
import Button from '../../components/common/button/Button';
import InstanceSearchBar from '../../components/IndexManage/InstanceSearchBar';
import InstanceSearchBar from '../searchBar/InstanceSearchBar';
import { InstanceIndexExport, InstanceIndexView } from '../../apis';
const InstanceContent = () => {

2
src/components/IndexManage/ItemContent.js
View File

@@ -5,7 +5,7 @@ import Button from '../../components/common/button/Button';
import { SelectInput, TableStyle, TableInfo, ListOption, InputLabel, InputGroup } from '../../styles/Components';
import ItemSearchBar from '../../components/IndexManage/ItemSearchBar';
import ItemSearchBar from '../searchBar/ItemSearchBar';
import { ItemIndexExport, ItemIndexView } from '../../apis';
const ItemContent = () => {

2
src/components/IndexManage/VBPContent.js
View File

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
import { TableStyle, TableInfo, ListOption } from '../../styles/Components';
import Button from '../../components/common/button/Button';
import VBPSearchBar from '../../components/IndexManage/VBPSearchBar';
import VBPSearchBar from '../searchBar/VBPSearchBar';
import { VBPIndexExport, VbpIndexView } from '../../apis';
const VBPContent = () => {

10
src/components/IndexManage/index.js
View File

@@ -1,15 +1,15 @@
import UserIndexSearchBar from "./UserIndexSearchBar";
import RetentionSearchBar from "./RetentionSearchBar";
import SegmentSearchBar from "./SegmentSearchBar";
import UserIndexSearchBar from "../searchBar/UserIndexSearchBar";
import RetentionSearchBar from "../searchBar/RetentionSearchBar";
import SegmentSearchBar from "../searchBar/SegmentSearchBar";
import DailyDashBoard from "./DailyDashBoard";
import PlayTimeSearchBar from "./PlayTimeSearchBar";
import PlayTimeSearchBar from "../searchBar/PlayTimeSearchBar";
import UserContent from "./UserContent";
import PlayTimeContent from "./PlayTimeContent";
import RetentionContent from "./RetentionContent";
import SegmentContent from "./SegmentContent";
import DailyActiveUserContent from "./DailyActiveUserContent";
import DailyMedalContent from "./DailyMedalContent";
import DailySearchBar from "./DailySearchBar";
import DailySearchBar from "../searchBar/DailySearchBar";
export {
UserIndexSearchBar,

46
src/components/ServiceManage/index.js
View File

@@ -1,27 +1,28 @@
import BoardInfoModal from './modal/BoardInfoModal';
import BoardRegistModal from './modal/BoardRegistModal';
import MailDetailModal from './modal/MailDetailModal';
import LandAuctionModal from './modal/LandAuctionModal'
import BattleEventModal from './modal/BattleEventModal'
import ReportListAnswerModal from './modal/ReportListAnswerModal';
import ReportListDetailModal from './modal/ReportListDetailModal';
import UserBlockDetailModal from './modal/UserBlockDetailModal';
import OwnerChangeModal from './modal/OwnerChangeModal';
import BoardInfoModal from '../modal/BoardInfoModal';
import BoardRegistModal from '../modal/BoardRegistModal';
import MailDetailModal from '../modal/MailDetailModal';
import LandAuctionModal from '../modal/LandAuctionModal'
import BattleEventModal from '../modal/BattleEventModal'
import ReportListAnswerModal from '../modal/ReportListAnswerModal';
import ReportListDetailModal from '../modal/ReportListDetailModal';
import UserBlockDetailModal from '../modal/UserBlockDetailModal';
import OwnerChangeModal from '../modal/OwnerChangeModal';
//searchbar
import SearchFilter from './searchBar/SearchFilter';
import ReportListSearchBar from './searchBar/ReportListSearchBar';
import UserBlockSearchBar from './searchBar/UserBlockSearchBar';
import EventListSearchBar from './searchBar/EventListSearchBar';
import LandAuctionSearchBar from './searchBar/LandAuctionSearchBar'
import MailListSearchBar from './searchBar/MailListSearchBar';
import LandInfoSearchBar from './searchBar/LandInfoSearchBar';
import BusinessLogSearchBar from './searchBar/BusinessLogSearchBar';
import DataInitSearchBar from './searchBar/DataInitSearchBar';
import LogViewSearchBar from './searchBar/LogViewSearchBar';
import AdminViewSearchBar from './searchBar/AdminViewSearchBar';
import CaliumRequestSearchBar from './searchBar/CaliumRequestSearchBar';
import SearchFilter from '../searchBar/SearchFilter';
import ReportListSearchBar from '../searchBar/ReportListSearchBar';
import UserBlockSearchBar from '../searchBar/UserBlockSearchBar';
import EventListSearchBar from '../searchBar/EventListSearchBar';
import LandAuctionSearchBar from '../searchBar/LandAuctionSearchBar'
import MailListSearchBar from '../searchBar/MailListSearchBar';
import LandInfoSearchBar from '../searchBar/LandInfoSearchBar';
import BusinessLogSearchBar from '../searchBar/BusinessLogSearchBar';
import DataInitSearchBar from '../searchBar/DataInitSearchBar';
import LogViewSearchBar from '../searchBar/LogViewSearchBar';
import AdminViewSearchBar from '../searchBar/AdminViewSearchBar';
import CaliumRequestSearchBar from '../searchBar/CaliumRequestSearchBar';
import CurrencyLogSearchBar from '../searchBar/CurrencyLogSearchBar';
import CommonSearchBar from './searchBar/CommonSearchBar';
import CommonSearchBar from '../searchBar/CommonSearchBar';
import useCommonSearch from '../../hooks/useCommonSearch';
//etc
@@ -35,6 +36,7 @@ export {
MailListSearchBar,
LandInfoSearchBar,
BusinessLogSearchBar,
CurrencyLogSearchBar,
DataInitSearchBar,
LogViewSearchBar,
AdminViewSearchBar,

6
src/components/common/button/ExcelExportButton.js
View File

@@ -3,8 +3,10 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { BusinessLogExport, getExcelProgress } from '../../../apis/Log';
import { useAlert } from '../../../context/AlertProvider';
import { alertTypes } from '../../../assets/data/types';
import * as APIs from '../../../apis';
import { loadConfig } from '../../../utils';
const ExcelDownloadButton = ({ params, fileName = 'download.xlsx', sheetName = 'Sheet1', onLoadingChange, disabled, dataSize }) => {
const ExcelDownloadButton = ({ functionName, params, fileName = 'download.xlsx', sheetName = 'Sheet1', onLoadingChange, disabled, dataSize }) => {
const token = sessionStorage.getItem('token');
const {showToast} = useAlert();
const [isDownloading, setIsDownloading] = useState(false);
@@ -78,7 +80,7 @@ const ExcelDownloadButton = ({ params, fileName = 'download.xlsx', sheetName = '
}, 1000);
try {
await BusinessLogExport(token, {...params, taskId});
await APIs[functionName](token, {...params, taskId});
setTimeout(async () => {
try {

24
src/components/ServiceManage/modal/BattleEventModal.js → src/components/modal/BattleEventModal.js
View File

@@ -1,12 +1,12 @@
import React, { useState, Fragment, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import Button from '../../common/button/Button';
import Button from '../common/button/Button';
import {
Title,
BtnWrapper,
SearchBarAlert, SelectInput,
} from '../../../styles/Components';
} from '../../styles/Components';
import {
FormInput,
@@ -17,21 +17,21 @@ import {
FormStatusLabel,
FormStatusWarning,
FormButtonContainer,
} from '../../../styles/ModuleComponents';
import { Modal, SingleDatePicker, SingleTimePicker } from '../../common';
import { NONE, TYPE_MODIFY, TYPE_REGISTRY } from '../../../assets/data/adminConstants';
import { convertKTCDate } from '../../../utils';
} from '../../styles/ModuleComponents';
import { Modal, SingleDatePicker, SingleTimePicker } from '../common';
import { NONE, TYPE_MODIFY, TYPE_REGISTRY } from '../../assets/data/adminConstants';
import { convertKTCDate } from '../../utils';
import {
battleEventHotTime,
battleEventRoundCount,
battleEventStatus,
battleRepeatType,
} from '../../../assets/data/options';
import { BattleEventModify, BattleEventSingleRegist } from '../../../apis/Battle';
import { alertTypes, battleEventStatusType } from '../../../assets/data/types';
import { isValidDayRange } from '../../../utils/date';
import { useAlert } from '../../../context/AlertProvider';
import { useLoading } from '../../../context/LoadingProvider';
} from '../../assets/data/options';
import { BattleEventModify, BattleEventSingleRegist } from '../../apis/Battle';
import { alertTypes, battleEventStatusType } from '../../assets/data/types';
import { isValidDayRange } from '../../utils/date';
import { useAlert } from '../../context/AlertProvider';
import { useLoading } from '../../context/LoadingProvider';
const BattleEventModal = ({ modalType, detailView, handleDetailView, content, setDetailData, configData, rewardData }) => {
const { t } = useTranslation();

22
src/components/ServiceManage/modal/BoardInfoModal.js → src/components/modal/BoardInfoModal.js
View File

@@ -1,19 +1,19 @@
import { styled } from 'styled-components';
import { useState, useRef, Fragment, useEffect } from 'react';
import Button from '../../common/button/Button';
import CheckBox from '../../common/input/CheckBox';
import Modal from '../../common/modal/Modal';
import Button from '../common/button/Button';
import CheckBox from '../common/input/CheckBox';
import Modal from '../common/modal/Modal';
import { Title, BtnWrapper, SelectInput, TextInput, DatePickerWrapper, InputLabel, Textarea, ModalText, SearchBarAlert } from '../../../styles/Components';
import CloseIcon from '../../../assets/img/icon/icon-close.png';
import DatePickerComponent from '../../common/Date/DatePickerComponent';
import { HourList, MinuteList } from '../../../assets/data';
import { NoticeModify } from '../../../apis';
import { Title, BtnWrapper, SelectInput, TextInput, DatePickerWrapper, InputLabel, Textarea, ModalText, SearchBarAlert } from '../../styles/Components';
import CloseIcon from '../../assets/img/icon/icon-close.png';
import DatePickerComponent from '../common/Date/DatePickerComponent';
import { HourList, MinuteList } from '../../assets/data';
import { NoticeModify } from '../../apis';
import { useTranslation } from 'react-i18next';
import { convertKTC, convertKTCDate } from '../../../utils';
import { languageType } from '../../../assets/data/options';
import { CopyBtn } from '../../../styles/ModuleComponents';
import { convertKTC, convertKTCDate } from '../../utils';
import { languageType } from '../../assets/data/options';
import { CopyBtn } from '../../styles/ModuleComponents';
const BoardInfoModal = ({ detailView, setDetailView, content, id, setIsCopyData, openRegistModal, userInfo }) => {
let viewOnly = userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 17); // 조회만 가능 권한

24
src/components/ServiceManage/modal/BoardRegistModal.js → src/components/modal/BoardRegistModal.js
View File

@@ -1,17 +1,17 @@
import { styled } from 'styled-components';
import { useState, useRef, Fragment, useEffect } from 'react';
import Button from '../../common/button/Button';
import CheckBox from '../../common/input/CheckBox';
import Modal from '../../common/modal/Modal';
import Button from '../common/button/Button';
import CheckBox from '../common/input/CheckBox';
import Modal from '../common/modal/Modal';
import { Title, BtnWrapper, SelectInput, TextInput, DatePickerWrapper, InputLabel, Textarea, ModalText, SearchBarAlert } from '../../../styles/Components';
import CloseIcon from '../../../assets/img/icon/icon-close.png';
import DatePickerComponent from '../../common/Date/DatePickerComponent';
import { HourList, MinuteList, modalTypes } from '../../../assets/data';
import { NoticeRegist } from '../../../apis';
import { convertKTC, convertKTCDate } from '../../../utils';
import DynamicModal from '../../common/modal/DynamicModal';
import { Title, BtnWrapper, SelectInput, TextInput, DatePickerWrapper, InputLabel, Textarea, ModalText, SearchBarAlert } from '../../styles/Components';
import CloseIcon from '../../assets/img/icon/icon-close.png';
import DatePickerComponent from '../common/Date/DatePickerComponent';
import { HourList, MinuteList, modalTypes } from '../../assets/data';
import { NoticeRegist } from '../../apis';
import { convertKTC, convertKTCDate } from '../../utils';
import DynamicModal from '../common/modal/DynamicModal';
import { useTranslation } from 'react-i18next';
import {
BoxWrapper, InputGroup2,
@@ -20,8 +20,8 @@ import {
NoticeInputRow, NoticeInputRow2,
NoticeRegistGroup,
RegistInputItem, RepeatTime, SubText, SubTextRow, TitleLang,
} from '../../../styles/ModuleComponents';
import { languageType } from '../../../assets/data/options';
} from '../../styles/ModuleComponents';
import { languageType } from '../../assets/data/options';
const BoardRegistModal = ({ registView, setRegistView, copyData, setIsCopyData }) => {
const [doubleSubmitFlag, setDoubleSubmitFlag] = useState(false);

28
src/components/ServiceManage/modal/EventDetailModal.js → src/components/modal/EventDetailModal.js
View File

@@ -1,25 +1,25 @@
import { useState, useEffect, Fragment } from 'react';
import { Title, SelectInput, BtnWrapper, TextInput, Label, InputLabel, Textarea, SearchBarAlert } from '../../../styles/Components';
import Button from '../../common/button/Button';
import Modal from '../../common/modal/Modal';
import { EventIsItem, EventModify } from '../../../apis';
import { Title, SelectInput, BtnWrapper, TextInput, Label, InputLabel, Textarea, SearchBarAlert } from '../../styles/Components';
import Button from '../common/button/Button';
import Modal from '../common/modal/Modal';
import { EventIsItem, EventModify } from '../../apis';
import { authList } from '../../../store/authList';
import { authList } from '../../store/authList';
import { useRecoilValue } from 'recoil';
import { useTranslation } from 'react-i18next';
import { authType, benItems, commonStatus, currencyType } from '../../../assets/data';
import { authType, benItems, commonStatus, currencyItemCode } from '../../assets/data';
import {
AppendRegistBox, AppendRegistTable, AreaBtnClose,
BtnDelete, DetailInputItem, DetailInputRow,
DetailModalWrapper, RegistGroup, DetailRegistInfo, DetailState,
Item, ItemList, LangArea
} from '../../../styles/ModuleComponents';
import { convertKTC, combineDateTime, timeDiffMinute, convertKTCDate } from '../../../utils';
import DateTimeInput from '../../common/input/DateTimeInput';
import { useLoading } from '../../../context/LoadingProvider';
import { useAlert } from '../../../context/AlertProvider';
import { alertTypes } from '../../../assets/data/types';
} from '../../styles/ModuleComponents';
import { convertKTC, combineDateTime, timeDiffMinute, convertKTCDate } from '../../utils';
import DateTimeInput from '../common/input/DateTimeInput';
import { useLoading } from '../../context/LoadingProvider';
import { useAlert } from '../../context/AlertProvider';
import { alertTypes } from '../../assets/data/types';
const EventDetailModal = ({ detailView, handleDetailView, content, setDetailData }) => {
const userInfo = useRecoilValue(authList);
@@ -177,7 +177,7 @@ const EventDetailModal = ({ detailView, handleDetailView, content, setDetailData
const item_cnt = resultData.item_list[itemIndex].item_cnt;
resultData.item_list[itemIndex].item_cnt = Number(item_cnt) + Number(resourceCount);
} else {
const name = currencyType.find(well => well.value === resource).name;
const name = currencyItemCode.find(well => well.value === resource).name;
const newItem = { item: resource, item_cnt: resourceCount, item_name: name };
resultData.item_list.push(newItem);
}
@@ -447,7 +447,7 @@ const EventDetailModal = ({ detailView, handleDetailView, content, setDetailData
<td>
<DetailInputItem>
<SelectInput onChange={e => setResource(e.target.value)} value={resource} disabled={isReadOnly}>
{currencyType.map((data, index) => (
{currencyItemCode.map((data, index) => (
<option key={index} value={data.value}>
{data.name}
</option>

28
src/components/ServiceManage/modal/LandAuctionModal.js → src/components/modal/LandAuctionModal.js
View File

@@ -1,13 +1,13 @@
import { useState, Fragment, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import Button from '../../common/button/Button';
import Loading from '../../common/Loading';
import Button from '../common/button/Button';
import Loading from '../common/Loading';
import {
Title,
BtnWrapper,
SearchBarAlert, SelectInput, InputLabel,
} from '../../../styles/Components';
} from '../../styles/Components';
import {
FormHelperText,
@@ -19,23 +19,23 @@ import {
FormRowGroup,
NoticeInputRow2,
NoticeInputItem2, BoxWrapper, FormStatusBar, FormStatusLabel, FormStatusWarning, FormButtonContainer,
} from '../../../styles/ModuleComponents';
import { modalTypes } from '../../../assets/data';
import {DynamicModal, Modal, DateTimeRangePicker} from '../../common';
import { LandAuctionModify, LandAuctionSingleRegist } from '../../../apis';
} from '../../styles/ModuleComponents';
import { modalTypes } from '../../assets/data';
import {DynamicModal, Modal, DateTimeRangePicker} from '../common';
import { LandAuctionModify, LandAuctionSingleRegist } from '../../apis';
import {
AUCTION_MIN_MINUTE_TIME,
ONE_MINUTE,
ONE_MINUTE_MS,
TYPE_MODIFY,
TYPE_REGISTRY,
} from '../../../assets/data/adminConstants';
import { landAuctionStatus, landAuctionStatusType, languageType, CurrencyType } from '../../../assets/data';
import { useModal } from '../../../hooks/hook';
import { convertKTCDate } from '../../../utils';
import { msToMinutes } from '../../../utils/date';
import { useAlert } from '../../../context/AlertProvider';
import { alertTypes } from '../../../assets/data/types';
} from '../../assets/data/adminConstants';
import { landAuctionStatus, landAuctionStatusType, languageType, CurrencyType } from '../../assets/data';
import { useModal } from '../../hooks/hook';
import { convertKTCDate } from '../../utils';
import { msToMinutes } from '../../utils/date';
import { useAlert } from '../../context/AlertProvider';
import { alertTypes } from '../../assets/data/types';
const LandAuctionModal = ({ modalType, detailView, handleDetailView, content, setDetailData, landData, buildingData }) => {
const { t } = useTranslation();

44
src/components/ServiceManage/modal/MailDetailModal.js → src/components/modal/MailDetailModal.js
View File

@@ -1,16 +1,16 @@
import { styled } from 'styled-components';
import RadioInput from '../../common/input/Radio';
import RadioInput from '../common/input/Radio';
import React, { useState, useEffect, Fragment } from 'react';
import CheckBox from '../../common/input/CheckBox';
import CheckBox from '../common/input/CheckBox';
import { Title, SelectInput, BtnWrapper, TextInput, Label, InputLabel, DatePickerWrapper, Textarea} from '../../../styles/Components';
import Button from '../../common/button/Button';
import Modal from '../../common/modal/Modal';
import { Title, SelectInput, BtnWrapper, TextInput, Label, InputLabel, DatePickerWrapper, Textarea} from '../../styles/Components';
import Button from '../common/button/Button';
import Modal from '../common/modal/Modal';
import IconDelete from '../../../assets/img/icon/icon-delete.png';
import CloseIcon from '../../../assets/img/icon/icon-close.png';
import DatePickerComponent from '../../common/Date/DatePickerComponent';
import MailRegistUploadBtn from '../MailRegistUploadBtn';
import IconDelete from '../../assets/img/icon/icon-delete.png';
import CloseIcon from '../../assets/img/icon/icon-close.png';
import DatePickerComponent from '../common/Date/DatePickerComponent';
import MailRegistUploadBtn from '../ServiceManage/MailRegistUploadBtn';
import {
authType,
benItems, commonStatus,
@@ -18,20 +18,20 @@ import {
mailType,
MinuteList,
userType,
currencyType,
} from '../../../assets/data';
import { MailCaliumTotalView, MailIsItem, MailModify } from '../../../apis';
currencyItemCode,
} from '../../assets/data';
import { MailCaliumTotalView, MailIsItem, MailModify } from '../../apis';
import { authList } from '../../../store/authList';
import { authList } from '../../store/authList';
import { useRecoilValue } from 'recoil';
import { convertKTC, convertKTCDate } from '../../../utils';
import { convertKTC, convertKTCDate } from '../../utils';
import { useNavigate } from 'react-router-dom';
import { useDataFetch } from '../../../hooks/hook';
import { useAlert } from '../../../context/AlertProvider';
import { useLoading } from '../../../context/LoadingProvider';
import { alertTypes, currencyCodeTypes } from '../../../assets/data/types';
import { userType2 } from '../../../assets/data/options';
import { STORAGE_MAIL_COPY } from '../../../assets/data/adminConstants';
import { useDataFetch } from '../../hooks/hook';
import { useAlert } from '../../context/AlertProvider';
import { useLoading } from '../../context/LoadingProvider';
import { alertTypes, currencyCodeTypes } from '../../assets/data/types';
import { userType2 } from '../../assets/data/options';
import { STORAGE_MAIL_COPY } from '../../assets/data/adminConstants';
const MailDetailModal = ({ detailView, handleDetailView, content }) => {
const userInfo = useRecoilValue(authList);
@@ -219,7 +219,7 @@ const MailDetailModal = ({ detailView, handleDetailView, content }) => {
return;
}
}
const name = currencyType.find(well => well.value === resource).name;
const name = currencyItemCode.find(well => well.value === resource).name;
const newItem = { item: resource, item_cnt: resourceCount, item_name: name };
resultData.item_list.push(newItem);
}
@@ -618,7 +618,7 @@ const MailDetailModal = ({ detailView, handleDetailView, content }) => {
<td>
<InputItem>
<SelectInput onChange={e => setResource(e.target.value)} value={resource} disabled={isView}>
{currencyType.map((data, index) => (
{currencyItemCode.map((data, index) => (
<option key={index} value={data.value}>
{data.name}
</option>

26
src/components/ServiceManage/modal/MenuBannerModal.js → src/components/modal/MenuBannerModal.js
View File

@@ -1,13 +1,13 @@
import React, { useState, Fragment, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import Button from '../../common/button/Button';
import Loading from '../../common/Loading';
import Button from '../common/button/Button';
import Loading from '../common/Loading';
import {
Title,
BtnWrapper,
SearchBarAlert, SelectInput,
} from '../../../styles/Components';
} from '../../styles/Components';
import {
FormInput,
@@ -18,21 +18,21 @@ import {
FormStatusLabel,
FormStatusWarning,
FormButtonContainer,
} from '../../../styles/ModuleComponents';
import { modalTypes } from '../../../assets/data';
import { DynamicModal, Modal, SingleDatePicker, SingleTimePicker } from '../../common';
import { NONE, TYPE_MODIFY, TYPE_REGISTRY } from '../../../assets/data/adminConstants';
import { useModal } from '../../../hooks/hook';
import { convertKTCDate } from '../../../utils';
} from '../../styles/ModuleComponents';
import { modalTypes } from '../../assets/data';
import { DynamicModal, Modal, SingleDatePicker, SingleTimePicker } from '../common';
import { NONE, TYPE_MODIFY, TYPE_REGISTRY } from '../../assets/data/adminConstants';
import { useModal } from '../../hooks/hook';
import { convertKTCDate } from '../../utils';
import {
battleEventHotTime,
battleEventRoundCount,
battleEventStatus,
battleRepeatType,
} from '../../../assets/data/options';
import { BattleEventModify, BattleEventSingleRegist } from '../../../apis/Battle';
import { battleEventStatusType } from '../../../assets/data/types';
import { isValidDayRange } from '../../../utils/date';
} from '../../assets/data/options';
import { BattleEventModify, BattleEventSingleRegist } from '../../apis/Battle';
import { battleEventStatusType } from '../../assets/data/types';
import { isValidDayRange } from '../../utils/date';
const MenuBannerModal = ({ modalType, detailView, handleDetailView, content, setDetailData, configData, rewardData }) => {
const { t } = useTranslation();

32
src/components/ServiceManage/modal/OwnerChangeModal.js → src/components/modal/OwnerChangeModal.js
View File

@@ -1,13 +1,13 @@
import React, { useState, Fragment, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import Button from '../../common/button/Button';
import Loading from '../../common/Loading';
import Button from '../common/button/Button';
import Loading from '../common/Loading';
import {
Title,
BtnWrapper,
SearchBarAlert, SelectInput,
} from '../../../styles/Components';
} from '../../styles/Components';
import {
FormInput,
@@ -18,19 +18,19 @@ import {
FormStatusLabel,
FormStatusWarning,
FormButtonContainer, FormGroup, FormItemGroup, SubText,
} from '../../../styles/ModuleComponents';
import { modalTypes } from '../../../assets/data';
import { DynamicModal, Modal, SingleDatePicker, SingleTimePicker } from '../../common';
import { NONE, TYPE_MODIFY, TYPE_REGISTRY } from '../../../assets/data/adminConstants';
import { useModal } from '../../../hooks/hook';
import { convertKTCDate } from '../../../utils';
import { BattleEventModify, BattleEventSingleRegist } from '../../../apis/Battle';
import { alertTypes, battleEventStatusType } from '../../../assets/data/types';
import { isValidDayRange } from '../../../utils/date';
import CheckBox from '../../common/input/CheckBox';
import { LandOwnedChangesRegist, LandOwnerChangesDelete, UserInfoView } from '../../../apis';
import { useLoading } from '../../../context/LoadingProvider';
import { useAlert } from '../../../context/AlertProvider';
} from '../../styles/ModuleComponents';
import { modalTypes } from '../../assets/data';
import { DynamicModal, Modal, SingleDatePicker, SingleTimePicker } from '../common';
import { NONE, TYPE_MODIFY, TYPE_REGISTRY } from '../../assets/data/adminConstants';
import { useModal } from '../../hooks/hook';
import { convertKTCDate } from '../../utils';
import { BattleEventModify, BattleEventSingleRegist } from '../../apis/Battle';
import { alertTypes, battleEventStatusType } from '../../assets/data/types';
import { isValidDayRange } from '../../utils/date';
import CheckBox from '../common/input/CheckBox';
import { LandOwnedChangesRegist, LandOwnerChangesDelete, UserInfoView } from '../../apis';
import { useLoading } from '../../context/LoadingProvider';
import { useAlert } from '../../context/AlertProvider';
const OwnerChangeModal = ({ modalType, detailView, handleDetailView, content, setDetailData }) => {
const { t } = useTranslation();

10
src/components/ServiceManage/modal/ReportListAnswerModal.js → src/components/modal/ReportListAnswerModal.js
View File

@@ -1,12 +1,12 @@
import { useState, useEffect } from 'react';
import { styled } from 'styled-components';
import { Title, BtnWrapper, TextInput, Label, Textarea, InputItem, ModalText, SearchBarAlert } from '../../../styles/Components';
import { Title, BtnWrapper, TextInput, Label, Textarea, InputItem, ModalText, SearchBarAlert } from '../../styles/Components';
import { RepostReplyMessage } from '../../../apis/Report';
import { RepostReplyMessage } from '../../apis/Report';
import Modal from '../../common/modal/Modal';
import Button from '../../common/button/Button';
import CloseIcon from '../../../assets/img/icon/icon-close.png';
import Modal from '../common/modal/Modal';
import Button from '../common/button/Button';
import CloseIcon from '../../assets/img/icon/icon-close.png';
const ReportListAnswerModal = ({ answerView, setAnswerView, detailData, replyData, pkId, skId }) => {
const token = sessionStorage.getItem('token');

8
src/components/ServiceManage/modal/ReportListDetailModal.js → src/components/modal/ReportListDetailModal.js
View File

@@ -1,10 +1,10 @@
import { styled } from 'styled-components';
import { Title, BtnWrapper, TextInput, Label, Textarea, InputItem } from '../../../styles/Components';
import { Title, BtnWrapper, TextInput, Label, Textarea, InputItem } from '../../styles/Components';
import Modal from '../../common/modal/Modal';
import Button from '../../common/button/Button';
import Modal from '../common/modal/Modal';
import Button from '../common/button/Button';
import { useEffect, useState } from 'react';
import { convertKTC } from '../../../utils';
import { convertKTC } from '../../utils';
const ReportListDetailModal = ({ detailView, handleDetailView, handleReply, detailData, replyData, replyAuth }) => {
const [dataList, setDataList] = useState([]);

10
src/components/ServiceManage/modal/UserBlockDetailModal.js → src/components/modal/UserBlockDetailModal.js
View File

@@ -1,11 +1,11 @@
import { Fragment, useEffect, useState } from 'react';
import { styled } from 'styled-components';
import { Title, TableStyle, BtnWrapper, TextInput } from '../../../styles/Components';
import Modal from '../../common/modal/Modal';
import Button from '../../common/button/Button';
import { convertKTC } from '../../../utils';
import { blockPeriod, blockSanctions, blockStatus, blockType, commonStatus } from '../../../assets/data';
import { Title, TableStyle, BtnWrapper, TextInput } from '../../styles/Components';
import Modal from '../common/modal/Modal';
import Button from '../common/button/Button';
import { convertKTC } from '../../utils';
import { blockPeriod, blockSanctions, blockStatus, blockType, commonStatus } from '../../assets/data';
const UserBlockDetailModal = ({ stateModal, handleModal, data }) => {
const [history, setHistory] = useState();

8
src/components/ServiceManage/searchBar/AdminViewSearchBar.js → src/components/searchBar/AdminViewSearchBar.js
View File

@@ -1,9 +1,9 @@
import { styled } from 'styled-components';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../../styles/Components';
import Button from '../../common/button/Button';
import CheckBox from '../../common/input/CheckBox';
import { SearchBarLayout } from '../../common/SearchBar';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../styles/Components';
import Button from '../common/button/Button';
import CheckBox from '../common/input/CheckBox';
import { SearchBarLayout } from '../common/SearchBar';
import { useState } from 'react';
const AdminViewSearchBar = ({ handleSearch, groupList, setResultData, setCurrentPage }) => {

10
src/components/ServiceManage/searchBar/BattleEventSearchBar.js → src/components/searchBar/BattleEventSearchBar.js
View File

@@ -1,15 +1,15 @@
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useCallback, useEffect, useState } from 'react';
import { BattleEventView } from '../../../apis/Battle';
import { BattleEventView } from '../../apis/Battle';
import {
battleEventHotTime,
battleEventRoundCount,
battleEventStatus,
battleRepeatType,
eventSearchType,
} from '../../../assets/data/options';
} from '../../assets/data/options';
export const useBattleEventSearch = (token, initialPageSize) => {
const [searchParams, setSearchParams] = useState({

18
src/components/ServiceManage/searchBar/BusinessLogSearchBar.js → src/components/searchBar/BusinessLogSearchBar.js
View File

@@ -1,11 +1,11 @@
import { TextInput, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useCallback, useEffect, useState } from 'react';
import { logAction, logDomain, userSearchType2 } from '../../../assets/data/options';
import { BusinessLogList } from '../../../apis/Log';
import {SearchFilter} from '../';
import { useAlert } from '../../../context/AlertProvider';
import { alertTypes } from '../../../assets/data/types';
import { logAction, logDomain, userSearchType2 } from '../../assets/data/options';
import { BusinessLogList } from '../../apis/Log';
import {SearchFilter} from '../ServiceManage';
import { useAlert } from '../../context/AlertProvider';
import { alertTypes } from '../../assets/data/types';
export const useBusinessLogSearch = (token, initialPageSize) => {
const {showToast} = useAlert();
@@ -49,14 +49,10 @@ export const useBusinessLogSearch = (token, initialPageSize) => {
try {
setLoading(true);
const start = Date.now();
const result = await BusinessLogList(
token,
params
);
const end = Date.now();
showToast(`처리 시간: ${end - start}ms`, {type: alertTypes.info});
console.log(`처리 시간: ${end - start}ms`);
if(result.result === "ERROR_LOG_MEMORY_LIMIT"){
showToast('LOG_MEMORY_LIMIT_WARNING', {type: alertTypes.error});
}else if(result.result === "ERROR_MONGODB_QUERY"){

8
src/components/ServiceManage/searchBar/CaliumRequestSearchBar.js → src/components/searchBar/CaliumRequestSearchBar.js
View File

@@ -1,8 +1,8 @@
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useState } from 'react';
import { caliumStatus } from '../../../assets/data/options';
import { caliumStatus } from '../../assets/data/options';
const CaliumRequestSearchBar = ({ handleSearch, setResultData }) => {
const [searchData, setSearchData] = useState({

8
src/components/ServiceManage/searchBar/CommonSearchBar.js → src/components/searchBar/CommonSearchBar.js
View File

@@ -1,8 +1,8 @@
import { TextInput, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { Fragment } from 'react';
import { getOptionsArray } from '../../../utils';
import { PageSkeleton } from '../../Skeleton/SearchSkeleton';
import { getOptionsArray } from '../../utils';
import { PageSkeleton } from '../Skeleton/SearchSkeleton';
const renderSearchField = (field, searchParams, onSearch) => {
const { type, id, label, placeholder, width, optionsRef } = field;

2
src/components/IndexManage/CreditSearchBar.js → src/components/searchBar/CreditSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import DatePickerComponent from '../common/Date/DatePickerComponent';
import 'react-datepicker/dist/react-datepicker.css';

191
src/components/searchBar/CurrencyLogSearchBar.js Normal file
View File

@@ -0,0 +1,191 @@
import { TextInput, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useCallback, useEffect, useState } from 'react';
import { userSearchType2 } from '../../assets/data/options';
import { getCurrencyDetailList } from '../../apis/Log';
import { useAlert } from '../../context/AlertProvider';
import { alertTypes } from '../../assets/data/types';
export const useCurrencyLogSearch = (token, initialPageSize) => {
const {showToast} = useAlert();
const [searchParams, setSearchParams] = useState({
search_type: 'GUID',
search_data: '',
tran_id: '',
start_dt: (() => {
const date = new Date();
date.setDate(date.getDate() - 1);
return date;
})(),
end_dt: (() => {
const date = new Date();
date.setDate(date.getDate() - 1);
return date;
})(),
order_by: 'ASC',
page_size: initialPageSize,
page_no: 1
});
const [loading, setLoading] = useState(false);
const [data, setData] = useState(null);
useEffect(() => {
const initialLoad = async () => {
await fetchData(searchParams);
};
initialLoad();
}, [token]);
const fetchData = useCallback(async (params) => {
if (!token) return;
try {
setLoading(true);
const result = await getCurrencyDetailList(
token,
params.search_type,
params.search_data,
params.tran_id,
params.start_dt.toISOString(),
params.end_dt.toISOString(),
params.order_by,
params.page_size,
params.page_no
);
if(result.result === "ERROR_LOG_MEMORY_LIMIT"){
showToast('LOG_MEMORY_LIMIT_WARNING', {type: alertTypes.error});
}else if(result.result === "ERROR_MONGODB_QUERY"){
showToast('LOG_MONGGDB_QUERY_WARNING', {type: alertTypes.error});
}else if(result.result === "ERROR"){
showToast(result.result, {type: alertTypes.error});
}
setData(result.data);
return result.data;
} catch (error) {
showToast('error', {type: alertTypes.error});
throw error;
} finally {
setLoading(false);
}
}, [token]);
const updateSearchParams = useCallback((newParams) => {
setSearchParams(prev => ({
...prev,
...newParams
}));
}, []);
const handleSearch = useCallback(async (newParams = {}, executeSearch = true) => {
const updatedParams = {
...searchParams,
...newParams,
page_no: newParams.page_no || 1 // Reset to first page on new search
};
updateSearchParams(updatedParams);
if (executeSearch) {
return await fetchData(updatedParams);
}
return null;
}, [searchParams, fetchData]);
const handleReset = useCallback(async () => {
const now = new Date();
now.setDate(now.getDate() - 1);
const resetParams = {
search_type: 'GUID',
search_data: '',
tran_id: '',
start_dt: now,
end_dt: now,
order_by: 'ASC',
page_size: initialPageSize,
page_no: 1
};
setSearchParams(resetParams);
return await fetchData(resetParams);
}, [initialPageSize, fetchData]);
const handlePageChange = useCallback(async (newPage) => {
return await handleSearch({ page_no: newPage }, true);
}, [handleSearch]);
const handlePageSizeChange = useCallback(async (newSize) => {
return await handleSearch({ page_size: newSize, page_no: 1 }, true);
}, [handleSearch]);
const handleOrderByChange = useCallback(async (newOrder) => {
return await handleSearch({ order_by: newOrder }, true);
}, [handleSearch]);
return {
searchParams,
loading,
data,
handleSearch,
handleReset,
handlePageChange,
handlePageSizeChange,
handleOrderByChange,
updateSearchParams
};
};
const CurrencyLogSearchBar = ({ searchParams, onSearch, onReset }) => {
const handleSubmit = event => {
event.preventDefault();
onSearch(searchParams, true);
};
const searchList = [
<>
<InputGroup>
<SelectInput value={searchParams.search_type} onChange={e => onSearch({search_type: e.target.value }, false)}>
{userSearchType2.map((data, index) => (
<option key={index} value={data.value}>
{data.name}
</option>
))}
</SelectInput>
<TextInput
type="text"
placeholder={searchParams.search_type === 'GUID' ? 'GUID ID 입력' : searchParams.search_type === 'NICKNAME' ? '아바타명 입력' :'Account ID 입력'}
value={searchParams.search_data}
width="260px"
onChange={e => onSearch({ search_data: e.target.value }, false)}
/>
</InputGroup>
</>,
<>
<InputLabel>트랜잭션 ID</InputLabel>
<TextInput
type="text"
placeholder='트랜잭션 ID 입력'
value={searchParams.tran_id}
width="300px"
onChange={e => onSearch({ tran_id: e.target.value }, false)}
/>
</>,
];
const optionList = [
<>
<InputLabel>일자</InputLabel>
<SearchPeriod
startDate={searchParams.start_dt}
handleStartDate={date => onSearch({ start_dt: date }, false)}
endDate={searchParams.end_dt}
handleEndDate={date => onSearch({ end_dt: date }, false)}
/>
</>,
];
return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={onReset} handleSubmit={handleSubmit} />;
};
export default CurrencyLogSearchBar;

0
src/components/IndexManage/DailySearchBar.js → src/components/searchBar/DailySearchBar.js
View File

10
src/components/ServiceManage/searchBar/DataInitSearchBar.js → src/components/searchBar/DataInitSearchBar.js
View File

@@ -1,9 +1,9 @@
import { InputLabel, TextInput } from '../../../styles/Components';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { InputLabel, TextInput } from '../../styles/Components';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useCallback, useEffect, useState } from 'react';
import { InitHistoryList } from '../../../apis/Data';
import { useAlert } from '../../../context/AlertProvider';
import { alertTypes } from '../../../assets/data/types';
import { InitHistoryList } from '../../apis/Data';
import { useAlert } from '../../context/AlertProvider';
import { alertTypes } from '../../assets/data/types';
export const useDataInitSearch = (token) => {
const {showToast} = useAlert();

2
src/components/IndexManage/DecoSearchBar.js → src/components/searchBar/DecoSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import DatePickerComponent from '../common/Date/DatePickerComponent';

8
src/components/ServiceManage/searchBar/EventListSearchBar.js → src/components/searchBar/EventListSearchBar.js
View File

@@ -1,8 +1,8 @@
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useState } from 'react';
import { eventStatus } from '../../../assets/data';
import { eventStatus } from '../../assets/data';
const EventListSearchBar = ({ handleSearch, setResultData }) => {
const [searchData, setSearchData] = useState({

2
src/components/IndexManage/InstanceSearchBar.js → src/components/searchBar/InstanceSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import DatePickerComponent from '../common/Date/DatePickerComponent';

2
src/components/IndexManage/ItemSearchBar.js → src/components/searchBar/ItemSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import DatePickerComponent from '../common/Date/DatePickerComponent';
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper, InputGroup, DatePickerWrapper } from '../../styles/Components';

10
src/components/ServiceManage/searchBar/LandAuctionSearchBar.js → src/components/searchBar/LandAuctionSearchBar.js
View File

@@ -1,9 +1,9 @@
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useCallback, useEffect, useState } from 'react';
import { LandAuctionView } from '../../../apis';
import { landAuctionStatus, landSearchType, landSize, userType } from '../../../assets/data';
import { LandAuctionView } from '../../apis';
import { landAuctionStatus, landSearchType, landSize, userType } from '../../assets/data';
export const useLandAuctionSearch = (token, initialPageSize) => {
const [searchParams, setSearchParams] = useState({

12
src/components/ServiceManage/searchBar/LandInfoSearchBar.js → src/components/searchBar/LandInfoSearchBar.js
View File

@@ -1,10 +1,10 @@
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useCallback, useEffect, useState } from 'react';
import { LandAuctionView, LandInfoData } from '../../../apis';
import { landAuctionStatus, landSearchType, landSize, opLandCategoryType } from '../../../assets/data';
import { opLandInfoStatusType } from '../../../assets/data/options';
import { LandAuctionView, LandInfoData } from '../../apis';
import { landAuctionStatus, landSearchType, landSize, opLandCategoryType } from '../../assets/data';
import { opLandInfoStatusType } from '../../assets/data/options';
export const useLandInfoSearch = (token, initialPageSize) => {
const [searchParams, setSearchParams] = useState({

2
src/components/DataManage/LandSearchBar.js → src/components/searchBar/LandSearchBar.js
View File

@@ -1,5 +1,5 @@
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper } from '../../styles/Components';

8
src/components/ServiceManage/searchBar/LogViewSearchBar.js → src/components/searchBar/LogViewSearchBar.js
View File

@@ -1,10 +1,10 @@
import { styled } from 'styled-components';
import { useState } from 'react';
import { TextInput, InputLabel, SelectInput, BtnWrapper } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { opHistoryType } from '../../../assets/data/options';
import { TextInput, InputLabel, SelectInput, BtnWrapper } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { opHistoryType } from '../../assets/data/options';
const LogViewSearchBar = ({ handleSearch, resultData }) => {
const [searchData, setSearchData] = useState({

8
src/components/ServiceManage/searchBar/MailListSearchBar.js → src/components/searchBar/MailListSearchBar.js
View File

@@ -1,9 +1,9 @@
import styled from 'styled-components';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useState } from 'react';
import { mailReceiveType, mailSendStatus, mailSendType, mailType } from '../../../assets/data';
import { mailReceiveType, mailSendStatus, mailSendType, mailType } from '../../assets/data';
const MailListSearchBar = ({ handleSearch, setResultData }) => {
const [searchData, setSearchData] = useState({

2
src/components/IndexManage/PlayTimeSearchBar.js → src/components/searchBar/PlayTimeSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import 'react-datepicker/dist/react-datepicker.css';
import DatePickerComponent from '../common/Date/DatePickerComponent';

6
src/components/ServiceManage/searchBar/ReportListSearchBar.js → src/components/searchBar/ReportListSearchBar.js
View File

@@ -1,7 +1,7 @@
import { styled } from 'styled-components';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
import { useState } from 'react';
const ReportListSearchBar = ({ handleSearch, setResultData }) => {

2
src/components/IndexManage/RetentionSearchBar.js → src/components/searchBar/RetentionSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import DatePickerComponent from '../common/Date/DatePickerComponent';
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper, InputGroup, DatePickerWrapper, AlertText } from '../../styles/Components';

4
src/components/ServiceManage/searchBar/SearchFilter.js → src/components/searchBar/SearchFilter.js
View File

@@ -1,7 +1,7 @@
import { memo, useEffect, useState } from 'react';
import { styled } from 'styled-components';
import { TextInput, InputLabel, SelectInput } from '../../../styles/Components';
import { logDomain, opInputType } from '../../../assets/data/options';
import { TextInput, InputLabel, SelectInput } from '../../styles/Components';
import { logDomain, opInputType } from '../../assets/data/options';
const TextInputWithHelp = memo(({ helpText, ...props }) => {
return (

2
src/components/IndexManage/SegmentSearchBar.js → src/components/searchBar/SegmentSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import DatePickerComponent from '../common/Date/DatePickerComponent';
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper, InputGroup, DatePickerWrapper } from '../../styles/Components';

10
src/components/ServiceManage/searchBar/UserBlockSearchBar.js → src/components/searchBar/UserBlockSearchBar.js
View File

@@ -1,9 +1,9 @@
import { useState } from 'react';
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout } from '../../common/SearchBar';
import { blockPeriod, blockSanctions, blockSearchType, blockStatus } from '../../../assets/data';
import { userType } from '../../../assets/data/options';
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout } from '../common/SearchBar';
import { blockPeriod, blockSanctions, blockSearchType, blockStatus } from '../../assets/data';
import { userType } from '../../assets/data/options';
const UserBlockSearchBar = ({ handleSearch, setResultData }) => {
const [searchData, setSearchData] = useState({

2
src/components/IndexManage/UserIndexSearchBar.js → src/components/searchBar/UserIndexSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import 'react-datepicker/dist/react-datepicker.css';
import DatePickerComponent from '../common/Date/DatePickerComponent';

2
src/components/DataManage/UserSearchBar.js → src/components/searchBar/UserSearchBar.js
View File

@@ -1,5 +1,5 @@
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper } from '../../styles/Components';

4
src/components/DataManage/UserViewSearchBar.js → src/components/searchBar/UserViewSearchBar.js
View File

@@ -1,8 +1,8 @@
import { styled } from 'styled-components';
import { useState, useEffect } from 'react';
import { TextInput, SelectInput, InputLabel, FormWrapper, BtnWrapper, ButtonClose } from '../../styles/Components';
import Button from '../../components/common/button/Button';
import Modal from '../../components/common/modal/Modal';
import Button from '../common/button/Button';
import Modal from '../common/modal/Modal';
import { UserView } from '../../apis';
const UserViewSearchBar = ({ setInfoView, handleTab, setResultData, resultData }) => {

2
src/components/IndexManage/VBPSearchBar.js → src/components/searchBar/VBPSearchBar.js
View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Button from '../common/button/Button';
import DatePickerComponent from '../common/Date/DatePickerComponent';

64
src/components/searchBar/index.js Normal file
View File

@@ -0,0 +1,64 @@
// 모든 검색바 컴포넌트 export
import SearchFilter from './SearchFilter';
import VBPSearchBar from './VBPSearchBar';
import DecoSearchBar from './DecoSearchBar';
import ItemSearchBar from './ItemSearchBar';
import LandSearchBar from './LandSearchBar';
import UserSearchBar from './UserSearchBar';
import DailySearchBar from './DailySearchBar';
import CommonSearchBar from './CommonSearchBar';
import CreditSearchBar from './CreditSearchBar';
import LogViewSearchBar from './LogViewSearchBar';
import SegmentSearchBar from './SegmentSearchBar';
import DataInitSearchBar from './DataInitSearchBar';
import InstanceSearchBar from './InstanceSearchBar';
import LandInfoSearchBar from './LandInfoSearchBar';
import MailListSearchBar from './MailListSearchBar';
import PlayTimeSearchBar from './PlayTimeSearchBar';
import UserViewSearchBar from './UserViewSearchBar';
import AdminViewSearchBar from './AdminViewSearchBar';
import EventListSearchBar from './EventListSearchBar';
import RetentionSearchBar from './RetentionSearchBar';
import UserBlockSearchBar from './UserBlockSearchBar';
import UserIndexSearchBar from './UserIndexSearchBar';
import ReportListSearchBar from './ReportListSearchBar';
import BattleEventSearchBar from './BattleEventSearchBar';
import BusinessLogSearchBar, { useBusinessLogSearch } from './BusinessLogSearchBar';
import CurrencyLogSearchBar, { useCurrencyLogSearch } from './CurrencyLogSearchBar';
import LandAuctionSearchBar from './LandAuctionSearchBar';
import CaliumRequestSearchBar from './CaliumRequestSearchBar';
// 모든 SearchBar 컴포넌트 export
export {
SearchFilter,
VBPSearchBar,
DecoSearchBar,
ItemSearchBar,
LandSearchBar,
UserSearchBar,
DailySearchBar,
CommonSearchBar,
CreditSearchBar,
LogViewSearchBar,
SegmentSearchBar,
DataInitSearchBar,
InstanceSearchBar,
LandInfoSearchBar,
MailListSearchBar,
PlayTimeSearchBar,
UserViewSearchBar,
AdminViewSearchBar,
EventListSearchBar,
RetentionSearchBar,
UserBlockSearchBar,
UserIndexSearchBar,
ReportListSearchBar,
BattleEventSearchBar,
BusinessLogSearchBar,
useBusinessLogSearch,
CurrencyLogSearchBar,
useCurrencyLogSearch,
LandAuctionSearchBar,
CaliumRequestSearchBar
};