Feat: 마이피드 리스트 비공개/공개 토글기능 및 Ver3.0 디자인 구현

개요

마이피드 Ver3.0 디자인 구현
- 스크롤 시 리스트 영역 상, 하단에 그라데이션 스타일 적용하는 기능 구현(Observer API)
더보기 메뉴 중 리스트 공개/비공개 기능 구현
더보기 메뉴 [삭제하기] 클릭 시, 컨펌모달 및 토스트 메세지 구현
- 토스트 메세지 조건문을 수정하여, 토스트 타입에 따른 아이콘이 올바르게 보이도록 수정

Ver3.0 디자인은 전체 스크롤이 아닌 리스트 영역에만 스크롤이 적용되도록 구현해야 하는데, 실제 디자인을 적용해보니 보이는 리스트 영역이 짧고, 스크롤 시 상,하단부가 가려짐에 따라 터치 이슈가 있어서 contents 정보 부분에서 sticky되도록 구현했습니다.

스크롤영역에 그라데이션 스타일을 적용하는 방법으로
- (1) 스크롤 이벤트를 사용하여 스크롤마다 감지하기(+. 쓰로틀링)
- (2) 상, 하단부 각각에 target을 두고 Observer API로 감지하기
- (3) 마지막 리스트를 감지하기 위해 각 리스트에 Observer API 연결하여 감지하기 의 방법을 적용해 보았으나, 디테일한 상황에서 그라데이션이 제대로 작동되지 않았음
상단부 그라데이션은 sticky 영역을 Observser API을 사용하여 영역이 stuck(붙어있음)을 감지하여 그라데이션을 적용
- ⭐️Observer API로 sticky 영역이 stuck 상태(pinned)일때 여부를 감지하기 위해서는 top: '-1px'을 줌으로써 달라붙는 sticky 요소에 벗어나는 순간을 체크할 수 있다. 참고
하단부 그라데이션은 페이지 하단에 target을 Observer API로 감지하여 intersectionRatio 비율에 따라 그라데이션을 적용