필터 섹션의 height는 기본적으로 14.8rem 고정이지만, '특성' 섹션의 경우 요소가 5개 미만이기 때문에 남는 공간이 남아 이때만 height를 지정된 padding, margin에 맞게 fit-content로 보여주기 위해 isExcept라는 props를 받아 인덱스를 확인해줬습니다. 아이콘 바 누를 때, '장난감 종류'섹션의 요소 개수가 달라질 때마다 height를 맞추기 위해 마찬가지로 이것을 이용했는데, 섹션의 인덱스를 구분않고 바꿔 모든 섹션이 fit-content가 되는 현상을, 장난감 종류 섹션의 인덱스를 넘겨주어 해당 섹션만 fit-content가 되도록 바꿨습니다.
position:sticky 를 이용해 스크롤 내려도 필터를 상단 고정하려고 했으나, 부모 요소가 display:flex 의 경우라 적용하지 못했습니다. 이에 align-self 속성을 활용하여 필터 컴포넌트에 적용해주고, sticky 를 사용할 수 있었습니다.
🔥 Related Issues
🎡 작업 내용
✅ PR Point
이 속성을 이용하면 플렉스 요소마다 서로 다른 align 속성값을 설정할 수 있습니다.
😡 Trouble Shooting
👀 스크린샷 / GIF / 링크
📚 Reference