안쓰는부분 삭제
This commit is contained in:
@@ -1,134 +0,0 @@
|
||||
//운영서비스 관리 - 화이트 리스트 api 연결
|
||||
|
||||
import { Axios } from '../utils';
|
||||
|
||||
export const WhiteListData = async token => {
|
||||
try {
|
||||
const res = await Axios.get(`/api/v1/white-list/list`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
return res.data.data.list;
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
throw new Error('whiteList Error', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 선택 삭제
|
||||
export const WhiteListDelete = async (token, params) => {
|
||||
try {
|
||||
const res = await Axios.delete(`/api/v1/white-list`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
data: { list: params },
|
||||
});
|
||||
|
||||
return res;
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
throw new Error('WhiteListDelete', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 선택 승인
|
||||
export const WhiteListAllow = async (token, params) => {
|
||||
try {
|
||||
const res = await Axios.patch(
|
||||
`/api/v1/white-list`,
|
||||
{ list: params },
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
},
|
||||
);
|
||||
return res;
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
throw new Error('WhiteListAllow', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 화이트 리스트 등록 (단일)
|
||||
export const WhiteListRegist = async (token, params) => {
|
||||
try {
|
||||
const res = await Axios.post(`/api/v1/white-list`, params, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
return res;
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
throw new Error('WhiteListRegist', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 화이트리스트 엑셀 업로더
|
||||
export const WhiteListExelUpload = async (token, file) => {
|
||||
const exelFile = new FormData();
|
||||
exelFile.append('file', file);
|
||||
try {
|
||||
const res = await Axios.post(`/api/v1/white-list/excel-upload`, exelFile, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
return res;
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
throw new Error('WhiteListExelUpload', e);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 화이트 리스트 등록(복수) -> 등록하는 것임
|
||||
export const WhiteListMultiRegsit = async (token, file) => {
|
||||
const exelFile = new FormData();
|
||||
exelFile.append('file', file);
|
||||
try {
|
||||
const res = await Axios.post(`/api/v1/white-list/multiPost`, exelFile, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
return res;
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
throw new Error('WhiteListMultiRegsit', e);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 엑셀 다운로드
|
||||
export const WhiteListExport = async (token, fileName) => {
|
||||
try{
|
||||
await Axios.get(`/api/v1/white-list/excelDownLoad`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
responseType: 'blob',
|
||||
}).then(response => {
|
||||
const href = URL.createObjectURL(response.data);
|
||||
|
||||
const link = document.createElement('a');
|
||||
const fileName = 'Caliverse_whitelist.xlsx';
|
||||
link.href = href;
|
||||
link.setAttribute('download', `${fileName}`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(href);
|
||||
})
|
||||
|
||||
}catch(e) {
|
||||
if(e instanceof Error) {
|
||||
throw new Error('WhiteListExport Error', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,46 +0,0 @@
|
||||
import { TextInput, InputLabel, InputGroup, SearchBarAlert } from '../../styles/Components';
|
||||
import Button from '../common/button/Button';
|
||||
import { SearchBarLayout } from '../common/SearchBar';
|
||||
|
||||
import WhiteListUploadBtn from './WhiteListUploadBtn';
|
||||
|
||||
const WhiteListRegistBar = ({ handleRegistModalClose, isNullValue, resultData, setResultData }) => {
|
||||
const token = sessionStorage.getItem('token');
|
||||
|
||||
// console.log(isNullValue)
|
||||
|
||||
const searchList = [
|
||||
<>
|
||||
<InputLabel>직접입력</InputLabel>
|
||||
<InputGroup>
|
||||
<TextInput
|
||||
type="text"
|
||||
placeholder="GUID 입력"
|
||||
width="300px"
|
||||
id="guid"
|
||||
onChange={e => {
|
||||
setResultData({ ...resultData, guid: e.target.value });
|
||||
}}
|
||||
onKeyDown={event => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button theme={resultData.guid ? 'search' : 'gray'} text="등록" handleClick={handleRegistModalClose} />
|
||||
</InputGroup>
|
||||
</>,
|
||||
<> {isNullValue && <SearchBarAlert>필수값을 입력해주세요</SearchBarAlert>}</>,
|
||||
<>
|
||||
<WhiteListUploadBtn />
|
||||
</>,
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SearchBarLayout firstColumnData={searchList} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhiteListRegistBar;
|
||||
@@ -1,121 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
|
||||
import Button from '../../common/button/Button';
|
||||
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
|
||||
|
||||
const ItemsSearchBar = ({ handleSearch, setResultData }) => {
|
||||
const [searchData, setSearchData] = useState({
|
||||
searchType: 'GUID',
|
||||
data: '',
|
||||
status: 'ALL',
|
||||
restore: 'ALL',
|
||||
sendDate: '',
|
||||
endDate: '',
|
||||
});
|
||||
|
||||
const searchType = [
|
||||
{ value: 'GUID', name: 'GUID' },
|
||||
{ value: 'NAME', name: '닉네임' }
|
||||
];
|
||||
|
||||
const status = [
|
||||
{ value: 'ALL', name: '상태' },
|
||||
{ value: 'ACTIVE', name: '활성' },
|
||||
{ value: 'DEACTIVE', name: '비활성' },
|
||||
];
|
||||
|
||||
const restore = [
|
||||
{ value: 'ALL', name: '복구' },
|
||||
{ value: 'POSSIBLE', name: '가능' },
|
||||
{ value: 'IMPOSSIBLE', name: '불가능' },
|
||||
];
|
||||
|
||||
const handleSubmit = event => {
|
||||
event.preventDefault();
|
||||
|
||||
handleSearch(
|
||||
searchData.searchType ? searchData.searchType : 'GUID',
|
||||
searchData.data,
|
||||
searchData.status ? searchData.status : 'ALL',
|
||||
searchData.restore ? searchData.restore : 'ALL',
|
||||
searchData.sendDate ? searchData.sendDate : '',
|
||||
searchData.endDate ? searchData.endDate : new Date(),
|
||||
);
|
||||
|
||||
setResultData(searchData);
|
||||
};
|
||||
|
||||
// 초기화 버튼
|
||||
const handleReset = () => {
|
||||
setSearchData({
|
||||
searchType: 'GUID',
|
||||
data: '',
|
||||
status: 'ALL',
|
||||
restore: 'ALL',
|
||||
sendDate: '',
|
||||
endDate: '',
|
||||
});
|
||||
handleSearch('GUID', '', 'ALL', 'ALL', '', '');
|
||||
setResultData('GUID', '', 'ALL', 'ALL', '', '');
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
// console.log(searchData);
|
||||
|
||||
const searchList = [
|
||||
<>
|
||||
<InputGroup>
|
||||
<SelectInput value={searchData.searchType} onChange={e => setSearchData({ ...searchData, searchType: e.target.value })}>
|
||||
{searchType.map((data, index) => (
|
||||
<option key={index} value={data.value}>
|
||||
{data.name}
|
||||
</option>
|
||||
))}
|
||||
</SelectInput>
|
||||
<TextInput
|
||||
type="text"
|
||||
placeholder={searchData.searchType === 'GUID' ? 'GUID 입력' : '닉네임 입력'}
|
||||
value={searchData.data}
|
||||
width="600px"
|
||||
onChange={e => setSearchData({ ...searchData, data: e.target.value })}
|
||||
/>
|
||||
</InputGroup>
|
||||
</>
|
||||
];
|
||||
|
||||
const optionList = [
|
||||
<>
|
||||
<SelectInput value={searchData.status} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
|
||||
{status.map((data, index) => (
|
||||
<option key={index} value={data.value}>
|
||||
{data.name}
|
||||
</option>
|
||||
))}
|
||||
</SelectInput>
|
||||
</>,
|
||||
<>
|
||||
<SelectInput value={searchData.restore} onChange={e => setSearchData({ ...searchData, restore: e.target.value })}>
|
||||
{restore.map((data, index) => (
|
||||
<option key={index} value={data.value}>
|
||||
{data.name}
|
||||
</option>
|
||||
))}
|
||||
</SelectInput>
|
||||
</>,
|
||||
<>
|
||||
<InputLabel>생성 날짜</InputLabel>
|
||||
<SearchPeriod
|
||||
startDate={searchData.sendDate}
|
||||
handleStartDate={data => {
|
||||
setSearchData({ ...searchData, sendDate: data });
|
||||
}}
|
||||
endDate={searchData.endDate}
|
||||
handleEndDate={data => setSearchData({ ...searchData, endDate: data })}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</>,
|
||||
];
|
||||
return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
|
||||
};
|
||||
|
||||
export default ItemsSearchBar;
|
||||
@@ -1,507 +0,0 @@
|
||||
import { useState, useEffect, Fragment, useCallback } from 'react';
|
||||
|
||||
import { SearchBar } from '../../components/common/SearchBar';
|
||||
import CheckBox from '../../components/common/input/CheckBox';
|
||||
import Modal from '../../components/common/modal/Modal';
|
||||
import { Title, FormWrapper, TableInfo, ListTitle, ListOption, TableStyle, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
|
||||
import Button from '../../components/common/button/Button';
|
||||
import { WhiteListSearchBar } from '../../components/ServiceManage';
|
||||
|
||||
import { styled } from 'styled-components';
|
||||
import { WhiteListData, WhiteListDelete, WhiteListRegist, WhiteListAllow, WhiteListExport } from '../../apis/WhiteList';
|
||||
import { authList } from '../../store/authList';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import AuthModal from '../../components/common/modal/AuthModal';
|
||||
import { authType } from '../../assets/data';
|
||||
|
||||
const WhiteList = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const token = sessionStorage.getItem('token');
|
||||
const userInfo = useRecoilValue(authList);
|
||||
const [resultData, setResultData] = useState({ guid: '' });
|
||||
const [doubleSubmitFlag, setDoubleSubmitFlag] = useState(false);
|
||||
|
||||
const [selectedRow, setSelectedRow] = useState([]);
|
||||
const [selectedId, setSelectedId] = useState([]);
|
||||
const [dataList, setDataList] = useState([]);
|
||||
const [deleteModalClose, setDeleteModalClose] = useState('hidden');
|
||||
const [confirmModalClose, setConfirmModalClose] = useState('hidden');
|
||||
const [deleteUserClose, setDeleteUserClose] = useState('hidden');
|
||||
const [completeModalClose, setCompleteModalClose] = useState('hidden');
|
||||
const [registModalClose, setRegistModalClose] = useState('hidden');
|
||||
const [allowModalClose, setAllowModalClose] = useState('hidden');
|
||||
const [confirmAllowClose, setConfirmAllowClose] = useState('hidden');
|
||||
const [userAllowClose, setUserAllowClose] = useState('hidden');
|
||||
const [isNullValue, setIsNullValue] = useState(false);
|
||||
const [confirmText, setConfirmText] = useState('');
|
||||
|
||||
const [approveAble, setApproveAble] = useState(false);
|
||||
|
||||
const fetchData = async () => {
|
||||
setDataList(await WhiteListData(token));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
handleApproveCheck();
|
||||
}, [selectedRow]);
|
||||
|
||||
// 전체 선택
|
||||
const handleAllSelect = () => {
|
||||
const checkAll = document.getElementById('check-all');
|
||||
let list = [];
|
||||
|
||||
if (checkAll.checked === true) {
|
||||
dataList.map((data, index) => {
|
||||
document.getElementsByName('select')[index].checked = true;
|
||||
list.push(String(data.id));
|
||||
});
|
||||
} else if (checkAll.checked === false) {
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
dataList.map((data, index) => (document.getElementsByName('select')[index].checked = false));
|
||||
list = [];
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedRow(list);
|
||||
};
|
||||
|
||||
// 일부 선택
|
||||
const handleSelectCheckBox = e => {
|
||||
let list = [...selectedRow];
|
||||
|
||||
if (e.target.checked) {
|
||||
list.push(e.target.id);
|
||||
|
||||
setSelectedRow(list);
|
||||
} else {
|
||||
const filterList = list.filter(data => e.target.id !== data);
|
||||
setSelectedRow(filterList);
|
||||
}
|
||||
};
|
||||
|
||||
// 선택 승인 유효성 검사
|
||||
const approveCheck = e => {
|
||||
let approveList = [];
|
||||
|
||||
dataList && dataList.map(data => data.status === 'PERMITTED' && approveList.push(data.id));
|
||||
|
||||
return approveList;
|
||||
};
|
||||
|
||||
const handleApproveCheck = () => {
|
||||
let list = [];
|
||||
let approveList = approveCheck();
|
||||
|
||||
selectedRow.map(data => list.push(Number(data)));
|
||||
setApproveAble(approveList.filter(row => list.includes(row)).length === 0);
|
||||
};
|
||||
|
||||
// 선택 삭제 모달창
|
||||
const handleDeleteModalClose = () => {
|
||||
if (selectedRow.length !== 0) {
|
||||
if (deleteModalClose === 'hidden') {
|
||||
setDeleteModalClose('view');
|
||||
} else {
|
||||
setDeleteModalClose('hidden');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제 확인 모달창
|
||||
const handleConfirmModalClose = () => {
|
||||
if (confirmModalClose === 'hidden') {
|
||||
setConfirmModalClose('view');
|
||||
} else {
|
||||
setConfirmModalClose('hidden');
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
// 선택 삭제 버튼
|
||||
const handleSelectedDelete = () => {
|
||||
let list = [];
|
||||
|
||||
selectedRow.map(data =>
|
||||
list.push({
|
||||
id: data,
|
||||
}),
|
||||
);
|
||||
|
||||
WhiteListDelete(token, list);
|
||||
handleDeleteModalClose();
|
||||
handleConfirmModalClose();
|
||||
};
|
||||
|
||||
// 개별 삭제 모달
|
||||
const handleUserDeleteModalClose = dataValue => {
|
||||
if (deleteUserClose === 'hidden') {
|
||||
setDeleteUserClose('view');
|
||||
} else {
|
||||
setDeleteUserClose('hidden');
|
||||
}
|
||||
|
||||
if (dataValue) {
|
||||
setSelectedId(dataValue.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 개별 삭제 버튼
|
||||
const handleDelete = () => {
|
||||
let list = [];
|
||||
|
||||
list.push({ id: selectedId });
|
||||
WhiteListDelete(token, list);
|
||||
handleUserDeleteModalClose();
|
||||
handleConfirmModalClose();
|
||||
setSelectedId([]);
|
||||
};
|
||||
|
||||
// 등록 확인 모달
|
||||
const handleRegistModalClose = () => {
|
||||
if (resultData.guid.length === 0) {
|
||||
setIsNullValue(true);
|
||||
} else if (registModalClose === 'hidden') {
|
||||
setRegistModalClose('view');
|
||||
setIsNullValue(false);
|
||||
} else {
|
||||
setRegistModalClose('hidden');
|
||||
}
|
||||
};
|
||||
// console.log(resultData.guid.length)
|
||||
|
||||
// 등록 완료 모달
|
||||
const handleCompleteModalClose = () => {
|
||||
if (completeModalClose === 'hidden') {
|
||||
setCompleteModalClose('view');
|
||||
} else {
|
||||
setCompleteModalClose('hidden');
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
// 화이트 리스트 등록하기
|
||||
const handleSubmit = async () => {
|
||||
const message = await WhiteListRegist(token, resultData);
|
||||
|
||||
if (message.data.data.message === '등록 하였습니다.') setConfirmText('등록이 완료되었습니다.');
|
||||
else if (message.data.data.message === 'admindb_exit_error') setConfirmText('해당 유저가 이미 등록되어있습니다. \n 확인 후 다시 이용해주세요.');
|
||||
else if (message.data.data.message === '중복된 유저 정보가 있습니다.') setConfirmText('파일 내 중복된 유저 정보가 있습니다. \n 파일을 다시 확인 후 이용해주세요.');
|
||||
else setConfirmText(message.data.data.message);
|
||||
|
||||
handleRegistModalClose();
|
||||
handleCompleteModalClose();
|
||||
};
|
||||
|
||||
// 선택 승인 모달창
|
||||
const handleAllowModalClose = () => {
|
||||
if (selectedRow.length !== 0) {
|
||||
if (allowModalClose === 'hidden') {
|
||||
setAllowModalClose('view');
|
||||
} else {
|
||||
setAllowModalClose('hidden');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 승인 완료 모달창
|
||||
const handleConfirmAllowClose = () => {
|
||||
if (confirmAllowClose === 'hidden') {
|
||||
setConfirmAllowClose('view');
|
||||
} else {
|
||||
setConfirmModalClose('hidden');
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
// 일괄 승인
|
||||
const handleAllow = () => {
|
||||
let list = [];
|
||||
|
||||
selectedRow.map(data =>
|
||||
list.push({
|
||||
id: data,
|
||||
}),
|
||||
);
|
||||
|
||||
WhiteListAllow(token, list);
|
||||
handleAllowModalClose();
|
||||
handleConfirmAllowClose();
|
||||
};
|
||||
|
||||
// 개별 승인
|
||||
const handleUserAllowModalClose = dataValue => {
|
||||
if (userAllowClose === 'hidden') {
|
||||
setUserAllowClose('view');
|
||||
} else {
|
||||
setUserAllowClose('hidden');
|
||||
}
|
||||
|
||||
if (dataValue) {
|
||||
setSelectedId(dataValue.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 개별 승인 버튼
|
||||
const handleUserAllow = () => {
|
||||
let list = [];
|
||||
|
||||
list.push({ id: selectedId });
|
||||
WhiteListAllow(token, list);
|
||||
handleUserAllowModalClose();
|
||||
handleConfirmAllowClose();
|
||||
setSelectedId([]);
|
||||
};
|
||||
|
||||
// 엑셀 다운로드
|
||||
const handleXlsxExport = () => {
|
||||
const fileName = 'Caliverse_whitelist.xlsx';
|
||||
WhiteListExport(token, fileName);
|
||||
};
|
||||
|
||||
const handleCountSelectedRow = () => {
|
||||
return dataList && document.querySelectorAll('input[name="select"]:checked').length === dataList.length;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === authType.whiteListRead) ? (
|
||||
<AuthModal />
|
||||
) : (
|
||||
<>
|
||||
<Title>화이트리스트 등록/수정</Title>
|
||||
{userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === 21) && (
|
||||
<FormWrapper>
|
||||
<WhiteListSearchBar handleRegistModalClose={handleRegistModalClose} isNullValue={isNullValue} resultData={resultData} setResultData={setResultData} />
|
||||
</FormWrapper>
|
||||
)}
|
||||
<TableInfo>
|
||||
<ListTitle>화이트리스트 명단</ListTitle>
|
||||
<ListOption>
|
||||
<Button theme="line" type="file" text="엑셀 다운로드" handleClick={handleXlsxExport} />
|
||||
{userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === 28) && (
|
||||
<Button theme={selectedRow.length === 0 ? 'disable' : 'line'} type="submit" text="선택 삭제" handleClick={handleDeleteModalClose} />
|
||||
)}
|
||||
{userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === 20) && (
|
||||
<Button
|
||||
theme={selectedRow.length === 0 || !approveAble ? 'disable' : 'line'}
|
||||
type="submit"
|
||||
text="선택 승인"
|
||||
errorMessage={!approveAble}
|
||||
handleClick={handleAllowModalClose}
|
||||
/>
|
||||
)}
|
||||
</ListOption>
|
||||
</TableInfo>
|
||||
<TableWrapper>
|
||||
<TableStyle>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="40">
|
||||
<CheckBox id="check-all" handleCheck={handleAllSelect} checked={handleCountSelectedRow()} />
|
||||
</th>
|
||||
<th width="80">번호</th>
|
||||
<th width="40%">GUID</th>
|
||||
<th width="25%">닉네임</th>
|
||||
<th width="25%">등록자(이메일주소)</th>
|
||||
<th width="100">승인</th>
|
||||
{userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === 28) && <th width="100">삭제</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataList &&
|
||||
dataList.map(data => (
|
||||
<Fragment key={data.guid}>
|
||||
<tr>
|
||||
<td>
|
||||
<CheckBox name={'select'} id={data.id} setData={e => handleSelectCheckBox(e)} handleCheck={handleApproveCheck} />
|
||||
</td>
|
||||
<td>{data.row_num}</td>
|
||||
<td>{data.guid}</td>
|
||||
<td>{data.nickname}</td>
|
||||
<td>{data.create_by}</td>
|
||||
{/* 승인 상태 */}
|
||||
{data.status !== 'REJECT' ? (
|
||||
<td>승인</td>
|
||||
) : userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === 20) ? (
|
||||
<td>
|
||||
<Button theme="line" text="승인" id={data.id} handleClick={() => handleUserAllowModalClose(data)} />
|
||||
</td>
|
||||
) : (
|
||||
<td>대기 중</td>
|
||||
)}
|
||||
{userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === 28) && (
|
||||
<td>
|
||||
<Button theme="line" text="삭제" id={data.id} handleClick={() => handleUserDeleteModalClose(data)} />
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</TableWrapper>
|
||||
|
||||
{/* 선택삭제 모달 */}
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={deleteModalClose}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={handleDeleteModalClose} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">
|
||||
선택된 대상을 화이트리스트 유저에서
|
||||
<br />
|
||||
삭제하시겠습니까?
|
||||
</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="취소" theme="line" size="large" width="100%" handleClick={handleDeleteModalClose} />
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleSelectedDelete} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
|
||||
{/* 등록 모달 */}
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={registModalClose}>
|
||||
<BtnWrapper $="flex-end">
|
||||
<ButtonClose onClick={handleRegistModalClose} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">
|
||||
화이트리스트 명단에
|
||||
<br />
|
||||
등록하시겠습니까?
|
||||
</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="취소" theme="line" size="large" width="100%" handleClick={handleRegistModalClose} />
|
||||
<Button
|
||||
text="확인"
|
||||
theme="primary"
|
||||
type="submit"
|
||||
size="large"
|
||||
width="100%"
|
||||
handleClick={() => {
|
||||
doubleSubmitFlag || handleSubmit();
|
||||
setDoubleSubmitFlag(true);
|
||||
}}
|
||||
/>
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
|
||||
{/* 개별 삭제 모달 */}
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={deleteUserClose}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={handleUserDeleteModalClose} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">
|
||||
화이트리스트 유저를
|
||||
<br />
|
||||
삭제하시겠습니까?
|
||||
</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="취소" theme="line" size="large" width="100%" handleClick={handleUserDeleteModalClose} />
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleDelete} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
|
||||
{/* 승인 모달 */}
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={allowModalClose}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={handleAllowModalClose} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">
|
||||
선택된 대상을 화이트리스트 유저로
|
||||
<br />
|
||||
승인하시겠습니까?
|
||||
</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="취소" theme="line" size="large" width="100%" handleClick={handleAllowModalClose} />
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleAllow} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
|
||||
{/* 개별 승인 모달 */}
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={userAllowClose}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={handleUserAllowModalClose} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">
|
||||
선택된 대상을 화이트리스트 유저로
|
||||
<br />
|
||||
승인하시겠습니까?
|
||||
</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="취소" theme="line" size="large" width="100%" handleClick={handleUserAllowModalClose} />
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleUserAllow} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
|
||||
{/* 완료 모달 */}
|
||||
|
||||
{/* 등록 완료 모달 */}
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={completeModalClose}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={handleCompleteModalClose} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">{confirmText}</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleCompleteModalClose} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
|
||||
{/* 승인 완료 모달 */}
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={confirmAllowClose}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={handleConfirmAllowClose} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">승인이 완료되었습니다.</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleConfirmAllowClose} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={confirmModalClose}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={handleConfirmModalClose} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">삭제가 완료되었습니다.</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleConfirmModalClose} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhiteList;
|
||||
|
||||
const TableWrapper = styled.div`
|
||||
height: calc(100vh - 383px);
|
||||
border-top: 1px solid #000;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StatusRed = styled.td`
|
||||
color: #d60000;
|
||||
`;
|
||||
Reference in New Issue
Block a user