feat: UX Improvement

401error -> login page direction, error alert message change
Signup/Login Button textclass, language variance

my-app/src/components/AuthButton.tsx

@@ -37,10 +37,22 @@ const AuthButtons: React.FC = () => {
       ) : (
         <>
           <Link to="/login">
-            <button>{language === "ko" ? "로그인하기" : "Login"}</button>
+            <button
+              className={`${textClassName} ${
+                isHighContrast ? "text-yellow-300" : "text-neutral-800"
+              }`}
+            >
+              {language === "ko" ? "로그인하기" : "Login"}
+            </button>
           </Link>
           <Link to="/signup">
-            <button>{language === "ko" ? "회원가입" : "Sign Up"}</button>
+            <button
+              className={`${textClassName} ${
+                isHighContrast ? "text-yellow-300" : "text-neutral-800"
+              }`}
+            >
+              {language === "ko" ? "회원가입" : "Sign Up"}
+            </button>
           </Link>
         </>
       )}

my-app/src/components/LoginPage.tsx

@@ -44,33 +44,36 @@ const LoginPage: React.FC = () => {
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-stone-200">
-      <div className="p-8">
+      <form className="p-8" onSubmit={handleLogin}>
         <input
           className="w-full p-2 mb-4 border rounded"
           type="text"
           value={loginId}
           onChange={(e) => setLoginId(e.target.value)}
           placeholder="Login ID"
+          autoComplete="username"
+          required
         />
         <input
           className="w-full p-2 mb-4 border rounded"
           type="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           placeholder="Password"
+          autoComplete="username"
+          required
         />
         <button
           className={`${
             isHighContrast
               ? "bg-yellow-300 hover:bg-yellow-600"
               : "bg-[#FF6A3F] hover:bg-[#E6552F]"
           } w-full p-2`}
-          onClick={handleLogin}
         >
           Login
         </button>
         {error && <p>{error}</p>}
-      </div>
+      </form>
     </div>
   );
 };

my-app/src/components/Messages.tsx

@@ -1,22 +1,27 @@
 interface Messages {
-    [key: string]: {
-      fileSelectAlert: string;
-      uploadSuccess: (name: string) => string;
-      uploadFail: string;
-    };
-  }
-
-  const messages: Messages = {
-    ko: {
-      fileSelectAlert: "파일을 선택해주세요.",
-      uploadSuccess: (name: string) => `${name} 파일 업로드가 완료되었습니다. 변환을 시작하시겠습니까?`,
-      uploadFail: "파일 업로드에 실패했습니다. 다시 시도해주세요.",
-    },
-    en: {
-      fileSelectAlert: "Please select a file.",
-      uploadSuccess: (id: string) => `File ${id} has been uploaded. Would you like to start the conversion?`,
-      uploadFail: "File upload failed. Please try again.",
-    },
+  [key: string]: {
+    fileSelectAlert: string;
+    uploadSuccess: (name: string) => string;
+    uploadFail: string;
+    AuthFail: string;
   };
-
-  export default messages;
+}
+
+const messages: Messages = {
+  ko: {
+    fileSelectAlert: "파일을 선택해주세요.",
+    uploadSuccess: (name: string) =>
+      `${name} 파일 업로드가 완료되었습니다. 변환을 시작하시겠습니까?`,
+    uploadFail: "파일 업로드에 실패했습니다. 다시 시도해주세요.",
+    AuthFail: "로그인 후 이용해 주세요.",
+  },
+  en: {
+    fileSelectAlert: "Please select a file.",
+    uploadSuccess: (id: string) =>
+      `File ${id} has been uploaded. Would you like to start the conversion?`,
+    uploadFail: "File upload failed. Please try again.",
+    AuthFail: "Please log in to use this service.",
+  },
+};
+
+export default messages;

my-app/src/components/SignUpPage.tsx

@@ -38,8 +38,8 @@ const SignUpPage: React.FC = () => {
         loginId,
         password,
       });
-      if (response.status === 200) {
-        navigate("*");
+      if (response.status === 201) {
+        navigate("/");
       }
     } catch (error) {
       if (axios.isAxiosError(error)) {
@@ -57,7 +57,7 @@ const SignUpPage: React.FC = () => {
     <div className="flex flex-col items-center justify-center min-h-screen bg-stone-200">
       <form className="p-8" onSubmit={handleSignUp}>
         <input
-          className={`w-full p-2 mb-4 border ${
+          className={`${textClassName} w-full p-2 mb-4 border ${
             isSubmitted && !loginId.trim() ? "border-red-500" : "rounded"
           }`}
           type="text"
@@ -68,7 +68,7 @@ const SignUpPage: React.FC = () => {
           required
         />
         <input
-          className={`w-full p-2 mb-4 border ${
+          className={`w-full p-2 mb-4 border ${textClassName} ${
             isSubmitted && !password.trim() ? "border-red-500" : "rounded"
           }`}
           type="password"
@@ -80,7 +80,7 @@ const SignUpPage: React.FC = () => {
         />
         <button
           type="submit"
-          className={`${
+          className={`${textClassName} ${
             isHighContrast
               ? "bg-yellow-300 hover:bg-yellow-600"
               : "bg-[#FF6A3F] hover:bg-[#E6552F]"

my-app/src/components/UploadFileButton.tsx

@@ -4,7 +4,7 @@ import TranslationProgress from "./TranslationProgress";
 import { useLanguage } from "../LanguageContext";
 import messages from "./Messages";
 import { useHighContrast } from "../components/HighContrastMode";
-
+import { useNavigate } from "react-router-dom";
 
 interface UploadFileButtonState {
   title: string;
@@ -20,9 +20,10 @@ const UploadFileButton: React.FC = () => {
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
+  const navigate = useNavigate();
 
-
-  const { fileSelectAlert, uploadSuccess, uploadFail } = messages[language];
+  const { fileSelectAlert, uploadSuccess, uploadFail, AuthFail } =
+    messages[language];
   const [state, setState] = useState<UploadFileButtonState>({
     title: "",
     content: "",
@@ -82,6 +83,9 @@ const UploadFileButton: React.FC = () => {
         if (confirmConversion && translationsId) {
           startConversion(translationsId);
         }
+      } else if (response.status === 401) {
+        alert(AuthFail);
+        navigate("/login");
       }
     } catch (error) {
       alert(uploadFail);
@@ -154,7 +158,7 @@ const UploadFileButton: React.FC = () => {
           </button>
         </form>
       </div>
-      
+
       <div>
         {translationsId && (
           <TranslationProgress translationsId={translationsId} />