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

youngwan2 / food-picker

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

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

0 stars 0 forks source link

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

Closed youngwan2 closed 5 months ago

youngwan2 commented 5 months ago

문제상황

전통식품 조회 페이지에서 페이지네이팅을 통해 다음 페이지 이동을 하는 경우 목록을 조회하는 레이아웃의 높이가 좁아지면서 보기 좋지 못한 현상이 발생

조치방향성

min-height 에 일정 높이를 최소 값으로 부여하여 레이아웃이 재계산 되는 폭을 최소화할 것
현재 페이지에서 새로운 페이지를 불러올 때 Tanstack/query-react 를 사용하고 있으므로 이전 페이지와 다음 페이지에 대해 미리 데이터를 불러와서 사용하는 방식으로 처리해도 좋을 것 같음.

발생경로 및 발견일시

발생경로: https://foodpick.co.kr/traditional
발견일시: 2024.06.14

조치 예정일

2024.06.14

참고 이미지

레이아웃 시프트 현상이 생기기 전
레이아웃 시프트 현상이 생긴 후

youngwan2 commented 5 months ago

2024.06.14 해결완료