Merge pull request #31 from sunnybraille/request

feat: updated UX
sunnybraille · Mar 6, 2024 · 5d257dc · 5d257dc
2 parents 5b58c43 + f25d62d
commit 5d257dc
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 67 deletions.
diff --git a/my-app/src/components/DownloadButton.tsx b/my-app/src/components/DownloadButton.tsx
@@ -3,6 +3,12 @@ import { useLocation } from "react-router-dom";
 import { useLanguage } from "../LanguageContext";
 import { useHighContrast } from "./HighContrastMode";
 
+function removeExtension(fileName: string): string {
+  const lastIndex = fileName.lastIndexOf('.');
+  if (lastIndex === -1) return fileName; 
+  return fileName.substring(0, lastIndex);
+}
+
 const DownloadButton = () => {
   const location = useLocation();
   const { language } = useLanguage();
@@ -17,24 +23,26 @@ const DownloadButton = () => {
   const downloadFile = async (fileId: string) => {
     try {
       const apiUrl = process.env.REACT_APP_API_URL;
-
-
-
-      const fileResponse = await fetch(`${apiUrl}/translations/${fileId}`);
-      if (!fileResponse.ok) {
-        throw new Error("File not found on server");
+      const metadataResponse = await fetch(
+        `${apiUrl}/translations/${fileId}`
+      );
+      if (!metadataResponse.ok) {
+        throw new Error("Metadata not found on server");
       }
-
-      const filedata = await fileResponse.json();
-      const originalFileName = filedata.originalFileName;
+      const metadata = await metadataResponse.json();
+      const originalFileName = metadata.originalFileName;
       if (!originalFileName) {
         throw new Error("Original file name is missing");
       }
 
+      const fileResponse = await fetch(`${apiUrl}/translations/${fileId}`);
+      if (!fileResponse.ok) {
+        throw new Error("File not found on server");
+      }
       const blob = await fileResponse.blob();
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement("a");
-      a.download = `${originalFileName}.brf`; 
+      a.download = `${removeExtension(originalFileName)}.brf`;
       a.href = url;
       document.body.appendChild(a);
       a.click();
@@ -62,12 +70,12 @@ const DownloadButton = () => {
           isHighContrast
             ? "bg-yellow-300 hover:bg-yellow-600"
             : "bg-stone-800 hover:bg-stone-600"
-        } ml-4 mb-2 flex justify-center items-center hover:bg-neutral-600 transition duration-300 ease-in-out`}
+        } my-[10px] flex justify-center items-center hover:bg-neutral-600 transition duration-300 ease-in-out`}
       >
         <div
           className={`${textClassName} ${
             isHighContrast ? "text-stone-800" : "text-white"
-          } text-base font-medium  leading-none`}
+          } text-base font-medium leading-none`}
         >
           {language === "ko" ? "BRF 파일 다운로드" : "Download Brf"}
         </div>

diff --git a/my-app/src/components/FileNameDisplay.tsx b/my-app/src/components/FileNameDisplay.tsx
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { useLanguage } from "../LanguageContext";
+import { useHighContrast } from "./HighContrastMode";
+
+interface FileNameDisplayProps {
+  fileId: string | null;
+}
+
+const FileNameDisplay: React.FC<FileNameDisplayProps> = ({ fileId }) => {
+  const [fileName, setFileName] = useState<string>("");
+  const { language } = useLanguage();
+  const textClassName = language === "ko" ? "font-kor" : "font-eng";
+  const { isHighContrast } = useHighContrast();
+
+  useEffect(() => {
+    const fetchFileName = async () => {
+      if (!fileId) {
+        console.error("No file ID provided");
+        return;
+      }
+
+      try {
+        const apiUrl = process.env.REACT_APP_API_URL; // API 주소
+        const response = await axios.get(`${apiUrl}/translations/${fileId}`);
+        const originalFileName = response.data.originalFileName;
+
+        const fileNameWithoutExtension = originalFileName
+          .split(".")
+          .slice(0, -1)
+          .join(".");
+        setFileName(fileNameWithoutExtension);
+      } catch (error) {
+        console.error("파일 정보를 불러오는데 실패했습니다.", error);
+        setFileName("파일 정보 조회 실패");
+      }
+    };
+
+    fetchFileName();
+  }, [fileId]);
+
+  return (
+    <div
+      className={`${textClassName} ${
+        isHighContrast ? "text-yellow-300" : "text-neutral-800"
+      } text-center text-base font-normal my-[10px]`}
+    >
+      {fileName ? `${fileName}.brf` : "파일 이름을 불러오는 중..."}
+    </div>
+  );
+};
+
+export default FileNameDisplay;
diff --git a/my-app/src/components/NewFileUploadButton.tsx b/my-app/src/components/NewFileUploadButton.tsx
@@ -19,7 +19,7 @@ const NewFileUpload = () => {
               isHighContrast
                 ? "bg-yellow-300 hover:bg-yellow-600"
                 : "bg-stone-800 hover:bg-stone-600"
-            } ml-4 rounded justify-center items-center gap-2.5 inline-flex transition duration-300 ease-in-out`}
+            } rounded justify-center items-center gap-2.5 inline-flex transition duration-300 ease-in-out`}
           >
             <div
               className={`${textClassName} ${

diff --git a/my-app/src/pages/ConvertPage.tsx b/my-app/src/pages/ConvertPage.tsx
@@ -43,18 +43,26 @@ const ConvertPage = () => {
           isMobile ? "px-4" : "w-1/2"
         } h-auto m-auto align-middle flex flex-col items-center justify-center`}
       >
-        <div className="w-auto h-auto align-middle my-[180px]">
+        <div
+          className={`w-auto h-auto align-middle ${
+            isMobile ? "my-[100px]" : "my-[180px]"
+          }`}
+        >
           <div
             className={`${textClassName} ${
               isHighContrast ? "text-yellow-300" : "text-neutral-800"
-            }  m-auto text-center text-5xl font-semibold leading-[60px] tracking-wide`}
+            }  m-auto text-center ${
+              isMobile ? "text-base" : "text-5xl"
+            } font-bold leading-[60px] tracking-wide`}
           >
             {language === "ko" ? "파일 변환하기" : "Convert File"}
           </div>
           <div
             className={`${textClassName} ${
               isHighContrast ? "text-yellow-300" : "text-neutral-800"
-            } my-[20px] text-center text-base font-normal leading-[25px]`}
+            } text-center ${
+              isMobile ? "text-sm my-[5px]" : "text-base my-[20px]"
+            } font-normal leading-[25px]`}
           >
             {language === "ko" ? (
               <>
@@ -72,7 +80,11 @@ const ConvertPage = () => {
               </>
             )}
           </div>
-          <div className="w-[90px] h-[130px] m-auto my-[30px] relative">
+          <div
+            className={`${
+              isMobile ? "w-[60px] h-[80px]" : "w-[90px] h-[130px]"
+            } m-auto my-[30px] relative`}
+          >
             <img src="/img/uploadfile.png" alt="Upload File" />
           </div>
           <div className="w-auto h-auto my-[40px]">

diff --git a/my-app/src/pages/DownloadPage.tsx b/my-app/src/pages/DownloadPage.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import axios from "axios";
 import { useMediaQuery } from "react-responsive";
 import BrailleDeco from "../components/BrailleDeco";
 import NavBar from "../components/NavBar";
@@ -8,6 +7,7 @@ import DownloadButton from "../components/DownloadButton";
 import { useLanguage } from "../LanguageContext";
 import { useHighContrast } from "../components/HighContrastMode";
 import { useLocation } from "react-router-dom";
+import FileNameDisplay from "../components/FileNameDisplay";
 
 function useQuery() {
   return new URLSearchParams(useLocation().search);
@@ -20,66 +20,59 @@ const DownloadPage = () => {
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
-  const [fileName, setFileName] = useState("");
-  const [announcement, setAnnouncement] = useState('');
-
+  const [announcement, setAnnouncement] = useState("");
 
   // Screen Reader Message Setting
   useEffect(() => {
-    const message = language === 'ko' ? '변환이 완료되었습니다' : 'Conversion Completed';
+    const message =
+      language === "ko" ? "변환이 완료되었습니다" : "Conversion Completed";
     setAnnouncement(message);
 
     const timer = setTimeout(() => {
-      setAnnouncement('');
+      setAnnouncement("");
     }, 1000);
 
     return () => clearTimeout(timer);
   }, [language]);
 
-  // Catching Error
-  useEffect(() => {
-    const fetchFileInfo = async () => {
-      if (fileId) {
-        try {
-          const response = await axios.get(`/translations/${fileId}`);
-          setFileName(response.data.originalFileName);
-        } catch (error) {
-          console.error("파일 정보를 불러오는데 실패했습니다.", error);
-        }
-      }
-    };
-
-    fetchFileInfo();
-  }, [fileId]);
-
   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 ${
-          isHighContrast ? "bg-black" : "bg-stone-200"
-        }`}
+        className={`content box w-full ${
+          isMobile ? "px-4" : "w-1/2"
+        } h-auto m-auto align-middle flex flex-col items-center justify-center`}
       >
         <div
-          className={`content box ${
-            isMobile ? "w-full px-4" : "w-1/2"
-          } h-auto flex flex-col items-center justify-center m-auto`}
+          className={`w-auto h-auto align-middle ${
+            isMobile ? "my-[100px]" : "my-[180px]"
+          }`}
         >
-          <div className="w-auto h-auto">
-            <div
-              className={`${textClassName} ${
-                isHighContrast ? "text-yellow-300" : "text-neutral-800"
-              } m-auto text-center text-5xl font-semibold leading-[60px] tracking-wide`}
-            >
-              {language === "ko" ? "파일 변환 완료!" : "Convert Completed!"}
-            </div>
+          <div
+            className={`${textClassName} ${
+              isHighContrast ? "text-yellow-300" : "text-neutral-800"
+            }  m-auto text-center ${
+              isMobile ? "text-base" : "text-5xl"
+            } font-bold leading-[60px] tracking-wide`}
+          >
+            {language === "ko" ? "파일 변환 완료!" : "Convert Completed!"}
+          </div>
+          <div
+            className={`${textClassName} ${
+              isHighContrast ? "text-yellow-300" : "text-neutral-800"
+            } m-auto text-center ${
+              isMobile ? "text-base" : "text-5xl"
+            } font-bold leading-[60px] tracking-wide`}
+          >
             <div
               className={`${textClassName} ${
                 isHighContrast ? "text-yellow-300" : "text-neutral-800"
-              } text-center my-[20px] text-base font-normal leading-[25px]`}
+              } text-center ${
+                isMobile ? "text-sm my-[5px]" : "text-base my-[20px]"
+              } font-normal leading-[25px]`}
             >
               {language === "ko" ? (
                 <>
@@ -95,17 +88,15 @@ const DownloadPage = () => {
                 </>
               )}
             </div>
-            <div className="w-[90px] h-[130px] m-auto my-[30px] relative">
+            <div
+              className={`${
+                isMobile ? "w-[60px] h-[80px]" : "w-[90px] h-[130px]"
+              } m-auto my-[10px] relative`}
+            >
               <img src="/img/complete.png" alt="Conversion Complete" />
-              <div
-                className={`text-center my-[20px] ${
-                  isHighContrast ? "text-yellow-300" : "text-neutral-800"
-                } text-base font-normal leading-[25px]`}
-              >
-                {`${fileName}.brf`}
-              </div>
             </div>
-            <div className="w-auto h-auto m-auto flex flex-col items-center justify-center">
+            <div className="w-auto h-auto m-auto flex flex-col items-center justify-center my-[10px]">
+              <FileNameDisplay fileId={fileId} />
               <DownloadButton />
               <NewFileUpload />
             </div>

diff --git a/my-app/src/pages/MainPage.tsx b/my-app/src/pages/MainPage.tsx
@@ -50,14 +50,14 @@ const MainPage = () => {
                 <div
                   className={`${textClassName} ${
                     isHighContrast ? "text-yellow-300" : "text-neutral-800"
-                  } text-6xl font-bold leading-[72px]`}
+                  } text-4xl font-bold leading-[72px]`}
                 >
                   SUNNY BRAILLE
                 </div>
                 <div
                   className={`${textClassName} ${
                     isHighContrast ? "text-yellow-300" : "text-neutral-800"
-                  } text-base mt-4`}
+                  } text-sm mt-4`}
                 >
                   {language === "ko"
                     ? "모바일에서도 최적의 경험을 제공합니다."
@@ -69,6 +69,32 @@ const MainPage = () => {
                 alt="Banner Logo"
                 className="absolute right-[-180px] bottom-[-100px] w-auto h-auto max-h-[300px] max-w-[300px] z-0"
               />
+              <div className="w-auto h-auto top-[350px] left-[150px] absolute">
+                <div
+                  className={`${textClassName} ${isHighContrast ? 'text-yellow-300': 'text-neutral-800'} w-[926px] text-xs font-normal leading-9`}
+                >
+                  {language === "ko" ? (
+                    <>
+                      Sunny Braille은 텍스트 뿐만 수식도 점역해 낼 수 있는
+                      수학에 특화된 점역 프로그램입니다.
+                      <br />
+                      해바라기 팀은 고객님이 쉽고 빠르게 원하는 교육 자료를
+                      점역하고 더 많은 교육 자료의 접근성을 높이려 노력하고
+                      있습니다.
+                    </>
+                  ) : (
+                    <>
+                      Sunny Braille is a transcription program specialized in
+                      mathematics that can transcribe not only text but also
+                      formulas.
+                      <br />
+                      The Sunflower team strives to quickly transcribe the
+                      educational materials you want and increase accessibility
+                      to more educational materials.
+                    </>
+                  )}
+                </div>
+              </div>
             </div>
           )}
 
@@ -124,12 +150,12 @@ const MainPage = () => {
           )}
         </div>
 
-        <div className="w-auto h-auto top-[80px] flex flex-col justify-center relative">
+        <div className={`w-auto h-auto ${isMobile ? "top-[80px]" : "top-[100px]"} flex flex-col justify-center relative`}>
           <ConvertPageRoutingButton />
           <div
             className={`${textClassName} text-center ${
               isHighContrast ? "text-yellow-300" : "text-neutral-800"
-            } text-base font-normal  my-[20px] leading-[37px]`}
+            } text-base ${isMobile ? "text-xs" : "text-base"} font-normal my-[20px] leading-[37px]`}
           >
             {language === "ko" ? (
               <>