[Dev-log] 220227 김제완

### 오늘은 어떻게 프로젝트에 기여했나요?
- 로그인 상태 유지 구현

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- recoil의 사용법을 제대로 인지하지 못해서 로그인 상태 유지 구현에만 몇 시간을 내리 허비했다. 상태 변화의 복잡성을 줄이고 코드 로직의 효율을 높이기 위해 recoil을 도입한 건데 recoil을 사용하지 않고, useState를 사용하면서, props 지옥으로 괜한 헛수고를 진짜 몇 번을 한지 모르겠다.

내가 이해한 바는 아래와 같다.

recoil로 전역에 **로그인, 비로그인** 상태값을 지정해주고,
```js

import { atom } from "recoil";
import { recoilPersist } from "recoil-persist"
const { persistAtom } = recoilPersist();

const IsLoginState = atom({
key: 'IsLoginState',
default: false,
effects_UNSTABLE: [persistAtom],
});

export default IsLoginState;
```
**로그인** 버튼 클릭시 상태값 `true`로 변환 후 홈페이지로 이동한다. 이 상태는 어떤 이벤트로 상태값을 `false`로 변환하지 않는 한 바뀌지 않는다.
```js
const onSubmit = (data) => {
axios
.post(
"http://localhost:27017/user/login",
{ email: data.email, password: data.password },
config
)
.then((res) => {
const loginFalse = res.data.loginSuccess;
if (loginFalse === false) {
setErrMsg("아이디와 비밀번호를 정확하게 적어주세요.");
} else {
setIsLogin(true);
navigate("/home");
}
});
};

```

상태값이 true인 상태로 홈페이지로 이동하면 네비게이션바가 아래 삼항연산자처럼
`true` : **알림창, 마이페이지, 로그아웃**으로 변환
`false` : **로그인, 회원가입**으로 변환
```js

{isLogin ? (
<>


마이페이지


로그아웃


) : (
<>

로그인


회원가입


)}
```

위에서 네비게이션 바에 존재하는 **로그아웃** 버튼 클릭시 상태값을 false로 변환 후 랜딩페이지로 리플레이스
```js
const logoutHandler = () => {
axios.get("http://localhost:27017/user/logout", config).then(() => {
setIsLogin(false);
navigate("/", { replace: true });
alert("로그아웃이 완료되었습니다.");
});
};
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] Todo 형식으로 기록해주세요.