미니쇼핑몰🎁 스타일링 개선

반응형 스타일링 추가

노트북으로 작업을 했었는데, div의 width와 height를 rem단위로 주었더니, 사이즈가 큰 모니터에서는 위 사진처럼 너무 작게 나오거나, 상품리스트 페이지에서 데이터가 12개씩만 화면에 보여서 스크롤이 발생하지 않아 데이터를 더 불러올 수 없는 점 등이 있었다.
단위를 rem에서 vw, vh, %로 변경하여 수정했다. 
그리고 상품리스트 페이지, 북마크 페이지에서 한 페이지에 로드되는 데이터 개수를 30개로 늘렸다.

 

수정 전

 

수정 후

 

 

필터 활성화 스타일링 추가

currentFilter 상태에 현재 필터 정보를 저장하고 이것으로 렌더링할 리스트를 filter한다. 이 때, currentFilter값을 통해 조건부 스타일링하여 구현하였다.