feat: Toc 사이드바 제작

im-na0 commented 3 months ago

설명

close #15

위 조건에 해당하는 목차 사이드바를 제작합니다.

아코디언의 숫자부분에만 앵커를 추가하는 작업을 합니다.

toc parser 유틸 구현 7daf16b 문서에서 #을 찾아 heading level, text 와 github slugger 통해 slug 생성해서 반환하는 함수입니다.
스크롤 위치가 헤딩태그와 근접할 때 해당 목차 아이템을 하이라이팅하도록 구현 https://github.com/dev-wiki-kr/dev-wiki/pull/53#discussion_r1632690193

본문에 앵커태그 추가
auto link headings 유틸 구현 1c00c1d 헤딩 노드의 숫자부분은 a 태그로 감싸고, 문자 부분은 span 태그로 래핑하도록 구현했습니다.
아코디언 초기화 중에도 펼쳐지도록 추가 d361e57 아코디언의 모든 id를 순회해야 isExpand가 true로 설정되기 때문에 isExpand가 초기값인 경우 널리쉬 연산자를 통해 expand = {isExpand ?? true} 초기화 진행 중에도 펼쳐지도록 추가했습니다.
앵커 태그가 클릭된 경우 아코디언 토글 방지 291d8dd 아코디언 타이틀에서 클릭된 요소가 앵커 태그인 경우 아코디언의 토글 기능을 실행하지 않도록 코드 추가. AST를 조작하는 경우는 이벤트 핸들러가 JavaScript 객체로 매핑되지 않는다고 해서 앵커태그에 이벤트 전파 중지를 사용할 수 없었습니당..
tsconfig target: "esnext" 추가 최신 자바스크립트 문법을 사용하기 위해 추가했습니다.

Toc 사이드바 반응형 작업이 필요합니다!

Zalgritte commented 3 months ago

와 멋집니다! 스무스한 트랜지션도 좋아요 반응형은 오늘 얘기해보아요

hwangstar156 commented 3 months ago

머지할게용~