diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx index 3d108ba..234d43d 100644 --- a/src/pages/filelist/index.tsx +++ b/src/pages/filelist/index.tsx @@ -12,6 +12,7 @@ import * as S from './styled'; export const FileListPage: React.FC = () => { const navigate = useNavigate(); const [loading, setLoading] = useState(false); + const [listZero, setListZero] = useState(false); //test: true const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80']; const dispatch = useDispatch(); const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch); @@ -23,6 +24,9 @@ export const FileListPage: React.FC = () => { }) .then((res) => { setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정 + if (res.data.numberOfList === 0) { + setListZero(true); + } setTimeout(() => { setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요. }, 1000); @@ -39,28 +43,34 @@ export const FileListPage: React.FC = () => { {loading ? ( <> - {fileList?.map((item, index) => ( - { - if (item.isEncrypted) { - navigate(`/checkpw/${item.fileId}`); - } else { - SetDownloadFileProps({ - fileId: item.fileId, - isEncrypted: item.isEncrypted, - token: null, - }); - navigate(`/download/${item.fileId}`); - } - }} - /> - ))} + {!listZero ? ( + <> + {fileList?.map((item, index) => ( + { + if (item.isEncrypted) { + navigate(`/checkpw/${item.fileId}`); + } else { + SetDownloadFileProps({ + fileId: item.fileId, + isEncrypted: item.isEncrypted, + token: null, + }); + navigate(`/download/${item.fileId}`); + } + }} + /> + ))} + + ) : ( + 업로드된 파일이 없습니다. + )} diff --git a/src/pages/filelist/styled.ts b/src/pages/filelist/styled.ts index 2d99b87..33509d8 100644 --- a/src/pages/filelist/styled.ts +++ b/src/pages/filelist/styled.ts @@ -18,3 +18,9 @@ export const FileListPageBoxShoadow = styled.div` top: -2.5rem; //-25px background: linear-gradient(180deg, rgba(40, 42, 58, 0) 0%, #282a3a 45.31%); `; + +export const FileListZero = styled.div` + font-size: 3rem; + font-weight: 700; + margin: 5rem; +`;