[feature] 사이드바가 스크롤을 따라온다#730
[feature] 사이드바가 스크롤을 따라온다#730suhyun113 merged 1 commit intofeature/#731-add-layout-divider-MOA-230from
Conversation
suhyun113
requested review from
Zepelown,
alsdddk,
lepitaaar,
oesnuj and
seongwon030
|
Warning
|
| Cohort / File(s) | Change Summary |
|---|---|
Sticky sidebar layout tweakfrontend/src/pages/AdminPage/components/SideBar/SideBar.styles.ts |
SidebarWrapper에 position: sticky; top: 98px; height: fit-content; 적용. |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~5 minutes
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| 사이드바가 스크롤을 따라온다 (MOA-213) | ✅ |
Assessment against linked issues: Out-of-scope changes
(없음)
Possibly related issues
- [feature] MOA-213 사이드바가 스크롤을 따라온다 #718: SidebarWrapper를 sticky로 변경해 스크롤을 따라오게 하는 요구와 동일한 수정 사항과 일치함.
Suggested reviewers
- Zepelown
- lepitaaar
- seongwon030
- oesnuj
✨ Finishing Touches
- 📝 Generate Docstrings
🧪 Generate unit tests
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/#718-sidebar-sticky-fix-MOA-213
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 help to get the list of available commands and usage tips.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
frontend/src/pages/AdminPage/components/SideBar/SideBar.styles.ts (3)
6-6: align-items: left는 유효한 값이 아닙니다 → flex-start로 수정 필요현재 값은 무시되어 기본 정렬로 동작합니다.
- align-items: left; + align-items: flex-start;
59-59: font-weight: medium은 표준 CSS 값이 아닙니다 → 500(또는 디자인 토큰)으로 교체브라우저가 무시할 수 있어 의도치 않은 굵기로 렌더링됩니다.
- font-weight: medium; + font-weight: 500;(위 변경을 SidebarCategoryTitle, SidebarButton, .active 모두에 적용)
Also applies to: 77-77, 85-85
63-86: 버튼 접근성: all: unset으로 포커스 링 제거됨 → :focus-visible 추가키보드 내비게이션용 포커스 표시를 복원하세요.
transition: background-color 0.1s ease; + &:focus-visible { + outline: 2px solid rgba(255, 117, 67, 1); + outline-offset: 2px; + border-radius: 10px; + }
🧹 Nitpick comments (4)
frontend/src/pages/AdminPage/components/SideBar/SideBar.styles.ts (4)
11-13: sticky 오프셋 매직 넘버(98px) 제거 및 반응형 안전성 확보헤더 높이가 브레이크포인트마다 달라질 수 있어 하드코딩(98px)은 유지보수 비용이 큽니다. 전역 CSS 변수(또는 테마 토큰)로 치환해 주세요.
적용 예(해당 범위 내 변경):
- top: 98px; + /* 전역 --header-height가 없으면 98px로 폴백 */ + top: var(--header-height, 98px);검증:
- SidebarWrapper의 모든 조상에 overflow: hidden/auto/scroll, transform, filter가 설정되어 있으면 sticky가 무력화될 수 있습니다. 해당 페이지 레이아웃에서 이런 속성이 있는지 한 번 확인 부탁드립니다(특히 “박스 컨테이너 내부에서 상단이 잘리는” 현상과 연관 가능성 높음).
7-9: 타이포그래피 속성 정리(중복/비권장 제거)word-wrap은 overflow-wrap의 레거시 별칭이며 white-space: normal은 기본값입니다. 하나로 단순화하세요.
- word-wrap: break-word; - overflow-wrap: break-word; - white-space: normal; + overflow-wrap: anywhere;
10-10: 사이즈 매직 넘버(168px) 단일 소스화같은 값이 여러 곳에 중복됩니다. CSS 변수(또는 TS 상수/테마 토큰)로 통일해 유지보수성을 높이세요.
- width: 168px; + width: var(--sidebar-width, 168px);- width: 168px; - height: 168px; + width: var(--sidebar-width, 168px); + height: var(--sidebar-width, 168px); + object-fit: cover;추가(참고): 상단에 상수를 두고 쓰는 대안
// 파일 상단 const SIDEBAR_WIDTH = '168px'; // 사용처: width: ${SIDEBAR_WIDTH};Also applies to: 25-26
41-46: Divider 스타일 명확화(border-color 사용) 및 마진 축약color 대신 border-color로 의도를 분명히 하고, 마진은 축약형을 사용하세요.
- border: 1px solid; - color: #C5C5C5; - height: 0; - margin: 16px 0px 16px 0px; + border: 0; + border-top: 1px solid #C5C5C5; + height: 0; + margin: 16px 0;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
frontend/src/pages/AdminPage/components/SideBar/SideBar.styles.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/AdminPage/components/SideBar/SideBar.styles.ts
suhyun113
changed the base branch from
develop-fe
to
feature/#731-add-layout-divider-MOA-230
suhyun113
merged commit 3b0a030
into
feature/#731-add-layout-divider-MOA-230
1 participant
#️⃣연관된 이슈
📝작업 내용
default.mp4
애니메이션을 넣으니 이상해서, 고정하는 것으로 진행했습니다.
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
현재 글이 박스 안에 들어가 있어 스크롤 시 상단이 잘려 보이는 어색함이 있습니다.
이를 개선하기 위해 글 영역의 박스를 제거하고, 사이드바와 본문 사이에 구분선을 추가하며, 상단 모아동 로고 영역과 (사이드바, 본문 영역) 사이에도 구분선을 넣는 방식을 고려하고 있습니다. 이렇게 하면 레이아웃 전환이 보다 자연스럽고 시각적으로도 덜 어색해질 것 같은데, 디자인이 없어서 일단 해보겠습니다...
Summary by CodeRabbit