22.01.14 Dev-Log

### 오늘은 어떻게 프로젝트에 기여했나요?
- 회원정보를 수정할 경우 본인 인증을 거쳐서 수정하는 기능 추가
- 무한 스크롤 시 데이터를 받아오는 동안 '로딩 컴포넌트' 추가
- isGuest 상태일 경우 회원정보수정 버튼을 누를 시 노티스 모달 띄우기 (진행중)

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 구형 맥북(맥북 프로 레티나 2015 early)을 사용하는 중인데 개인 작업을 할 때는 큰 불편함이 없다. 물론 프로그램의 높은 버전을 사용하지 못 하는 경우도 있지만. 팀원들(총4명)과 화상 회의를 하며 화면 공유를 할 경우 내 맥북의 반응 속도는 급격히 떨어진다. merge 이후에 기능 테스트 때문에 내 화면을 공유하면서 보는데 타이핑 하는 것도 어려웠고 마우스 컨트롤 조차도 힘들었다. 원활하게 맥북이 움직였으면 금방 끝났을 일인데 회의가 자꾸 지연되서 너무나 힘들었다.
팀원들이 나의 상황에 대해 이해해주고 배려해주어서 정말 감사했지만 속상했다. 얼른 취직해서 좋은 맥북을 얻던가 돈 벌어서 그 해의 최신사양의 아이맥을 집에 둬야겠다.
- MyPage에서 나의 article을 지울 경우 서버에는 해당 정보가 지워졌지만 클라이언트에서는 새로고침을 하거나 페이지를 이동했다가 다시 MyPage로 돌아오기 전에는 화면에 article이 보였다. 상태는 변화됬지만 다시 렌더링을 하지 않아서 발생한 듯 하다. 상태의 변화가 올 때마다 렌더링을 하게끔 로직을 수정해야겠다

- isGuest의 상태일 경우 회원정보수정 기능의 접근을 notice modal로 처리하는 로직을 짰지만 유저 정보의 값이 제대로 넘어오지 않은 듯 했다. 로그인에서부터 전달해오는 값이므로 리덕스를 사용하여 게스트 정보를 받아와야할 듯 하다.

- UserModifyModal 위에 ArticleNoticeModal를 띄우는 것이 있는데 ArticleNoticeModal의 background의 영역이 모달1 컨터네이너 안에서만 생겼다. 여기까지는 좋은데 ArticleNoticeModal의 background로 회색의 투명한 색을 넣으니 UserModifyModal의 컨테이너의 경계선이 그려졌다. 이 상황은 정말 어떻게 처리해야할 지 감이 오질 않는다.
```js
// UserModifyModal의 styled-components
// 모달: 전체 배경, background
export const UserInfoModifyModalContainer = styled.div`
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5); // 투명 회색 효과
backdrop-filter: blur(5px); //blur 효과

@media screen and (max-width: 500px) {
background: white;
}
`;

// 모달: UserModify 모달창
export const UserInfoModifyContainer = styled.div`
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-height: 80%;
width: 20rem;
height: 450px;
padding: 16px;
background: white;
border-radius: 10px;
text-align: center;
`;

// ArticleNoticeModal의 styled-components
export const NoticeModalBackground = styled.div`
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 15px;
border: 0.1px solid rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0.5); // 투명 회색 효과
backdrop-filter: blur(5px); //blur 효과
z-index: 101;
`;

export const NoticeModalContainer = styled.div`
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 300px;
width: 400px;
position: fixed;
background-color: snow;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 101;
`;
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] MyPage의 article 상태 변화에 따른 렌더링 구현
- [ ] isGuest일 경우 회원정보수정에 제약사항 걸기
- [ ] 기능 테스트 후 수정