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

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

- 스터디룸 상단 Carousel 수정 (fleshing 현상 제거, 부드러운 transition, autoplay, 구성 컴포넌트 정렬) #139
- 스터디룸 반응형 적용

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

- 무수한 useEffect와 useRef의 향연, UX를 향상시키기 위해 추가해야 할 로직이 산더미 였다.. 특히나 carousel 가운데 추천 방 card를 정렬 시키는데 몇시간을 소모한지 모르겠다...
- useRef를 이용하면 useEffect dependency 오류 문제를 해결할 수 있을거 같다.

```js
const autoPlayRef = useRef();
const transitionRef = useRef();
const resizeRef = useRef();

useEffect(() => {
autoPlayRef.current = nextSlide;
transitionRef.current = smoothTransition;
resizeRef.current = handleResize;
});

useEffect(() => {
const play = () => {
autoPlayRef.current();
};

const smooth = (e) => {
if (e.target.id === "slider-content") {
transitionRef.current();
}
};

const resize = () => {
resizeRef.current();
};

const transitionEnd = window.addEventListener("transitionend", smooth);
const interval = setInterval(play, 7000);
const onResize = window.addEventListener("resize", resize);

return () => {
clearInterval(interval);
window.removeEventListener("transitionend", transitionEnd);
window.removeEventListener("resize", onResize);
};
}, []);

useEffect(() => {
if (transition === 0) setState({ ...state, transition: 0.45 });
}, [transition]);
```

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

- [x] 스터디룸 로직 구현
- [x] 마이페이지 로직 구현
- [x] search 로직 구현
- [x] 회원가입 중복검사 로직 수정(API 수정으로 인해)
- [x] 모달 애니메이션 구현