레이아웃 깨짐 문제 외 페이지네이션 깨짐 문제 개선 - Githubissues

youngwan2 / food-picker

내가 먹는 음식은 과연 안전한 음식일까? 여기 시장 어릴 적 부터 있었는데, 언제부터 있었던 걸까? 또 무엇이 유명하지? 이거 칼로리는 작아보이는데 영양가도 있을까? 간단하게 만들어 먹을 수 있는 음식은 뭐가 있을까? 모든 궁금증과 고민을 해결할 수 있는 사이트

https://www.foodpick.co.kr/

0 stars 0 forks source link

레이아웃 깨짐 문제 외 페이지네이션 깨짐 문제 개선 #42

Closed youngwan2 closed 5 months ago

youngwan2 commented 5 months ago

개요

전통음식 페이지의 목록 조회 시 레이아웃이 깨지는 문제를 해당 목록 컨테이너의 min-height 값 조정을 통해서 개선
추가로 음식영양정보 조회 페이지에서 사용 중인 페이지네이션의 경우 다음 페이지에 대한 추가 요청 시 페이지네이션 자체가 깨지는 문제가 보였음. 해당 문제의 원인은 Pagination 컴포넌트로 전달하는 데이터가 새로운 데이터 페칭 시 잠시 누락되기 때문. 따라서 Tanstack/query-react 에서 제공하는 placeholderData 및 keepPreviousData 을 활용하여 추가 데이터 로드 이전에 기존 데이터를 placeholder 형식으로 사용 후 새 데이터가 도착하는 순간 교체되도록 함으로써 개선

연관 이슈

전통식품 데이터 조회 시 리스트 레이아웃 시프트 현상 #41

결과 이미지

데스크톱 사이즈에서 조회된 목록이 차지하는 뷰포트 만큼 최소 높이를 지정함으로써 레이아웃 시프트 문제를 개선
비고: 모바일 환경에서는 어떻게 동작하는 지 테스트 할 필요 있음
전통음식 페이지 추가 로드 요청 전

전통음식 페이지 추가 로드 요청 중