young1the / youngthedev-site

My Web portfolio, Created using Next.js.

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

youngthedev-site's Issues

Firebase

Firebase 라이브러리를 만들고

• Firebase OAuth 로그인
• Firebase로 comment CRD

Notion API와 연동

• Projects Database에 사용될 컴포넌트 구현
• Notion API의 response.results 파싱

사이트를 구성할 컴포넌트들 구현

• #29
• Notion API Title
• Footer

Hero

Storybook 설정하기

테마 변경 버튼, notion API로 불러온 데이터 등을 컴포넌트 주도개발로 사이트의 통일성과 유닛 단위 테스트를 위해 Storybook을 설정.

async ui

firebase 로그인 또는 데이터 베이스를 삭제, 등록할 때 비동기 처리를 커스텀 훅을 통해서 하고 spinner를 통해 진행 상태 나타내기

• 커스텀훅, 스피너
• 로그인, comment 작성 폼 ui 수정

Intro와 Outro 제작

프로젝트의 처음과 끝인사를 맡을 Intro, Outro를 제작

• Intro
• Outro

SoundBar

SoundBar 개선 및 기능추가

• feedback 추가
• 로딩 spinner 추가
• ui 개선

performance 개선

• 불필요한 렌더링 줄이기
• 모바일 최적화