dynamodb pagination 추가

유저조회 우편 페이징 처리
hook 수정

src/components/DataManage/UserDefaultInfo.js

@@ -18,7 +18,7 @@ import { TableSkeleton } from '../Skeleton/TableSkeleton';
 import { UserInfoSkeleton } from '../Skeleton/UserInfoSkeleton';
 import { opUserSessionType } from '../../assets/data/options';
 import Button from '../common/button/Button';
-import { useModal } from '../../utils/hook';
+import { useModal } from '../../hooks/hook';
 import { InitData } from '../../apis/Data';
 
 const UserDefaultInfo = ({ userInfo }) => {
@@ -38,6 +38,11 @@ const UserDefaultInfo = ({ userInfo }) => {
 	const [dataList, setDataList] = useState({});
 	const [adminLevel, setAdminLevel] = useState('0');
 	const [loading, setLoading] = useState(true);
+	const [authDelete, setAuthDelete] = useState(false);
+
+	useEffect(() => {
+		setAuthDelete(authInfo?.auth_list?.some(auth => auth.id === authType.userSearchDelete));
+	}, [authInfo]);
 
 	useEffect(() => {
 		fetchData();
@@ -126,8 +131,13 @@ const UserDefaultInfo = ({ userInfo }) => {
 							<tr>
 								<th>접속상태</th>
 								<StatusCell>{dataList.user_session !== undefined && opUserSessionType.find(session => session.value === dataList.user_session)?.name}
-									{<Button theme={dataList.user_session ? "line" : "disable"} id={"user_session"} name="kick" text="KICK" handleClick={e => handleSubmit('userKickSubmit')} disabled={!dataList.user_session}/>}
-									{/*{<Button theme={dataList.user_session ? "line" : "disable"} id={"user_session"} name="kick" text="KICK" handleClick={e => handleSubmit('userKickSubmit')} />}*/}
+									{<Button theme={(dataList.user_session && authDelete) ? "line" : "disable"}
+											 id={"user_session"}
+											 name="kick"
+											 text="KICK"
+											 handleClick={() => handleSubmit('userKickSubmit')}
+											 disabled={!dataList.user_session && !authDelete}
+									/>}
 								</StatusCell>
 							</tr>
 							<tr>

src/components/DataManage/UserMailInfo.js

@@ -12,55 +12,67 @@ import CompletedModal from '../common/modal/CompletedModal';
 import { useTranslation } from 'react-i18next';
 import CustomConfirmModal from '../common/modal/CustomConfirmModal';
 import DynamicModal from '../common/modal/DynamicModal';
-import { authType, ivenTabType } from '../../assets/data';
+import { authType, ivenTabType, opMailType } from '../../assets/data';
 import { useRecoilValue } from 'recoil';
 import { authList } from '../../store/authList';
 import { convertKTC } from '../../utils';
 import { TableSkeleton } from '../Skeleton/TableSkeleton';
-import { opPickupType, opReadType, opYNType } from '../../assets/data/options';
+import { eventSearchType, opPickupType, opReadType, opYNType } from '../../assets/data/options';
+import { useDynamoDBPagination, useModal } from '../../hooks/hook';
+import { DynamoPagination } from '../common';
 
 const UserMailInfo = ({ userInfo }) => {
 	const token = sessionStorage.getItem('token');
 	const { t } = useTranslation();
 	const authInfo = useRecoilValue(authList);
 
-	//데이터 리스트
-	const [dataList, setDataList] = useState([]);
 	// 받은 우편, 보낸 우편
 	const [option, setOption] = useState('RECEIVE');
-	// 상세 정보
 	const [detail, setDetail] = useState({ title: '', content: '', item_list: [], mail_guid: '' });
 	const [deleteSelected, setDeleteSelected] = useState({});
 	const [itemUpdateCount, setItemUpdateCount] = useState('1');
 	const [authDelete, setAuthDelete] = useState(false);
-	const [loading, setLoading] = useState(true);
 
-	const [modalState, setModalState] = useState({
-		detailModal: 'hidden',
-		deleteItemModal: 'hidden',
-		deleteSubmitModal: 'hidden',
-		deleteCompleteModal: 'hidden',
-		deleteItemCompleteModal: 'hidden'
+	const {
+		modalState,
+		handleModalView,
+		handleModalClose
+	} = useModal({
+		detail: 'hidden',
+		deleteItem: 'hidden',
+		deleteSubmit: 'hidden',
+		deleteComplete: 'hidden',
+		deleteItemComplete: 'hidden'
 	});
 
-	// 받은 우편, 보낸 우편 option 에 따른 data fetch
+	const fetchMailData = async (page, startKey) => {
+		const params = {
+			mail_type: option,
+			guid: userInfo.guid,
+			page_key: startKey
+		};
+		return await UserMailView(token, params);
+	};
+
+	const {
+		data: dataList,
+		loading,
+		pagination,
+		fetchPage,
+		goToNextPage,
+		goToPrevPage,
+		resetPagination
+	} = useDynamoDBPagination(fetchMailData);
+
 	useEffect(() => {
-		fetchData(option);
+		resetPagination();
+		fetchPage(1);
 	}, [option]);
 
 	useEffect(() => {
 		setAuthDelete(authInfo.auth_list.some(auth => auth.id === authType.userSearchDelete));
 	}, [authInfo]);
 
-	const fetchData = async option => {
-		setLoading(true);
-		await UserMailView(token, userInfo.guid, option).then(data =>{
-			setDataList(data);
-			setLoading(false);
-		});
-	};
-
-	// 상세 모달 value 세팅
 	const handleDetail = (title, content, itmeList, mail_guid) => {
 		setDetail({ title: title, content: content, item_list: itmeList, mail_guid: mail_guid });
 	};
@@ -81,20 +93,6 @@ const UserMailInfo = ({ userInfo }) => {
 		}
 	};
 
-	const handleModalView = (type) => {
-		setModalState((prevState) => ({
-			...prevState,
-			[`${type}Modal`]: 'view',
-		}));
-	}
-
-	const handleModalClose = (type) => {
-		setModalState((prevState) => ({
-			...prevState,
-			[`${type}Modal`]: 'hidden',
-		}));
-	}
-
 	const handleModalSubmit = async (type, param = null) => {
 		let params;
 		let result;
@@ -147,7 +145,7 @@ const UserMailInfo = ({ userInfo }) => {
 				// if(idx >= 0) {
 				// 	dataList.mail_list.splice(idx, 1);
 				// }
-				fetchData(option);
+				fetchPage(pagination.currentPage);
 				break;
 			case "deleteItemComplete":
 				handleModalClose('deleteItemComplete');
@@ -167,21 +165,28 @@ const UserMailInfo = ({ userInfo }) => {
 	return (
 		loading ? <TableSkeleton count={10}/> :
 		<>
-			<SelectWrapper>
+			<SelectContainer>
 				<SelectInput
 					value={option}
 					onChange={e => {
 						setOption(e.target.value);
 					}}>
-					<option value="RECEIVE">받은 우편</option>
-					<option value="SEND">보낸 우편</option>
+					{opMailType.map((data, index) => (
+						<option key={index} value={data.value}>
+							{data.name}
+						</option>
+					))}
 				</SelectInput>
-			</SelectWrapper>
+
+				<DynamoPagination
+					pagination={pagination}
+					onNextPage={goToNextPage}
+					onPrevPage={goToPrevPage}
+				/>
+			</SelectContainer>
+
 			{option === 'RECEIVE' && (
 				<>
-					{/* <CheckWrapper>
-						<CheckBox id="viewDelReceiveMail" label="삭제 우편 보기" />
-					</CheckWrapper> */}
 					<UserTableWrapper>
 						<UserDefaultTable>
 							<thead>
@@ -197,7 +202,7 @@ const UserMailInfo = ({ userInfo }) => {
 								</tr>
 							</thead>
 							<tbody>
-								{dataList.mail_list &&
+								{dataList  && dataList.mail_list &&
 									dataList.mail_list.map((mail, idx) => {
 										return (
 											<tr key={idx}>
@@ -230,9 +235,6 @@ const UserMailInfo = ({ userInfo }) => {
 			)}
 			{option === 'SEND' && (
 				<>
-					{/* <CheckWrapper>
-						<CheckBox id="viewDelSendMail" label="삭제 우편 보기" />
-					</CheckWrapper> */}
 					<UserTableWrapper>
 						<UserDefaultTable>
 							<thead>
@@ -244,7 +246,7 @@ const UserMailInfo = ({ userInfo }) => {
 								</tr>
 							</thead>
 							<tbody>
-								{dataList.mail_list &&
+								{dataList  && dataList.mail_list &&
 									dataList.mail_list.map((mail, idx) => {
 										return (
 											<tr key={idx}>
@@ -269,6 +271,8 @@ const UserMailInfo = ({ userInfo }) => {
 					</UserTableWrapper>
 				</>
 			)}
+
+
 			{/*상세*/}
 			<MailDetailModal
 				mailModal={modalState.detailModal}
@@ -370,22 +374,6 @@ const MailLink = styled.div`
     cursor: pointer;
 `;
 
-const SelectWrapper = styled.div`
-	select {
-		height: 30px;
-	}
-	margin-bottom: 10px;
-`;
-const CheckWrapper = styled.div`
-	text-align: right;
-	padding: 10px;
-	margin-top: -40px;
-	height: 30px;
-	margin-bottom: 10px;
-	font-size: 14px;
-	font-weight: 700;
-`;
-
 const InputItem = styled.div`
 	display: flex;
     flex-direction: column;
@@ -398,4 +386,42 @@ const InputItem = styled.div`
 		width: 100px;
         padding: 10px 20px;
 	}
+`;
+
+const SelectContainer = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 10px;
+	
+	select {
+		height: 30px;
+	}
+`;
+
+const PaginationButtons = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 10px;
+`;
+
+const PaginationButton = styled.button`
+    background-color: ${props => props.disabled ? '#e0e0e0' : '#6c7eb7'};
+    color: ${props => props.disabled ? '#a0a0a0' : 'white'};
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+    transition: background-color 0.2s;
+
+    &:hover {
+        background-color: ${props => props.disabled ? '#e0e0e0' : '#5a6a9b'};
+    }
+`;
+
+const PageInfo = styled.div`
+    font-size: 12px;
+    font-weight: 500;
+    color: #666;
 `;

src/components/ServiceManage/modal/BattleEventModal.js

@@ -22,7 +22,7 @@ import {
 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 '../../../utils/hook';
+import { useModal } from '../../../hooks/hook';
 import { convertKTCDate } from '../../../utils';
 import {
 	battleEventHotTime,

src/components/ServiceManage/modal/LandAuctionModal.js

@@ -31,7 +31,7 @@ import {
 	TYPE_REGISTRY,
 } from '../../../assets/data/adminConstants';
 import { landAuctionStatus, landAuctionStatusType, languageType, CurrencyType } from '../../../assets/data';
-import { useModal } from '../../../utils/hook';
+import { useModal } from '../../../hooks/hook';
 import { convertKTCDate } from '../../../utils';
 import { msToMinutes } from '../../../utils/date';
 

src/components/ServiceManage/modal/OwnerChangeModal.js

@@ -22,7 +22,7 @@ import {
 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 '../../../utils/hook';
+import { useModal } from '../../../hooks/hook';
 import { convertKTCDate } from '../../../utils';
 import { BattleEventModify, BattleEventSingleRegist } from '../../../apis/Battle';
 import { battleEventStatusType } from '../../../assets/data/types';
@@ -144,7 +144,6 @@ const OwnerChangeModal = ({ modalType, detailView, handleDetailView, content, se
 				}
 				setLoading(true);
 				await UserInfoView(token, guid).then(data => {
-					setLoading(false);
 					if(Object.keys(data).length === 0){
 						setAlertMsg(t('WARNING_GUID_CHECK'));
 						setResultData({ ...resultData, user_name: '' })
@@ -154,13 +153,14 @@ const OwnerChangeModal = ({ modalType, detailView, handleDetailView, content, se
 					setResultData({ ...resultData, user_name: nickname })
 				}).catch(reason => {
 					setAlertMsg(t('API_FAIL'));
+				}).finally(()=>{
+					setLoading(false);
 				});
 				break;
 			case "registConfirm":
 				setLoading(true);
 
 				if(isView()){
-					console.log(resultData);
 					setLoading(false);
 					handleModalClose('registConfirm');
 
@@ -173,7 +173,6 @@ const OwnerChangeModal = ({ modalType, detailView, handleDetailView, content, se
 					}
 
 					await LandOwnerChangesDelete(token, resultData).then(data => {
-						setLoading(false);
 						handleModalClose('registConfirm');
 						if(data.result === "SUCCESS") {
 							handleModalView('registComplete');
@@ -184,10 +183,11 @@ const OwnerChangeModal = ({ modalType, detailView, handleDetailView, content, se
 						}
 					}).catch(reason => {
 						setAlertMsg(t('API_FAIL'));
+					}).finally(() => {
+						setLoading(false);
 					});
 				}else{
 					await LandOwnedChangesRegist(token, resultData).then(data => {
-						setLoading(false);
 						handleModalClose('registConfirm');
 						if(data.result === "SUCCESS") {
 							handleModalView('registComplete');
@@ -202,6 +202,8 @@ const OwnerChangeModal = ({ modalType, detailView, handleDetailView, content, se
 						}
 					}).catch(reason => {
 						setAlertMsg(t('API_FAIL'));
+					}).finally(() => {
+						setLoading(false);
 					});
 				}
 

src/components/common/Pagination/DynamoPagination.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const DynamoPagination = ({
+							  pagination,
+							  onNextPage,
+							  onPrevPage,
+							  className
+						  }) => {
+	return (
+		<PaginationButtons className={className}>
+			<PaginationButton
+				onClick={onPrevPage}
+				disabled={pagination.currentPage === 1}
+			>
+				이전
+			</PaginationButton>
+			<PageInfo>{pagination.currentPage}</PageInfo>
+			<PaginationButton
+				onClick={onNextPage}
+				disabled={!pagination.hasNextPage}
+			>
+				다음
+			</PaginationButton>
+		</PaginationButtons>
+	);
+};
+
+const PaginationButtons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+const PaginationButton = styled.button`
+  background-color: ${props => props.disabled ? '#e0e0e0' : '#6c7eb7'};
+  color: ${props => props.disabled ? '#a0a0a0' : 'white'};
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: ${props => props.disabled ? '#e0e0e0' : '#5a6a9b'};
+  }
+`;
+
+const PageInfo = styled.div`
+  font-size: 12px;
+  font-weight: 500;
+  color: #666;
+`;
+
+export default DynamoPagination;

src/components/common/index.js

@@ -11,6 +11,7 @@ import DynamicModal from './modal/DynamicModal';
 import CustomConfirmModal from './modal/CustomConfirmModal';
 import Modal from './modal/Modal';
 import Pagination from './Pagination/Pagination';
+import DynamoPagination from './Pagination/DynamoPagination';
 import ViewTableInfo from './Table/ViewTableInfo';
 import Loading from './Loading';
 import CDivider from './CDivider';
@@ -40,5 +41,6 @@ export { DateTimeInput,
 	ViewTableInfo,
 	Loading,
 	CDivider,
-	TopButton
+	TopButton,
+	DynamoPagination
 };