이용자 제재 해지 사유 입력

src/pages/ServiceManage/UserBlock.js

@@ -1,5 +1,5 @@
-import { useState, Fragment, useRef } from 'react';
-import { Title, FormWrapper } from '../../styles/Components';
+import { useState, Fragment, useRef, useTransition } from 'react';
+import { Title, FormWrapper, TextInput } from '../../styles/Components';
 import { useNavigate } from 'react-router-dom';
 import {
 	CommonSearchBar,
@@ -9,29 +9,35 @@ import {
 import { BlackListDetail, BlackListDelete } from '../../apis';
 import Pagination from '../../components/common/Pagination/Pagination';
 
-import { authType } from '../../assets/data';
+import { authType, commonStatus, modalTypes } from '../../assets/data';
 import { CaliTable, TableHeader } from '../../components/common';
 import { useModal, useTable, withAuth } from '../../hooks/hook';
-import { alertTypes } from '../../assets/data/types';
+import { alertTypes, customStatus } from '../../assets/data/types';
 import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
 import tableInfo from '../../assets/data/pages/userBlockTable.json'
 import { useAlert } from '../../context/AlertProvider';
 import { useLoading } from '../../context/LoadingProvider';
 import useCommonSearchOld from '../../hooks/useCommonSearchOld';
+import { ModalInputItem, ModalSubText, RegistInputItem } from '../../styles/ModuleComponents';
+import DynamicModal from '../../components/common/modal/DynamicModal';
+import { useTranslation } from 'react-i18next';
 
 const UserBlock = () => {
 	const token = sessionStorage.getItem('token');
 	const navigate = useNavigate();
 	const {showModal, showToast} = useAlert();
 	const {withLoading} = useLoading();
+	const { t } = useTranslation();
 
 	const [detail, setDetail] = useState([]);
+	const [deleteDesc, setDeleteDesc] = useState('');
 	const {
 		modalState,
 		handleModalView,
 		handleModalClose
 	} = useModal({
 		detail: 'hidden',
+		delete: 'hidden'
 	});
 
 	const {
@@ -63,27 +69,44 @@ const UserBlock = () => {
 				});
 				break;
 			case "delete":
-				showModal('USER_BLOCK_DELETE_CONFIRM', {
-					type: alertTypes.confirm,
-					onConfirm: () => handleAction('deleteConfirm')
-				});
+				const selectRow = selectedRows[0];
+				if(selectRow.status === commonStatus.cancel || selectRow.status === customStatus.expiration || selectRow.status === commonStatus.fail) {
+					showToast('USER_BLOCK_DELETE_STATUS_WARNING',{type: alertTypes.warning})
+					return;
+				}
+				handleModalView('delete');
+				// showModal('USER_BLOCK_DELETE_CONFIRM', {
+				// 	type: alertTypes.confirm,
+				// 	onConfirm: () => handleAction('deleteConfirm')
+				// });
 				break;
 			case "deleteConfirm":
 				let list = [];
 
+				if(deleteDesc.length === 0){
+					showToast('INPUT_REASON_EMPTY_WARNING', {type: alertTypes.warning});
+					return;
+				}
+
 				selectedRows.map(data => {
 					list.push({
 						id: data.id,
+						reason: deleteDesc
 					});
 				});
 
 				await withLoading(async () => {
 					return BlackListDelete(token, list);
 				}).then(data => {
-					showToast('DEL_COMPLETE', {type: alertTypes.success});
+					if(data.result === "SUCCESS") {
+						showToast('DEL_COMPLETE', {type: alertTypes.success});
+					}else{
+						showToast(data.data.message, {type: alertTypes.error});
+					}
 				}).catch(reason => {
 					showToast('API_FAIL', {type: alertTypes.error});
 				}).finally(() => {
+					handleModalClose('delete');
 					handleSearch(updateSearchParams);
 				});
 
@@ -141,6 +164,29 @@ const UserBlock = () => {
 				data={detail}
 				handleModal={() => handleModalClose('detail')}
 			/>
+
+			<DynamicModal
+				modalType={modalTypes.childOkCancel}
+				view={modalState.deleteModal}
+				handleCancel={() => handleModalClose('delete')}
+				handleSubmit={() => handleAction('deleteConfirm')}
+			>
+				<ModalInputItem>
+					{t('USER_BLOCK_DELETE_CONFIRM')}
+					<RegistInputItem>
+						<TextInput
+							placeholder="사유 입력"
+							maxLength="30"
+							value={deleteDesc}
+							onChange={e => {
+								if (e.target.value.length > 30) return;
+								setDeleteDesc(e.target.value.trimStart())
+							}}
+						/>
+					</RegistInputItem>
+					<ModalSubText $color={deleteDesc.length > 29 ? 'red' : '#666'}>* 최대 등록 가능 글자수 ({deleteDesc.length}/30자)</ModalSubText>
+				</ModalInputItem>
+			</DynamicModal>
 		</>
 	);
 };