codestates / codestates/SoundBubble
[Dev_Log] 8/19 (목) 정제윤
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
### 오늘은 어떻게 프로젝트에 기여했나요?
* [x] 메인 페이지 - 피아노 캔버스 구현
* [x] 랜딩페이지 반응형 CSS
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
* CSS는 단순하게 조금만 수정하면 된다고 생각했는데 생각보다 복잡하다. 랜딩페이지에서 스크롤 시 컨텐츠가 fade-in 되는 효과를 주기 위해
react-hook 이 지원하는 use-is-in-viewport를 사용하려고 했다. 공식문서를 보고 프로젝트에 적용시키려고 했는데, 프로젝트에서 사용한 스크롤 함수와 겹치는 부분이 있어 적용이 잘 안되었다. 몇시간 동안 삽질을 하다가 aos 라는 라이브러리를 발견하고 적용시켰는데 너무 간단하게 구현이 되었다.
```js
import AOS from "aos";
import "aos/dist/aos.css";
// fade 효과를 줄 html 태그에 data-aos="fade-up" 속성을 주면 된다. "fade-up" 뿐만 아니라 다양한 fade 효과를 지원한다.
```
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
* [x] 버블 상세페이지 수정
* [x] 반응형 CSS 적용
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.