codestates / codestates/codestory2.0
[이서용][08/23]
- Dominant language
- JavaScript
- Stars
- 1
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
### 오늘은 어떻게 프로젝트에 기여했나요?
- 랜딩 페이지 제작 및 페이지 이동 효과 에러 수정
### 오늘의 프로젝트에서 느낀 점이나 기억에 남는 점은 무엇인가요? (필수 1개)
- React Transition Group을 이용한 페이지 이동 효과에서 게임 -> 랜딩페이지 이동 시 캔버스가 좌상단에 잠시 붙는 에러가 발생하는 것을 2주차 부터 확인하였으나, 다양한 방법으로도 해결이 되지 않아 강제로 게임 컴포넌트 자체를 홈 클릭과 동시에 null로 상태 해제를 시켜주는 방식으로 리팩토링 하였다.
```js
// Nav.js
logoClickHandler(
[ 'Landing', ]
)
: () => homeClickHandler() // 클릭과 동시에 homeClickHandler 호출
}
>
Code
Story
// linux.js
const [component, setComponent] = useState(
[ 'Linux_game', ]
);
const homeClickHandler = () => {
setComponent([ '', null ]); // 컴포넌트를 null로 설정하여 삭제
};
```
일단 리액트가 아닌 순수 JS로 append 된 게임 캔버스가 트랜지션 이펙트를 감지하지 못하고 계속 남아있는 것이 원인으로 생각되나, 푸터 영역이 함께 움직이는 이유는 아직 불분명하다. 일단은 배포 시점에 맞추어 out 이펙트만 보이지 않도록 설정하였고 추후 리서치가 더 필요한 부분이라고 생각된다.
[관련 에러로그](https://github.com/codestates/codestory2.0/issues/140)
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] 랜딩페이지 완성
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.