feat: login/signup page component ui develop

sunnybraille · Mar 10, 2024 · 7f4a428 · 7f4a428
1 parent 35684b2
commit 7f4a428
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 33 deletions.
diff --git a/my-app/src/components/LoginPage.tsx b/my-app/src/components/LoginPage.tsx
@@ -2,17 +2,21 @@ import React, { useState } from "react";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "./AuthContext";
+import { useHighContrast } from "./HighContrastMode";
 
 const LoginPage: React.FC = () => {
   const [loginId, setLoginId] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [error, setError] = useState<string>("");
+  const { isHighContrast } = useHighContrast();
+
   const navigate = useNavigate();
   const { setLoggedIn } = useAuth();
 
   const handleLogin = async () => {
     try {
-      const response = await axios.post("/login", {
+      const apiUrl = process.env.REACT_APP_API_URL;
+      const response = await axios.post(`${apiUrl}/login`, {
         loginId,
         password,
       });
@@ -39,21 +43,34 @@ const LoginPage: React.FC = () => {
   };
 
   return (
-    <div>
-      <input
-        type="text"
-        value={loginId}
-        onChange={(e) => setLoginId(e.target.value)}
-        placeholder="Login ID"
-      />
-      <input
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        placeholder="Password"
-      />
-      <button onClick={handleLogin}>Login</button>
-      {error && <p>{error}</p>}
+    <div className="flex flex-col items-center justify-center min-h-screen bg-stone-200">
+      <div className="p-8">
+        <input
+          className="w-full p-2 mb-4 border rounded"
+          type="text"
+          value={loginId}
+          onChange={(e) => setLoginId(e.target.value)}
+          placeholder="Login ID"
+        />
+        <input
+          className="w-full p-2 mb-4 border rounded"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+        />
+        <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>
     </div>
   );
 };

diff --git a/my-app/src/components/SignUpPage.tsx b/my-app/src/components/SignUpPage.tsx
@@ -1,38 +1,95 @@
-import React, { useState } from "react";
+import React, { useState, FormEvent } from "react";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { useHighContrast } from "./HighContrastMode";
+import { useLanguage } from "../LanguageContext";
 
 const SignUpPage: React.FC = () => {
   const [loginId, setLoginId] = useState<string>("");
   const [password, setPassword] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const navigate = useNavigate();
+  const { isHighContrast } = useHighContrast();
+  const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
+  const { language } = useLanguage();
+  const textClassName = language === "ko" ? "font-kor" : "font-eng";
+
+  const validateForm = () => {
+    return loginId.trim() && password.trim();
+  };
+
+  const handleSignUp = async (event: FormEvent) => {
+    event.preventDefault();
+    setIsSubmitted(true);
+
+    if (!validateForm()) {
+      setError(
+        language === "ko"
+          ? "필수 항목을 입력하지 않았습니다."
+          : "Please fill in all required fields."
+      );
+      return;
+    }
 
-  const handleSignUp = async () => {
     try {
-      const response = await axios.post("/join", {
+      const apiUrl = process.env.REACT_APP_API_URL;
+
+      const response = await axios.post(`${apiUrl}/join`, {
         loginId,
         password,
       });
       if (response.status === 200) {
+        navigate("*");
       }
     } catch (error) {
+      if (axios.isAxiosError(error)) {
+        if (error.response?.status === 500) {
+          setError("A server error occurred. Please try again later.");
+        } else {
+          setError("An unexpected error occurred. Please try again.");
+        }
+      }
       console.error("Error during sign up:", error);
     }
   };
 
   return (
-    <div>
-      <input
-        type="text"
-        value={loginId}
-        onChange={(e) => setLoginId(e.target.value)}
-        placeholder="Login ID"
-      />
-      <input
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        placeholder="Password"
-      />
-      <button onClick={handleSignUp}>Sign Up</button>
+    <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 ${
+            isSubmitted && !loginId.trim() ? "border-red-500" : "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 ${
+            isSubmitted && !password.trim() ? "border-red-500" : "rounded"
+          }`}
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+          autoComplete="current-password"
+          required
+        />
+        <button
+          type="submit"
+          className={`${
+            isHighContrast
+              ? "bg-yellow-300 hover:bg-yellow-600"
+              : "bg-[#FF6A3F] hover:bg-[#E6552F]"
+          } w-full p-2`}
+        >
+          Sign Up
+        </button>
+        {error && <p className="mt-4 text-red-500">{error}</p>}
+      </form>
     </div>
   );
 };