[이서용][07/27]

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

- 랜딩 페이지와 게임스타트 페이지의 사용자 경험을 고려한 리팩토링 작업을 진행하였습니다.
- 랜딩페이지의 경우 로그인 전에 쿠키를 가지고 있는 경우에도 네비게이션 바에는 로그인 전의 상태만 보이도록 수정하였습니다.
- 게임스타트 페이지의 경우 GET 요청 이후 로딩 시간차가 발생하는 것을 확인하고 로딩 플레이스 홀더를 추가하였습니다.

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

- 스크롤 움직임에서(scrollTo) 위치값을 절대 위치로 설정하니 모니터 비율에 따라 다른 위치로 보내는 것을 확인하였습니다. 따라서 이를 상대 위치 기준으로 이동하도록 변경하였습니다.

```js
const move1 = () => {
window.scrollTo({
top: 670,
top: document.getElementById('landing-page-2').offsetHeight, // 각 페이지의 상대 높이 기준 이동
behavior: 'smooth'
});
};
```
- 로딩 플레이스 홀더의 원에 무한으로 색이 변하면서 깜빡이는 속성을 추가하고 싶어 keyframes를 사용하였습니다.

```css
.nav-loading-circle {
margin-left: .4rem;
width: 1rem;
height: 1rem;
border-radius: 1rem;
animation: color-change .4s infinite; /*animation에 color-change 라는 변수와 infinite 설정*/
}

@keyframes color-change {
0% { background-color: #232321; }
50% { background-color: #ffffff; }
100% { background-color: #fccb03; }
}
```

- 게임스타트 페이지의 로딩 플레이스 홀더 설정을 위해 isLogin 을 사용하려 하였으나 랜딩페이지에서도 작동하는 문제가 생겼습니다. 이를 해결하기 위해서 react-router-dom의 useLocation을 사용하여 특정 path에서만 함수가 작동하도록 하여 해결하였습니다.

```js
const location = useLocation();

useEffect(() => {
if (location.pathname === '/gamestart') {
if (isLogin === false) {
setIsLoading(true);
}
if (isLogin === true) {
setIsLoading(false);
}
}
}, [isLogin]);
```

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

- [ ] 최종 배포