Feat(client): ParentTagList 컴포넌트 구현

[twossu]

📌 Summary

• [Feat] ParentTagList 컴포넌트 구현 #291

부모 태그를 선택할 수 있는 ParentTagList 컴포넌트를 구현했습니다.

📚 Tasks

• SidebarItem → NavItem으로 네이밍 변경 및 공용 컴포넌트로 위치 이동
• ParentTagList 컴포넌트 및 스타일 구현
• 전역 스크롤바 스타일을 모든 요소에 적용되도록 분리

🔍 Describe

SidebarItem -> NavItem

ParentTagList도 "아이콘 + 텍스트 + 선택 상태"를 가진 클릭 가능한 아이템이 필요했는데 기존 SidebarItem은 사이드바 폴더 안에 있어서 재사용하기엔 위치도 이름도 맞지 않았습니다. 단순히 import 경로만 끌어오기보다 사이드바 전용이라는 이름 자체가 재사용을 가로막는 요소라고 판단해 shared/components로 옮기고 NavItem이라는 더 일반적인 이름으로 바꿨습니다. 더 아름답고 직관적인 이름이 있다면 추천해주시라요🧎

TagNode[]

같은 태그 데이터를 다루는 SidebarTagItem은 TreeNode<TagNode>를 받아 children을 재귀적으로 순회하며 트리 전체를 그립니다. 반면 ParentTagList는 자식 태그를 다루지 않고 부모 태그만 한 줄로 나열하는 게 목적이라 트리 순회가 필요 없는 만큼 평면 배열인 TagNode[]를 그대로 사용했습니다.

전역 스크롤바 스타일을 분리한 이유

기존에는 scrollbarWidth/scrollbarColor/scrollBehavior가 globalStyle('html, body', …) 안에 묶여 있어서 사실상 최상위 스크롤에만 얇은 스크롤바가 적용되고 있었습니다. ParentTagList는 컴포넌트 내부에 overflow-y: auto를 가진 자체 스크롤 영역이 있는데 이 규칙이 html, body에만 걸려 있다 보니 내부 스크롤에는 적용되지 않고 브라우저 기본 스크롤바가 그대로 노출됐습니다.

이 컴포넌트 하나만을 위해 로컬 스타일로 스크롤바를 다시 정의하면 당장은 해결되지만 앞으로 추가될 다른 스크롤 영역마다 같은 코드를 반복하게 됩니다. 스크롤바 스타일은 컴포넌트 단위가 아니라 디자인 시스템 레벨의 규칙이라고 보는 게 맞다고 판단해 * 셀렉터로 옮겨 모든 요소에 일관되게 적용되도록 분리했습니다.

📸 Screenshot

parent-tag-recording.mp4

[github-actions]

🎨 Storybook 배포 완료

PR 작성자: @twossu

🔗 배포된 Storybook 보기