💡 로그인 기능
📁 VS Code
🔎 Login.js
import React, { useState, useContext } from 'react';
import { TodoListContext } from './App';
const LoginComponent = () => {
const { setTodoList, setLoginMember, loginMember } = useContext(TodoListContext);
const [id, setId] = useState('');
const [pw, setPw] = useState('');
const login = () => {
fetch('/login', {
method : "POST",
headers : {
'Content-Type' : 'application/json',
'Accept' : 'application/json'
},
body : JSON.stringify({
id : id,
pw : pw
})
})
.then(resp => resp.json())
.then(map => {
console.log(map);
if(map.loginMember === null){
alert('아이디 또는 비밀번호가 일치하지 않습니다.');
return;
}
setLoginMember(map.loginMember);
setTodoList(map.todoList);
setId('');
setPw('');
})
.catch(e => console.log(e))
};
const logout = () => {
setLoginMember(null);
};
return (
<div className="login-container">
<table>
<tbody>
<tr>
<th>ID</th>
<td>
<input type="text" onChange={e => setId(e.target.value)} value={id} />
</td>
</tr>
<tr>
<th>PW</th>
<td>
<input type="password" onChange={e => setPw(e.target.value)} value={pw} />
</td>
<td>
<button onClick={login} >Login</button>
</td>
</tr>
</tbody>
</table>
{loginMember && (
<button onClick={logout}>로그아웃</button>
)}
</div>
);
}
export default LoginComponent;
🔎 App.js
import React, { useState, createContext } from 'react';
import './App.css';
import SignupContainer from './Signup';
import Login from './Login';
import TodoList from './TodoList';
export const TodoListContext = createContext();
function App() {
const [signupView, setSignupView] = useState(false);
const [loginMember, setLoginMember] = useState(null);
const [todoList, setTodoList] = useState([]);
return (
<TodoListContext.Provider value={ {setTodoList, setLoginMember, loginMember, todoList} }>
<button onClick={ () => {setSignupView(!signupView)} }>
{ signupView ? ('회원 가입 닫기') : ('회원 가입 열기') }
</button>
<div className='signup-wrapper'>
{}
{}
{signupView === true && (<SignupContainer/>)}
</div>
<h1>Todo List</h1>
<Login />
</TodoListContext.Provider>
);
}
export default App;
📁 Spring
🔎 TodoController.java
...
@PostMapping("/login")
public Map<String, Object> login(@RequestBody TodoMember member){
return service.login(member);
}
...
🔎 TodoService.java
...
Map<String, Object> login(TodoMember member);
...
🔎 TodoServiceImpl.java
...
@Override
public Map<String, Object> login(TodoMember member) {
TodoMember loginMember = dao.login(member);
Map<String, Object> map = new HashMap<>();
map.put("loginMember", loginMember);
if(loginMember != null) {
List<Todo> todoList = dao.selectTodoLst(loginMember.getTodoMemberNo());
map.put("todoList", todoList);
}
return map;
}
...
🔎 TodoDao.java
...
public TodoMember login(TodoMember member) {
return sqlSession.selectOne("todoMapper.login", member);
}
...
🔎 todo-mapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="todoMapper">
<resultMap type="TodoMember" id="todoMember_rm">
<id property="todoMemberNo" column="TODO_MEMBER_NO" />
<result property="id" column="ID" />
<result property="pw" column="PW" />
<result property="name" column="NAME" />
</resultMap>
<resultMap type="Todo" id="todo_rm">
<id property="todoNo" column="TODO_NO" />
<result property="title" column="TITLE" />
<result property="isDone" column="IS_DONE" />
<result property="todoMemberNo" column="TODO_MEMBER_NO" />
</resultMap>
...
<select id="login" resultMap="todoMember_rm">
SELECT * FROM TODO_MEMBER
WHERE ID = #{id}
AND PW = #{pw}
</select>
...
💻 구현 화면