개발 slecs

어드민 헤더 컴포넌트 제거로 레이아웃 구조 일원화

목차

죽은 컴포넌트를 걷어냈다. AdminHeader.tsx 하나짜리 변경이지만, 이게 왜 오래 살아남았는지를 되짚어보는 게 더 중요하다.

배경 — dead code 는 어떻게 쌓이는가

어드민 레이아웃은 대체로 이런 식으로 흘러간다. 초기엔 누군가 AdminHeader를 따로 만든다. 사이드바도, 헤더도 제각각 파일로 분리된 채 시작한다. 그러다 언젠가 레이아웃 구조를 정리하면서 공통 Header + Sidebar 조합으로 통합이 일어나는데, 그때 AdminHeader.tsx 파일 자체를 지우지 않는다. "혹시 쓰는 곳 있을지도"라는 심리. 혹은 그냥 머지 타이밍에 깜빡한 것. 어느 쪽이든 결과는 똑같다 — 아무도 import 하지 않는 컴포넌트가 repo 안에 조용히 눌러앉는다.

이번에 그걸 정리했다.

작업 내용

변경 파일은 src/components/AdminHeader.tsx 단 하나. 삭제 혹은 내용 제거다.

통계가 명시되진 않았지만, 이 종류의 작업은 보통 두 가지 형태 중 하나다.

케이스 내용 영향
파일 삭제 AdminHeader.tsx 자체를 repo 에서 제거 import 참조 없으면 영향 0, 있으면 빌드 에러
내용 비우고 공통 컴포넌트로 redirect 기존 코드 걷어내고 Header/Sidebar 를 조합하는 방향으로 일원화 점진적 마이그레이션에 유리

이번 커밋 메시지에 "unify Header/Sidebar layout" 이 명시되어 있으니 단순 삭제보다는 레이아웃 구조 자체를 정리하면서 AdminHeader 의 역할이 공통 컴포넌트 쪽으로 흡수된 구조다. AdminHeader 가 독자적으로 렌더링하던 것들을 이제 Header + Sidebar 조합이 담당하게 된 것.

// Before: AdminHeader  독립적으로 존재
<AdminLayout>
  <AdminHeader title="대시보드" />
  <AdminSidebar />
  <main>{children}</main>
</AdminLayout>

// After: Header/Sidebar  단일 layout 안에서 통합 관리
<AdminLayout>
  {/* Header + Sidebar  layout 레벨에서 일괄 처리 */}
  <main>{children}</main>
</AdminLayout>

이 차이가 작아 보이지만 팀 입장에선 꽤 크다. 어드민 페이지를 새로 추가할 때마다 AdminHeader 를 직접 넣어야 하는지, 말아야 하는지 판단을 매번 해야 했던 거라면 — 이제는 그냥 AdminLayout 안에 집어넣으면 끝이다.

왜 이런 정리를 미루게 되는가

dead code 이슈는 PR 리뷰에서 잘 안 걸린다. 기능이 망가지는 게 아니니까. 빌드도 통과하고, 테스트도 통과한다. 그러다 보니 "이거 지금 안 지워도 되잖아"로 계속 밀린다.

팀에서 이 종류 tech debt 를 처리할 때 내가 신경 쓰는 기준은 몇 가지다.

  • 참조 여부 확인: IDE 에서 "Find Usages" 돌려서 import 가 0개면 죽은 코드
  • 역할 중복 여부: 비슷한 이름의 컴포넌트가 둘 이상 존재하면 의도적으로 분리된 게 맞는지 확인
  • 이름에서 오는 혼란 비용: AdminHeader vs Header — 신규 팀원이 뭘 써야 하는지 고민하는 시간이 쌓이면 그게 다 비용

특히 세 번째가 더 크다고 생각한다. dead code 가 무서운 건 버그를 만들어서가 아니라 "이게 왜 있지?"라는 질문을 계속 유발하기 때문이다. 코드를 읽는 사람이 이미 답이 정해진 질문에 시간을 쓰게 만드는 것, 그게 진짜 비용이다.

회고

이런 refactor 는 기능 개발 사이사이에 조용히 처리되는 경우가 많다. 티가 안 나고, PR description 에 한 줄 적히고, 리뷰어도 금방 approve 한다. 그래도 꼼꼼하게 남겨두는 이유는 — 나중에 "왜 AdminHeader 없어졌어요?"라는 질문이 들어왔을 때 커밋 로그 하나로 답이 되어야 하기 때문이다.

레이아웃 컴포넌트는 특히 전파 범위가 넓다. 어드민 전체 페이지가 거의 다 영향을 받는 구조라 "작은 변경"이라도 의도를 명확히 남기는 게 맞다. remove dead AdminHeader and unify Header/Sidebar layout — 이 한 줄이 충분히 그 역할을 했다고 본다.

끝.


🛒 이 글과 어울리는 추천 상품

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.

댓글 0

첫 댓글 달아줘.