diff --git a/README.md b/README.md index 3830d2b..6ebad2b 100644 --- a/README.md +++ b/README.md @@ -10,12 +10,8 @@ Axios를 사용하여 서버와 비동기통신하는 방법을 배웁니다.
-## 💡 과제 설명 - -- 이번 세션에서 배운 Axios를 활용하여 서버와 비동기 통신을 구현하는 과제입니다. -- REST API 중 POST와 GET 메서드를 사용하여 데이터를 주고받아 보세요! - - +## 💡 구현 결과 +
diff --git a/public/index.html b/public/index.html index aa069f2..05267ca 100644 --- 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/ --> - - React App diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/result.gif b/result.gif new file mode 100644 index 0000000..0fdf600 Binary files /dev/null and b/result.gif differ diff --git a/src/App.jsx b/src/App.jsx index dff16d3..11cee08 100644 --- 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() { } /> } /> - ); diff --git a/src/components/LoginPage.jsx b/src/components/LoginPage.jsx index e3e484c..634ad8b 100644 --- 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 ( +
+

🔐 로그인

+ setEmail(e.target.value)}/> + setPassword(e.target.value)}/> + +
+ ); + } - - }; - - return ( -
-

🔐 로그인

- - - -
- ); -} - -export default LoginForm; + export default LoginForm; diff --git a/src/components/UserList.jsx b/src/components/UserList.jsx index 21539fc..df31c97 100644 --- 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}
${u.email}`; + return info.includes(keyword); + }) return (
-

이메일: { }

-

토큰: { }

+

이메일:{localStorage.getItem('email')}

+

토큰: {localStorage.getItem('token')}

👥 유저 목록

{setKeyword(e.target.value)}} />
- + {search.length?search.map((u)=>( +
+ img +

{u.first_name} {u.last_name}

+

{u.email}

+
+ )):
검색 결과가 없습니다.
}
);