관리자 사이드바 자동 스크롤과 브레드크럼 액션 라벨 개선
목차
feat: breadcrumb 마지막 메뉴에 action 라벨 추가
관리자 페이지 네비게이션 정비 작업임. 사이드바 메뉴 구조 개편과 breadcrumb 개선이 핵심이었음.
사이드바 자동 스크롤
const activeMenu = document.querySelector('.sidebar-menu .active');
if (activeMenu) {
activeMenu.scrollIntoView({ block: 'center', behavior: 'smooth' });
}
페이지 진입 시 현재 메뉴 위치로 자동 스크롤. 메뉴가 많으면 현재 위치 찾기가 불편했음.
Breadcrumb 개선
| 개선 항목 | 내용 |
|---|---|
| 마지막 항목 | action 라벨 추가 (목록/등록/수정/상세) |
| 링크 대상 | 관리자 대시보드로 통일 |
| 모바일 | 현재 페이지만 표시 |
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<c:forEach var="bc" items="${breadcrumbs}">
<li class="breadcrumb-item">
<a href="${bc.url}">${bc.label}</a>
</li>
</c:forEach>
<li class="breadcrumb-item active">${pageAction}</li>
</ol>
</nav>
개발 원칙 정리
이 작업을 진행하면서 재확인한 원칙들:
작은 커밋: 변경 단위를 작게 유지해서 코드 리뷰와 롤백이 쉽게.
테스트 먼저: 변경 전 현재 동작을 파악하고, 변경 후 동일하게 동작하는지 확인.
문서 동기화: 코드가 바뀌면 관련 주석과 문서도 같이 업데이트.
| 원칙 | 이유 |
|---|---|
| 단일 책임 | 하나의 함수/클래스는 하나의 역할만 |
| 명시적 코드 | 영리한 코드보다 읽기 쉬운 코드 |
| 실패 우선 처리 | happy path보다 에러 케이스 먼저 설계 |
끝
댓글 0
첫 댓글 달아줘.