반응형 웹 디자인 적용 작업을 기존 문서에 반영

AGENTS.md

@@ -108,6 +108,13 @@ Always record a log entry after a successful DB change. Use these `Type` values:
   - P2-7: In-memory brute-force protection added to `auth.ts` — 5 failures → 15-minute lockout per admin name.
   - P2-8: Default `status` filter for extension/upgrade request lists changed from `undefined` (all) to `REQUEST_STATUSES.REQUESTED`; reset links updated to `?status=1`.
 
+- Phase 16: 반응형 웹 디자인 (Responsive Web Design)
+  - `app/(admin)/nav-config.ts` — navItems 배열 공유 설정 파일 (`layout.tsx`·`MobileNav.tsx` 공용)
+  - `app/(admin)/MobileNav.tsx` — 모바일 슬라이드인 사이드바 클라이언트 컴포넌트. 햄버거 버튼(`md:hidden`), 반투명 오버레이(탭하면 닫힘), X 버튼, ESC 키, pathname 변경 시 자동 닫힘, body 스크롤 잠금 포함. CSS `translate-x` 트랜지션으로 애니메이션.
+  - `app/(admin)/layout.tsx` — 헤더에 `<MobileNav />` 통합. 데스크탑 `<aside>`(`hidden md:block`)는 그대로 유지.
+  - `ExtensionRequestsSection.tsx`, `UpgradeRequestsSection.tsx` — `<section>`에 `overflow-hidden` 추가. SSR props로 표가 초기 렌더에 포함되어 `min-w-[560px]`가 섹션을 밀어내던 문제 수정. 헤더를 `flex-col sm:flex-row`로 변경해 모바일에서 액션 버튼 접근성 확보.
+  - 페이지네이션 `<nav>` 5개 파일(`extension-requests/page.tsx`, `upgrade-requests/page.tsx`, `maestros/page.tsx`, `StudentsSection.tsx`, `LogsSection.tsx`) — `self-end sm:self-auto` 추가로 모바일에서 오른쪽 정렬.
+
 ## Planned phases (not yet implemented)
 
 이후 작업 후보는 `docs/plan/project-plan.md` Section 10 "MVP 이후 확장 후보" 참조.

README.md

@@ -115,6 +115,8 @@ chocoadmin/
 ├── app/
 │   ├── (auth)/login/          # 관리자 로그인
 │   ├── (admin)/               # 인증 필요 화면
+│   │   ├── MobileNav.tsx      # 모바일 슬라이드인 사이드바 (햄버거·오버레이·X 버튼)
+│   │   ├── nav-config.ts      # 내비게이션 항목 공유 설정
 │   │   ├── maestros/          # 마에스트로 목록·상세
 │   │   ├── extension-requests/
 │   │   └── upgrade-requests/

docs/plan/project-plan.md

@@ -159,6 +159,8 @@ chocoadmin/
 │   │       └── page.tsx          # 관리자 로그인
 │   ├── (admin)/
 │   │   ├── layout.tsx            # 공통 사이드바 + 헤더
+│   │   ├── MobileNav.tsx         # 모바일 슬라이드인 사이드바 (햄버거·오버레이·X 버튼)
+│   │   ├── nav-config.ts         # 내비게이션 항목 공유 설정
 │   │   ├── maestros/
 │   │   │   ├── page.tsx          # 마에스트로 전체 목록
 │   │   │   └── [maestroId]/
@@ -584,6 +586,26 @@ chocoadmin/
   - [x] `scripts/deploy-production.sh` — `yes` 입력 확인 후 동일 5단계 실행 (`docker-compose.yml` 사용)
   - [x] 각 스크립트는 NAS 해당 디렉토리에서 직접 실행
 
+### Phase 16. 반응형 웹 디자인
+
+> 모바일 화면(360~430px)에서도 관리자 패널을 정상 사용할 수 있도록 사이드바 내비게이션, 표 overflow, 페이지네이션 정렬을 개선한다.
+> 완료 날짜: 2026-07-07
+
+- [x] 모바일 사이드바
+  - [x] `app/(admin)/nav-config.ts` 생성 — navItems 배열을 `layout.tsx`와 `MobileNav.tsx`가 공유
+  - [x] `app/(admin)/MobileNav.tsx` 생성 — 햄버거 버튼(`md:hidden`), 반투명 오버레이(탭하면 닫힘), 슬라이드인 패널(X 버튼), ESC 키 지원, pathname 변경 시 자동 닫힘, body 스크롤 잠금, CSS `translate-x` 트랜지션 애니메이션
+  - [x] `app/(admin)/layout.tsx` 수정 — 헤더에 `<MobileNav />` 통합; 데스크탑 `<aside>`(`hidden md:block`)는 그대로 유지
+- [x] 표 overflow 수정 (`ExtensionRequestsSection.tsx`, `UpgradeRequestsSection.tsx`)
+  - 원인: 두 섹션은 서버 props로 데이터를 받아 SSR 초기 렌더에 `min-w-[560px]` 표가 포함됨 → `section`에 `overflow` 미설정(`visible` 기본값)이어서 표가 섹션을 밀어냄 → `overflow-x-auto`가 확장된 너비를 그대로 가져가 스크롤 미발생. `StudentsSection`·`LogsSection`은 클라이언트 fetch 방식이라 SSR 초기 렌더에 표가 없어 동일 패턴으로도 정상 동작.
+  - [x] `<section>`에 `overflow-hidden` 추가 — BFC 확립으로 섹션 너비를 뷰포트 기준으로 고정
+  - [x] 섹션 헤더를 `flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`으로 변경 — 모바일에서 세로 스택, 액션 버튼 접근성 확보
+- [x] 페이지네이션 오른쪽 정렬 — `<nav>`에 `self-end sm:self-auto` 추가 (모바일 `flex-col`에서 오른쪽 정렬, 데스크탑 `flex-row`에서 기존 동작 유지)
+  - [x] `app/(admin)/extension-requests/page.tsx`
+  - [x] `app/(admin)/upgrade-requests/page.tsx`
+  - [x] `app/(admin)/maestros/page.tsx`
+  - [x] `app/(admin)/maestros/[maestroId]/StudentsSection.tsx`
+  - [x] `app/(admin)/maestros/[maestroId]/LogsSection.tsx`
+
 ---
 
 ## 10. MVP 범위