개발자 otcroz(유수연)의 레포지토리입니다.
프로젝트 소개와 함께 제가 담당한 기능과 트러블슈팅을 담았습니다.

---

여행자분들을 위한 책 여행 길잡이, 북극성

#도서 추천 서비스 #도서 플랫폼

사용자가 읽은 책을 기반으로 비슷한 분야의 책과 책 속의 문장을 권하여 책을 접할 기회와 풍부한 독서 경험을 제공하는 웹서비스입니다.
북극성은 모험을 하는 탐험가에게 길잡이가 되어주는 별과도 같습니다.
'북극성' 서비스는 책의 여행자들에게 길잡이가 되어주기 위한 의도로 기획되어 개발한 서비스입니다.

• 토이 프로젝트
  
• 개발 기간: 2023.07 ~ 2024.08
  
• 개발 인원: 2명
  
• 담당 스택: ReactJS NodeJS

✨담당 기능

서비스 소개 페이지	달력 페이지	리뷰 작성 & 수정 페이지
북극성 서비스에 대한 소개, 문장이 흐르는 애니메이션 구현	달력에 사용자가 읽은 책 표지가 보이며, 표지를 클릭하면 사용자가 작성한 리뷰 상세 페이지로 이동	사용자가 책을 다 읽은 후 리뷰 작성

마이페이지 & 프로필 수정 페이지	책 정보 페이지 & 리뷰 목록 페이지	리뷰 목록 & 리뷰 상세 페이지
사용자 정보와 최근에 추가한 북킷리스트 6개 확인	책 정보와 책에 대한 사용자 리뷰 열람	사용자가 작성한 리뷰 확인 밤하늘 애니메이션 구현

🚨Trouble Shotting

1. 북극성 서비스 소개 페이지 구상, 페이지 구현 중 애니메이션 오류

1. 사용자가 우리 서비스를 사용하기 전, 북극성 서비스 컨셉과 주요 기능을 각인시킬 수 있는 방안 고민

• 💡gsap와 keyframe을 사용하여 인터렉티브한 서비스 소개 페이지 구현, 사용자가 맨 처음에 확인할 수 있도록 설정

2. mouse wheel event가 발생했을 때 페이지가 내려가는 애니메이션, 오른쪽에서 컴포넌트가 등장하는 애니메이션 코드를 작성했으나,
   애니메이션이 간헐적으로 실행되지 않는 문제

• 💡 query data 조건문 호출 위치를 수정하여 문제 해결
• 🔎 관련 이슈: polaris-book-page#72

2. 리뷰 수정 페이지에서 사용자가 작성한 리뷰를 불러올 때, 별점이 업데이트되지 않는 오류

• 💡 별점 컴포넌트를 구성하는 <Input> 태그의 속성인 checked와 onChange 값을 조정, 렌더링시 별점이 업데이트되지 않는 문제 해결
  • checked를 true로 초기화하여 렌더링 시에 라디오 버튼이 체크되도록 표시
  • onChange를 사용하여 Input의 값이 바뀔 때마다 별점을 업데이트
• 🔎 관련 이슈: polaris-book-page#73

3. 책 목록을 사용자에게 보여주기 위한 방법과 오류 해결

1. 페이지네이션, 무한 스크롤 중
사용자에게 목록을 보여줄 방법 고민

• 💡사용자에게 최소한의 클릭을 요구, 책을 살펴보고 별점을 등록하는 동작의 흐름을 끊지 않기 위해
  무한 스크롤을 적용하는 것이 적합하다고 봄

2. react-intersection-observer로 무한스크롤을 구현, 스크롤이 빠르게 일어나거나 화면에 빠르게 진입 또는 이탈하는 경우
   
API를 여러 번 요청하는 문제 발생

• 💡 useInfiniteQuery를 적용하여 데이터 fetch와 서버 상태 관리를 통합, 
API 반복 요청 문제 해결
• 📚 공부: useInfiniteQuery를 사용하여 무한 스크롤 만들기

---

readme를 읽고 더 궁금하시다면,
북극성 서비스를 직접 체험해보세요.
🌌 https://polaris-book.vercel.app/ 🌌