Merge pull request #23 from sunnybraille/request

feat: UX improvement
sunnybraille · Mar 4, 2024 · 0f3d5d2 · 0f3d5d2
2 parents 55e7464 + 1bdcf96
commit 0f3d5d2
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 21 deletions.
diff --git a/my-app/src/components/ProgressStatus.tsx b/my-app/src/components/ProgressStatus.tsx
@@ -24,7 +24,7 @@ const ProgressStatus: React.FC<ProgressStatusProps> = ({ progress, label }) => {
         )}
       </svg>
       <div className="ml-2 text-sm font-medium text-gray-700">
-        {progress === 100 ? `${label} Done` : `${label} Processing...`}
+        {label}
       </div>
     </div>
   );

diff --git a/my-app/src/components/TranslationProgress.tsx b/my-app/src/components/TranslationProgress.tsx
@@ -2,6 +2,7 @@ import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import ProgressStatus from "./ProgressStatus";
+import { useLanguage } from "../LanguageContext";
 
 interface TranslationProgressProps {
   translationsId: string;
@@ -11,10 +12,14 @@ const ProgressOverlay: React.FC<{
   progressMessage: string;
   children?: React.ReactNode;
 }> = ({ progressMessage, children }) => {
+  const { language } = useLanguage();
+  const textClassName = language === "ko" ? "font-kor" : "font-eng";
+
+
   return (
     <div className="fixed inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
       <div className="text-center">
-        <div className="mb-4 text-lg font-semibold">{progressMessage}</div>
+        <div className={`${textClassName} mb-4 text-lg font-semibold`}>{progressMessage}</div>
         {children}
       </div>
     </div>
@@ -24,12 +29,34 @@ const ProgressOverlay: React.FC<{
 const TranslationProgress: React.FC<TranslationProgressProps> = ({
   translationsId,
 }) => {
+  const { language } = useLanguage();
   const [ocrProgress, setOcrProgress] = useState<number>(0);
   const [brailleProgress, setBrailleProgress] = useState<number>(0);
   const navigate = useNavigate();
-  const [progressMessage, setProgressMessage] =
-    useState<string>("변환을 시작합니다...");
+  const [dotCount, setDotCount] = useState(0);
+  const [progressMessage, setProgressMessage] = useState("");
+
+  // Dot Animation
+  useEffect(() => {
+    const dotAnimation = setInterval(() => {
+      setDotCount((prevCount) => (prevCount + 1) % 4);
+    }, 1000);
+
+    return () => clearInterval(dotAnimation);
+  }, []);
+
+  //Initial Message
+  useEffect(() => {
+    if (language === "ko") {
+      setProgressMessage("변환을 시작합니다");
+    } else {
+      setProgressMessage("Starting conversion");
+    }
+  }, [language]);
+
+  const dots = ".".repeat(dotCount);
 
+  // Progress Message
   useEffect(() => {
     const checkStatus = async () => {
       try {
@@ -42,35 +69,55 @@ const TranslationProgress: React.FC<TranslationProgressProps> = ({
         setBrailleProgress(data.brailleTranslationPercentDone);
 
         if (data.ocrPercentDone < 100) {
-          setProgressMessage("OCR 진행 중...");
+          setProgressMessage(
+            language === "ko"
+              ? `문제를 읽는 중${dots}`
+              : `Reading the problem${dots}`
+          );
         } else if (data.brailleTranslationPercentDone < 100) {
-          setProgressMessage("Braille 변환 진행 중...");
+          setProgressMessage(
+            language === "ko"
+              ? `점자로 바꾸는 중${dots}`
+              : `Converting to Braille${dots}`
+          );
         } else {
-          setProgressMessage("변환이 완료되었습니다.");
+          setProgressMessage(
+            language === "ko" ? "변환이 완료되었습니다" : "Conversion completed"
+          );
           setTimeout(
             () => navigate(`/download?fileId=${translationsId}`),
             2000
           );
-          return;
         }
       } catch (error) {
         console.error("Error checking the translation status:", error);
-        setProgressMessage("진행 상황을 불러오는 중 오류가 발생했습니다.");
+        // 오류 메시지도 언어에 따라 설정
+        setProgressMessage(
+          language === "ko"
+            ? "진행 상황을 불러오는 중 오류가 발생했습니다"
+            : "Error occurred while fetching progress"
+        );
       }
-
-      const timer = setTimeout(checkStatus, 1000);
-      return () => clearTimeout(timer);
     };
 
     checkStatus();
-  }, [translationsId, navigate, ocrProgress, brailleProgress]);
+  }, [translationsId, navigate, dots, ocrProgress, brailleProgress, language]);
 
   return (
     <ProgressOverlay progressMessage={progressMessage}>
-      <ProgressStatus progress={ocrProgress} label="OCR Progress" />
+      <ProgressStatus
+        progress={ocrProgress}
+        label={ocrProgress < 100 ? "OCR Processing..." : "OCR Done"}
+      />
       <ProgressStatus
         progress={brailleProgress}
-        label="Braille Translation Progress"
+        label={
+          ocrProgress === 100
+            ? brailleProgress < 100
+              ? "Braille Translation Processing..."
+              : "Braille Translation Done"
+            : "Braille Translation Waiting..."
+        }
       />
     </ProgressOverlay>
   );

diff --git a/my-app/src/pages/ConvertPage.tsx b/my-app/src/pages/ConvertPage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import NavBar from "../components/NavBar";
 import BrailleDeco from "../components/BrailleDeco";
@@ -7,20 +7,36 @@ import "../tailwind.css";
 import { useLanguage } from "../LanguageContext";
 import { useHighContrast } from "../components/HighContrastMode";
 
-
 const ConvertPage = () => {
   const isMobile = useMediaQuery({ maxWidth: 768 });
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
+  const [announcement, setAnnouncement] = useState("");
+
+  useEffect(() => {
+    const message =
+      language === "ko"
+        ? "파일을 업로드하는 페이지입니다."
+        : "This page is for File Upload";
+    setAnnouncement(message);
 
+    const timer = setTimeout(() => {
+      setAnnouncement("");
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [language]);
 
   return (
     <div
       className={`w-full h-screen relative ${
         isHighContrast ? "bg-black" : "bg-stone-200"
       }`}
     >
+      <div aria-live="polite" className="sr-only">
+        {announcement}
+      </div>
       <NavBar />
       <div
         className={`content box w-full ${

diff --git a/my-app/src/pages/DownloadPage.tsx b/my-app/src/pages/DownloadPage.tsx
@@ -13,15 +13,30 @@ function useQuery() {
   return new URLSearchParams(useLocation().search);
 }
 
-const DownloadBrf = () => {
+const DownloadPage = () => {
   const query = useQuery();
   const fileId = query.get("fileId");
   const isMobile = useMediaQuery({ maxWidth: 768 });
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
   const [fileName, setFileName] = useState("");
+  const [announcement, setAnnouncement] = useState('');
 
+
+  // Screen Reader Message Setting
+  useEffect(() => {
+    const message = language === 'ko' ? '변환이 완료되었습니다' : 'Conversion Completed';
+    setAnnouncement(message);
+
+    const timer = setTimeout(() => {
+      setAnnouncement('');
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [language]);
+
+  // Catching Error
   useEffect(() => {
     const fetchFileInfo = async () => {
       if (fileId) {
@@ -39,6 +54,9 @@ const DownloadBrf = () => {
 
   return (
     <div className={`w-full h-screen bg-stone-200`}>
+      <div aria-live="polite" className="sr-only">
+        {announcement}
+      </div>
       <NavBar />
       <div
         className={`w-full h-screen flex items-center justify-center ${
@@ -99,4 +117,4 @@ const DownloadBrf = () => {
   );
 };
 
-export default DownloadBrf;
+export default DownloadPage;
diff --git a/my-app/src/pages/MainPage.tsx b/my-app/src/pages/MainPage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import NavBar from "../components/NavBar";
 import BrailleDeco from "../components/BrailleDeco";
@@ -12,9 +12,25 @@ const MainPage = () => {
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
+  const [announcement, setAnnouncement] = useState('');
+
+  // Screen Reader Message Setting
+  useEffect(() => {
+    const message = language === 'ko' ? 'Sunny Braille 메인 페이지입니다' : 'This is the main page of Sunny Braille';
+    setAnnouncement(message);
+
+    const timer = setTimeout(() => {
+      setAnnouncement('');
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [language]);
 
   return (
     <div>
+      <div aria-live="polite" className="sr-only">
+        {announcement}
+      </div>
       <div
         className={`w-full h-screen ${
           isHighContrast ? "bg-black" : "bg-stone-200"

diff --git a/my-app/src/pages/UploadComplete.tsx b/my-app/src/pages/UploadComplete.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
+import React from "react";
 import NavBar from '../components/NavBar'
 import BrailleDeco from '../components/BrailleDeco'
 import ConvertButton from '../components/ConvertButton'
 import ReUploadButton from '../components/ReUploadButton'
 
 const UploadComplete = () => {
+
     return (
         <div className='w-full h-screen bg-stone-200'>
             <NavBar />
-Original file line number
+Diff line change
@@ Expand Up @@
             )}
           </svg>
           <div className="ml-2 text-sm font-medium text-gray-700">
-            {progress === 100 ? `${label} Done` : `${label} Processing...`}
+            {label}
           </div>
         </div>
       );
@@ Expand Down @@