[김남훈] 2021. 12. 02.

### 오늘은 어떻게 프로젝트에 기여했나요?
- Main Page의 전반적인 반응형 CSS를 다듬었다.
이제 모바일에서도 어느정도 원활하게 페이지 뷰가 가능하다.
- 내일 Back-end와의 login 연결을 위해 login page를 작성했다.
POST 로 넘어가야 하는 body를 넘겨줄 수 있게
email, password 작성이 가능하게 작성했고,
axios를 이용해 서버와 연결했고, Test까지 완료했다.
- client에 certpem을 추가하고, package.json의 start 부분을
https로 client 실행이 가능하도록 수정했다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 모바일 device에서 반응형을 적용시키는게 어려웠다
- email 도메인을 option에서 선택할 수도, 직접 입력할 수도 있게 만들었는데
email 도메인을 선택한 뒤 곧바로 다시 다른 도메인을 선택했을 때
state에 해당 도메인이 중첩으로 선택되는 것에서 함수 작성이 조금 헷갈렸다.
(직접 입력 기능이 없었다면 아주 손쉽게 해결할 문제였는데, 해당 기능과
약간의 충돌이 있어 생각이 꼬여버렸다.)
-"직접 입력"을 했을 때 'X'를 누르면 다시 도메인 선택이 가능하게 만들어야 하는데
어찌 구현은 했지만 CSS가 5px 정도 밀려버린다. 왜 그런지 좀 더 생각해봐야 할 것 같다.

```js
const handleSelect = (e) => {
const atIndex = userInfo.email.indexOf("@");
const justId = userInfo.email.slice(0, atIndex);
console.log(justId);
userInfo.email.includes("@")
? setUserInfo({
...userInfo,
email: justId + "@" + e.target.value,
})
: setUserInfo({
...userInfo,
email: userInfo.email + "@" + e.target.value,
});
console.log(userInfo);
e.target.value === "직접 입력"
? setIsSelectSelf(true)
: setIsSelectSelf(false);
console.log(userInfo.email);
};
```
option에서 이메일 도메인을 선택시 id와 '@'와 선택한 option의 value를 합쳐
state에 반영해 주는 코드다.
만약 도메인을 선택한 상태에서 다시 도메인을 선택하면
state의 email을 '@' 뒤의 것을 모두 날린 id만 남겨둔 뒤 다시 option의 value를 합쳐주는 방식으로
중첩을 방지했다.
하지만 밑의 "직접 입력" 일 시의 기능은 좀 더 생각 해봐야 한다.

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [x] back-end와 login 로직 상의 및 작성
- [x] 이메일 도메인 "직접 입력" 기능 구현 및 CSS 손보기