init

src/components/DataManage/UserMyHomeInfo.js

@@ -0,0 +1,70 @@
+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';
+
+const UserMyHomeInfo = ({ userInfo }) => {
+	const { t } = useTranslation();
+
+	const [dataList, setDataList] = useState();
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		fetchData();
+	}, []);
+
+	const fetchData = async () => {
+		const token = sessionStorage.getItem('token');
+		await UserMyhomeView(token, userInfo.guid).then(data => {
+			setDataList(data.myhome_info);
+			setLoading(false);
+		});
+	};
+
+	return (
+		loading ? <TableSkeleton count={15}/> :
+			dataList &&
+			<>
+				<UserInfoTable $maxwidth="700px">
+					<tbody>
+					<tr>
+						<th>마이 홈명</th>
+						<td>{dataList.myhome_name}</td>
+					</tr>
+					</tbody>
+				</UserInfoTable>
+				<InfoSubTitle top='30px'>배치 소품</InfoSubTitle>
+				<UserTableWrapper>
+					<UserDefaultTable>
+						<thead>
+						<tr>
+							<th width="80">no.</th>
+							<th width="120">아이템ID</th>
+							<th width="50%">아이템명</th>
+						</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>
+							);
+						})}
+						</tbody>
+					</UserDefaultTable>
+				</UserTableWrapper>
+			</>
+	);
+};
+
+export default UserMyHomeInfo;
+
+