Feat(client): 커넥터 라인 컴포넌트 구현 및 사이드바 연결

[jogpfls]

📌 Summary

이슈: #279

base PR

• Feat(client): sidebar 컴포넌트 리디자인 반영 및 페이지 개편 반영 #258

태그 트리의 커넥터 라인을 그리는 TreeLine 공통 컴포넌트를 구현하고 SidebarTagItem/SidebarTagSection이 이를 사용하도록 구조를 변경했어요.

📚 Tasks

• 라인 컴포넌트 TreeLine 구현
• SidebarTagItem, SidebarTagSection을 TreeLine 기반 구조로 변경
• 사이드바 expand 상태일 때 태그 섹션 상단 여백 조정

🔍 Describe

TreeLine 컴포넌트 구현

기존에는 sidebar-tag-item.css.ts에서만 사용할 수 있게 했는데
필터 목록 등 다른 곳에서도 같은 형태의 트리 라인이 필요해서 shared/components/tree-line으로 분리했어요

<TreeLine>
  <TreeLine.Item>
    부모
    <TreeLine.Branch>
      <TreeLine.Item>자식</TreeLine.Item>
    </TreeLine.Branch>
  </TreeLine.Item>
</TreeLine>

이런식으로 사용하면 되고, 컴포넌트 내부에도 example 주석 달아놧으니까 참고해서 사용해주시면 될 것 같아요

• Root / Item / Branch 이런 식으로 컴파운드로 표현해보았어요
• ul와 li 태그를 컴포넌트가 가지고 있는 구조라 Item과 Branch 사이에 다른 태그를 끼우면 라인 선택자가 깨지니까 이 점 주의 부탁드려요

📸 Screenshot

[jm8468]

Wrapper 컴포넌트로 분리하니 깔꼼하네요 ㅎㅎㅎ
수고하셨습니다!!

pn룰:

P3: 웬만하면 반영해 주세요 (Comment)
작성자는 P3에 대해 수용하거나 만약 수용할 수 없는 상황이라면 반영할 수 없는 이유를 들어 설명하거나 다음에 반영할 계획을 명시적으로(JIRA 티켓 등으로) 표현할 것을 권장합니다. Request changes 가 아닌 Comment 와 함께 사용됩니다.

P4: 반영해도 좋고 넘어가도 좋습니다 (Approve)
작성자는 P4에 대해서는 아무런 의견을 달지 않고 무시해도 괜찮습니다. 해당 의견을 반영하는 게 좋을지 고민해 보는 정도면 충분합니다.

[jyeon03]

컴파운드 패턴으로 구현되니까 구조 파악하기 쉽네용!! 😻 수고하셨습니당!
디자인 관련 코멘트 위주로 남겼습니닷!!

[jyeon03]

부모 태그 간의 간격이 8px이 있더라구요!! 위에서 const ROOT_TAG_GAP = '0.8rem';도 선언해주면 될 것 같아요!

Suggested change

	export const root = style({
	listStyle: 'none',
	});
	export const root = style({
	display: 'flex',
	flexDirection: 'column',
	gap: ROOT_TAG_GAP,
	listStyle: 'none',
	});

[jogpfls]

헉 몰랐네요,,, 꼼꼼하신 지연님 덕분에 스타일 완벽하게 수정하겠습니다. 감사해요 !!

[jogpfls]

707ad70

[jyeon03]

여기도 padding 값이 4px입니당!

[twossu]

스택이 처음이어서 서준님애 미미나를 들었으나 겁이 나옵니다. 그렇지만 백문이불여일견. 제가 직접 사용해보기 전에 이렇게 접할 수 있어 좋으네요.

커넥터 라인 감사합니다. 다음에 제가 만들어야할 작품에서 좋은 참고자료가 될것같습니데 감자합니다!

[twossu]

TreeLineRootProps을 선언하셧는데 밑에서 children을 인라인으로 작성해서 사용한 것이 궁금하옵니다

[jogpfls]

앗 삭제한다고 했다가 깜박하고 삭제안했네요 !!! 감사합니다,,ㅎㅎㅎㅎㅎㅎㅎㅎ

[jogpfls]

8058b85