[이서용][07/23]

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

- 랜딩 페이지와 관련 애니메이션 및 모바일 에러페이지, 회원가입 컴포넌트를 구성하였습니다.

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

- 페이드 인/아웃을 구현하기 위해 CSS에 transition을 사용하였으나 리액트의 실시간 렌더로 인해 적용되지 않았음. js 파일 내에서 style 변수를 설정해서 적용해 해결

```js
const fadeIn = {
opacity: 1,
transition: '.5s'
};

const fadeOut = {
opacity: 0,
transition: '.5s'
};

// return () 내부
scrollToBottom()}> // 페이드 인/아웃 정상 작동
```

- 스크롤에 대한 좌표를 확인하는 부분을 실시간으로 확인하기 위해 useEffect를 이용해서 해결하였음

```js
const [y, setY] = useState(null);

const handleNavigation = (e) => {
const window = e.currentTarget.scrollY;
if (window >= 680 && window < 2200) { // 특정 좌표 설정
setIsClick(false);
setIsVisible(true);
} else {
setIsVisible(false);
}
setY(window.scrollY);
console.log(window);
};

useEffect(() => {
window.addEventListener('scroll', (e) => handleNavigation(e));
return () => {
window.removeEventListener('scroll', (e) => handleNavigation(e));
};
}, [y]);
```

- input 내용을 state에 담을 때 value={currentId} 설정을 깜빡하여 실시간으로 유효성 검사가 반영되지 않았다. 검색을 통해 value를 설정하여 해결하였다.

```js
const [currentId, setCurrentId] = useState('');

const inputId = (e) => {
setCurrentId(e.target.value);
}

inputId(e)}> // onKeyDown 등은 작동 X

```

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

- [ ] 게임 컴포넌트 작성
- [ ] 게임 스타트 페이지 작성