Skip to content

Conversation

@LittleGiantBaek
Copy link

  • IntersectionObserver를 활용한 요소 감지 및 Scroll 시 우측의 목차 영역의 감지된 section 활성화 기능 추가.

  • showToc ( 표시 여부) prop 추가

  • toc 기본 이미지
    image

  • toc hover시 이미지
    image

- toc 컴포넌트 및 스타일 정의 추가
- payload 인터페이스 sectionId 프로퍼티 추가
- TODO)
  - section에 도달했지만 toc active 상태 변경되지 않는 현상 수정
  - toc a link 영역 확장 처리 ( 현재 텍스트클릭만 가능)
  - toc 닫히는 시간 조절
- section이 여러개 intersect 되는 경우 하나만 목차에 나타나는 버그 수정
- 스타일 global 스타일과 분리
- 문단이 길어질 경우 퍼센티지를 충족하지 못하여 임계값 제거
- animation 효과 위해 opacity style로 처리
- 스크롤 방향에 따른 visible section 처리 로직 변경
  - 아래로 스크롤시 마지막 요소 활성화
  - 위로 스크롤시 첫번째 요소 활성화
  - 이렇게 처리 하지 않을경우 마지막 요소가 짧아 여러 요소가
    visible일경우 toc 활성화가 안되는 현상 발생
- toc 표시 여부 반응형 처리
- todo) footer의 margin top을 주지 않아도 수정할 수 있도록 처리 고민하면
  좋을듯
- toc 클릭시 콜백 동작 방지용 타이머 추가
- toc anchor태그 스타일 block으로 수정
- 너무 좁아보임..
- 새로고침시 해당 section으로 이동 방지
@LittleGiantBaek
Copy link
Author

codeclimate 통과가 어렵네요.. ㅠㅜ

@uyu423
Copy link
Owner

uyu423 commented Nov 11, 2024

@LittleGiantBaek

PR 고맙습니다.
LittleGiantBaek.github.io 요기 확인해봤는데 좋은것 같네요.
다만 기존 적용해둔 css 랑 조금 다른 스타일인 것 같아서 한번 확인해볼게요~ 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants