과제제출입니다

src/App.jsx

@@ -6,11 +6,20 @@ import LoginPage from "./components/LoginPage"
 function App() {
   return (
     <Router>
+      <div>
+        <nav style={{ padding: "10px", borderBottom: "1px solid #ccc" }}>
+          <Link to="/" style={{ marginRight: "15px"}}>홈</Link>
+          <Link to="/userlist">유저 목록</Link>
+
+        </nav>
+
+
       <Routes>
         <Route path="/" element={<LoginPage />} />    
         <Route path="/userlist" element={<UserList />} />    
 
       </Routes>
+      </div>
     </Router>
   );
 }

src/components/LoginPage.jsx

@@ -3,24 +3,63 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import "../styles/LoginPage.css";
 
-function LoginForm() {
-
+function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
 
   const handleLogin = async (e) => {
     e.preventDefault();
 
+    try {
+      const response = await axios.post(
+        "https://reqres.in/api/login",
+        {
+          email: email,
+          password: password,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": "reqres-free-v1",
+          },
+        }
+      );
 
-
+      const { token } = response.data;
+
+      localStorage.setItem("email", email);
+      localStorage.setItem("token", token);
+
+      navigate("/userlist");
+    } catch (error) {
+      if (error.response && error.response.data && error.response.data.error) {
+        alert(error.response.data.error);
+      } else {
+        alert("로그인 실패");
+      }
+      console.error(error);
+    }
   };
 
   return (
     <form onSubmit={handleLogin} className="login-container">
       <h2>🔐 로그인</h2>
-      <input/>
-      <input/>
+      <input
+        type="email"
+        required
+        placeholder="이메일"
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <input
+        type="password"
+        required
+        placeholder="비밀번호"
+        onChange={(e) => setPassword(e.target.value)}
+      />
       <button type="submit">로그인</button>
     </form>
   );
 }
 
-export default LoginForm;
+export default LoginPage;

src/components/UserList.jsx

@@ -3,23 +3,70 @@ import axios from "axios";
 import "../styles/UserList.css";
 
 function UserList() {
+  const [users, setUsers] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+
+
+  const email = localStorage.getItem("email");
+  const token = localStorage.getItem("token");
+
+  useEffect(() => {
+    axios
+      .get("https://reqres.in/api/users", {
+        headers: {
+          "x-api-key": "reqres-free-v1",
+        },
+      })
+      .then((response) => {
+        setUsers(response.data.data);
+      })
+      .catch((error) => {
+        if (error.response && error.response.data && error.response.data.error) {
+          alert(error.response.data.error);
+        } else {
+          alert("유저 정보를 불러오는 데 실패했습니다.");
+        }
+        console.error(error);
+      });
+  }, []);
+
+  const filteredUsers = users.filter((user) => {
+  const keyword = searchTerm.toLowerCase();
+  return (
+    user.email.toLowerCase().includes(keyword) ||
+    `${user.first_name} ${user.last_name}`.toLowerCase().includes(keyword)
+  );
+});
+
+
 
   return (
     <div className="user-container">
       <div className="user-info-box">
-        <p><strong>이메일:</strong> { }</p>
-        <p><strong>토큰:</strong> { }</p>
+        <p><strong>이메일:</strong> { email}</p>
+        <p><strong>토큰:</strong> {token }</p>
       </div>
 
-      <h2 className="user-title">👥 유저 목록</h2>
+      <h2 className="user-title"> 유저 목록</h2>
 
       <input
         className="user-search"
+        type="text"
+        placeholder="이름 또는 이메일로 검색"
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
       />
 
       <div className="user-list">
-
+        {filteredUsers.map((user) => (
+          <div key={user.id} className="user-card">
+            <img src={user.avatar} alt={`${user.first_name} ${user.last_name}`} />
+            <p><strong>{user.first_name} {user.last_name}</strong></p>
+            <p>{user.email}</p>
+
       </div>
+        ))}
+    </div>
     </div>
   );
 }