랜드 정보 조회 - 조회 부분 작업

src/RouteInfo.js

@@ -13,7 +13,7 @@ import {
 	LogView,
 } from './pages/UserManage';
 import { EconomicIndex, UserIndex } from './pages/IndexManage';
-import { LandView, CryptView, GameLogView, UserView } from './pages/DataManage';
+import { LandInfoView, CryptView, GameLogView, UserView } from './pages/DataManage';
 import {
 	Board,
 	Event,
@@ -56,7 +56,7 @@ const RouteInfo = () => {
 				</Route>
 				<Route path="/datamanage">
 					<Route path="userview" element={<UserView />} />
-					<Route path="landview" element={<LandView />} />
+					<Route path="landview" element={<LandInfoView />} />
 					<Route path="gamelogview" element={<GameLogView />} />
 					<Route path="cryptview" element={<CryptView />} />
 				</Route>

src/apis/Land.js

@@ -21,6 +21,24 @@ export const LandAuctionView = async (token, landType, landData, userType, userD
 	}
 };
 
+export const LandInfoData = async (token, landType, landData, landSize, category, status, startDate, endDate, order, size, currentPage) => {
+	try {
+		const res = await Axios.get(
+			`/api/v1/land/info?land_type=${landType}&land_data=${landData}&land_size=${landSize}&category=${category}&status=${status}&start_dt=${startDate}&end_dt=${endDate}&orderby=${order}&page_no=${currentPage}
+			&page_size=${size}`,
+			{
+				headers: { Authorization: `Bearer ${token}` },
+			},
+		);
+
+		return res.data.data;
+	} catch (e) {
+		if (e instanceof Error) {
+			throw new Error('LandInfoData Error', e);
+		}
+	}
+};
+
 // 랜드 경매 상세보기
 export const LandAuctionDetailView = async (token, id) => {
 	try {

src/assets/data/menuConfig.js

@@ -65,7 +65,7 @@ export const menuConfig = {
 				}
 			},
 			landview: {
-				title: '랜드 조회',
+				title: '랜드 정보 조회',
 				permissions: {
 					read: authType.landRead,
 					update: authType.landUpdate,

src/components/ServiceManage/index.js

@@ -1,25 +1,29 @@
 import BoardInfoModal from './modal/BoardInfoModal';
 import BoardRegistModal from './modal/BoardRegistModal';
 import MailDetailModal from './modal/MailDetailModal';
-import MailListSearchBar from './searchBar/MailListSearchBar';
+import LandAuctionModal from './modal/LandAuctionModal'
+import BattleEventModal from './modal/BattleEventModal'
 import ReportListAnswerModal from './modal/ReportListAnswerModal';
 import ReportListDetailModal from './modal/ReportListDetailModal';
-import ReportListSearchBar from './searchBar/ReportListSearchBar';
 import UserBlockDetailModal from './modal/UserBlockDetailModal';
+//searchbar
+import ReportListSearchBar from './searchBar/ReportListSearchBar';
 import UserBlockSearchBar from './searchBar/UserBlockSearchBar';
-import WhiteListSearchBar from './WhiteListRegistBar';
-import ReportListSummary from './ReportListSummary';
 import ItemsSearchBar from './searchBar/ItemsSearchBar';
 import EventListSearchBar from './searchBar/EventListSearchBar';
 import LandAuctionSearchBar from './searchBar/LandAuctionSearchBar'
-import LandAuctionModal from './modal/LandAuctionModal'
+import MailListSearchBar from './searchBar/MailListSearchBar';
-import BattleEventModal from './modal/BattleEventModal'
+import LandInfoSearchBar from './searchBar/LandInfoSearchBar';
+//etc
+import ReportListSummary from './ReportListSummary';
+import WhiteListSearchBar from './WhiteListRegistBar';
 
 export {
 	BoardInfoModal,
 	BoardRegistModal,
 	MailDetailModal,
 	MailListSearchBar,
+	LandInfoSearchBar,
 	ReportListAnswerModal,
 	ReportListDetailModal,
 	ReportListSearchBar,

src/components/ServiceManage/searchBar/LandInfoSearchBar.js

@@ -0,0 +1,200 @@
+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 } from '../../../assets/data';
+
+export const useLandInfoSearch = (token, initialPageSize) => {
+	const [searchParams, setSearchParams] = useState({
+		landType: 'ID',
+		landData: '',
+		landSize: 'ALL',
+		category: 'ALL',
+		status: 'ALL',
+		startDate: '',
+		endDate: '',
+		orderBy: 'DESC',
+		pageSize: initialPageSize,
+		currentPage: 1
+	});
+
+	const [loading, setLoading] = useState(false);
+	const [data, setData] = useState(null);
+
+	useEffect(() => {
+		// fetchData(searchParams); // 컴포넌트 마운트 시 초기 데이터 로드
+		const initialLoad = async () => {
+			await fetchData(searchParams);
+		};
+
+		initialLoad();
+	}, [token]);
+
+	const fetchData = useCallback(async (params) => {
+		if (!token) return;
+
+		try {
+			setLoading(true);
+			const result = await LandInfoData(
+				token,
+				params.landType,
+				params.landData,
+				params.landSize,
+				params.category,
+				params.status,
+				params.startDate && new Date(params.startDate).toISOString(),
+				params.endDate && new Date(params.endDate).toISOString(),
+				params.orderBy,
+				params.pageSize,
+				params.currentPage
+			);
+			setData(result);
+			return result;
+		} catch (error) {
+			console.error('Error fetching auction data:', error);
+			throw error;
+		} finally {
+			setLoading(false);
+		}
+	}, [token]);
+
+	const updateSearchParams = useCallback((newParams) => {
+		setSearchParams(prev => ({
+			...prev,
+			...newParams
+		}));
+	}, []);
+
+	const handleSearch = useCallback(async (newParams = {}) => {
+		const updatedParams = {
+			...searchParams,
+			...newParams,
+			currentPage: newParams.currentPage || 1 // Reset to first page on new search
+		};
+		updateSearchParams(updatedParams);
+		return await fetchData(updatedParams);
+	}, [searchParams, fetchData]);
+
+	const handleReset = useCallback(async () => {
+		const resetParams = {
+			landType: 'ID',
+			landData: '',
+			landSize: 'ALL',
+			category: 'ALL',
+			status: 'ALL',
+			startDate: '',
+			endDate: '',
+			orderBy: 'DESC',
+			pageSize: initialPageSize,
+			currentPage: 1
+		};
+		setSearchParams(resetParams);
+		return await fetchData(resetParams);
+	}, [initialPageSize, fetchData]);
+
+	const handlePageChange = useCallback(async (newPage) => {
+		return await handleSearch({ currentPage: newPage });
+	}, [handleSearch]);
+
+	const handlePageSizeChange = useCallback(async (newSize) => {
+		return await handleSearch({ pageSize: newSize, currentPage: 1 });
+	}, [handleSearch]);
+
+	const handleOrderByChange = useCallback(async (newOrder) => {
+		return await handleSearch({ orderBy: newOrder });
+	}, [handleSearch]);
+
+	return {
+		searchParams,
+		loading,
+		data,
+		handleSearch,
+		handleReset,
+		handlePageChange,
+		handlePageSizeChange,
+		handleOrderByChange,
+		updateSearchParams
+	};
+};
+
+const LandInfoSearchBar = ({ searchParams, onSearch, onReset }) => {
+	const handleSubmit = event => {
+		event.preventDefault();
+
+		onSearch(searchParams);
+	};
+
+	const searchList = [
+		<>
+			<InputGroup>
+				<SelectInput value={searchParams.landType} onChange={e => onSearch({landType: e.target.value })}>
+					{landSearchType.map((data, index) => (
+						<option key={index} value={data.value}>
+							{data.name}
+						</option>
+					))}
+				</SelectInput>
+				<TextInput
+					type="text"
+					placeholder={searchParams.landType === 'ID' ? '랜드 ID 입력' : '랜드명 입력'}
+					value={searchParams.landData}
+					width="300px"
+					onChange={e => onSearch({ landData: e.target.value })}
+				/>
+			</InputGroup>
+		</>,
+		<>
+			<InputLabel>랜드크기</InputLabel>
+			<SelectInput value={searchParams.landSize} onChange={e => onSearch({ landSize: e.target.value }, false)} >
+				{landSize.map((data, index) => (
+					<option key={index} value={data.value}>
+						{data.name}
+					</option>
+				))}
+			</SelectInput>
+		</>,
+		<>
+			<InputLabel>랜드상태</InputLabel>
+			<SelectInput value={searchParams.status} onChange={e => onSearch({ status: e.target.value }, false)} >
+				{landAuctionStatus.map((data, index) => (
+					<option key={index} value={data.value}>
+						{data.name}
+					</option>
+				))}
+			</SelectInput>
+		</>,
+	];
+
+	const optionList = [
+		<>
+			<InputLabel>카테고리</InputLabel>
+			<SelectInput value={searchParams.category} onChange={e => onSearch({ category: e.target.value }, false)}>
+				{landAuctionStatus.map((data, index) => (
+					<option key={index} value={data.value}>
+						{data.name}
+					</option>
+				))}
+			</SelectInput>
+		</>,
+		<>
+			<InputLabel>일자</InputLabel>
+			<SearchPeriod
+				startDate={searchParams.startDate}
+				handleStartDate={date => onSearch({ startDate: date }, false)}
+				endDate={searchParams.endDate}
+				handleEndDate={date => onSearch({ endDate: date }, false)}
+			/>
+		</>,
+		<></>,<></>,
+		<>
+			<BtnWrapper $gap="8px">
+				<Button theme="reset" handleClick={onReset} type="button" />
+				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
+			</BtnWrapper>
+		</>,
+	];
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
+};
+
+export default LandInfoSearchBar;

src/data/index.js

@@ -1,2 +0,0 @@
-export {ivenTabType, modalTypes} from './types'
-export {mailSendType, mailType, mailSendStatus, mailReceiveType, adminLevelType} from './options'

src/data/options.js

@@ -1,34 +0,0 @@
-export const mailSendType = [
-	{ value: 'ALL', name: '전체' },
-	{ value: 'RESERVE_SEND', name: '예약 발송' },
-	{ value: 'DIRECT_SEND', name: '즉시 발송' },
-];
-
-export const mailSendStatus = [
-	{ value: 'ALL', name: '전체' },
-	{ value: 'WAIT', name: '대기' },
-	{ value: 'FINISH', name: '완료' },
-	{ value: 'FAIL', name: '실패' },
-	{ value: 'RUNNING', name: '전송중' },
-];
-
-export const mailType = [
-	{ value: 'ALL', name: '전체' },
-	{ value: 'SYSTEM_GUID', name: '시스템 안내' },
-	{ value: 'INSPECTION_COMPENSATION', name: '점검 보상' },
-	{ value: 'RECOVER_COMPENSATION', name: '복구 보상' },
-	{ value: 'EVENT_COMPENSATION', name: '이벤트 보상' },
-];
-
-export const mailReceiveType = [
-	{ value: 'ALL', name: '전체' },
-	{ value: 'SINGLE', name: '단일' },
-	{ value: 'MULTIPLE', name: '복수' },
-];
-
-export const adminLevelType = [
-	{ value: '0', name: '없음' },
-	{ value: '1', name: 'GM' },
-	{ value: '2', name: 'Super GM' },
-	{ value: '3', name: 'Developer' },
-]

src/data/types.js

@@ -1,16 +0,0 @@
-
-export const ivenTabType = {
-	CLOTH: "cloth",
-	PROP: "prop",
-	BEAUTY: "beauty",
-	TATTOO: "tattoo",
-	CURRENCY: "currency",
-	ETC: "etc"
-};
-
-export const modalTypes = {
-	confirmOkCancel: "confirmOkCancel",
-	completed: "completed",
-	childOkCancel: "childOkCancel",
-}
-

src/i18n.js

@@ -88,8 +88,8 @@ const resources = {
 			BATTLE_EVENT_MODAL_START_DT_WARNING: "시작 시간은 현재 시간으로부터 10분 이후부터 가능합니다.",
 			BATTLE_EVENT_MODAL_START_DIFF_END_WARNING :"종료일은 시작일보다 하루 이후여야 합니다.",
 			BATTLE_EVENT_MODAL_TIME_CHECK_WARNING :"해당 시간에 속하는 이벤트가 존재합니다.",
-			BATTLE_EVENT_REGIST_CONFIRM: "랜드 경매를 등록하시겠습니까?",
+			BATTLE_EVENT_REGIST_CONFIRM: "이벤트를 등록하시겠습니까?",
-			BATTLE_EVENT_UPDATE_CONFIRM: "랜드 경매를 수정하시겠습니까?",
+			BATTLE_EVENT_UPDATE_CONFIRM: "이벤트를 수정하시겠습니까?",
 			BATTLE_EVENT_SELECT_DELETE: "선택된 이벤트를 삭제하시겠습니까?",
 			BATTLE_EVENT_SELECT_STOP: "선택된 이벤트를 중단하시겠습니까?",
 			BATTLE_EVENT_STOP_5MINUTES_DATE_WARNING: "이벤트 시작 5분 전에는 중단할 수 없습니다.",

src/pages/DataManage/LandInfoView.js

@@ -1,29 +1,27 @@
 import { styled } from 'styled-components';
 import { Link } from 'react-router-dom';
-import { Fragment, useRef, useState } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 
 import { Title, TableStyle, BtnWrapper, ButtonClose, ModalText, FormWrapper } from '../../styles/Components';
 
-import LandSearchBar from '../../components/DataManage/LandSearchBar';
 import Button from '../../components/common/button/Button';
-import QuestDetailModal from '../../components/DataManage/QuestDetailModal';
-import LandDetailModal from '../../components/DataManage/LandDetailModal';
-import Modal from '../../components/common/modal/Modal';
 
 import { useNavigate } from 'react-router-dom';
 import { authList } from '../../store/authList';
 import { useRecoilValue } from 'recoil';
 import { useDataFetch, useModal, useTable, withAuth } from '../../utils/hook';
-import { authType, landAuctionStatusType } from '../../assets/data';
+import { authType } from '../../assets/data';
 import { useLandAuctionSearch } from '../../components/ServiceManage/searchBar/LandAuctionSearchBar';
-import { INITIAL_PAGE_SIZE } from '../../assets/data/adminConstants';
+import { INITIAL_PAGE_LIMIT, INITIAL_PAGE_SIZE } from '../../assets/data/adminConstants';
-import { LandAuctionDelete, LandAuctionDetailView } from '../../apis';
-import { convertKTC, timeDiffMinute } from '../../utils';
 import { useTranslation } from 'react-i18next';
-import { ExcelDownButton, ViewTableInfo } from '../../components/common';
+import { CheckBox, ExcelDownButton, Pagination, ViewTableInfo } from '../../components/common';
 import { LandAuctionSearchBar } from '../../components/ServiceManage';
+import LandInfoSearchBar, { useLandInfoSearch } from '../../components/ServiceManage/searchBar/LandInfoSearchBar';
+import { convertKTCDate } from '../../utils';
+import Loading from '../../components/common/Loading';
+import { TableSkeleton } from '../../components/Skeleton/TableSkeleton';
 
-const LandView = () => {
+const LandInfoView = () => {
 	const token = sessionStorage.getItem('token');
 	const navigate = useNavigate();
 	const userInfo = useRecoilValue(authList);
@@ -46,6 +44,7 @@ const LandView = () => {
 
 	const {
 		searchParams,
+		loading,
 		data: dataList,
 		handleSearch,
 		handleReset,
@@ -53,17 +52,17 @@ const LandView = () => {
 		handlePageSizeChange,
 		handleOrderByChange,
 		updateSearchParams
-	} = useLandAuctionSearch(token, INITIAL_PAGE_SIZE);
+	} = useLandInfoSearch(token, INITIAL_PAGE_SIZE);
 
 	const {
 		selectedRows,
 		handleSelectRow,
 		isRowSelected
-	} = useTable(dataList?.auction_list || [], {mode: 'single'});
+	} = useTable(dataList?.land_info_list || [], {mode: 'single'});
 
-	const {
+	// const {
-		data: landData
+	// 	data: landData
-	} = useDataFetch(() => LandView(token), [token]);
+	// } = useDataFetch(() => LandView(token), [token]);
 
 	const handleModalSubmit = async (type, param = null) => {
 		switch (type) {
@@ -136,9 +135,9 @@ const LandView = () => {
 
 	return (
 		<>
-			<Title>랜드 조회</Title>
+			<Title>랜드 정보 조회</Title>
 			<FormWrapper>
-				<LandAuctionSearchBar
+				<LandInfoSearchBar
 					searchParams={searchParams}
 					onSearch={(newParams, executeSearch = true) => {
 						if (executeSearch) {
@@ -152,9 +151,6 @@ const LandView = () => {
 			</FormWrapper>
 			<ViewTableInfo total={dataList?.total} total_all={dataList?.total_all} handleOrderBy={handleOrderByChange} handlePageSize={handlePageSizeChange}>
 				<ExcelDownButton tableRef={tableRef} fileName={t('FILE_LAND_AUCTION')} />
-				{userInfo.auth_list?.some(auth => auth.id === authType.landDelete) && (
-					<Button theme={selectedRows.length === 0 ? 'disable' : 'line'} text="선택 삭제" handleClick={() => handleModalSubmit('delete')} />
-				)}
 				{userInfo.auth_list?.some(auth => auth.id === authType.landUpdate) && (
 					<Button
 						theme={selectedRows.length === 0 ? 'disable' : 'line'}
@@ -164,30 +160,45 @@ const LandView = () => {
 					/>
 				)}
 			</ViewTableInfo>
+			{loading ? <TableSkeleton width='100%' count={15} /> :
 			<TableWrapper>
 				<TableStyle ref={tableRef}>
 					<thead>
-						<tr>
+					<tr>
-							<th width="150">랜드 ID</th>
+						<th width="40"></th>
-							<th>랜드 이름</th>
+						<th width="150">랜드 ID</th>
-							<th>랜드 상태</th>
+						<th>랜드 이름</th>
-							<th>카테고리</th>
+						<th>랜드 상태</th>
-							<th>랜드 크기</th>
+						<th>카테고리</th>
-							<th>보유시작일</th>
+						<th>랜드 크기</th>
-							<th width="150">상세보기</th>
+						<th>인스턴스 수</th>
-						</tr>
+						<th>유저 소유 여부</th>
+						<th>보유자</th>
+						<th>보유시작일</th>
+						<th>낙찰 가격</th>
+						<th width="150">상세보기</th>
+					</tr>
 					</thead>
 					<tbody>
-						{dataList.map((data, index) => (
+						{dataList?.land_info_list?.map((data, index) => (
 							<Fragment key={index}>
 								<tr>
-									<td>{data.landId}</td>
-									<td>{data.ownerNick}</td>
-									<td>{data.ownerId}</td>
-									<td>{new Date(data.lockInDate).toLocaleString()}</td>
 									<td>
-										<LandLink to={data.landUrl}>{data.landUrl}</LandLink>
+										<CheckBox name={'select'} id={data.id}
+												  setData={(e) => handleSelectRow(e, data)}
+												  checked={isRowSelected(data.id)} />
 									</td>
+									<td>{data.land_id}</td>
+									<td>{data.land_name}</td>
+									<td>{data.status}</td>
+									<td>{data.editor}</td>
+									<td>{data.land_size}</td>
+									<td>{data.socket}</td>
+									<td>{data.non_auction}</td>
+									<td>{data.owner_user_nickname}</td>
+									{/*<td>{convertKTCDate(data.owner_user_create_date)}</td>*/}
+									<td>{data.owner_user_create_date}</td>
+									<td>{data.owner_user_price}</td>
 									<td>
 										{/*<Button theme="line" text="상세보기" handleClick={handleClick} />*/}
 									</td>
@@ -197,12 +208,14 @@ const LandView = () => {
 					</tbody>
 				</TableStyle>
 			</TableWrapper>
+			}
+			<Pagination postsPerPage={searchParams.pageSize} totalPosts={dataList?.total_all} setCurrentPage={handlePageChange} currentPage={searchParams.currentPage} pageLimit={INITIAL_PAGE_LIMIT} />
 			{/*<LandDetailModal detailPop={detailPop} handleClick={handleClick} />*/}
 		</>
 	);
 };
 
-export default withAuth(authType.landRead)(LandView);
+export default withAuth(authType.landRead)(LandInfoView);
 
 const TableWrapper = styled.div`
 	overflow: auto;

src/pages/DataManage/index.js

@@ -1,4 +1,4 @@
 export { default as UserView } from './UserView';
-export { default as LandView } from './LandView';
+export { default as LandInfoView } from './LandInfoView';
 export { default as GameLogView } from './GameLogView';
 export { default as CryptView } from './CryptView';

src/utils/common.js

@@ -17,6 +17,7 @@ export const convertKTC = (dt, nation = true) => {
 }
 
 export const convertKTCDate = (dt) => {
+	if(!dt) return "";
 	const date = new Date(dt);
 	date.setHours(date.getHours() + 9);
 	return date;