73 lines
1.8 KiB
JavaScript
73 lines
1.8 KiB
JavaScript
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(() => {
|
|
if(userInfo && Object.keys(userInfo).length > 0) {
|
|
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;
|
|
|
|
|