[✍️ Dev Log] 김우성 / 21-07-11

### 오늘은 어떻게 프로젝트에 기여했나요?

- 로직 구현만 해놓은 모달의 CSS 적용 및 popup animation을 적용 했습니다.
- 모달 창 외부를 클릭할 경우 모달창을 닫을 수 있는 로직을 구현 했습니다.
- 스터디룸 CSS를 전반적으로 다시 구성 했습니다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- Redux 전역상태를 기반으로 modal을 조건부 렌더링 하려 하였지만, 전역상태를 기반으로 조건부 렌더링을 하면 변화하는 상태를 react가 감지하지 못합니다. 이에 따라 useRef와 useEffect를 사용해 컴포넌트가 마운트 될때 전역 상태를 읽고 모달 조건부 렌더링을 위한 상태를 설정하는 로직을 추가하는데 시간이 상당히 걸렸습니다. dependency 이슈를 해결하는데에도 시간이 소요되었습니다. #146
- styled-components 에서 조건부 CSS를 구성하기 난해하였습니다. CSS에 관련된 로직이나 html element, component를 파악하기는 쉬웠지만 조건부 CSS를 구성하는데 있어선 더 복잡하다는 생각이 들었습니다. 아직 숙련도가 높지 않아 이런 생각이 드는것 같습니다.

```js
const state = useSelector((state) => state.logInStatusReducer);
const { user } = state;
const [isCSModalOpen, setIsCSModalOpen] = useState(false);
const [offsetY, setOffsetY] = useState(0);
const sectionMid = useRef();
const modalRef = useRef();

const catSelModalHandle = () => {
if (user.isFirstLogedIn) setIsCSModalOpen(true);
else setIsCSModalOpen(false);
};

modalRef.current = catSelModalHandle;

const catSelModalClose = () => {
setIsCSModalOpen(false);
};

/* const handleScroll = () => {
setOffsetY(window.pageYOffset);
}; */

/* const divProps = useSpring({
from: { bottom: "100%", opacity: "0" },
to: { bottom: "15%", opacity: "1" },
}); */

useEffect(() => {
const setModal = () => {
modalRef.current();
};

setModal();

window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);

//----------------------------------------------------------------------------------------------------------------------------

${(props) =>
props.open
? `display: flex;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
align-items: center;
justify-content: center;
animation: modal-bg-show .3s;`
: `display: none;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;`}
z-index: 99;
background-color: rgba(0, 0, 0, 0.6);
```

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

- [x] 인피니트 스크롤 스터디 및 구현
- [x] 마이페이지 로직 구현