Merge pull request #91 from tempfiles-Team/35-filelist-page-file이-없을때

35 filelist page file이 없을때
tempfiles-team · Nov 17, 2022 · 2bac6fc · 2bac6fc
2 parents 1128bd8 + cb97549
commit 2bac6fc
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 22 deletions.
diff --git 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 ? (
         <>
           <S.FileListPageContainer>
-            {fileList?.map((item, index) => (
-              <FileListBox
-                key={index}
-                filename={getShortFileName(item.filename)}
-                fileId={item.fileId}
-                size={getFileSize(item.size)}
-                uploadDate={getDate(item.uploadDate)}
-                isEncrypted={item.isEncrypted}
-                click={() => {
-                  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) => (
+                  <FileListBox
+                    key={index}
+                    filename={getShortFileName(item.filename)}
+                    fileId={item.fileId}
+                    size={getFileSize(item.size)}
+                    uploadDate={getDate(item.uploadDate)}
+                    isEncrypted={item.isEncrypted}
+                    click={() => {
+                      if (item.isEncrypted) {
+                        navigate(`/checkpw/${item.fileId}`);
+                      } else {
+                        SetDownloadFileProps({
+                          fileId: item.fileId,
+                          isEncrypted: item.isEncrypted,
+                          token: null,
+                        });
+                        navigate(`/download/${item.fileId}`);
+                      }
+                    }}
+                  />
+                ))}
+              </>
+            ) : (
+              <S.FileListZero>업로드된 파일이 없습니다.</S.FileListZero>
+            )}
           </S.FileListPageContainer>
           <S.FileListPageBoxShoadow />
         </>

diff --git 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;
+`;