axios_prac

src/components/LoginPage.jsx

@@ -3,24 +3,53 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import "../styles/LoginPage.css";
 
-function LoginForm() {
-
+function LoginPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errorMsg, setErrorMsg] = useState("");
 
   const handleLogin = async (e) => {
     e.preventDefault();
 
+    try {
+      const res = await axios.post("https://reqres.in/api/login", {
+        email: email,
+        password: password,
+      });
 
-
+      const token = res.data.token;
+      localStorage.setItem("email", email);
+      localStorage.setItem("token", token);
+
+      navigate("/userlist");
+    } catch (err) {
+      setErrorMsg(err.response?.data?.error || "로그인 실패");
+      console.error("로그인 에러:", err.response);
+    }
   };
 
   return (
     <form onSubmit={handleLogin} className="login-container">
       <h2>🔐 로그인</h2>
-      <input/>
-      <input/>
+      <input
+        type="email"
+        placeholder="이메일 입력"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+      />
+      <input
+        type="password"
+        placeholder="비밀번호 입력"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        required
+      />
       <button type="submit">로그인</button>
+      {errorMsg && <p style={{ color: "red" }}>{errorMsg}</p>}
     </form>
   );
 }
 
-export default LoginForm;
+export default LoginPage;

src/components/UserList.jsx

@@ -3,25 +3,61 @@ import axios from "axios";
 import "../styles/UserList.css";
 
 function UserList() {
+  const [users, setUsers] = useState([]);
+  const [email, setEmail] = useState("");
+  const [token, setToken] = useState("");
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    // 로그인한 사용자 정보 불러오기
+    const storedEmail = localStorage.getItem("email");
+    const storedToken = localStorage.getItem("token");
+
+    if (storedEmail) setEmail(storedEmail);
+    if (storedToken) setToken(storedToken);
+
+    // 사용자 목록 요청
+    axios.get("https://reqres.in/api/users")
+      .then((res) => {
+        setUsers(res.data.data);
+      })
+      .catch((err) => {
+        console.error("유저 불러오기 실패:", err);
+      });
+  }, []);
+
+  // 검색 필터링
+  const filteredUsers = users.filter((user) =>
+    user.email.toLowerCase().includes(search.toLowerCase())
+  );
 
   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>
 
       <input
         className="user-search"
+        placeholder="이메일 검색"
+        value={search}
+        onChange={(e) => setSearch(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} />
+            <p><strong>{user.first_name} {user.last_name}</strong></p>
+            <p>{user.email}</p>
+          </div>
+        ))}
       </div>
     </div>
   );
 }
 
-export default UserList;
+export default UserList;