youngthedev-site

https://youngthedev-site.web.app/

사용스택: TypeScript, Next.js, Firebase SDK, Notion SDK, Github Action

SoundCloud의 코멘트 기능에서 영감을 받아, 사용자가 보는 화면 위치에 피드백을 남길 수 있는 웹 포트폴리오를 제작하였습니다. 

포트폴리오의 특성상 정적인 데이터가 많아 Next.js를 이용해 구현했습니다.

포트폴리오를 음악앨범으로 구성하고, 스크롤바를 사운드바처럼 구현하여 몰입감을 줬습니다.

내부 컨텐츠는 노션페이지와 연동해서 관리하여 내용을 수정할 때, 코드가 아닌 노션 페이지를 통해 수정할 수 있습니다.

---

🌜 다크모드

💁‍♂️ 구현과정

• 커스텀 데이터 속성 (Custom Data Attribute)을 이용해서 사이트 테마 변경 구현했습니다. #1

---

🗒️ 노션 API

💁‍ 구현과정

• Notion API를 이용해서 노션페이지를 Next.js의 getStaticProps()을 이용해 빌드 시에 불러왔습니다. #2
• 노션페이지 하위블록의 모든 데이터를 받아오기 위해 데이터를 받아오는 함수를 재귀로 구현하고 Promise.all 메서드를 이용 했습니다. #8
• 기타 #10

💁‍ DEMO

---

🐹 Google OAuth, 익명로그인 기능

💁‍ 구현과정

• Firebase SDK를 React에 적용하여 OAuth 기능을 구현했습니다. #15

🤖 Github Actions 🤖

💁‍ 구현과정

• firebase-hosting-pull-request.yml

💁‍ DEMO