From bbadaaea360270c67643bcf3482007bc8de6572e Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Tue, 7 Jul 2026 10:22:29 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9B=B9=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=EC=9D=84=20=EA=B8=B0=EC=A1=B4=20=EB=AC=B8=EC=84=9C?=
 =?UTF-8?q?=EC=97=90=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md                 |  7 +++++++
 README.md                 |  2 ++
 docs/plan/project-plan.md | 22 ++++++++++++++++++++++
 3 files changed, 31 insertions(+)

diff --git a/AGENTS.md b/AGENTS.md
index 7779cfd..d86f5e9 100644
--- a/AGENTS.md
+++ b/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 이후 확장 후보" 참조.
diff --git a/README.md b/README.md
index b0ea00a..99a769b 100644
--- a/README.md
+++ b/README.md
@@ -115,6 +115,8 @@ chocoadmin/
 ├── app/
 │   ├── (auth)/login/          # 관리자 로그인
 │   ├── (admin)/               # 인증 필요 화면
+│   │   ├── MobileNav.tsx      # 모바일 슬라이드인 사이드바 (햄버거·오버레이·X 버튼)
+│   │   ├── nav-config.ts      # 내비게이션 항목 공유 설정
 │   │   ├── maestros/          # 마에스트로 목록·상세
 │   │   ├── extension-requests/
 │   │   └── upgrade-requests/
diff --git a/docs/plan/project-plan.md b/docs/plan/project-plan.md
index 33e4dc2..e0b12e0 100644
--- a/docs/plan/project-plan.md
+++ b/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 범위