Feat(client, cds-ui): sidebar 컴포넌트 리디자인 반영 및 페이지 개편 반영

[jogpfls]

📌 Summary

• [Feat] sidebar 컴포넌트 리디자인 반영 및 페이지 개편 반영 #255
  sidebar 컴포넌트 리디자인 반영 및 페이지 개편 반영

📚 Tasks

• 페이지 개편으로 인한 rouer 및 페이지 파일 변경사항 반영
• sidebar 컴포넌트 리디자인에 맞게 변경
• sidebar를 context를 사용하여 전역적으로 상태 공유 가능하도록 수정

🔍 Describe

페이지 개편으로 인한 router 및 페이지 파일 변경사항 반영

기존 페이지

• 전체 메모 페이지
• ai 결과 메모 페이지
• label별 메모 페이지
• 메모 작성 페이지

변경된 페이지

• 전체 메모 페이지
• 태그별 메모 페이지
• 메모 작성 페이지

리디자인 이전에는 전체 메모 페이지, ai 결과 페이지, label별 메모 페이지의 UI가 같고 사실 상 필터링만 달랐던 페이지였어요.
페이지를 따로 나눌 필요가 없다고 생각해서 이번에 페이지 개편하면서 전체 메모에서 필터링 하는 구조로 구현했습니다

그리고 url은

• 메모작성페이지 -> new-memo
• 전체메모페이지 -> / 또는 /memo
• 태그별 메모 페이지 -> /tag?=

요렇게 구성했습니다

router.tsx
그리고 router 파일에 loader 사용해서 /memo로 접근할 시 / 로 이동하도록 구현했어요
렌더링 전에 판단려고 loader 사용했습니다

인증 유무에 따른 라우터 가드도 loader로 리팩토링 해보면 좋을 것 같아용

sidebar 컴포넌트 리디자인에 맞게 변경

정말,,, 힘들었는데요,,,

변경	Before	After
접힘: 태그 영역 구분선 추가, hover 툴팁 스타일 정리
펼침: 태그 트리(부모-자식-손주) 커넥터 라인 구현

부모태그, 자식태그, 손주태그때문에 고민을 정말 많이 했네요,,

먼저 sidebar 구조에 대해서 설명해드릴게요

• sidebar-item
• sidebar-tag-item
• sidebar-menu-section
• sidebar-tag-section
• sidebar

일단 크게는 이렇게 나눴어요.

• sidebar-item

• sidebar-tag-item: sidebar-item을 사용해서 재귀 컴포넌트로 트리 구조를 구현했어요

사진처럼 자식, 손주, 부모에 따라 왼쪽 line의 모양이 달라지는걸 구현했습니다.

• sidebar-menu-section

sidebar를 context를 사용하여 전역적으로 상태 공유 가능하도록 수정

집가서 다시 PR 작성할게요,,잠시 드래프트 드릉드릉,,,

📸 Screenshot

2026-07-04.11.06.34.mov

[github-actions]

🎨 Storybook 배포 완료

PR 작성자: @jogpfls

🔗 배포된 Storybook 보기