이용자제재 엑셀 업로드 처리 수정

이용자제재 상세 표시 부분 수정

src/components/ServiceManage/UserBlockUploadBtn.js

@@ -7,9 +7,14 @@ import Modal from '../common/modal/Modal';
 import { Title, BtnWrapper, InputGroup, TableStyle, AlertText } from '../../styles/Components';
 
 import { BlackListExcelDown, BlackListMultipleUpload } from '../../apis';
+import { useLoading } from '../../context/LoadingProvider';
+import { useAlert } from '../../context/AlertProvider';
+import { alertTypes } from '../../assets/data/types';
 
 const UserBlockUploadBtn = ({ disabled, setGuidList, guidList, typeError, setTypeError }) => {
 	const token = sessionStorage.getItem('token');
+	const {withLoading} = useLoading();
+	const {showToast} = useAlert();
 
 	// onchange states
 	const [file, setFile] = useState(null);
@@ -30,7 +35,15 @@ const UserBlockUploadBtn = ({ disabled, setGuidList, guidList, typeError, setTyp
 		let fileTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/csv'];
 
 		setFile(e.target.files[0]);
-		setGuidList(await BlackListMultipleUpload(token, e.target.files[0]));
+
+		await withLoading(async () => {
+			return await BlackListMultipleUpload(token, e.target.files[0]);
+		}).then(data => {
+			setGuidList(data);
+		}).catch(e => {
+			showToast(e, {type: alertTypes.error});
+		});
+
 	};
 
 	const handleFileDelete = e => {

src/components/ServiceManage/modal/UserBlockDetailModal.js

@@ -1,41 +1,19 @@
-import { Fragment, useState } from 'react';
+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, blockType } from '../../../assets/data';
 
 const UserBlockDetailModal = ({ stateModal, handleModal, data }) => {
-	const history = data.history;
-
-	const type = [
-		{ value: 'ACCESS_RESTRICTIONS', name: '접근 제한' },
-		{ value: 'CHATTING_RESTRICTIONS', name: '채팅 제한' },
-	];
-
-	const sanctions = [
-		{ value: 'BAD_BEHAVIOR', name: '비매너 행위' },
-		{ value: 'INAPPROPRIATE_NAME', name: '불건전 이름 사용' },
-		{ value: 'CASH_TRANSACTION', name: '현금거래 행위' },
-		{ value: 'GAME_INTERFERENCE', name: '게임 진행 방해' },
-		{ value: 'SERVICE_INTERFERENCE', name: '운영서비스 방해' },
-		{ value: 'ACCOUNT_IMPERSONATION', name: '계정도용' },
-		{ value: 'BUG_ABUSE', name: '버그/어뷰징' },
-		{ value: 'ILLEGAL_PROGRAM', name: '불법프로그램 사용' },
-		{ value: 'PERSONAL_INFO_LEAK', name: '개인정보 유출' },
-		{ value: 'ADMIN_IMPERSONATION', name: '운영자 사칭' },
-	];
-
-	const period = [
-		{ value: 'WARNING', name: '경고' },
-		{ value: 'D1', name: '1일' },
-		{ value: 'D3', name: '3일' },
-		{ value: 'D7', name: '7일' },
-		{ value: 'D15', name: '15일' },
-		{ value: 'D30', name: '30일' },
-		{ value: 'PERMANENT', name: '영구정지' },
-	];
+	const [history, setHistory] = useState();
+	useEffect(() => {
+		if(data){
+			setHistory(data.history);
+		}
+	},[data])
 
 	return (
 		<>
@@ -62,7 +40,7 @@ const UserBlockDetailModal = ({ stateModal, handleModal, data }) => {
 							<tr>
 								<th>제재 방식</th>
 								<td>
-									<TextInput value={type.map(item => item.value === data.type && item.name).filter(data => data !== false) || ''} disabled />
+									<TextInput value={data && blockType.find(item => item.value === data.type)?.name} disabled />
 								</td>
 								<th></th>
 								<td></td>
@@ -71,7 +49,7 @@ const UserBlockDetailModal = ({ stateModal, handleModal, data }) => {
 								<th>제재 기간</th>
 								<td colSpan="3">
 									<InputWrapper>
-										<TextInput value={period.map(item => item.value === data.period && item.name).filter(data => data !== false) || ''} disabled />
+										<TextInput value={data && blockPeriod.find(item => item.value === data.period)?.name} disabled />
 										<span>시작일 : {convertKTC(data.start_dt, false)}</span>
 										<span>종료일 : {convertKTC(data.end_dt, false)}</span>
 									</InputWrapper>
@@ -80,7 +58,7 @@ const UserBlockDetailModal = ({ stateModal, handleModal, data }) => {
 							<tr>
 								<th>제재 사유</th>
 								<td>
-									<TextInput value={sanctions.map(item => item.value === data.sanctions && item.name).filter(data => data !== false) || ''} disabled />
+									<TextInput value={data && blockSanctions.find(item => item.value === data.sanctions)?.name} disabled />
 								</td>
 							</tr>
 						</tbody>
@@ -100,18 +78,17 @@ const UserBlockDetailModal = ({ stateModal, handleModal, data }) => {
 							</tr>
 						</thead>
 						<tbody>
-							{history &&
-								history.map((content, index) => (
+							{history?.map((content, index) => (
 									<Fragment key={index}>
 										<tr>
 											<td>
 												{convertKTC(content.start_dt, false)} ~
 												{convertKTC(content.end_dt, false)}
 											</td>
-											<td>{period.map(item => item.value === data.period && item.name)}</td>
-											<td>{type.map(item => item.value === data.type && item.name)}</td>
-											<td>{sanctions.map(item => item.value === data.sanctions && item.name)}</td>
-											<td></td>
+											<td>{blockPeriod.find(item => item.value === content.period)?.name}</td>
+											<td>{blockType.find(item => item.value === content.type)?.name}</td>
+											<td>{blockSanctions.find(item => item.value === content.sanctions)?.name}</td>
+											<td>{content.create_by}</td>
 										</tr>
 									</Fragment>
 								))}
@@ -181,9 +158,9 @@ const BlockHistory = styled.div`
 			top: 0;
 		}
 		tbody {
-			tr:first-child {
-				color: #d60000;
-			}
+			//tr:first-child {
+			//	color: #d60000;
+			//}
 			tr:last-child td {
 				border-bottom: 1px solid #e8eaec;
 			}