랜드 소유권 변경

src/apis/Land.js

@@ -69,6 +69,21 @@ export const LandAuctionSingleRegist = async (token, params) => {
 	}
 };
 
+// 랜드 소유권 변경 등록
+export const LandOwnedChangesRegist = async (token, params) => {
+	try {
+		const res = await Axios.post(`/api/v1/land/change`, params, {
+			headers: { Authorization: `Bearer ${token}` },
+		});
+
+		return res.data;
+	} catch (e) {
+		if (e instanceof Error) {
+			throw new Error('LandAuctionSingleRegist Error', e);
+		}
+	}
+};
+
 // 랜드 경매 수정
 export const LandAuctionModify = async (token, id, params) => {
 	try {
@@ -84,6 +99,21 @@ export const LandAuctionModify = async (token, id, params) => {
 	}
 };
 
+// 랜드 소유권 변경 수정
+export const LandOwnedChangesModify = async (token, id, params) => {
+	try {
+		const res = await Axios.put(`/api/v1/land/change/${id}`, params, {
+			headers: { Authorization: `Bearer ${token}` },
+		});
+
+		return res.data;
+	} catch (e) {
+		if (e instanceof Error) {
+			throw new Error('LandAuctionModify Error', e);
+		}
+	}
+};
+
 // 랜드 경매 삭제
 export const LandAuctionDelete = async (token, params, id) => {
 	try {

src/assets/data/index.js

@@ -18,6 +18,8 @@ export {
 	landAuctionStatus,
 	landSearchType,
 	CurrencyType,
-	languageType
+	languageType,
+	opLandCategoryType,
+	opLandOwnedType
 } from './options'
 export {benItems, MinuteList, HourList, caliumRequestInitData, STATUS_STYLES, months} from './data'

src/assets/data/options.js

@@ -206,3 +206,14 @@ export const eventSearchType = [
 
 export const battleEventRoundCount = [1,2,3,4,8,12,16];
 export const battleEventHotTime = [1,2,3,4,5,6,7,8];
+
+export const opLandOwnedType = [
+	{ value: true, name: '가능' },
+	{ value: false, name: '불가능' },
+];
+
+export const opLandCategoryType = [
+	{ value: 'public', name: '공공 임대형' },
+	{ value: 'auction', name: '경매' },
+	{ value: 'event', name: '이벤트 지급' },
+];

src/components/ServiceManage/modal/OwnerChangeModal.js

@@ -0,0 +1,350 @@
+import React, { useState, Fragment, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '../../common/button/Button';
+import Loading from '../../common/Loading';
+
+import {
+	Title,
+	BtnWrapper,
+	SearchBarAlert, SelectInput,
+} from '../../../styles/Components';
+
+import {
+	FormInput,
+	FormLabel,
+	MessageWrapper,
+	FormRowGroup,
+	FormStatusBar,
+	FormStatusLabel,
+	FormStatusWarning,
+	FormButtonContainer, FormGroup, FormItemGroup, SubText,
+} from '../../../styles/ModuleComponents';
+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 { convertKTCDate } from '../../../utils';
+import { BattleEventModify, BattleEventSingleRegist } from '../../../apis/Battle';
+import { battleEventStatusType } from '../../../assets/data/types';
+import { isValidDayRange } from '../../../utils/date';
+import CheckBox from '../../common/input/CheckBox';
+import { LandOwnedChangesRegist, UserInfoView } from '../../../apis';
+
+const OwnerChangeModal = ({ modalType, detailView, handleDetailView, content, setDetailData }) => {
+	const { t } = useTranslation();
+	const token = sessionStorage.getItem('token');
+
+	const [loading, setLoading] = useState(false);		// 로딩 창
+	const {
+		modalState,
+		handleModalView,
+		handleModalClose
+	} = useModal({
+		cancel: 'hidden',
+		registConfirm: 'hidden',
+		registComplete: 'hidden'
+	});
+
+	const [isNullValue, setIsNullValue] = useState(false);		// 데이터 값 체크
+	const [alertMsg, setAlertMsg] = useState('');
+
+	const [resultData, setResultData] = useState(initData);	//데이터 정보
+
+	useEffect(() => {
+		if(content && Object.keys(content).length > 0){
+			setResultData({
+				...resultData,
+				land_id: content.land_id,
+				land_name: content.land_name,
+				building_id: content.building_id,
+				building_name: content.building_name,
+			});
+		}
+	}, [modalType, content]);
+
+	useEffect(() => {
+		if (checkCondition()) {
+			setIsNullValue(false);
+		} else {
+			setIsNullValue(true);
+		}
+	}, [resultData]);
+
+	// 날짜 변경 핸들러
+	const handleStartDateChange = (date) => {
+		if (!date) return;
+
+		const newDate = new Date(date);
+
+		setResultData(prev => ({
+			...prev,
+			reservation_dt: newDate
+		}));
+	};
+
+	// 시간 변경 핸들러
+	const handleStartTimeChange = (time) => {
+		if (!time) return;
+
+		const newDateTime = resultData.reservation_dt
+			? new Date(resultData.reservation_dt)
+			: new Date();
+
+		newDateTime.setHours(
+			time.getHours(),
+			time.getMinutes(),
+			0,
+			0
+		);
+
+		setResultData(prev => ({
+			...prev,
+			reservation_dt: newDateTime
+		}));
+	};
+
+	const handleReset = () => {
+		setDetailData({});
+		setResultData(initData);
+		handleDetailView();
+	}
+
+	const handleSubmit = async (type, param = null) => {
+		switch (type) {
+			case "submit":
+				if (!checkCondition()) return;
+
+
+
+				handleModalView('registConfirm');
+				break;
+			case "cancel":
+				handleModalView('cancel');
+				break;
+			case "cancelConfirm":
+				handleModalClose('cancel');
+				handleReset();
+				break;
+			case "user":
+				const guid = resultData.user_guid;
+				if(!guid || guid.length !== 32){
+					setAlertMsg(t('WARNING_GUID_CHECK'))
+					return;
+				}
+				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: '' })
+						return;
+					}
+					const nickname = data.char_info.character_name;
+					setResultData({ ...resultData, user_name: nickname })
+				}).catch(reason => {
+					setAlertMsg(t('API_FAIL'));
+				});
+				break;
+			case "registConfirm":
+				setLoading(true);
+
+				await LandOwnedChangesRegist(token, resultData).then(data => {
+					setLoading(false);
+					handleModalClose('registConfirm');
+					if(data.result === "SUCCESS") {
+						handleModalView('registComplete');
+					}else if(data.result === "GUID_CHECK"){
+						setAlertMsg(t('WARNING_GUID_CHECK'));
+					}else{
+						setAlertMsg(t('REGIST_FAIL'));
+					}
+				}).catch(reason => {
+					setAlertMsg(t('API_FAIL'));
+				});
+				break;
+			case "registComplete":
+				handleModalClose('registComplete');
+				handleReset();
+				window.location.reload();
+				break;
+			case "warning":
+				setAlertMsg('');
+				break;
+		}
+	}
+
+	const checkCondition = () => {
+		return (
+			resultData.land_id !== ''
+			&& resultData.land_name !== ''
+			&& resultData.user_guid !== ''
+			&& resultData.user_name !== ''
+			&& (!resultData.is_reserve || (resultData.is_reserve && resultData.reservation_dt !== ''))
+		);
+	};
+
+	const isView = (label) => {
+		switch (label) {
+			case "modify":
+				return modalType === TYPE_MODIFY && (content?.status === battleEventStatusType.stop);
+			case "start_dt":
+			case "repeat":
+			case "registry":
+				return modalType === TYPE_REGISTRY
+			case "end_dt":
+			case "group":
+			case "name":
+			case "config":
+			case "reward":
+			case "round":
+			case "hot":
+				return modalType === TYPE_REGISTRY || (modalType === TYPE_MODIFY &&(content?.status === battleEventStatusType.stop));
+			default:
+				return modalType === TYPE_MODIFY && (content?.status !== battleEventStatusType.stop);
+		}
+	}
+
+	return (
+		<>
+			<Modal min="760px" $view={detailView}>
+				<Title $align="center">소유권 변경</Title>
+				<MessageWrapper>
+					<FormRowGroup>
+						{/*<FormItemGroup>*/}
+						{/*	<CheckBox*/}
+						{/*		label="예약"*/}
+						{/*		id="reserve"*/}
+						{/*		checked={resultData.is_reserve}*/}
+						{/*		setData={e => setResultData({ ...resultData, is_reserve: e.target.checked, reservation_dt: new Date() })}*/}
+						{/*	/>*/}
+						{/*</FormItemGroup>*/}
+						{resultData.is_reserve && (
+							<>
+								<SingleDatePicker
+									label="발송시간"
+									disabled={!isView('reservation_dt')}
+									dateLabel="발송 일자"
+									onDateChange={handleStartDateChange}
+									selectedDate={resultData?.reservation_dt}
+								/>
+								<SingleTimePicker
+									disabled={!isView('reservation_dt')}
+									selectedTime={resultData?.reservation_dt}
+									onTimeChange={handleStartTimeChange}
+								/>
+							</>
+						)}
+
+					</FormRowGroup>
+					<FormRowGroup><SubText>* 예약 발송 미선택 시 등록과 함께 우편이 즉시 발송됩니다.</SubText></FormRowGroup>
+					<FormRowGroup>
+						<FormLabel>변경 랜드</FormLabel>
+						<FormInput
+							type="text"
+							width='150px'
+							value={resultData?.land_id}
+							readOnly={true}
+						/>
+						<FormInput
+							type="text"
+							width='250px'
+							value={resultData?.land_name}
+							readOnly={true}
+						/>
+					</FormRowGroup>
+					<FormRowGroup>
+						<FormLabel>수신 대상</FormLabel>
+						<FormInput
+							type="text"
+							placeholder="guid 입력"
+							width='300px'
+							value={resultData?.user_guid}
+							onChange={e => setResultData({ ...resultData, user_guid: e.target.value })}
+						/>
+						<Button
+							text="확인"
+							theme="primary"
+							type="submit"
+							size="large"
+							width="100px"
+							handleClick={() => handleSubmit('user')}
+						/>
+					</FormRowGroup>
+					<FormRowGroup>
+						<FormLabel>캐릭터명</FormLabel>
+						<FormInput
+							type="text"
+							width='300px'
+							value={resultData?.user_name}
+							readOnly={true}
+						/>
+					</FormRowGroup>
+					{!isView() && isNullValue && <SearchBarAlert $marginTop="25px" $align="right">{t('REQUIRED_VALUE_CHECK')}</SearchBarAlert>}
+				</MessageWrapper>
+
+				<BtnWrapper $gap="10px" $marginTop="10px" $marginBottom="20px">
+					<FormButtonContainer $gap="10px">
+						<>
+							<Button text="취소" theme="line" handleClick={() => handleSubmit('cancel')} />
+							<Button
+								type="submit"
+								text={isView('modify') ? "수정" : "등록"}
+								name="등록버튼"
+								theme={
+									checkCondition()
+										? 'primary'
+										: 'disable'
+								}
+								handleClick={() => handleSubmit('submit')}
+							/>
+						</>
+					</FormButtonContainer>
+				</BtnWrapper>
+			</Modal>
+
+			{/* 확인 모달 */}
+			<DynamicModal
+				modalType={modalTypes.confirmOkCancel}
+				view={modalState.registConfirmModal}
+				modalText={isView('modify') ? t('BATTLE_EVENT_UPDATE_CONFIRM') : t('BATTLE_EVENT_REGIST_CONFIRM')}
+				handleSubmit={() => handleSubmit('registConfirm')}
+				handleCancel={() => handleModalClose('registConfirm')}
+			/>
+			{/* 완료 모달 */}
+			<DynamicModal
+				modalType={modalTypes.completed}
+				view={modalState.registCompleteModal}
+				modalText={isView('modify') ? t('UPDATE_COMPLETED') : t('REGIST_COMPLTE')}
+				handleSubmit={() => handleSubmit('registComplete')}
+			/>
+			{/* 취소 모달 */}
+			<DynamicModal
+				modalType={modalTypes.confirmOkCancel}
+				view={modalState.cancelModal}
+				modalText={t('CANCEL_CONFIRM')}
+				handleCancel={() => handleModalClose('cancel')}
+				handleSubmit={() => handleSubmit('cancelConfirm')}
+			/>
+			{/* 경고 모달 */}
+			<DynamicModal
+				modalType={modalTypes.completed}
+				view={alertMsg ? 'view' : 'hidden'}
+				modalText={alertMsg}
+				handleSubmit={() => handleSubmit('warning')}
+			/>
+			{loading && <Loading/>}
+		</>
+	);
+};
+
+export const initData = {
+	is_reserve: false,
+	land_id: '',
+	land_name: '',
+	user_guid: '',
+	user_name: '',
+	reservation_dt: ''
+}
+
+export default OwnerChangeModal;
+

src/i18n.js

@@ -38,6 +38,7 @@ const resources = {
 			WARNING_EMAIL_CHECK: '이메일을 확인해주세요.',
 			WARNING_TYPE_CHECK: '타입을 확인해주세요.',
 			//랜드
+			LAND_OWNED_CHANGES_WARNING: "해당 랜드는 소유권 변경이 불가능합니다.",
 			LAND_AUCTION_SELECT_DELETE: "선택된 경매를 삭제하시겠습니까?",
 			LAND_AUCTION_WARNING_DELETE: "대기 상태의 경매만 삭제할 수 있습니다.",
 			LAND_AUCTION_MODAL_STATUS_WARNING: "경매 시작일시 이후에는 변경이 불가합니다.",

src/pages/DataManage/LandInfoView.js

@@ -10,17 +10,25 @@ 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 } from '../../assets/data';
+import {
+	authType,
+	landAuctionStatus,
+	landSize,
+	modalTypes,
+	opLandCategoryType,
+	opLandOwnedType,
+} from '../../assets/data';
 import { useLandAuctionSearch } from '../../components/ServiceManage/searchBar/LandAuctionSearchBar';
 import { INITIAL_PAGE_LIMIT, INITIAL_PAGE_SIZE } from '../../assets/data/adminConstants';
 import { useTranslation } from 'react-i18next';
-import { CheckBox, ExcelDownButton, Pagination, ViewTableInfo } from '../../components/common';
+import { CheckBox, DynamicModal, 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';
 import OwnerChangeModal from '../../components/ServiceManage/modal/OwnerChangeModal';
+import { StatusLabel, StatusWapper } from '../../styles/ModuleComponents';
 
 const LandInfoView = () => {
 	const token = sessionStorage.getItem('token');
@@ -69,6 +77,12 @@ const LandInfoView = () => {
 		switch (type) {
 			case "regist":
 				setModalType('regist');
+				const selectRow = selectedRows[0];
+				if(!selectRow.owned) {
+					setAlertMsg(t('LAND_OWNED_CHANGES_WARNING'))
+					return;
+				}
+				setDetailData(selectRow);
 				handleModalView('detail');
 				break;
 			// case "detail":
@@ -128,11 +142,12 @@ const LandInfoView = () => {
 			// 	// fetchData(option);
 			// 	window.location.reload();
 			// 	break;
-			// case "warning":
+			case "warning":
-			// 	setAlertMsg('')
+				setAlertMsg('')
-			// 	break;
+				break;
 		}
 	}
+	console.log(dataList?.land_info_list)
 
 	return (
 		<>
@@ -177,7 +192,6 @@ const LandInfoView = () => {
 						<th>보유자</th>
 						<th>보유시작일</th>
 						<th>낙찰 가격</th>
-						<th width="150">상세보기</th>
 					</tr>
 					</thead>
 					<tbody>
@@ -192,17 +206,19 @@ const LandInfoView = () => {
 									<td>{data.land_id}</td>
 									<td>{data.land_name}</td>
 									<td>{data.status}</td>
-									<td>{data.editor}</td>
+									{/*<StatusWapper>*/}
-									<td>{data.land_size}</td>
+									{/*	<StatusLabel $status={data.status}>*/}
+									{/*		{landAuctionStatus.find(option => option.value === data.status)?.name}*/}
+									{/*	</StatusLabel>*/}
+									{/*</StatusWapper>*/}
+									<td>{opLandCategoryType.find(option => option.value === data.category)?.name}</td>
+									<td>{landSize.find(option => option.value === data.land_size)?.name}</td>
 									<td>{data.socket}</td>
-									<td>{data.non_auction}</td>
+									<td>{opLandOwnedType.find(option => option.value === data.owned)?.name}</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>{Number(data.owner_price) > 0 ? data.owner_price : ''}</td>
-									<td>
-										{/*<Button theme="line" text="상세보기" handleClick={handleClick} />*/}
-									</td>
 								</tr>
 							</Fragment>
 						))}
@@ -214,6 +230,13 @@ const LandInfoView = () => {
 			<Pagination postsPerPage={searchParams.pageSize} totalPosts={dataList?.total_all} setCurrentPage={handlePageChange} currentPage={searchParams.currentPage} pageLimit={INITIAL_PAGE_LIMIT} />
 
 			<OwnerChangeModal modalType={modalType} detailView={modalState.detailModal} handleDetailView={() => handleModalClose('detail')} content={detailData} setDetailData={setDetailData} />
+
+			<DynamicModal
+				modalType={modalTypes.completed}
+				view={alertMsg ? 'view' : 'hidden'}
+				modalText={alertMsg}
+				handleSubmit={() => handleModalSubmit('warning')}
+			/>
 		</>
 	);
 };

src/pages/ServiceManage/MailRegist.js

@@ -291,7 +291,6 @@ const MailRegist = () => {
 		await MailSingleRegist(token, resultData).then(data => {
 			setLoading(false);
 			handleSubmitModal();
-			console.log(data);
 			if(data.result === "ERROR"){
 				if(data.data.message === "ERROR_MAIL_ITEM_CALIUM_OVER"){
 					setAlertMsg(t('MAIL_ITEM_CALIUM_TOTAL_OVER_WARNING'));

src/styles/ModuleComponents.js

@@ -583,17 +583,20 @@ export const FormGroup = styled.div`
 export const FormRowGroup = styled.div`
     display: flex;
     flex-wrap: wrap;
-    gap: 20px 40px;
+    gap: 10px 40px;
     margin-bottom: 24px;
 `;
 
 export const FormLabel = styled.label`
-	display: block;
+	//display: block;
 	font-size: 16px;
 	margin-bottom: 8px;
 	min-width: fit-content;
 	font-weight: 700;
     line-height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
 `;
 
 export const FormInput = styled.input`