recipe 페이지 UI 및 디자인 수정, 기존 무한 스크롤 기능 최적화 작업 외

[youngwan2]

개요

성능 최적화를 위한 로직 개선

무한 스크롤 로직 개선

• 기존에는 window 객체에 scroll 이벤트를 등록하여 handleScroll 함수를 호출하는 형식으로 무한 스크롤을 구현하였음.
• 그러나 매번 호출되는 이벤트로 인해 해당 페이지가 불필요하게 리렌더링되는 부분이 레시피 조회 후 목록이 렌더링 될 수록 버벅이는 현상을 일으키는 주요 원인이 되는 것을 발견.
• 따라서 scroll 이벤트 핸들러를 제거하고, 앞서 만들어둔 useIntersection 훅을 사용하여, 끝 지점에 도달하는 경우에만 리렌더링이 발생하도록 로직을 개선함. 해당 훅은 IntersectionObserver 를 이용한 End 지점을 관찰하여 끝지점에 도달하면 true 를 반환하는 커스텀 훅임.

그 외 짜잘한 변화

모든 목록을 사용자가 조회하고 나면, 끝 지점에서 모든 목록을 조회하였다는 토스트가 뜨도록 추가함

UI 개선

기존 Recipe 페이지 UI 및 디자인을

아래와 같이 max-wdith: 1240px 에 맞춰서 이전 Haccp 페이지와 동일한 레이아웃을 적용

• 카테고리의 경우도 이미지 스프라이트 기법을 적용하여 하나의 이미지 파일을 재사용함
  

기존에 레시피를 조회하면 별도의 목록이라는 표시 없이 이미지가 렌더링 되었으나

레시피 목록이라는 사실을 나타내는 타이틀을 표시되도록 수정. 추가적으로 gap 과 box-shadow 등의 균등하지 못하고 지저분한 느낌이 드는 영역을 수정하여 일관성 있는 레이아웃이 그려지도록 수정함