Feat(client): sidebar 컴포넌트 리디자인 반영 및 페이지 개편 반영 - #258
Merged
Conversation
jogpfls
requested review from
jm8468,
jyeon03 and
twossu
and removed request for
a team
July 4, 2026 14:08
🎨 Storybook 배포 완료PR 작성자: @jogpfls |
jogpfls
marked this pull request as draft
July 5, 2026 13:17
jogpfls
marked this pull request as draft
July 5, 2026 13:17
jogpfls
marked this pull request as ready for review
July 26, 2026 10:15
jogpfls
changed the title
jm8468
reviewed
Aug 7, 2026
* feat: 트리 구조를 위한 커넥터 라인 컴포넌트 추가 * feat: TreeLine 컴포넌트를 사용하여 SidebarTagItem 및 SidebarTagSection의 구조 개선 * fix: sidebar가 expand 상태일 때 태그 섹션 위치 조정 * fix: 최상위 목록 스타일 추가 및 간격 설정 * fix: TreeLineRootProps 인터페이스 제거 * fix: 최상위 태그 간의 gap 주석 추가
jogpfls
commented
Aug 10, 2026
jm8468
approved these changes
Aug 10, 2026
jm8468
left a comment
jm8468
left a comment
Collaborator
There was a problem hiding this comment.
수고하셨어요!!
대장정이 끝났네요
어려운 작업인데도 끝까지 잡아주셔서 감사합니당
twossu
approved these changes
Aug 10, 2026
twossu
left a comment
twossu
left a comment
Member
There was a problem hiding this comment.
혹시 조혜린박사님이신가요? 헐크보다 더하시네요! 헐크는 박사학위가 7개나 있어요.
조박사님은 정말 멋있으세요! 이런 말도 안되는 작업을 뚝딱딱뚝딱딲 만드시고 주석도 저를위해 작성해주셔서 이해가 5달걸릴뻔한거 3주로 줄어들것만같아요
전 너무 무섭네요 이곳이! 저에게 아직은 버거운 작업입니옵니다! 하지만 헬박사님이 뚝딲따까ㄸㄲ해주셨으니 이해하고, 감사하고, 아름다운 코드를 학습하겠습니다!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Summary
📚 Tasks
🔍 Describe
페이지 개편으로 인한 router 및 페이지 파일 변경사항 반영
기존 페이지
변경된 페이지
리디자인 이전에는 전체 메모 페이지, ai 결과 페이지, label별 메모 페이지의 UI가 같고 사실 상 필터링만 달랐던 페이지였어요.
페이지를 따로 나눌 필요가 없다고 생각해서 이번에 페이지 개편하면서 전체 메모에서 필터링 하는 구조로 구현했습니다
그리고 url은
new-memo/또는/memo/tag?=요렇게 구성했습니다
router.tsx
그리고 router 파일에 loader 사용해서 /memo로 접근할 시 / 로 이동하도록 구현했어요
렌더링 전에 판단려고 loader 사용했습니다
인증 유무에 따른 라우터 가드도 loader로 리팩토링 해보면 좋을 것 같아용
sidebar 컴포넌트 리디자인에 맞게 변경
정말,,, 힘들었는데요,,,
부모태그, 자식태그, 손주태그때문에 고민을 정말 많이 했네요,,
먼저 sidebar 구조에 대해서 설명해드릴게요
일단 크게는 이렇게 나눴어요.
sidebar-itemsidebar-tag-item: sidebar-item을 사용해서 재귀 컴포넌트로 트리 구조를 구현했어요사진처럼 자식, 손주, 부모에 따라 왼쪽 line의 모양이 달라지는걸 구현했습니다.
sidebar-menu-sectionsidebar를 context를 사용하여 전역적으로 상태 공유 가능하도록 수정
기존 사이드바는 펼침/접힘(isExpanded) 상태를 sidebar.tsx 내부의 로컬 useState로 관리하고 있었어요. 이로 인해 사이드바가 섹션별 컴포넌트로 분리되면서 상태를 하위 컴포넌트로 계속 내려주는 prop drilling 구조가 되었고 사이드바 외부에서는 이 상태에 접근할 수 없었어요. 이를 개선하고자 context를 사용했습니다.
📸 Screenshot
2026-08-10.10.43.13.mov