codestates / codestates/SoundBubble

[Dev_Log] 8/19 (목) 정제윤

Open
#120 0 comments 0 reactions 1 assignee Claimed by @jeyoon2 View on GitHub
Dev-Log
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.