Fix(#278): 사이드바 개선#279
Merged
Merged
Conversation
- nav mb-[52px] → mb-[24px] (최근 노트 목록과 저장소 버튼 사이 간격) - UserIcon left-[18px] → left-[16px] (40px 아이콘 72px 기준 좌우 16px 균등) - 유저 행 ml-[18px] → ml-[16px] (spacer 정렬 일치) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 기본: text-[#6B7280] font-normal - 호버: text-black - 클릭(active): text-black font-medium - 미트볼 버튼 위치 right-[-6px]로 클릭 시 배경 오른쪽 끝에 정렬 - 드롭다운: w-[105px] p-[8px] rounded-[8px] shadow, 이름 변경→수정하기, 삭제→삭제하기 - 드롭다운 버튼 색상 노트와 동일 (#6B7280 → hover black → active font-medium) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 삭제 확인 모달 z-50 → z-[9999] - 수정하기/삭제하기 text-left → text-center Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 삭제 모달을 document.body에 portal 마운트 → Divider 등 외부 z-index에 가려지는 문제 해결 - 노트 아이템 py-[6px] → py-[3px] (선택 시 위아래 여백 축소) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
📝 WalkthroughWalkthrough사이드바 컴포넌트의 모달 렌더링 방식을 createPortal로 최적화하고, Figma 디자인에 따라 노트 항목 스타일, 드롭다운 메뉴, 전체 간격을 조정했습니다. Changes사이드바 개선
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/features/sidebar/components/RecentNotes.tsx (1)
197-234: ⚡ Quick win접근성 향상을 위한 모달 속성 추가를 권장합니다.
Portal 구현은 올바르게 동작하지만, 키보드 사용자와 스크린 리더 사용자를 위한 접근성 속성이 누락되어 있습니다. 다음 개선 사항을 고려해 주세요:
- 모달 컨테이너에
role="dialog"및aria-modal="true"추가- 제목과 연결된
aria-labelledby속성 추가- Escape 키로 모달을 닫을 수 있도록 키보드 이벤트 핸들러 추가
♿ 접근성 개선 제안
{deleteTargetId !== null && createPortal( <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-[`#00000033`]" onClick={(e) => { if (e.target === e.currentTarget && !isDeleting) { setDeleteTargetId(null); } }} + onKeyDown={(e) => { + if (e.key === "Escape" && !isDeleting) { + setDeleteTargetId(null); + } + }} + role="dialog" + aria-modal="true" + aria-labelledby="delete-modal-title" > - <div className="w-[360px] rounded-[20px] bg-white px-8 py-8 shadow-[0px_10px_40px_rgba(0,0,0,0.1)]"> + <div className="w-[360px] rounded-[20px] bg-white px-8 py-8 shadow-[0px_10px_40px_rgba(0,0,0,0.1)]"> - <h2 className="text-center text-[22px] leading-[32px] font-semibold text-black"> + <h2 + id="delete-modal-title" + className="text-center text-[22px] leading-[32px] font-semibold text-black" + > 이 노트를 삭제하시겠습니까? </h2>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/features/sidebar/components/RecentNotes.tsx` around lines 197 - 234, The modal created in the createPortal when deleteTargetId !== null is missing accessibility attributes and keyboard handling; update the modal container element (the outermost div passed to createPortal) to include role="dialog", aria-modal="true", and aria-labelledby pointing to the modal title (add an id to the h2 used for the title), and add a keydown listener (mounted while the modal is open) that closes the modal by calling setDeleteTargetId(null) when Escape is pressed (ensure it respects isDeleting so it doesn't close mid-delete); keep this logic adjacent to the existing deleteTargetId/isDeleting/handleDeleteConfirm usage so it’s easy to find in RecentNotes.tsx.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/features/sidebar/components/RecentNotes.tsx`:
- Around line 197-234: The modal created in the createPortal when deleteTargetId
!== null is missing accessibility attributes and keyboard handling; update the
modal container element (the outermost div passed to createPortal) to include
role="dialog", aria-modal="true", and aria-labelledby pointing to the modal
title (add an id to the h2 used for the title), and add a keydown listener
(mounted while the modal is open) that closes the modal by calling
setDeleteTargetId(null) when Escape is pressed (ensure it respects isDeleting so
it doesn't close mid-delete); keep this logic adjacent to the existing
deleteTargetId/isDeleting/handleDeleteConfirm usage so it’s easy to find in
RecentNotes.tsx.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: de3d9de4-3641-4586-8885-acb387cac87f
📒 Files selected for processing (4)
src/features/sidebar/Sidebar.tsxsrc/features/sidebar/components/RecentNotes.tsxsrc/features/sidebar/components/SidebarNoteItem.tsxsrc/features/sidebar/components/SidebarProfile.tsx
stringnine
approved these changes
May 21, 2026
Collaborator
stringnine
left a comment
stringnine
left a comment
There was a problem hiding this comment.
오 좋아요!!! 깔끔하게 리팩토링 잘 된 것 같습니다!
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
2 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.
📌 관련 이슈
🏷️ PR 타입
📝 작업 내용
사이드바 레이아웃
최근 노트 목록 ↔ 저장소 버튼 간격 52px → 24px 축소
접힌 사이드바 아이콘 좌우 여백 균등화 (NavItem/SearchButton 18px, expand·UserIcon 16px, 크레딧 버튼 6px)
펼친 사이드바 크레딧 카드 좌우 여백 20px 고정
노트 목록 아이템 스타일
기본: #6B7280 / font-weight 400
호버: 배경 없이 텍스트 #000으로 변경
선택(active): #000 / font-weight 500 + 기존 #EBEBEB 배경 유지
선택 시 위아래 패딩 6px → 3px 축소
미트볼 버튼 위치를 클릭 시 배경 오른쪽 끝(right-[-6px])에 정렬
드롭다운 UI
크기 width 105px, padding 8px, border-radius 8px, box-shadow 업데이트
버튼명 이름 변경 → 수정하기, 삭제 → 삭제하기로 변경
버튼 색상 노트 아이템과 동일하게 통일, 가운데 정렬 적용
버그 수정
삭제 확인 모달이 Divider 슬라이더 버튼 뒤에 가리는 문제 → createPortal로 document.body에 마운트해 stacking context 우회
📸 스크린샷 (UI 변경 시 필수)
✅ 체크리스트
공통
pnpm tsc --noEmit타입 체크를 통과했습니다type/이슈번호-작업명)UI/레이아웃 변경 시
PageContainer/ContentGrid공통 컴포넌트를 활용했습니다캔버스 관련 변경 시
인증 관련 변경 시
📎 기타 참고사항
Summary by CodeRabbit
스타일
버그 수정