컴포넌트마다 스크롤 주기

kimyz·2023년 11월 1일

세일즈서포터는 처음 리드 화면으로 들어가면 모든 리드를 조회한다.

내가 원했던 거

내가 만들어 낸 해괴망측한 문제

업로드중..

LeadList > LeadDetail 로 데이터를 주고 받기 편하게 컴포넌트를 구성했더니
데이터가 많아서 리드 리스트가 길어질 때 디테일이랑 사이드바도 같이 길어지는 문제가 나타났다.
데이터도 없는데 바닥 끝까지 내려간다..

해결 방법

SideBar, LeadList, LeadDetail 각 컴포넌트에

min-height: 90vh;
max-height: 90vh;
overflow-y: auto;

속성을 스타일에 추가해준다.

나는 어떤 상황에서도 90vh를 넘지 않게 사이트를 만들고 싶어서 min, max 둘 다 설정해줬다.

그러면 각 컴포넌트 길이에 따라서 알아서 스크롤 없앴다 나타냈다 해줌!


근데 사실 하나의 큰 덩어리에서 스크롤을 두 번 왔다갔다 하는 것이 좋은지는 잘 모르겠다.

그래서 pagination 하거나 스크롤하거나 둘 중 하나인 것 같은데,,
pagination 하기에는 한 화면에서 볼 수 있는 데이터가 너무 적은 것 같아서 고민이 된다.

그렇다고 해서 스크롤하면 한눈에 더 많은 데이터를 볼 수 있냐? 그것도 아님
세일즈포스에서 스플릿 뷰를 선택하면 스크롤로 데이터를 제공하긴 한다.

움,, 고민 좀 해볼 것!

profile
😛

0개의 댓글