feat: 관리자 PC 화면 사이드바 레이아웃 추가

[wlrnjs]

Pull Request

관련 이슈

• close #이슈번호

작업 내용

• 1280px(pc) 이상에서 모든 관리자 화면 왼쪽에 프로필과 관리자 메뉴를 담은 320px 사이드바(AdminSidebar)를 고정하고, 본문이 나머지 폭을 쓰도록 했습니다.
• 사이드바 메뉴는 현재 경로와 일치하는 항목에 aria-current="page"를 붙이고 PC에서만 배경색으로 강조합니다. 이를 위해 AdminMenuSection을 클라이언트 컴포넌트로 바꿨습니다.
• PC의 /admin 메인에서는 사이드바가 메뉴 역할을 하므로 본문에 메뉴 선택 안내 문구만 보여줍니다.
• 루트 body의 768px 폭 제한을 PC에서 풀었고, DetailHeader는 PC에서 fixed 대신 sticky로 바꿔 본문 폭을 따라가게 했습니다. 공지 작성·수정 화면의 하단 버튼 영역도 PC에서 폭 제한을 풀었습니다.
• 로그인 폼은 PC에서 가운데 480px 폭으로 모았습니다.
• 사이드바 프로필은 사진과 이름 간격을 줄이고 프로필 수정 버튼을 사이드바 폭에 맞췄으며, 긴 닉네임과 이메일은 말줄임 처리하고 마우스를 올리면 전체가 보이도록 했습니다.

참고 사항

• 모든 변경은 pc: 접두사로만 추가해 모바일과 태블릿 화면은 바뀌지 않습니다. 390px과 1024px에서 로그인과 관리자 화면 9개씩, 모두 18장을 develop과 비교해 캡처가 바이트 단위로 같은 것을 확인했습니다.
• 사이드바는 PC 미만에서도 렌더된 뒤 CSS로 숨겨집니다. 그래서 모바일과 태블릿에서도 관리자 화면마다 /api/users/me 조회와 프로필 이미지 미리 불러오기가 일어납니다. 조회는 react-query 캐시로 한 번만 나갑니다.
• Figma 시안 없이 만든 레이아웃이므로 사이드바 폭, 강조색, 메인 안내 문구는 디자인 확인이 필요합니다.
• 필터 선택 등에 쓰는 하단 시트(PopupLayout)는 이번에 손대지 않아 PC에서도 가운데 768px 폭의 하단 시트로 뜹니다.

체크리스트

• 기능이 정상 동작하는지 확인
• 로컬 빌드/테스트 통과
• 불필요한 코드/주석 제거

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
admin	Ready	Preview	Sep 26, 2026 6:36am UTC

[github-actions]

Jest Test Results

337 tests   337 ✅  18s ⏱️
 67 suites    0 💤
  1 files      0 ❌

Results for commit bd62746.