숏폼 형식의 웹을 만들면서 고민되는점

고민상담 A or B 프로젝트를 진행하고 있는데 

동영상을 내리는 숏폼은 아니고, 숏폼의 형식만 빌려와서 투표들이 하나씩 올라오면서 투표를 간단하게 할 수 있는 기능을 구현 중이다.

기획상 스크롤을 움직이는 게 아니라 메모장을 넘기듯 애니메이션을 보여준뒤 다음 투표용지를 보여줘야 해서

렌더링 할 때 이전 데이터에서 하나씩 덮어쓰면서 해야 할 거 같아 어떻게 구현할지 고민이 많이 된다.

 

생각해 본 바로는

1. useQuery로 id값을 바꾸면서 하나씩 데이터를 덮어쓰기

이건 구현까지 했엇는데 하다 보니투표의 id값이 1부터 100 순차적으로 있는 게 아니라 삭제하면 중간이 비는 경우가 있어

id값에 1씩 더해서 불러오게 되면 에러가 발생하고, 그렇다고 다음 id를 예측할 수도 없어 실패했다. 

 

2. 캐러셀 세로로 세워서 구현하기

세로 캐러셀로 슬롯머신 움직이는 거처럼 구현해보면 괜찮지 않을까 생각해 보았다.

 

3. 무한 스크롤 변형해서 구현하기

이게 가장 구현할 가능성이 높을 거 같은데, 아직 해보지는 않았다.

숏폼 페이지 들어오면 -> 10개 받아와서 -> 지금 몇 번째꺼 보고 있는지 상태(A)로 관리 -> 내릴 때마다 A를 1씩 올려주고 A번째 데이터 렌더링 -> A가 지금껏 불러온 데이터랑 개수가 같아지면 fetchNextPage 실행

 

이게 무한스크롤의 observe처럼 정확한 조건에 fetch 하는 게 아니라 A값이랑 데이터 개수로 비교하고 불러오는 거라 사이드이펙트가 생길 수 도 있을 거 같다.

 

또 상세페이지 들어갔다 나오면 처음부터 진행하는 게 아니라 아까 투표했었던 부분부터 다시 시작하는 게 좋을 텐데

그럼 A를 전역으로 관리해야 할거 같다.

 

해결해보고 다시 글을 써야겠다.