Dev

src/App.tsx

@@ -49,7 +49,7 @@ export const App: React.FC = () => (
         <Route path="/delete" element={<DeletePage />} />
         <Route path="/filelist" element={<FileListPage />} />
         <Route path="/api/*" element={<ApiPage />} />
-        <Route path="/checkpw" element={<CheckPasswordPage />} />
+        <Route path="/checkpw/:checkfileid" element={<CheckPasswordPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

src/components/common/Progress/index.tsx

@@ -8,9 +8,10 @@ type ProgressBarProps = {
   value: number;
   fileName: string;
   typing: string;
+  stateText: string;
 };
 
-export const Progress: React.FC<ProgressBarProps> = ({ value, fileName, typing }) => {
+export const Progress: React.FC<ProgressBarProps> = ({ value, fileName, typing, stateText }) => {
   const likecontainer = useRef();
   useEffect(() => {
     Lottie.loadAnimation({
@@ -26,7 +27,8 @@ export const Progress: React.FC<ProgressBarProps> = ({ value, fileName, typing }
       <S.ProgressAnimationBox ref={likecontainer} />
       <S.ProgressBar width={value} />
       <S.ProgressText>
-        {fileName} uploading{typing}
+        {fileName} {stateText}
+        {typing}
       </S.ProgressText>
     </S.ProgressContainer>
   );

src/pages/checkpw/index.tsx

@@ -1,21 +1,26 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { bindActionCreators } from 'redux';
 
-import { FileBox, Button } from '../../components';
+import { FileBox, Button, SkeletonUI } from '../../components';
 import { actionCreators } from '../../state';
-import { RootState } from '../../state/reducers';
 import { getDate } from '../../utils';
 import * as S from './styled';
 
 export const CheckPasswordPage: React.FC = () => {
-  const checkPasswordFileProps = useSelector((state: RootState) => state.CheckPasswordFileProps);
   const [password, setPassword] = useState('');
-  const { year, month, day } = getDate(checkPasswordFileProps.uploadDate);
+  const [loading, setLoading] = useState(true);
+  const { checkfileid } = useParams<{ checkfileid: string }>();
+  const [fileProps, setFileProps] = useState({
+    filename: '',
+    size: '',
+    uploadDate: { year: 0, month: 0, day: 0 },
+  });
+  // const { year, month, day } = getDate(checkPasswordFileProps.uploadDate);
   const dispatch = useDispatch();
   const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
 
@@ -30,15 +35,14 @@ export const CheckPasswordPage: React.FC = () => {
     } else {
       await axios({
         method: 'get',
-        url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkPasswordFileProps.fileId}?pw=${password}`,
+        url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkfileid}?pw=${password}`,
       })
         .then((res) => {
           SetDownloadFileProps({
-            fileId: checkPasswordFileProps.fileId,
-            isEncrypted: checkPasswordFileProps.isEncrypted,
+            isEncrypted: true,
             token: res.data.token,
           });
-          navigate('/download');
+          navigate(`/download/${checkfileid}`);
           toast.success('통과!', {
             autoClose: 1000,
             position: toast.POSITION.BOTTOM_RIGHT,
@@ -53,33 +57,68 @@ export const CheckPasswordPage: React.FC = () => {
         });
     }
   };
+
   useEffect(() => {
-    if (checkPasswordFileProps.filename === null || checkPasswordFileProps.fileId === null) {
-      navigate('/');
-    }
-  });
+    const getFileProps = async () => {
+      await axios({
+        method: 'get',
+        url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${checkfileid}`,
+      })
+        .then((res) => {
+          setLoading(false);
+          setFileProps({
+            filename: res.data.filename,
+            size: res.data.size,
+            uploadDate: getDate(res.data.uploadDate),
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+          navigate('/');
+          toast.error('error 문의해주세요...', {
+            autoClose: 1000,
+            position: toast.POSITION.BOTTOM_RIGHT,
+          });
+        });
+    };
+    getFileProps();
+  }, [checkfileid, navigate]);
   return (
     <S.CheckPasswordPageContainer>
-      <FileBox>
-        파일이름:{checkPasswordFileProps.filename} / 크기:{checkPasswordFileProps.size} / 업로드된
-        날짜: {year}-{month}-{day}
-      </FileBox>
-      <S.PasswordInputSection>
-        <S.CheckPasswordInput
-          onChange={(text) => {
-            setPassword(text.target.value.replace(/(\s*)/g, ''));
-          }}
-          placeholder="비밀번호를 입력해주세요."
-        />
+      {!loading ? (
+        <>
+          <FileBox>
+            파일이름:{fileProps.filename} / 크기:{fileProps.size} / 업로드된 날짜:{' '}
+            {fileProps.uploadDate.year}-{fileProps.uploadDate.month}-{fileProps.uploadDate.day}
+          </FileBox>
+          <S.PasswordInputSection>
+            <S.CheckPasswordInput
+              onKeyPress={(e: any) => {
+                if (e.key === 'Enter') {
+                  passwordCheck();
+                }
+              }}
+              onChange={(text) => {
+                setPassword(text.target.value.replace(/(\s*)/g, ''));
+              }}
+              placeholder="비밀번호를 입력해주세요."
+            />
 
-        <Button
-          click={() => {
-            passwordCheck();
-          }}
-          bgColor="var(--color-button-primary)"
-          label="전송"
-        />
-      </S.PasswordInputSection>
+            <Button
+              click={() => {
+                passwordCheck();
+              }}
+              bgColor="var(--color-button-primary)"
+              label="전송"
+            />
+          </S.PasswordInputSection>
+        </>
+      ) : (
+        <>
+          <SkeletonUI width="80rem" height="4.6rem" margin="0rem" />
+          <SkeletonUI width="66rem" height="6rem" margin="4rem" />
+        </>
+      )}
     </S.CheckPasswordPageContainer>
   );
 };

src/pages/download/index.tsx

@@ -37,20 +37,24 @@ export const DownloadPage: React.FC = () => {
       await axios({
         method: 'get',
         url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${fileid}${
-          downloadFileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''
+          downloadFileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ``
         }`,
       })
         .then((res) => {
           setLoading(false);
-          setFileProps({
-            filename: res.data.filename,
-            // fileId: res.data.fileId,
-            size: getFileSize(res.data.size),
-            uploadDate: getDate(res.data.uploadDate),
-            download_url: res.data.download_url,
-            delete_url: res.data.delete_url,
-            isEncrypted: res.data.isEncrypted,
-          });
+          if (res.data.isEncrypted && !res.data.provide_token) {
+            navigate(`/checkpw/${fileid}`);
+          } else {
+            setFileProps({
+              filename: res.data.filename,
+              // fileId: res.data.fileId,
+              size: getFileSize(res.data.size),
+              uploadDate: getDate(res.data.uploadDate),
+              download_url: res.data.download_url,
+              delete_url: res.data.delete_url,
+              isEncrypted: res.data.isEncrypted,
+            });
+          }
         })
         .catch((err) => {
           navigate('/');
@@ -87,11 +91,7 @@ export const DownloadPage: React.FC = () => {
             </a>
             <Button
               click={() => {
-                navigator.clipboard.writeText(
-                  `${fileProps.download_url}${
-                    fileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''
-                  }`,
-                );
+                navigator.clipboard.writeText(window.location.href);
                 toast.success('복사 완료', {
                   autoClose: 1000,
                   position: toast.POSITION.BOTTOM_RIGHT,
@@ -107,16 +107,6 @@ export const DownloadPage: React.FC = () => {
               bgColor="var(--color-button-secondary)"
               label="파일삭제"
             />
-            <Button
-              click={() => {
-                toast.success('제작중!', {
-                  autoClose: 1000,
-                  position: toast.POSITION.BOTTOM_RIGHT,
-                });
-              }}
-              bgColor="var(--color-button-secondary)"
-              label="신고"
-            />
           </S.DownloadPageButtonSection>
         </>
       ) : (

src/pages/filelist/index.tsx

@@ -12,12 +12,10 @@ 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, SetCheckPasswordFileProps } = bindActionCreators(
-    actionCreators,
-    dispatch,
-  );
+  const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
   const [fileList, setFileList] = useState<any[]>();
   const getFileList = async () => {
     await axios({
@@ -26,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);
@@ -42,35 +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) {
-                    SetCheckPasswordFileProps({
-                      filename: item.filename,
-                      fileId: item.fileId,
-                      size: getFileSize(item.size),
-                      uploadDate: item.uploadDate,
-                      isEncrypted: item.isEncrypted,
-                    });
-                    navigate('/checkpw');
-                  } 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 />
         </>

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

src/pages/main/index.tsx

@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { bindActionCreators } from 'redux';
 
-// eslint-disable-next-line
 import { CheckBox, PasswordInput, UpLoadButton, FileFind, Progress } from '../../components';
 import { actionCreators } from '../../state';
 import { getFileSize } from '../../utils';
@@ -15,7 +14,8 @@ export const MainPage: React.FC = () => {
   const typingText = ['.', '..', '...'];
   const [typingCount, setTypingCount] = useState(0);
   const [uploading, setUploading] = useState(true);
-  const [progressValue, serProgressValue] = useState(0);
+  const [progressValue, setProgressValue] = useState(0);
+  const [progressStateText, setProgressStateText] = useState('uploading');
 
   const [retentionPeriod, setRetentionPeriod] = useState(false);
   const [downloadCount, setDownloadCount] = useState(false);
@@ -59,7 +59,10 @@ export const MainPage: React.FC = () => {
         },
         onUploadProgress(progress) {
           setUploading(false);
-          serProgressValue(Math.floor((progress.loaded / progress.total) * 100));
+          setProgressValue(Math.floor((progress.loaded / progress.total) * 100));
+          if (Math.floor((progress.loaded / progress.total) * 100) === 100) {
+            setProgressStateText('백엔드 처리중');
+          }
         },
       })
         .then(async (res) => {
@@ -152,6 +155,7 @@ export const MainPage: React.FC = () => {
           value={progressValue}
           fileName={fileProps.filename}
           typing={typingText[typingCount]}
+          stateText={progressStateText}
         />
       )}
     </S.MainPageContainer>

src/state/action-types/index.ts

@@ -1,5 +1,4 @@
 export enum ActionType {
   DeleteFileProps = 'DeleteFileProps',
   DownloadFileProps = 'DownloadFileProps',
-  CheckPasswordFileProps = 'CheckPasswordFileProps',
 }

src/state/actions-creators/index.ts

@@ -16,10 +16,3 @@ export const SetDownloadFileProps = (props: any) => (dispatch: Dispatch<Action>)
     props: props,
   });
 };
-
-export const SetCheckPasswordFileProps = (props: any) => (dispatch: Dispatch<Action>) => {
-  dispatch({
-    type: ActionType.CheckPasswordFileProps,
-    props: props,
-  });
-};