마이홈 리스트형식으로 변경

src/components/DataManage/UserMyHomeInfo.js

@@ -1,18 +1,16 @@
-import styled from 'styled-components';
-import Button from '../common/button/Button';
 import { InfoSubTitle, UserDefaultTable, UserInfoTable, UserTableWrapper } from '../../styles/ModuleComponents';
 import { useTranslation } from 'react-i18next';
-import { useRecoilValue } from 'recoil';
-import { authList } from '../../store/authList';
 import { useEffect, useState } from 'react';
 import { TableSkeleton } from '../Skeleton/TableSkeleton';
-import { UserInventoryView, UserMyhomeView } from '../../apis';
+import { UserMyhomeView } from '../../apis';
+import { SelectInput } from '../../styles/Components';
 
 const UserMyHomeInfo = ({ userInfo }) => {
 	const { t } = useTranslation();
 
 	const [dataList, setDataList] = useState();
 	const [loading, setLoading] = useState(true);
+	const [selectedHome, setSelectedHome] = useState('');
 
 	useEffect(() => {
 		if(userInfo && Object.keys(userInfo).length > 0) {
@@ -23,11 +21,18 @@ const UserMyHomeInfo = ({ userInfo }) => {
 	const fetchData = async () => {
 		const token = sessionStorage.getItem('token');
 		await UserMyhomeView(token, userInfo.guid).then(data => {
-			setDataList(data.myhome_info);
+			setDataList(data);
+			if (data.myhome_info && data.myhome_info.length > 0) {
+				setSelectedHome(data.myhome_info[0].myhome_guid);
+			}
 			setLoading(false);
 		});
 	};
 
+	const handleHomeChange = (e) => {
+		setSelectedHome(e.target.value);
+	};
+
 	return (
 		loading ? <TableSkeleton count={15}/> :
 			dataList &&
@@ -36,7 +41,13 @@ const UserMyHomeInfo = ({ userInfo }) => {
 					<tbody>
 					<tr>
 						<th>마이 홈명</th>
-						<td>{dataList.myhome_name}</td>
+						<SelectInput onChange={handleHomeChange} value={selectedHome}>
+							{dataList.myhome_info && dataList.myhome_info.map((data, index) => (
+								<option key={index} value={data.myhome_guid}>
+									{data.myhome_name}
+								</option>
+							))}
+						</SelectInput>
 					</tr>
 					</tbody>
 				</UserInfoTable>
@@ -51,15 +62,19 @@ const UserMyHomeInfo = ({ userInfo }) => {
 						</tr>
 						</thead>
 						<tbody>
-						{dataList.prop_list && dataList.prop_list.map((el, idx) => {
-							return (
-								<tr key={idx}>
-									<td>{idx + 1}</td>
-									<td>{el.item_id}</td>
-									<td>{el.item_name}</td>
-								</tr>
-							);
-						})}
+						{dataList.myhome_info.find(home => home.myhome_guid === selectedHome)?.prop_list?.map((el, idx) => (
+							<tr key={idx}>
+								<td>{idx + 1}</td>
+								<td>{el.item_id}</td>
+								<td>{el.item_name}</td>
+							</tr>
+						))}
+						{(!dataList.myhome_info.find(home => home.myhome_guid === selectedHome)?.prop_list ||
+							dataList.myhome_info.find(home => home.myhome_guid === selectedHome)?.prop_list.length === 0) && (
+							<tr>
+								<td colSpan="3" style={{textAlign: 'center'}}>{t('TABLE_DATA_NOT_FOUND')}</td>
+							</tr>
+						)}
 						</tbody>
 					</UserDefaultTable>
 				</UserTableWrapper>

src/i18n.js

@@ -55,9 +55,11 @@ const resources = {
 			DOWNLOAD_COMPLETE: '다운이 완료되었습니다.',
 			DOWNLOAD_FAIL: '다운이 실패하였습니다.',
 			DELETE_STATUS_ONLY_WAIT: '대기상태의 데이터만 삭제가 가능합니다.',
+			TABLE_DATA_NOT_FOUND: '데이터가 없습니다.',
 			//user
 			NICKNAME_CHANGES_CONFIRM: '닉네임을 변경하시겠습니까?',
 			NICKNAME_CHANGES_COMPLETE: '닉네임 변경이 완료되었습니다.',
+			QUEST_TASK_COMPLETE_CONFIRM: '퀘스트를 강제 완료 처리하시겠습니까?',
 			//table
 			TABLE_ITEM_DELETE_TITLE: "선택 삭제",
 			TABLE_BUTTON_DETAIL_TITLE: "상세보기",

src/pages/DataManage/UserView.js

@@ -128,30 +128,3 @@ const UserTabInfo = styled.div`
 		background: #d9d9d9;
 	}
 `;
-
-const UserDefaultTable = styled.table`
-	border: 1px solid #e8eaec;
-	border-top: 1px solid #000;
-	font-size: 14px;
-	margin-bottom: 40px;
-	th {
-		background: #efefef;
-		font-weight: 700;
-	}
-	th,
-	td {
-		padding: 12px;
-		text-align: center;
-		border-left: 1px solid #e8eaec;
-		vertical-align: middle;
-	}
-	td {
-		background: #fff;
-		border-bottom: 1px solid #e8eaec;
-		word-break: break-all;
-	}
-	button {
-		height: 24px;
-		font-size: 13px;
-	}
-`;