codestates / codestates/codestory2.0

[이서용][08/23]

Open
#252 0 comments 0 reactions 1 assignee Claimed by @seoyong-lee View on GitHub
클라이언트
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.