Merge pull request #95 from tempfiles-Team/93-upload-로딩후-백엔드-작업-로딩-추가

93 upload 로딩후 백엔드 작업 로딩 추가

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/main/index.tsx

@@ -14,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);
@@ -58,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) => {
@@ -151,6 +155,7 @@ export const MainPage: React.FC = () => {
           value={progressValue}
           fileName={fileProps.filename}
           typing={typingText[typingCount]}
+          stateText={progressStateText}
         />
       )}
     </S.MainPageContainer>