어드민 대시보드·사이드바 전면 개편기

밤 11시. 아직 끝낼 게 남아 있었다.

이날 작업은 크게 두 줄기로 흘렀다. 어드민 대시보드 전면 재디자인과, 그 과정에서 터진 사이드바 위계 정리 + 각종 hydration 버그 수습. 처음부터 이 순서를 계획한 건 아니었다. 대시보드를 다듬다 보니 사이드바가 눈에 걸렸고, 사이드바를 건드리다 보니 hydration 에러가 따라왔다. 리팩터는 언제나 그렇게 번진다.

대시보드 재설계 — DashStack 스타일 전면 교체부터

시작은 feat(dashboard): DashStack 스타일 전면 재디자인이었다. 차트 세 개(GscPropertyChart, SiteTrafficChart, TrafficChart)와 대시보드 페이지 전체, 그리고 글로벌 CSS까지 손댔다. 기존 스타일이 조각조각 얹혀 있던 터라, 이번에 디자인 언어를 통일하는 게 목적이었다.

재디자인 직후 두 가지 문제가 즉시 터졌다.

1. KPI 카드 숫자 잘림 — 6열 레이아웃에서 숫자가 잘려 보이는 문제. 6열 → 3열(2행) 구조로 바꿔서 수치가 온전히 보이도록 고쳤다.
2. 명암비 WCAG AA 미달 — 파랑·회색·증감 색상이 재디자인 이후 너무 연해졌다. globals.css와 차트 컴포넌트, MobileNav까지 돌며 색상을 진하게 재조정했다.

접근성 기준을 의도적으로 챙긴 건 아니었다. 실제로 화면을 보니까 읽기 불편했고, WCAG AA를 기준선으로 삼으면 기준이 명확해지니까 그걸 썼다.

사이드바 위계 정리 — 그룹헤더가 클릭 가능해지다

대시보드를 정리하고 나니 사이드바 1차 메뉴(그룹헤더)가 눈에 밟혔다. 기존엔 그룹헤더가 그냥 텍스트 레이블이라 클릭해도 아무 일도 없었다. 그런데 실제로 쓰다 보면 "이 그룹으로 들어가고 싶다"는 맥락에서 클릭하게 된다.

이번에 두 가지를 한꺼번에 처리했다.

폰트는 단순 가독성 문제였고, 클릭 동작은 UX 문제였다. 두 커밋이 따로 들어간 건 폰트를 먼저 올렸다가 클릭 기능을 붙이면서 SidebarContent.tsx를 다시 건드리게 됐기 때문이다. 이 과정에서 verses 모바일 테이블도 함께 정리됐다.

Hydration 에러 수습 — 시간·날짜 셀의 고질병

사이드바를 정리하면서 같이 올라온 게 hydration 이슈였다. 이슈 번호로는 #425, #418, #422가 묶여 있었는데, 공통 원인은 서버 렌더링 시점과 클라이언트 렌더링 시점의 시각값 불일치였다.

// 수정 전 — hydration mismatch 발생
<td>{relativeTime(row.createdAt)}</td>

// 수정 후
<td suppressHydrationWarning>{relativeTime(row.createdAt)}</td>

suppressHydrationWarning을 적용한 파일 목록:

• ScoresTable.tsx
• GlobalScoresTable.tsx
• SubscriptionsClient.tsx
• InsightflowUsersClient.tsx
• dashboard/page.tsx (relativeTime 셀)

시각 렌더 셀에 한정된 처치라 범위는 명확했다. 근본 해결(서버에서 포맷 고정 후 클라이언트 hydrate)은 별도 작업이 필요하지만, 지금은 suppress로 묶어 두고 에러 노이즈를 우선 차단했다.

daily-bible 검색 진입 버그

작은 것 하나 더. daily-bible 구절 검색 페이지에 처음 진입하면 결과가 비어 있는 문제가 있었다. 검색어가 없을 때 전체 구절을 보여줘야 하는데, 초기 상태를 빈 결과로 처리하고 있었던 것. VersesClient.tsx와 verses/page.tsx에서 초기값 처리 로직을 고쳐서 진입 즉시 전체 목록이 뜨도록 했다.

한 시간 남짓 동안 커밋이 9개 나왔다. 대시보드 재설계라는 큰 작업이 중심이었고, 그게 사이드바·hydration·접근성으로 자연스럽게 번졌다. 전부 같은 어드민 화면 안에서 일어난 일이라 맥락이 끊기지 않았고, 하나 고치면 다음 게 보이는 식이었다. 밤 작업치고는 범위가 넓었지만, 흐름이 있었다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →

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