likelion-inha-13 · BergamoJun · Jun 2, 2025 · Jun 2, 2025 · Jun 2, 2025 · Jun 2, 2025
diff --git a/README.md b/README.md
@@ -10,12 +10,8 @@ Axios를 사용하여 서버와 비동기통신하는 방법을 배웁니다.
 
 <br/>
 
-## 💡 과제 설명
-
-- 이번 세션에서 배운 Axios를 활용하여 서버와 비동기 통신을 구현하는 과제입니다.
-- REST API 중 POST와 GET 메서드를 사용하여 데이터를 주고받아 보세요!
-
-
+## 💡 구현 결과 
+<img src="./result.gif">
 
 <br/>
 

diff --git a/public/index.html b/public/index.html
@@ -14,16 +14,6 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/result.gif b/result.gif
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,4 @@
 import { BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";
-
 import UserList from "./components/UserList";
 import LoginPage from "./components/LoginPage"
 
@@ -9,7 +8,6 @@ function App() {
       <Routes>
         <Route path="/" element={<LoginPage />} />    
         <Route path="/userlist" element={<UserList />} />    
-
       </Routes>
     </Router>
   );

diff --git a/src/components/LoginPage.jsx b/src/components/LoginPage.jsx
@@ -1,26 +1,42 @@
-import React, { useState } from "react";
-import axios from "axios";
-import { useNavigate } from "react-router-dom";
-import "../styles/LoginPage.css";
+  import React, { useState } from "react";
+  import axios from "axios";
+  import { useNavigate } from "react-router-dom";
+  import "../styles/LoginPage.css";
 
-function LoginForm() {
-
+  function LoginForm() {
+    const[email, setEmail] = useState("");
+    const[password, setPassword] = useState("");
+    const navigate = useNavigate();
 
-  const handleLogin = async (e) => {
-    e.preventDefault();
+    const handleLogin = async (e) => {
+      e.preventDefault();
+      try{
+        const data = await axios.post(
+          "https://reqres.in/api/login",{
+          email,password},
+          {
+          headers: {
+            "x-api-key": "reqres-free-v1"
+          }
+        }
+      );
+      localStorage.setItem("email",email);
+      localStorage.setItem("token",data.data.token);
 
+      navigate("/UserList");
+      }catch(e){
+        const em = e.response?.data?.error
+        console.log(em);
+      }
+    };
+    return (
+      <form onSubmit={handleLogin} className="login-container">
+        <h2>🔐 로그인</h2>
+        <input type="email" placeholder="이메일"  value={email} required onChange={(e)=>setEmail(e.target.value)}/>
+        <input type="password" placeholder="비밀번호" value={password} required onChange={(e)=>setPassword(e.target.value)}/>
+        <button type="submit">로그인</button>
+      </form>
+    );
+  }
 
-
-  };
-
-  return (
-    <form onSubmit={handleLogin} className="login-container">
-      <h2>🔐 로그인</h2>
-      <input/>
-      <input/>
-      <button type="submit">로그인</button>
-    </form>
-  );
-}
-
-export default LoginForm;
+  export default LoginForm;
diff --git a/src/components/UserList.jsx b/src/components/UserList.jsx
@@ -3,22 +3,57 @@ import axios from "axios";
 import "../styles/UserList.css";
 
 function UserList() {
+  const [users,setUsers] = useState([]);
+  const [keyword,setKeyword] = useState("");
 
+  useEffect(()=>{
+
+   const fetch = async ()=>{
+      try{
+        const ag = await axios.get(
+          "https://reqres.in/api/users?page=2",
+          {
+            headers:{
+              "x-api-key": "reqres-free-v1"
+            }
+          }  
+        );
+        setUsers(ag.data.data);
+      }catch(e){
+        console.log(e);
+      }
+    }
+    fetch();
+  },[]);  
+
+  const search = users.filter((u)=>{
+    const info = `${u.first_name}${u.last_name}<br>${u.email}`;
+    return info.includes(keyword);
+  })
   return (
     <div className="user-container">
       <div className="user-info-box">
-        <p><strong>이메일:</strong> { }</p>
-        <p><strong>토큰:</strong> { }</p>
+        <p><strong>이메일:</strong>{localStorage.getItem('email')}</p>
+        <p><strong>토큰:</strong> {localStorage.getItem('token')}</p>
       </div>
 
       <h2 className="user-title">👥 유저 목록</h2>
 
       <input
         className="user-search"
+        placeholder="이름 또는 이메일로 검색하세요"
+        value={keyword}
+        onChange={(e)=>{setKeyword(e.target.value)}}
       />
 
       <div className="user-list">
-
+        {search.length?search.map((u)=>(
+          <div className="user-card">
+          <img className="user-avatar" src={u.avatar} alt="img"/>
+          <p>{u.first_name} {u.last_name}</p> 
+          <p className="user-email">{u.email}</p> 
+          </div>
+        )):<div>검색 결과가 없습니다.</div>}        
       </div>
     </div>
   );