찜목록 Infinity scroll list 개발 공유

[uneap]

시작에 앞서...

어제부터 오늘까지 Infinity scroll에 대해 삽질을 하다가 오늘 결국 완성했습니다 👏👏
정말 꽤 오랜시간 붙잡고 있던 infinity scroll 이었습니다.
민수님이 만들어주신 IntersectionObserverList 덕분에 시간이 매우 단축될 수 있었습니다. 정말 감사합니다 👍
제가 어떠한 구조로 했는지 설명이 필요할 거 같아서 이러한 이슈를 작성하게 되었구요!
그럼 지금부터 시작하겠습니다, 참고로 저는 찜목록을 담당하고 있습니다 😊
(네이버 쇼핑 찜목록을 많이 참조했습니다ㅎㅎㅎ, 이미지가 안나오는 점 양해부탁드립니다!)

인피니티 스크롤과 연관된 구성요소

카테고리

특이사항 : 유저가 찜한 데이터들이 해당되는 카테고리만 보여집니다.

리스트 아이템

코드 설명(제가 봤을 땐 리팩토링이 필요합니다,,,)

페이지 초기 진입시, 카테고리 변경시 새로운 데이터를 가져오기 위해 쓰입니다.

- setFirstFetchTrue : 초기 진입했음을 알립니다.

가장 초기 fetch 작업을 하는 function과 데이터를 추가하는 작업을 하는 function을 따로 두어서 이것이 필요합니다.

- setIsFetchTrue: 페치해도 되는지 여부를 알립니다.

데이터가 없을 경우 status가 400이 뜨면서 에러가 발생했을 때
더이상 페치하지 못하게 하도록 하기 위한 값입니다.

이 부분은 민수님과 상의 끝에 민수님께서 unObserver로 변경해주신다고 합니다. 감사합니다 민수님 🙏🙏!!

페이지 초기 진입시, 유저가 찜한 데이터들이 속해있는 카테고리만 추출하여 저장하는 작업입니다.

페이지 초기 진입시, 유저가 찜한 데이터들 중 가장 첫번째인 카테고리를 클릭된 카테고리로 설정합니다.

페이지 초기 진입시, 카테고리 변경시 첫번째로 가져온 LikeListDataResponse 속에서 category에 해당하는 데이터를 초깃값으로 설정합니다.

데이터를 추가하는 작업을 위해 쓰입니다.

마지막으로

코드 리팩토링이 필요할 듯 보입니다...!!
꽤나 복잡한 로직으로 되어있어 설명이 필요할 듯하여 이슈 공유합니다 :)