fix: 영상 업로드 progress 수정

Author: JKyEun

src/routes/mission/$missionId/-components/MissionNotTried.tsx

@@ -33,14 +33,10 @@ export default function MissionNotTried(props: MissionNotTriedProps) {
   const [state, setState] = useState<MissionState>("DEFAULT");
   const [capturedMedia, setCapturedMedia] = useState<CapturedMedia>(null);
   const [successAttemptId, setSuccessAttemptId] = useState<number | null>(null);
-  const [currentUploadInfo, setCurrentUploadInfo] = useState<{
-    isSuccess: boolean;
-    attemptId: number | null;
-  } | null>(null);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const { uploadVideo, isUploading, progress } = useUploadAttemptVideo();
+  const { uploadVideo, isUploading, percentage } = useUploadAttemptVideo();
 
   const { mutateAsync: createAttemptMutate } = useMutation({
     mutationFn: (success: boolean) =>
@@ -88,20 +84,16 @@ export default function MissionNotTried(props: MissionNotTriedProps) {
       const newAttemptId = response.data?.missionAttemptId;
 
       if (newAttemptId && capturedMedia?.file) {
-        setCurrentUploadInfo({ isSuccess, attemptId: newAttemptId });
-
         await uploadVideo(newAttemptId, capturedMedia.file, {
           onSuccess: () => {
             if (isSuccess) {
               setSuccessAttemptId(newAttemptId);
             }
             setState(isSuccess ? "SUCCESS" : "FAILED");
-            setCurrentUploadInfo(null);
           },
           onError: (error) => {
             console.error("Upload failed:", error);
             setState("FAILED");
-            setCurrentUploadInfo(null);
           },
         });
       } else {
@@ -110,7 +102,6 @@ export default function MissionNotTried(props: MissionNotTriedProps) {
     } catch (error) {
       console.error("Review failed:", error);
       setState(isSuccess ? "SUCCESS" : "FAILED");
-      setCurrentUploadInfo(null);
     }
   };
 
@@ -135,12 +126,7 @@ export default function MissionNotTried(props: MissionNotTriedProps) {
         className="hidden"
       />
 
-      {isUploading && (
-        <MissionVideoUploadOverlay
-          progress={progress}
-          isAttemptSuccess={currentUploadInfo?.isSuccess ?? false}
-        />
-      )}
+      {isUploading && <MissionVideoUploadOverlay percentage={percentage} />}
 
       {(() => {
         switch (state) {

src/routes/mission/$missionId/-components/MissionVideoUploadOverlay.tsx

@@ -1,32 +1,25 @@
 export default function MissionVideoUploadOverlay({
-  progress,
-  isAttemptSuccess,
+  percentage,
 }: {
-  progress: { currentChunk: number; totalChunks: number; percentage: number };
-  isAttemptSuccess: boolean;
+  percentage: number;
 }) {
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50">
-      <div className="bg-neutral-900 rounded-2xl p-6 max-w-sm w-full mx-4">
+      <div className="rounded-2xl p-6 max-w-sm w-full mx-4">
         <div className="text-center">
-          <h3 className="text-neutral-100 t-p-18-sb mb-4">
-            {isAttemptSuccess
-              ? "추천 문제를 준비 중이에요"
-              : "해설 영상을 불러오고 있어요"}
-          </h3>
+          <p className="text-neutral-100 t-p-16-m mb-4">
+            영상을 업로드 중이에요.
+            <br />
+            화면 이동 시 영상이 저장되지 않아요.
+          </p>
           <div className="space-y-4">
-            <div className="w-full bg-neutral-800 rounded-full h-2">
+            <div className="w-full bg-neutral-700 rounded-full h-2 shadow-md">
               <div
                 className="bg-blue-500 h-2 rounded-full transition-all duration-300"
-                style={{ width: `${progress.percentage}%` }}
+                style={{ width: `${percentage}%` }}
               />
             </div>
-            <p className="text-neutral-400 t-p-14-m">
-              {progress.currentChunk} / {progress.totalChunks}
-            </p>
-            <p className="text-neutral-300 t-p-12-m">
-              {progress.percentage}% 완료
-            </p>
+            <p className="text-neutral-300 t-p-12-m">{percentage}% 완료</p>
           </div>
         </div>
       </div>

src/routes/mission/$missionId/-hooks/useUploadAttemptVideo.ts

@@ -12,21 +12,15 @@ import type { BodyType } from "@/utils/http";
 
 const CHUNK_SIZE = 512 * 1024;
 
-export interface UploadProgress {
-  currentChunk: number;
-  totalChunks: number;
-  percentage: number;
-}
-
 export interface UploadState {
   isUploading: boolean;
-  progress: UploadProgress;
+  percentage: number;
   uploadId?: string;
   error?: string;
 }
 
 export interface UploadCallbacks {
-  onProgress?: (progress: UploadProgress) => void;
+  onProgress?: (percentage: number) => void;
   onSuccess?: (fileName: string) => void;
   onError?: (error: Error) => void;
 }
@@ -63,7 +57,7 @@ async function splitFileIntoChunks(
 export function useUploadAttemptVideo() {
   const [uploadState, setUploadState] = useState<UploadState>({
     isUploading: false,
-    progress: { currentChunk: 0, totalChunks: 0, percentage: 0 },
+    percentage: 0,
   });
 
   const checkUploadStatusMutation = useMutation({
@@ -217,9 +211,11 @@ export function useUploadAttemptVideo() {
 
       setUploadState((prev) => ({
         ...prev,
-        progress: { currentChunk: 0, totalChunks, percentage: 0 },
+        percentage: 0,
       }));
 
+      let completedChunks = 0;
+
       const uploadPromises = chunks.map(async (chunk, index) => {
         await uploadChunkMutation.mutateAsync({
           attemptId,
@@ -228,18 +224,16 @@ export function useUploadAttemptVideo() {
           chunk,
         });
 
-        const progress: UploadProgress = {
-          currentChunk: index + 1,
-          totalChunks,
-          percentage: Math.round(((index + 1) / totalChunks) * 100),
-        };
+        completedChunks++;
+
+        const percentage = Math.round((completedChunks / totalChunks) * 100);
 
         setUploadState((prev) => ({
           ...prev,
-          progress,
+          percentage,
         }));
 
-        callbacks.onProgress?.(progress);
+        callbacks.onProgress?.(percentage);
       });
 
       await Promise.all(uploadPromises);
@@ -290,7 +284,7 @@ export function useUploadAttemptVideo() {
     checkUploadStatus,
     uploadState,
     isUploading: uploadState.isUploading,
-    progress: uploadState.progress,
+    percentage: uploadState.percentage,
     error: uploadState.error,
     uploadId: uploadState.uploadId,
   };