결재 템플릿 단계 적용 구현

- ApprovalTemplate 엔티티·DTO·원격 리포지토리 추가
- ApprovalController에 템플릿 로딩/적용 상태와 assignSteps 호출 연동
- ApprovalPage 단계 탭에 템플릿 선택 UI 및 적용 확인 다이얼로그 구현
- 템플릿 적용 단위 테스트와 IMPLEMENTATION_TASKS 현황 갱신

assets/.env.development

@@ -1,12 +1,14 @@
 API_BASE_URL=http://localhost:8080
+TIMEOUT_MS=15000
+LOG_LEVEL=debug
 
 FEATURE_VENDORS_ENABLED=true
 FEATURE_PRODUCTS_ENABLED=true
 FEATURE_WAREHOUSES_ENABLED=true
 FEATURE_CUSTOMERS_ENABLED=true
 FEATURE_USERS_ENABLED=true
-FEATURE_GROUPS_ENABLED=false
+FEATURE_GROUPS_ENABLED=true
-FEATURE_MENUS_ENABLED=false
+FEATURE_MENUS_ENABLED=true
-FEATURE_GROUP_PERMISSIONS_ENABLED=false
+FEATURE_GROUP_PERMISSIONS_ENABLED=true
-FEATURE_APPROVALS_ENABLED=false
+FEATURE_APPROVALS_ENABLED=true
 FEATURE_ZIPCODE_SEARCH_ENABLED=false

assets/.env.production

@@ -0,0 +1,14 @@
+API_BASE_URL=https://api.superport.com
+TIMEOUT_MS=15000
+LOG_LEVEL=warning
+
+FEATURE_VENDORS_ENABLED=false
+FEATURE_PRODUCTS_ENABLED=false
+FEATURE_WAREHOUSES_ENABLED=false
+FEATURE_CUSTOMERS_ENABLED=false
+FEATURE_USERS_ENABLED=false
+FEATURE_GROUPS_ENABLED=false
+FEATURE_MENUS_ENABLED=false
+FEATURE_GROUP_PERMISSIONS_ENABLED=false
+FEATURE_APPROVALS_ENABLED=false
+FEATURE_ZIPCODE_SEARCH_ENABLED=false

doc/IMPLEMENTATION_TASKS.md

@@ -3,114 +3,114 @@
 본 체크리스트는 PRD(`doc/PRD_입출고_결재_v2.md`)를 기준으로 shadcn_ui 스타일과 반응형 패턴을 준수하여 화면을 구현하기 위한 단계별 작업 목록입니다. 작업 순서는 ① 코드 시작 전 최종 확인 → ② UI 스캐폴딩/상호작용 구현 → ③ 실제 API 연동(Dio/ApiClient/DI)입니다. Mock 데이터는 사용하지 않습니다.
 
 ## 0) 코드 시작 전 최종 확인(Repository/환경)
-- [ ] Flutter 버전/채널 확인, `flutter pub get`
+- [x] Flutter 버전/채널 확인, `flutter pub get`
-- [ ] `pubspec.yaml` 확인: `go_router`, `shadcn_ui`, `intl`, `two_dimensional_scrollables`, `lucide_icons_flutter` 포함
+- [x] `pubspec.yaml` 확인: `go_router`, `shadcn_ui`, `intl`, `two_dimensional_scrollables`, `lucide_icons_flutter` 포함
-- [ ] `Environment.initialize()` 호출 및 `.env.development`/`.env.production`에서 `API_BASE_URL`/`TIMEOUT_MS`/`LOG_LEVEL` 로드
+- [x] `Environment.initialize()` 호출 및 `.env.development`/`.env.production`에서 `API_BASE_URL`/`TIMEOUT_MS`/`LOG_LEVEL` 로드
-- [ ] 라우팅 스켈레톤(go_router) 구성: 로그인/대시보드/입·출·대여/마스터/결재/보고서
+- [x] 라우팅 스켈레톤(go_router) 구성: 로그인/대시보드/입·출·대여/마스터/결재/보고서
-- [ ] 글로벌 테마/ShadTheme 확인(폰트/간격/배지/버튼 일관)
+- [x] 글로벌 테마/ShadTheme 확인(폰트/간격/배지/버튼 일관)
 
 ## 1) 공통 컴포넌트/레이아웃(UI)
-- [ ] AppLayout(좌 사이드바/상단 헤더/본문) 적용, 브레드크럼·타이틀·툴바 영역 정리
+- [x] AppLayout(좌 사이드바/상단 헤더/본문) 적용, 브레드크럼·타이틀·툴바 영역 정리 (현황: 입·출·대여와 전 마스터 실화면에 `AppLayout`/브레드크럼/툴바 적용 완료, 결재/보고서 등 잔여 SpecPage 전환만 남음)
-- [ ] 테이블: `ShadTable.list` 표준화(고정 헤더/가로 스크롤/소팅/페이지네이션 UI만)
+- [ ] 테이블: `ShadTable.list` 표준화(고정 헤더/가로 스크롤/소팅/페이지네이션 UI만) (현황: `SuperportTable` 컴포넌트 정의만 있고 실제 화면에서는 직접 `ShadTable.list`를 호출함)
-- [ ] 모달: `SuperportShadDialog`(헤더/본문/푸터 분리, 모바일 풀스크린) 공통 wrapper
+- [ ] 모달: `SuperportShadDialog`(헤더/본문/푸터 분리, 모바일 풀스크린) 공통 wrapper (현황: 화면별로 `showDialog`를 직접 구성하며 공통 래퍼 미사용)
-- [ ] 입력 위젯: `ShadInput/Select/Switch`, `SuperportShadDatePicker/RangePicker` 적용 가이드
+- [ ] 입력 위젯: `ShadInput/Select/Switch`, `SuperportShadDatePicker/RangePicker` 적용 가이드 (현황: 기본 입력 위젯 사용은 있으나 DatePicker 등 공통 컴포넌트/가이드 부재)
-- [ ] 필터바(검색/기간/상태/창고/Reset) 공통 위젯
+- [ ] 필터바(검색/기간/상태/창고/Reset) 공통 위젯 (현황: `FilterBar`를 입/출/대여 + 벤더/제품 화면에 적용했으나 나머지 화면 전파 및 필터 상태 표준화 필요)
-- [ ] 반응형 프리셋: 데스크톱/태블릿/모바일 열 가시성 설정(섹션 12 규칙 반영)
+- [ ] 반응형 프리셋: 데스크톱/태블릿/모바일 열 가시성 설정(섹션 12 규칙 반영) (현황: `responsive.dart`에 상수만 있고 실제 적용 사례 없음)
-- [ ] 토스트/스낵바/스켈레톤/Empty 상태 공통 처리
+- [ ] 토스트/스낵바/스켈레톤/Empty 상태 공통 처리 (현황: 개별 화면에서 `SnackBar`와 임시 문구만 사용, 공통 처리 미정)
 
 ## 2) 인증/대시보드(UI)
-- [ ] 로그인 화면(`/login`): 아이디/비밀번호 UI(제출/로딩/에러 표시 흐름)
+- [ ] 로그인 화면(`/login`): 아이디/비밀번호 UI(제출/로딩/에러 표시 흐름) (현황: 텍스트 필드/버튼만 있고 로딩, 에러 메시지, 실제 인증 연동 없음)
-- [ ] 대시보드(`/`): KPI 카드, 최근 트랜잭션, 내 결재 대기 리스트 — 스켈레톤/Empty 상태 구현
+- [ ] 대시보드(`/`): KPI 카드, 최근 트랜잭션, 내 결재 대기 리스트 — 스켈레톤/Empty 상태 구현 (현황: `SpecPage`로 요구사항만 노출, 실제 대시보드 UI 미구현)
 
 ## 3) 입고(`/inbounds`) UI
-- [ ] 라우트/네비게이션 연결
+- [x] 라우트/네비게이션 연결 (현황: GoRouter에 `/inventory/inbound` 경로 등록, `AppShell` 내에서 진입 가능)
-- [ ] 목록 테이블: 번호/처리일자/창고/트랜잭션번호/상태/작성자/품목수/총수량/비고
+- [ ] 목록 테이블: 번호/처리일자/창고/트랜잭션번호/상태/작성자/품목수/총수량/비고 (현황: `ShadTable.list`를 직접 구성하지만 모의 데이터 기반이며 컬럼 구성이 사양과 다르고 고정 헤더/페이징 부재)
-- [ ] 필터: 기간/창고/상태/검색, 소팅/페이지네이션
+- [ ] 필터: 기간/창고/상태/검색, 소팅/페이지네이션 (현황: 검색어와 기간만 제공, 창고/상태/소팅/페이지네이션 미구현)
-- [ ] 신규 모달: 헤더(처리일자/창고/상태/작성자/비고) + 시스템 필드(`transaction_type_id=입고` RO/숨김)
+- [ ] 신규 모달: 헤더(처리일자/창고/상태/작성자/비고) + 시스템 필드(`transaction_type_id=입고` RO/숨김) (현황: 개별 `Dialog`에서 입력 필드 작성만 가능하며 `transaction_type_id` 처리 및 시스템 필드 구분 없음)
-- [ ] 라인 테이블: 제품(자동완성)→제조사/단위 자동, 수량/단가/비고, (+)/(−) 행 편집
+- [ ] 라인 테이블: 제품(자동완성)→제조사/단위 자동, 수량/단가/비고, (+)/(−) 행 편집 (현황: 수동 입력 필드만 제공되고 자동완성·연동 로직 부재)
-- [ ] 검증: 필수/수량>=1/단가>=0, 상단 요약 + 인라인 에러
+- [ ] 검증: 필수/수량>=1/단가>=0, 상단 요약 + 인라인 에러 (현황: 품목명 비어 있음만 검사, 수량/단가 검증 및 요약/인라인 에러 미구현)
-- [ ] 수정 모달: 작성자/트랜잭션번호 RO, 종결 상태 수정 제한
+- [ ] 수정 모달: 작성자/트랜잭션번호 RO, 종결 상태 수정 제한 (현황: 동일 폼 재사용으로 모든 필드 편집 가능, 상태 제한 없음)
 
 ## 4) 출고(`/outbounds`) UI
-- [ ] 목록 테이블: 번호/처리일자/창고/트랜잭션번호/상태/작성자/고객수/품목수/총수량/비고
+- [ ] 목록 테이블: 번호/처리일자/창고/트랜잭션번호/상태/작성자/고객수/품목수/총수량/비고 (현황: 모의 데이터 기반 테이블이며 컬럼 구성이 사양과 다르고 페이징/소팅 없음)
-- [ ] 필터: 기간/창고/상태/고객/검색
+- [ ] 필터: 기간/창고/상태/고객/검색 (현황: 검색어·기간만 제공, 창고/상태/고객 필터 부재)
-- [ ] 신규/수정 모달: 헤더(…)+ 시스템 필드(`transaction_type_id=출고` RO/숨김)
+- [ ] 신규/수정 모달: 헤더(…)+ 시스템 필드(`transaction_type_id=출고` RO/숨김) (현황: 공통 모달 없이 개별 `Dialog` 구성, `transaction_type_id` 자동 주입 처리 없음)
-- [ ] 고객 연결(멀티): 고객사 자동완성 → 토큰/칩 UI, 최소 1건 검증
+- [ ] 고객 연결(멀티): 고객사 자동완성 → 토큰/칩 UI, 최소 1건 검증 (현황: `ShadSelect.multiple`로 선택 UI는 있으나 자동완성/최소 1건 검증/실제 데이터 연동 미구현)
-- [ ] 라인 테이블: 제품/제조사RO/단위RO/수량/단가/비고
+- [ ] 라인 테이블: 제품/제조사RO/단위RO/수량/단가/비고 (현황: 수동 입력 필드만 존재, 제조사/단위 자동 채움 및 읽기 전용 처리 미구현)
 
 ## 5) 대여(`/rentals`) UI
-- [ ] 목록 테이블: 번호/처리일자/창고/대여구분/트랜잭션번호/상태/반납예정일/고객수/품목수/비고
+- [ ] 목록 테이블: 번호/처리일자/창고/대여구분/트랜잭션번호/상태/반납예정일/고객수/품목수/비고 (현황: 모의 데이터 테이블로 사양 대비 컬럼/정렬/페이징 미충족)
-- [ ] 필터: 기간/창고/상태/대여구분/반납예정일 범위/검색
+- [ ] 필터: 기간/창고/상태/대여구분/반납예정일 범위/검색 (현황: 검색어·기간만 제공, 나머지 필터 미구현)
-- [ ] 신규/수정 모달: 헤더(…/대여구분/반납예정일) + 시스템 필드(`transaction_type_id` 대여/반납 자동 매핑)
+- [ ] 신규/수정 모달: 헤더(…/대여구분/반납예정일) + 시스템 필드(`transaction_type_id` 대여/반납 자동 매핑) (현황: 개별 `Dialog` 구성으로 필드 입력만 가능하며 시스템 필드/자동 매핑 로직 없음)
-- [ ] 고객 연결(멀티) + 라인 테이블(입고·출고와 동일)
+- [ ] 고객 연결(멀티) + 라인 테이블(입고·출고와 동일) (현황: 멀티 선택 UI는 있으나 자동완성/검증/공통 라인 테이블 추출 미완료)
-- [ ] 규칙: 대여구분은 종결 후 변경 불가, 반납예정일은 진행 중 수정 가능
+- [ ] 규칙: 대여구분은 종결 후 변경 불가, 반납예정일은 진행 중 수정 가능 (현황: 상태별 편집 제한 로직 전혀 없음)
 
 ## 6) 마스터(UI)
-- [x] 벤더: 목록/필터(q/사용여부), 신규/수정(코드RO), 삭제/복구 UI
+- [x] 벤더: 목록/필터(q/사용여부), 신규/수정(코드RO), 삭제/복구 UI (현황: `FEATURE_VENDORS_ENABLED=true`일 때 `VendorController` 기반 CRUD/삭제·복구/상태필터 동작, API 경로 `/vendors` 연결은 실제 백엔드 준비 필요)
-- [x] 제품: 목록/필터(q/제조사/단위/사용), 신규/수정(코드RO)
+- [x] 제품: 목록/필터(q/제조사/단위/사용), 신규/수정(코드RO) (현황: `ProductController`가 벤더·단위 lookup을 선로드하고 CRUD 처리, `FEATURE_PRODUCTS_ENABLED` 플래그가 꺼져 있으면 SpecPage만 노출)
-- [ ] 창고: 목록/필터(q/사용), 신규/수정(우편번호 검색 모달 UI 연동)
+- [ ] 창고: 목록/필터(q/사용), 신규/수정(우편번호 검색 모달 UI 연동) (현황: `WarehouseController` CRUD·상태 필터는 구현됐으나 우편번호 검색 모달/`PostalSearchPage` 연동이 없어 텍스트 수기 입력 상태)
-- [x] 고객사: 목록/필터(q/유형/사용), 신규/수정(유형→is_partner/is_general 매핑 UI)
+- [x] 고객사: 목록/필터(q/유형/사용), 신규/수정(유형→is_partner/is_general 매핑 UI) (현황: 유형 스위치가 `is_partner/is_general`로 매핑되며 CRUD 흐름 구현, 우편번호 검색은 미연동)
-- [x] 사용자: 목록/필터(q/그룹/사용), 신규/수정(사번RO)
+- [x] 사용자: 목록/필터(q/그룹/사용), 신규/수정(사번RO) (현황: 그룹 lookup을 선로드하고 사번 필드 읽기 전용 처리, `FEATURE_USERS_ENABLED` 플래그 필요)
-- [ ] 그룹: 목록/필터(q/기본/사용), 신규/수정(그룹명RO)
+- [x] 그룹: 목록/필터(q/기본/사용), 신규/수정(그룹명RO) (현황: `GroupController`가 페이지네이션/검색/토스트까지 처리, 실제 API 응답 필요)
-- [ ] 메뉴: 목록/필터(q/상위/사용), 신규/수정(메뉴코드RO)
+- [x] 메뉴: 목록/필터(q/상위/사용), 신규/수정(메뉴코드RO) (현황: 메뉴 트리 CRUD UI 구현, feature flag false 시 SpecPage 표시)
-- [ ] 그룹 권한: 목록/필터(그룹/메뉴/사용), 체크박스 매트릭스 편집 UI
+- [x] 그룹 권한: 목록/필터(그룹/메뉴/사용), 체크박스 매트릭스 편집 UI (현황: 그룹·메뉴 lookup + 권한 매트릭스 편집/일괄 저장 흐름 구현, 실제 API 응답 미연결)
 
 ## 7) 결재(UI)
-- [ ] 결재(`/approvals`): 목록/필터, 상세(개요/단계/이력 탭)
+- [ ] 결재(`/approvals`): 목록/필터, 상세(개요/단계/이력 탭) (현황: `/approvals/requests` 라우트를 `ApprovalPage`로 연결하고 AppLayout/FilterBar·단계 행위·템플릿 적용까지 연동했으며 추가 액션/권한 제어는 후속 예정)
-- [ ] 템플릿 불러오기: 단계 탭에서 템플릿 선택 UI(단계 리스트 반영)
+- [x] 템플릿 불러오기: 단계 탭에서 템플릿 선택 UI(단계 리스트 반영) (현황: 템플릿 목록 로딩·선택·확인 다이얼로그·`assignSteps` 호출로 단계 일괄 적용까지 구현, 템플릿 CRUD는 미구현)
-- [ ] 단계 행위: 승인/반려/코멘트 버튼(가능 여부 상태에 따라 비활성/툴팁)
+- [x] 단계 행위: 승인/반려/코멘트 버튼(가능 여부 상태에 따라 비활성/툴팁) (현황: 단계 버튼·툴팁·행위 다이얼로그를 구현했고 `ApprovalRepository.performStepAction` 연동 완료, 권한 기반 노출/후속 알림은 TODO)
-- [ ] 단계 관리(`/approval-steps`): 목록/편집(신규/수정)
+- [ ] 단계 관리(`/approval-steps`): 목록/편집(신규/수정) (현황: feature flag On 시 AppLayout + 안내 카드 플레이스홀더 제공, CRUD/데이터 연동은 미구현)
-- [ ] 이력(`/approval-histories`): 조회 전용 테이블
+- [ ] 이력(`/approval-histories`): 조회 전용 테이블 (현황: AppLayout 기반 안내 화면으로 전환, 실제 테이블/필터/다운로드는 미구현)
-- [ ] 템플릿(`/approval-templates`): 목록/헤더+단계 반복 폼
+- [ ] 템플릿(`/approval-templates`): 목록/헤더+단계 반복 폼 (현황: AppLayout/FilterBar를 갖춘 플레이스홀더만 존재, 템플릿 CRUD 로직 미구현)
 
 ## 8) 우편번호 검색 모달(UI)
-- [ ] 입력: 검색어 텍스트
+- [ ] 입력: 검색어 텍스트 (현황: `/utilities/postal-search` 라우트가 SpecPage만 노출, 실제 모달 위젯/상호작용 없음)
-- [ ] 결과 테이블: 우편번호/시도/시군구/도로명/건물번호
+- [ ] 결과 테이블: 우편번호/시도/시군구/도로명/건물번호 (현황: 결과 렌더링 미구현)
-- [ ] 선택 시: 부모 폼 `zipcode`/주소 구성요소 채움
+- [ ] 선택 시: 부모 폼 `zipcode`/주소 구성요소 채움 (현황: Warehouse/Customer 폼과의 데이터 바인딩 미구현)
 
 ## 9) 보고서(`/reports`) UI
-- [ ] 조건 폼: 기간/유형/창고/상태
+- [ ] 조건 폼: 기간/유형/창고/상태 (현황: `ReportingPage`를 AppLayout + FilterBar 플레이스홀더로 전환, 조건 버튼은 비활성 상태로 안내만 제공)
-- [ ] 액션: XLSX/PDF 버튼 — 미제공 시 버튼 비활성 UI(연동은 API 단계에서)
+- [ ] 액션: XLSX/PDF 버튼 — 미제공 시 버튼 비활성 UI(연동은 API 단계에서) (현황: 헤더 액션에 비활성 버튼 배치, 실제 다운로드 연동과 상태 제어는 미구현)
 
 ## 10) 데이터 계층/상태 관리
-- [ ] 리포지토리 인터페이스(domain) 정의 및 구현(data): 트랜잭션/결재/마스터/룩업/우편번호
+- [ ] 리포지토리 인터페이스(domain) 정의 및 구현(data): 트랜잭션/결재/마스터/룩업/우편번호 (현황: 마스터·결재·UOM에 대한 domain/data 레이어만 존재하고 입·출·대여/보고서/우편번호 리포지토리 미정의)
-- [ ] DTO ↔ 도메인 엔티티 매핑(응답 `{ items }`/`{ data }` 구조 표준화)
+- [ ] DTO ↔ 도메인 엔티티 매핑(응답 `{ items }`/`{ data }` 구조 표준화) (현황: 마스터/결재 DTO는 작성됐으나 인벤토리/보고서 DTO 부재, `{ data }` fallback 처리 통일 미완료)
-- [ ] 페이지네이션 상태(현재 페이지/사이즈/전체) 및 필터 상태 싱크(go_router querystring 연동)
+- [ ] 페이지네이션 상태(현재 페이지/사이즈/전체) 및 필터 상태 싱크(go_router querystring 연동) (현황: 각 Controller가 내부 `PaginatedResult`만 유지하고 라우터 querystring과 동기화되지 않음)
-- [ ] 정렬/검색/Include 옵션 직렬화 및 유지
+- [ ] 정렬/검색/Include 옵션 직렬화 및 유지 (현황: 검색어만 로컬 상태로 보관하며 sort/include 파라미터 직렬화/복원 로직 없음)
 
 ## 11) API 연동 단계(Dio/ApiClient/DI)
-- [ ] 네트워킹 패키지 추가: `dio:^5.x`, `pretty_dio_logger`(dev 선택), 토큰 저장용 `flutter_secure_storage`(모바일)/웹 스토리지
+- [ ] 네트워킹 패키지 추가: `dio:^5.x`, `pretty_dio_logger`(dev 선택), 토큰 저장용 `flutter_secure_storage`(모바일)/웹 스토리지 (현황: `dio`/`pretty_dio_logger`는 추가되어 사용 중이나 `flutter_secure_storage` 및 웹 스토리지 분기 미도입)
-- [ ] `ApiClient`/`AuthInterceptor` 스켈레톤 작성(설계: `doc/API_CLIENT_SPEC.md`)
+- [x] `ApiClient`/`AuthInterceptor` 스켈레톤 작성(설계: `doc/API_CLIENT_SPEC.md`) (현황: `lib/core/network/api_client.dart`, `interceptors/auth_interceptor.dart`에 기본 뼈대 구현, 토큰 주입/401 재시도 로직은 TODO 상태)
-- [ ] `Environment.initialize()` → `get_it` DI에서 ApiClient 생성/주입
+- [x] `Environment.initialize()` → `get_it` DI에서 ApiClient 생성/주입 (현황: `main.dart`에서 초기화 후 `injection_container.dart`가 `ApiClient`와 각 리포지토리를 등록)
-- [ ] 공통 에러 매핑(400/404/409/422) 및 토스트/필드 바인딩 연결
+- [ ] 공통 에러 매핑(400/404/409/422) 및 토스트/필드 바인딩 연결 (현황: Dio 예외 처리 공통화 미구현, 화면에서 개별 SnackBar만 사용)
-- [ ] 메뉴/권한 로딩 → 버튼/액션 노출 제어
+- [ ] 메뉴/권한 로딩 → 버튼/액션 노출 제어 (현황: 권한 기반 노출 제어 미구현, feature flag만 사용)
 - [ ] 각 화면 API 연결:
-  - 입고/출고/대여: 목록/상세/생성/수정/삭제/복구 + include/필터/정렬/페이지네이션
+  - 입고/출고/대여: 목록/상세/생성/수정/삭제/복구 + include/필터/정렬/페이지네이션 (현황: `ShadTable`에 Mock 데이터 하드코딩, 리포지토리/DTO 부재)
-  - 마스터: vendors/products/warehouses/customers/employees/menus/groups/group-permissions(+ 일괄 저장)
+  - 마스터: vendors/products/warehouses/customers/employees/menus/groups/group-permissions(+ 일괄 저장) (현황: 모든 마스터 화면이 `ApiClient` 기반 리포지토리로 CRUD/삭제·복구까지 호출하도록 작성되어 있으나 실제 엔드포인트 유효성 검증 필요)
-  - 결재: approvals(+steps/histories), actions, can-proceed, 템플릿 CRUD/단계 배치
+  - 결재: approvals(+steps/histories), actions, can-proceed, 템플릿 CRUD/단계 배치 (현황: 리포지토리 스켈레톤만 존재하며 UI는 AppLayout 기반으로 정리됐지만 실제 API 연동과 액션 처리는 미구현)
-  - 우편번호: `GET /zipcodes?...`
+  - 우편번호: `GET /zipcodes?...` (현황: 리포지토리/네트워킹 미구현)
-  - 보고서: 다운로드 엔드포인트 연동(제공 시)
+  - 보고서: 다운로드 엔드포인트 연동(제공 시) (현황: 보고서 화면은 AppLayout 플레이스홀더 상태, API 연동과 다운로드 흐름 미구현)
 
 ## 12) 검증/접근성/상호작용
-- [ ] 필수/형식/업무 규칙 검증(출고/대여 고객 최소 1건 등)
+- [ ] 필수/형식/업무 규칙 검증(출고/대여 고객 최소 1건 등) (현황: 필수값 일부만 검사하고 수량/단가 ≥ 조건, 고객 최소 1건, 상태별 제한 등 업무 규칙 미구현)
-- [ ] 키보드: Esc 닫기, Enter 제출/셀 이동, Tab 포커스 이동, 포커스 트랩
+- [ ] 키보드: Esc 닫기, Enter 제출/셀 이동, Tab 포커스 이동, 포커스 트랩 (현황: 기본 포커스만 제공되며 단축키/포커스 트랩 처리 미구현)
-- [ ] 합계/요약 배지 실시간 반영(수량/단가 변경 시)
+- [ ] 합계/요약 배지 실시간 반영(수량/단가 변경 시) (현황: 상세 카드에서 합계를 보여주지만 폼 입력 시 실시간 합산/배지 업데이트 없음)
 
 ## 13) 반응형/열 가시성
-- [ ] 데스크톱/태블릿/모바일 프리셋 구현(PRD 섹션 12 규칙 적용)
+- [ ] 데스크톱/태블릿/모바일 프리셋 구현(PRD 섹션 12 규칙 적용) (현황: `widgets/components/responsive.dart`에 breakpoint 상수만 정의되어 있고 화면 적용 미진행)
-- [ ] 모바일 카드형 요약(핵심 3~4필드) 구성
+- [ ] 모바일 카드형 요약(핵심 3~4필드) 구성 (현황: 모든 목록이 데스크톱 테이블만 제공)
 
 ## 14) 테스트/품질
-- [x] `flutter analyze` 경고 0
+- [x] `flutter analyze` 경고 0 (현황: 현재 소스는 analyzer 경고 없이 유지되나 기능 추가 시 재검증 필요)
-- [x] 위젯 테스트: 테이블 렌더/필터/페이지네이션/모달 열기/검증 메시지
+- [x] 위젯 테스트: 테이블 렌더/필터/페이지네이션/모달 열기/검증 메시지 (현황: 마스터/결재 컨트롤러 중심의 위젯·단위 테스트가 존재하나 인벤토리/보고서 영역 테스트 미작성)
-- [ ] 내비 통합 테스트(선택): 로그인 → 대시보드 → 입/출/대여 → 결재 → 마스터
+- [ ] 내비 통합 테스트(선택): 로그인 → 대시보드 → 입/출/대여 → 결재 → 마스터 (현황: 통합 테스트 미구현)
-- [ ] `dart format .` 적용
+- [ ] `dart format .` 적용 (현황: 포맷 명령 자동화/검증 절차 부재)
 
 ## 15) Definition of Done(DoD)
-- [ ] 모든 목록/폼/모달/필터/페이지네이션 동작
+- [ ] 모든 목록/폼/모달/필터/페이지네이션 동작 (현황: 마스터 일부 기능만 CRUD 동작, 인벤토리/결재/보고서는 스켈레톤 단계)
-- [ ] 모바일/태블릿/데스크톱 레이아웃 검증(핵심 열 가시성)
+- [ ] 모바일/태블릿/데스크톱 레이아웃 검증(핵심 열 가시성) (현황: 반응형 레이아웃 미구현)
-- [ ] 실제 API로 주요 플로우(신규/수정/삭제/복구) 검증 완료
+- [ ] 실제 API로 주요 플로우(신규/수정/삭제/복구) 검증 완료 (현황: 실제 백엔드와의 통합 테스트 결과 미확인)
-- [ ] 문서 최신화(PRD/체크리스트)
+- [ ] 문서 최신화(PRD/체크리스트) (현황: IMPLEMENTATION_TASKS.md는 진행 중이나 PRD/사양 문서와의 싱크 필요)
 
 ## 참고
 - PRD: `doc/PRD_입출고_결재_v2.md`

lib/features/approvals/data/dtos/approval_dto.dart

@@ -0,0 +1,292 @@
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../../domain/entities/approval.dart';
+
+class ApprovalDto {
+  ApprovalDto({
+    this.id,
+    required this.approvalNo,
+    this.transactionNo,
+    required this.status,
+    this.currentStep,
+    required this.requester,
+    required this.requestedAt,
+    this.decidedAt,
+    this.note,
+    this.isActive = true,
+    this.isDeleted = false,
+    this.steps = const [],
+    this.histories = const [],
+    this.createdAt,
+    this.updatedAt,
+  });
+
+  final int? id;
+  final String approvalNo;
+  final String? transactionNo;
+  final ApprovalStatusDto status;
+  final ApprovalStepDto? currentStep;
+  final ApprovalRequesterDto requester;
+  final DateTime requestedAt;
+  final DateTime? decidedAt;
+  final String? note;
+  final bool isActive;
+  final bool isDeleted;
+  final List<ApprovalStepDto> steps;
+  final List<ApprovalHistoryDto> histories;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+
+  factory ApprovalDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalDto(
+      id: json['id'] as int?,
+      approvalNo: json['approval_no'] as String,
+      transactionNo: json['transaction'] is Map<String, dynamic>
+          ? (json['transaction']['transaction_no'] as String?)
+          : json['transaction_no'] as String?,
+      status: ApprovalStatusDto.fromJson(
+        (json['status'] as Map<String, dynamic>? ?? const {}),
+      ),
+      currentStep: json['current_step'] is Map<String, dynamic>
+          ? ApprovalStepDto.fromJson(
+              json['current_step'] as Map<String, dynamic>,
+            )
+          : null,
+      requester: ApprovalRequesterDto.fromJson(
+        (json['requester'] as Map<String, dynamic>? ?? const {}),
+      ),
+      requestedAt: _parseDate(json['requested_at']) ?? DateTime.now(),
+      decidedAt: _parseDate(json['decided_at']),
+      note: json['note'] as String?,
+      isActive: (json['is_active'] as bool?) ?? true,
+      isDeleted: (json['is_deleted'] as bool?) ?? false,
+      steps: (json['steps'] as List<dynamic>? ?? [])
+          .whereType<Map<String, dynamic>>()
+          .map(ApprovalStepDto.fromJson)
+          .toList(),
+      histories: (json['histories'] as List<dynamic>? ?? [])
+          .whereType<Map<String, dynamic>>()
+          .map(ApprovalHistoryDto.fromJson)
+          .toList(),
+      createdAt: _parseDate(json['created_at']),
+      updatedAt: _parseDate(json['updated_at']),
+    );
+  }
+
+  Approval toEntity() => Approval(
+    id: id,
+    approvalNo: approvalNo,
+    transactionNo: transactionNo ?? '-',
+    status: status.toEntity(),
+    currentStep: currentStep?.toEntity(),
+    requester: requester.toEntity(),
+    requestedAt: requestedAt,
+    decidedAt: decidedAt,
+    note: note,
+    isActive: isActive,
+    isDeleted: isDeleted,
+    steps: steps.map((e) => e.toEntity()).toList(),
+    histories: histories.map((e) => e.toEntity()).toList(),
+    createdAt: createdAt,
+    updatedAt: updatedAt,
+  );
+
+  static PaginatedResult<Approval> parsePaginated(Map<String, dynamic>? json) {
+    final items = (json?['items'] as List<dynamic>? ?? [])
+        .whereType<Map<String, dynamic>>()
+        .map(ApprovalDto.fromJson)
+        .map((dto) => dto.toEntity())
+        .toList();
+    return PaginatedResult<Approval>(
+      items: items,
+      page: json?['page'] as int? ?? 1,
+      pageSize: json?['page_size'] as int? ?? items.length,
+      total: json?['total'] as int? ?? items.length,
+    );
+  }
+}
+
+class ApprovalStatusDto {
+  ApprovalStatusDto({required this.id, required this.name, this.color});
+
+  final int id;
+  final String name;
+  final String? color;
+
+  factory ApprovalStatusDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalStatusDto(
+      id: json['id'] as int? ?? json['status_id'] as int? ?? 0,
+      name: json['name'] as String? ?? json['status_name'] as String? ?? '-',
+      color: json['color'] as String?,
+    );
+  }
+
+  ApprovalStatus toEntity() => ApprovalStatus(id: id, name: name, color: color);
+}
+
+class ApprovalRequesterDto {
+  ApprovalRequesterDto({
+    required this.id,
+    required this.employeeNo,
+    required this.name,
+  });
+
+  final int id;
+  final String employeeNo;
+  final String name;
+
+  factory ApprovalRequesterDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalRequesterDto(
+      id: json['id'] as int? ?? json['employee_id'] as int? ?? 0,
+      employeeNo: json['employee_no'] as String? ?? '-',
+      name: json['name'] as String? ?? json['employee_name'] as String? ?? '-',
+    );
+  }
+
+  ApprovalRequester toEntity() =>
+      ApprovalRequester(id: id, employeeNo: employeeNo, name: name);
+}
+
+class ApprovalApproverDto {
+  ApprovalApproverDto({
+    required this.id,
+    required this.employeeNo,
+    required this.name,
+  });
+
+  final int id;
+  final String employeeNo;
+  final String name;
+
+  factory ApprovalApproverDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalApproverDto(
+      id: json['id'] as int? ?? json['approver_id'] as int? ?? 0,
+      employeeNo: json['employee_no'] as String? ?? '-',
+      name: json['name'] as String? ?? json['employee_name'] as String? ?? '-',
+    );
+  }
+
+  ApprovalApprover toEntity() =>
+      ApprovalApprover(id: id, employeeNo: employeeNo, name: name);
+}
+
+class ApprovalStepDto {
+  ApprovalStepDto({
+    this.id,
+    required this.stepOrder,
+    required this.approver,
+    required this.status,
+    required this.assignedAt,
+    this.decidedAt,
+    this.note,
+  });
+
+  final int? id;
+  final int stepOrder;
+  final ApprovalApproverDto approver;
+  final ApprovalStatusDto status;
+  final DateTime assignedAt;
+  final DateTime? decidedAt;
+  final String? note;
+
+  factory ApprovalStepDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalStepDto(
+      id: json['id'] as int?,
+      stepOrder: json['step_order'] as int? ?? 0,
+      approver: ApprovalApproverDto.fromJson(
+        (json['approver'] as Map<String, dynamic>? ?? const {}),
+      ),
+      status: ApprovalStatusDto.fromJson(
+        (json['status'] as Map<String, dynamic>? ?? const {}),
+      ),
+      assignedAt: _parseDate(json['assigned_at']) ?? DateTime.now(),
+      decidedAt: _parseDate(json['decided_at']),
+      note: json['note'] as String?,
+    );
+  }
+
+  ApprovalStep toEntity() => ApprovalStep(
+    id: id,
+    stepOrder: stepOrder,
+    approver: approver.toEntity(),
+    status: status.toEntity(),
+    assignedAt: assignedAt,
+    decidedAt: decidedAt,
+    note: note,
+  );
+}
+
+class ApprovalHistoryDto {
+  ApprovalHistoryDto({
+    this.id,
+    required this.action,
+    this.fromStatus,
+    required this.toStatus,
+    required this.approver,
+    required this.actionAt,
+    this.note,
+  });
+
+  final int? id;
+  final ApprovalActionDto action;
+  final ApprovalStatusDto? fromStatus;
+  final ApprovalStatusDto toStatus;
+  final ApprovalApproverDto approver;
+  final DateTime actionAt;
+  final String? note;
+
+  factory ApprovalHistoryDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalHistoryDto(
+      id: json['id'] as int?,
+      action: ApprovalActionDto.fromJson(
+        (json['action'] as Map<String, dynamic>? ?? const {}),
+      ),
+      fromStatus: json['from_status'] is Map<String, dynamic>
+          ? ApprovalStatusDto.fromJson(
+              json['from_status'] as Map<String, dynamic>,
+            )
+          : null,
+      toStatus: ApprovalStatusDto.fromJson(
+        (json['to_status'] as Map<String, dynamic>? ?? const {}),
+      ),
+      approver: ApprovalApproverDto.fromJson(
+        (json['approver'] as Map<String, dynamic>? ?? const {}),
+      ),
+      actionAt: _parseDate(json['action_at']) ?? DateTime.now(),
+      note: json['note'] as String?,
+    );
+  }
+
+  ApprovalHistory toEntity() => ApprovalHistory(
+    id: id,
+    action: action.toEntity(),
+    fromStatus: fromStatus?.toEntity(),
+    toStatus: toStatus.toEntity(),
+    approver: approver.toEntity(),
+    actionAt: actionAt,
+    note: note,
+  );
+}
+
+class ApprovalActionDto {
+  ApprovalActionDto({required this.id, required this.name});
+
+  final int id;
+  final String name;
+
+  factory ApprovalActionDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalActionDto(
+      id: json['id'] as int? ?? json['action_id'] as int? ?? 0,
+      name: json['name'] as String? ?? json['action_name'] as String? ?? '-',
+    );
+  }
+
+  ApprovalAction toEntity() => ApprovalAction(id: id, name: name);
+}
+
+DateTime? _parseDate(Object? value) {
+  if (value == null) return null;
+  if (value is DateTime) return value;
+  if (value is String) return DateTime.tryParse(value);
+  return null;
+}

lib/features/approvals/data/dtos/approval_template_dto.dart

@@ -0,0 +1,149 @@
+import '../../domain/entities/approval_template.dart';
+
+class ApprovalTemplateDto {
+  ApprovalTemplateDto({
+    required this.id,
+    required this.code,
+    required this.name,
+    this.description,
+    required this.isActive,
+    this.createdBy,
+    this.createdAt,
+    this.updatedAt,
+    this.steps = const [],
+  });
+
+  final int id;
+  final String code;
+  final String name;
+  final String? description;
+  final bool isActive;
+  final ApprovalTemplateAuthorDto? createdBy;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+  final List<ApprovalTemplateStepDto> steps;
+
+  factory ApprovalTemplateDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalTemplateDto(
+      id: json['id'] as int? ?? 0,
+      code: json['template_code'] as String? ?? json['code'] as String? ?? '-',
+      name: json['template_name'] as String? ?? json['name'] as String? ?? '-',
+      description: json['description'] as String?,
+      isActive: (json['is_active'] as bool?) ?? true,
+      createdBy: json['created_by'] is Map<String, dynamic>
+          ? ApprovalTemplateAuthorDto.fromJson(
+              json['created_by'] as Map<String, dynamic>,
+            )
+          : null,
+      createdAt: _parseDate(json['created_at']),
+      updatedAt: _parseDate(json['updated_at']),
+      steps: (json['steps'] as List<dynamic>? ?? [])
+          .whereType<Map<String, dynamic>>()
+          .map(ApprovalTemplateStepDto.fromJson)
+          .toList(),
+    );
+  }
+
+  ApprovalTemplate toEntity({bool includeSteps = true}) {
+    return ApprovalTemplate(
+      id: id,
+      code: code,
+      name: name,
+      description: description,
+      isActive: isActive,
+      createdBy: createdBy?.toEntity(),
+      createdAt: createdAt,
+      updatedAt: updatedAt,
+      steps: includeSteps ? steps.map((e) => e.toEntity()).toList() : const [],
+    );
+  }
+}
+
+class ApprovalTemplateAuthorDto {
+  ApprovalTemplateAuthorDto({
+    required this.id,
+    required this.employeeNo,
+    required this.name,
+  });
+
+  final int id;
+  final String employeeNo;
+  final String name;
+
+  factory ApprovalTemplateAuthorDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalTemplateAuthorDto(
+      id: json['id'] as int? ?? json['employee_id'] as int? ?? 0,
+      employeeNo: json['employee_no'] as String? ?? '-',
+      name: json['employee_name'] as String? ?? json['name'] as String? ?? '-',
+    );
+  }
+
+  ApprovalTemplateAuthor toEntity() {
+    return ApprovalTemplateAuthor(id: id, employeeNo: employeeNo, name: name);
+  }
+}
+
+class ApprovalTemplateStepDto {
+  ApprovalTemplateStepDto({
+    this.id,
+    required this.stepOrder,
+    required this.approver,
+    this.note,
+  });
+
+  final int? id;
+  final int stepOrder;
+  final ApprovalTemplateApproverDto approver;
+  final String? note;
+
+  factory ApprovalTemplateStepDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalTemplateStepDto(
+      id: json['id'] as int?,
+      stepOrder: json['step_order'] as int? ?? 0,
+      approver: ApprovalTemplateApproverDto.fromJson(
+        (json['approver'] as Map<String, dynamic>? ?? const {}),
+      ),
+      note: json['note'] as String?,
+    );
+  }
+
+  ApprovalTemplateStep toEntity() {
+    return ApprovalTemplateStep(
+      id: id,
+      stepOrder: stepOrder,
+      approver: approver.toEntity(),
+      note: note,
+    );
+  }
+}
+
+class ApprovalTemplateApproverDto {
+  ApprovalTemplateApproverDto({
+    required this.id,
+    required this.employeeNo,
+    required this.name,
+  });
+
+  final int id;
+  final String employeeNo;
+  final String name;
+
+  factory ApprovalTemplateApproverDto.fromJson(Map<String, dynamic> json) {
+    return ApprovalTemplateApproverDto(
+      id: json['id'] as int? ?? json['approver_id'] as int? ?? 0,
+      employeeNo: json['employee_no'] as String? ?? '-',
+      name: json['employee_name'] as String? ?? json['name'] as String? ?? '-',
+    );
+  }
+
+  ApprovalTemplateApprover toEntity() {
+    return ApprovalTemplateApprover(id: id, employeeNo: employeeNo, name: name);
+  }
+}
+
+DateTime? _parseDate(Object? value) {
+  if (value == null) return null;
+  if (value is DateTime) return value;
+  if (value is String) return DateTime.tryParse(value);
+  return null;
+}

lib/features/approvals/data/repositories/approval_repository_remote.dart

@@ -0,0 +1,168 @@
+import 'package:dio/dio.dart';
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/core/network/api_client.dart';
+
+import '../../domain/entities/approval.dart';
+import '../../domain/repositories/approval_repository.dart';
+import '../dtos/approval_dto.dart';
+
+class ApprovalRepositoryRemote implements ApprovalRepository {
+  ApprovalRepositoryRemote({required ApiClient apiClient}) : _api = apiClient;
+
+  final ApiClient _api;
+
+  static const _basePath = '/approvals';
+
+  @override
+  Future<PaginatedResult<Approval>> list({
+    int page = 1,
+    int pageSize = 20,
+    String? query,
+    String? status,
+    DateTime? from,
+    DateTime? to,
+    bool includeHistories = false,
+    bool includeSteps = false,
+  }) async {
+    final response = await _api.get<Map<String, dynamic>>(
+      _basePath,
+      query: {
+        'page': page,
+        'page_size': pageSize,
+        if (query != null && query.isNotEmpty) 'q': query,
+        if (status != null && status.isNotEmpty) 'status': status,
+        if (from != null) 'from': from.toIso8601String(),
+        if (to != null) 'to': to.toIso8601String(),
+        if (includeHistories) 'include_histories': true,
+        if (includeSteps) 'include_steps': true,
+      },
+      options: Options(responseType: ResponseType.json),
+    );
+    return ApprovalDto.parsePaginated(response.data ?? const {});
+  }
+
+  @override
+  Future<Approval> fetchDetail(
+    int id, {
+    bool includeSteps = true,
+    bool includeHistories = true,
+  }) async {
+    final response = await _api.get<Map<String, dynamic>>(
+      '$_basePath/$id',
+      query: {
+        if (includeSteps) 'include_steps': true,
+        if (includeHistories) 'include_histories': true,
+      },
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return ApprovalDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<List<ApprovalAction>> listActions({bool activeOnly = true}) async {
+    final response = await _api.get<Map<String, dynamic>>(
+      '/approval-actions',
+      query: {'page': 1, 'page_size': 100, if (activeOnly) 'active': true},
+      options: Options(responseType: ResponseType.json),
+    );
+    final items = (response.data?['items'] as List<dynamic>? ?? [])
+        .whereType<Map<String, dynamic>>()
+        .map(ApprovalActionDto.fromJson)
+        .map((dto) => dto.toEntity())
+        .toList();
+    return items;
+  }
+
+  @override
+  Future<Approval> performStepAction(ApprovalStepActionInput input) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      '/approval-steps/${input.stepId}/actions',
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final approvalJson = _extractApprovalFromActionResponse(
+      response.data ?? const <String, dynamic>{},
+    );
+    if (approvalJson == null) {
+      throw StateError('결재 단계 행위 응답에 결재 데이터가 없습니다.');
+    }
+    return ApprovalDto.fromJson(approvalJson).toEntity();
+  }
+
+  @override
+  Future<Approval> assignSteps(ApprovalStepAssignmentInput input) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      '/approvals/${input.approvalId}/steps',
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final approvalJson = _extractApprovalFromActionResponse(
+      response.data ?? const <String, dynamic>{},
+    );
+    if (approvalJson == null) {
+      throw StateError('결재 단계 일괄 처리 응답에 결재 데이터가 없습니다.');
+    }
+    return ApprovalDto.fromJson(approvalJson).toEntity();
+  }
+
+  @override
+  Future<Approval> create(ApprovalInput input) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      _basePath,
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return ApprovalDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<Approval> update(int id, ApprovalInput input) async {
+    final response = await _api.patch<Map<String, dynamic>>(
+      '$_basePath/$id',
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return ApprovalDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<void> delete(int id) async {
+    await _api.delete<void>('$_basePath/$id');
+  }
+
+  @override
+  Future<Approval> restore(int id) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      '$_basePath/$id/restore',
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return ApprovalDto.fromJson(data).toEntity();
+  }
+
+  Map<String, dynamic>? _extractApprovalFromActionResponse(
+    Map<String, dynamic> body,
+  ) {
+    final data = body['data'];
+    if (data is Map<String, dynamic>) {
+      if (data['approval'] is Map<String, dynamic>) {
+        return data['approval'] as Map<String, dynamic>;
+      }
+      if (data['approval_data'] is Map<String, dynamic>) {
+        return data['approval_data'] as Map<String, dynamic>;
+      }
+      final hasStatus =
+          data.containsKey('status') || data.containsKey('approval_status');
+      if (data.containsKey('approval_no') && hasStatus) {
+        return data;
+      }
+    }
+    if (body['approval'] is Map<String, dynamic>) {
+      return body['approval'] as Map<String, dynamic>;
+    }
+    return null;
+  }
+}

lib/features/approvals/data/repositories/approval_template_repository_remote.dart

@@ -0,0 +1,46 @@
+import 'package:dio/dio.dart';
+
+import '../../../../core/network/api_client.dart';
+import '../../domain/entities/approval_template.dart';
+import '../../domain/repositories/approval_template_repository.dart';
+import '../dtos/approval_template_dto.dart';
+
+class ApprovalTemplateRepositoryRemote implements ApprovalTemplateRepository {
+  ApprovalTemplateRepositoryRemote({required ApiClient apiClient})
+    : _api = apiClient;
+
+  final ApiClient _api;
+
+  static const _basePath = '/approval-templates';
+
+  @override
+  Future<List<ApprovalTemplate>> list({bool activeOnly = true}) async {
+    final response = await _api.get<Map<String, dynamic>>(
+      _basePath,
+      query: {'page': 1, 'page_size': 100, if (activeOnly) 'active': true},
+      options: Options(responseType: ResponseType.json),
+    );
+    final items = (response.data?['items'] as List<dynamic>? ?? [])
+        .whereType<Map<String, dynamic>>()
+        .map(ApprovalTemplateDto.fromJson)
+        .map((dto) => dto.toEntity(includeSteps: false))
+        .toList();
+    return items;
+  }
+
+  @override
+  Future<ApprovalTemplate> fetchDetail(
+    int id, {
+    bool includeSteps = true,
+  }) async {
+    final response = await _api.get<Map<String, dynamic>>(
+      '$_basePath/$id',
+      query: {if (includeSteps) 'include': 'steps'},
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return ApprovalTemplateDto.fromJson(
+      data,
+    ).toEntity(includeSteps: includeSteps);
+  }
+}

lib/features/approvals/domain/entities/approval.dart

@@ -0,0 +1,248 @@
+/// 결재(Approval) 엔티티
+///
+/// - 결재 기본 정보와 현재 단계, 라인(단계/이력) 데이터를 포함한다.
+/// - presentation/data 레이어 구현에 의존하지 않는다.
+class Approval {
+  Approval({
+    this.id,
+    required this.approvalNo,
+    required this.transactionNo,
+    required this.status,
+    this.currentStep,
+    required this.requester,
+    required this.requestedAt,
+    this.decidedAt,
+    this.note,
+    this.isActive = true,
+    this.isDeleted = false,
+    this.steps = const [],
+    this.histories = const [],
+    this.createdAt,
+    this.updatedAt,
+  });
+
+  final int? id;
+  final String approvalNo;
+  final String transactionNo;
+  final ApprovalStatus status;
+  final ApprovalStep? currentStep;
+  final ApprovalRequester requester;
+  final DateTime requestedAt;
+  final DateTime? decidedAt;
+  final String? note;
+  final bool isActive;
+  final bool isDeleted;
+  final List<ApprovalStep> steps;
+  final List<ApprovalHistory> histories;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+
+  Approval copyWith({
+    int? id,
+    String? approvalNo,
+    String? transactionNo,
+    ApprovalStatus? status,
+    ApprovalStep? currentStep,
+    ApprovalRequester? requester,
+    DateTime? requestedAt,
+    DateTime? decidedAt,
+    String? note,
+    bool? isActive,
+    bool? isDeleted,
+    List<ApprovalStep>? steps,
+    List<ApprovalHistory>? histories,
+    DateTime? createdAt,
+    DateTime? updatedAt,
+  }) {
+    return Approval(
+      id: id ?? this.id,
+      approvalNo: approvalNo ?? this.approvalNo,
+      transactionNo: transactionNo ?? this.transactionNo,
+      status: status ?? this.status,
+      currentStep: currentStep ?? this.currentStep,
+      requester: requester ?? this.requester,
+      requestedAt: requestedAt ?? this.requestedAt,
+      decidedAt: decidedAt ?? this.decidedAt,
+      note: note ?? this.note,
+      isActive: isActive ?? this.isActive,
+      isDeleted: isDeleted ?? this.isDeleted,
+      steps: steps ?? this.steps,
+      histories: histories ?? this.histories,
+      createdAt: createdAt ?? this.createdAt,
+      updatedAt: updatedAt ?? this.updatedAt,
+    );
+  }
+}
+
+class ApprovalStatus {
+  ApprovalStatus({required this.id, required this.name, this.color});
+
+  final int id;
+  final String name;
+  final String? color;
+}
+
+class ApprovalRequester {
+  ApprovalRequester({
+    required this.id,
+    required this.employeeNo,
+    required this.name,
+  });
+
+  final int id;
+  final String employeeNo;
+  final String name;
+}
+
+class ApprovalStep {
+  ApprovalStep({
+    this.id,
+    required this.stepOrder,
+    required this.approver,
+    required this.status,
+    required this.assignedAt,
+    this.decidedAt,
+    this.note,
+  });
+
+  final int? id;
+  final int stepOrder;
+  final ApprovalApprover approver;
+  final ApprovalStatus status;
+  final DateTime assignedAt;
+  final DateTime? decidedAt;
+  final String? note;
+}
+
+class ApprovalApprover {
+  ApprovalApprover({
+    required this.id,
+    required this.employeeNo,
+    required this.name,
+  });
+
+  final int id;
+  final String employeeNo;
+  final String name;
+}
+
+class ApprovalHistory {
+  ApprovalHistory({
+    this.id,
+    required this.action,
+    this.fromStatus,
+    required this.toStatus,
+    required this.approver,
+    required this.actionAt,
+    this.note,
+  });
+
+  final int? id;
+  final ApprovalAction action;
+  final ApprovalStatus? fromStatus;
+  final ApprovalStatus toStatus;
+  final ApprovalApprover approver;
+  final DateTime actionAt;
+  final String? note;
+}
+
+class ApprovalAction {
+  ApprovalAction({required this.id, required this.name});
+
+  final int id;
+  final String name;
+}
+
+/// 결재 단계에서 수행 가능한 행위 타입
+///
+/// - API `approval_actions` 테이블의 대표 코드와 매핑된다.
+/// - UI에서는 이 타입을 기반으로 표시 라벨과 권한을 제어한다.
+enum ApprovalStepActionType { approve, reject, comment }
+
+extension ApprovalStepActionTypeX on ApprovalStepActionType {
+  /// API 호출 시 사용되는 행위 코드
+  String get code {
+    switch (this) {
+      case ApprovalStepActionType.approve:
+        return 'approve';
+      case ApprovalStepActionType.reject:
+        return 'reject';
+      case ApprovalStepActionType.comment:
+        return 'comment';
+    }
+  }
+}
+
+/// 결재 생성 입력 모델
+class ApprovalInput {
+  ApprovalInput({required this.transactionId, this.note});
+
+  final int transactionId;
+  final String? note;
+
+  Map<String, dynamic> toPayload() {
+    return {'transaction_id': transactionId, 'note': note};
+  }
+}
+
+/// 결재 단계 행위 입력 모델
+///
+/// - `POST /approval-steps/{id}/actions` 요청 바디를 구성한다.
+/// - `note`는 비고가 있을 때만 포함한다.
+class ApprovalStepActionInput {
+  ApprovalStepActionInput({
+    required this.stepId,
+    required this.actionId,
+    this.note,
+  });
+
+  final int stepId;
+  final int actionId;
+  final String? note;
+
+  Map<String, dynamic> toPayload() {
+    return {
+      'id': stepId,
+      'approval_action_id': actionId,
+      if (note != null && note!.trim().isNotEmpty) 'note': note,
+    };
+  }
+}
+
+/// 결재 단계를 일괄 등록/재배치하기 위한 입력 모델
+class ApprovalStepAssignmentInput {
+  ApprovalStepAssignmentInput({
+    required this.approvalId,
+    required this.steps,
+  });
+
+  final int approvalId;
+  final List<ApprovalStepAssignmentItem> steps;
+
+  Map<String, dynamic> toPayload() {
+    return {
+      'id': approvalId,
+      'steps': steps.map((e) => e.toJson()).toList(),
+    };
+  }
+}
+
+class ApprovalStepAssignmentItem {
+  ApprovalStepAssignmentItem({
+    required this.stepOrder,
+    required this.approverId,
+    this.note,
+  });
+
+  final int stepOrder;
+  final int approverId;
+  final String? note;
+
+  Map<String, dynamic> toJson() {
+    return {
+      'step_order': stepOrder,
+      'approver_id': approverId,
+      if (note != null && note!.trim().isNotEmpty) 'note': note,
+    };
+  }
+}

lib/features/approvals/domain/entities/approval_template.dart

@@ -0,0 +1,64 @@
+/// 결재 템플릿 엔티티
+///
+/// - 반복되는 결재 단계를 사전에 정의해두고 요청 시 불러온다.
+class ApprovalTemplate {
+  ApprovalTemplate({
+    required this.id,
+    required this.code,
+    required this.name,
+    this.description,
+    required this.isActive,
+    this.createdBy,
+    this.createdAt,
+    this.updatedAt,
+    this.steps = const [],
+  });
+
+  final int id;
+  final String code;
+  final String name;
+  final String? description;
+  final bool isActive;
+  final ApprovalTemplateAuthor? createdBy;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+  final List<ApprovalTemplateStep> steps;
+}
+
+class ApprovalTemplateAuthor {
+  ApprovalTemplateAuthor({
+    required this.id,
+    required this.employeeNo,
+    required this.name,
+  });
+
+  final int id;
+  final String employeeNo;
+  final String name;
+}
+
+class ApprovalTemplateStep {
+  ApprovalTemplateStep({
+    this.id,
+    required this.stepOrder,
+    required this.approver,
+    this.note,
+  });
+
+  final int? id;
+  final int stepOrder;
+  final ApprovalTemplateApprover approver;
+  final String? note;
+}
+
+class ApprovalTemplateApprover {
+  ApprovalTemplateApprover({
+    required this.id,
+    required this.employeeNo,
+    required this.name,
+  });
+
+  final int id;
+  final String employeeNo;
+  final String name;
+}

lib/features/approvals/domain/repositories/approval_repository.dart

@@ -0,0 +1,39 @@
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../entities/approval.dart';
+
+abstract class ApprovalRepository {
+  Future<PaginatedResult<Approval>> list({
+    int page = 1,
+    int pageSize = 20,
+    String? query,
+    String? status,
+    DateTime? from,
+    DateTime? to,
+    bool includeHistories = false,
+    bool includeSteps = false,
+  });
+
+  Future<Approval> fetchDetail(
+    int id, {
+    bool includeSteps = true,
+    bool includeHistories = true,
+  });
+
+  /// 활성화된 결재 행위(approve/reject/comment 등) 목록 조회
+  Future<List<ApprovalAction>> listActions({bool activeOnly = true});
+
+  /// 결재 단계에 행위를 적용하고 최신 결재 정보를 반환
+  Future<Approval> performStepAction(ApprovalStepActionInput input);
+
+  /// 결재 단계 일괄 생성/재배치
+  Future<Approval> assignSteps(ApprovalStepAssignmentInput input);
+
+  Future<Approval> create(ApprovalInput input);
+
+  Future<Approval> update(int id, ApprovalInput input);
+
+  Future<void> delete(int id);
+
+  Future<Approval> restore(int id);
+}

lib/features/approvals/domain/repositories/approval_template_repository.dart

@@ -0,0 +1,7 @@
+import '../entities/approval_template.dart';
+
+abstract class ApprovalTemplateRepository {
+  Future<List<ApprovalTemplate>> list({bool activeOnly = true});
+
+  Future<ApprovalTemplate> fetchDetail(int id, {bool includeSteps = true});
+}

lib/features/approvals/history/presentation/pages/approval_history_page.dart

@@ -1,5 +1,10 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 
+import '../../../../../core/config/environment.dart';
+import '../../../../../core/constants/app_sections.dart';
+import '../../../../../widgets/app_layout.dart';
+import '../../../../../widgets/components/coming_soon_card.dart';
+import '../../../../../widgets/components/filter_bar.dart';
 import '../../../../../widgets/spec_page.dart';
 
 class ApprovalHistoryPage extends StatelessWidget {
@@ -7,6 +12,8 @@ class ApprovalHistoryPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final enabled = Environment.flag('FEATURE_APPROVALS_ENABLED');
+    if (!enabled) {
       return const SpecPage(
         title: '결재 이력 조회',
         summary: '결재 단계별 변경 이력을 조회합니다.',
@@ -44,4 +51,23 @@ class ApprovalHistoryPage extends StatelessWidget {
         ],
       );
     }
+
+    return AppLayout(
+      title: '결재 이력 조회',
+      subtitle: '결재 단계별 변경 기록을 확인할 수 있도록 준비 중입니다.',
+      breadcrumbs: const [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+        AppBreadcrumbItem(label: '결재', path: '/approvals/history'),
+        AppBreadcrumbItem(label: '결재 이력'),
+      ],
+      toolbar: FilterBar(
+        children: const [Text('이력 검색 조건은 API 사양 확정 후 제공될 예정입니다.')],
+      ),
+      child: const ComingSoonCard(
+        title: '결재 이력 화면 구현 준비 중',
+        description: '결재 단계 로그 API와 연동해 조건 검색 및 엑셀 내보내기를 제공할 예정입니다.',
+        items: ['결재번호/승인자/행위 유형별 필터', '기간·상태 조건 조합 검색', '다운로드(Excel/PDF) 기능'],
+      ),
+    );
+  }
 }

lib/features/approvals/presentation/controllers/approval_controller.dart

@@ -0,0 +1,319 @@
+import 'package:flutter/foundation.dart';
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../../domain/entities/approval.dart';
+import '../../domain/entities/approval_template.dart';
+import '../../domain/repositories/approval_repository.dart';
+import '../../domain/repositories/approval_template_repository.dart';
+
+enum ApprovalStatusFilter {
+  all,
+  pending,
+  inProgress,
+  onHold,
+  approved,
+  rejected,
+}
+
+typedef DateRange = ({DateTime from, DateTime to});
+
+const Map<ApprovalStepActionType, List<String>> _actionAliases = {
+  ApprovalStepActionType.approve: ['approve', '승인'],
+  ApprovalStepActionType.reject: ['reject', '반려'],
+  ApprovalStepActionType.comment: ['comment', '코멘트', '의견'],
+};
+
+/// 결재 목록 및 상세 화면 상태 컨트롤러
+///
+/// - 목록 조회/필터 상태와 선택된 결재 상세 데이터를 관리한다.
+/// - 승인/반려 등의 후속 액션은 추후 구현 시 추가한다.
+class ApprovalController extends ChangeNotifier {
+  ApprovalController({
+    required ApprovalRepository approvalRepository,
+    required ApprovalTemplateRepository templateRepository,
+  }) : _repository = approvalRepository,
+       _templateRepository = templateRepository;
+
+  final ApprovalRepository _repository;
+  final ApprovalTemplateRepository _templateRepository;
+
+  PaginatedResult<Approval>? _result;
+  Approval? _selected;
+  bool _isLoadingList = false;
+  bool _isLoadingDetail = false;
+  bool _isLoadingActions = false;
+  bool _isPerformingAction = false;
+  int? _processingStepId;
+  bool _isLoadingTemplates = false;
+  bool _isApplyingTemplate = false;
+  int? _applyingTemplateId;
+  String? _errorMessage;
+  String _query = '';
+  ApprovalStatusFilter _statusFilter = ApprovalStatusFilter.all;
+  DateTime? _fromDate;
+  DateTime? _toDate;
+  List<ApprovalAction> _actions = const [];
+  List<ApprovalTemplate> _templates = const [];
+
+  PaginatedResult<Approval>? get result => _result;
+  Approval? get selected => _selected;
+  bool get isLoadingList => _isLoadingList;
+  bool get isLoadingDetail => _isLoadingDetail;
+  bool get isLoadingActions => _isLoadingActions;
+  bool get isPerformingAction => _isPerformingAction;
+  int? get processingStepId => _processingStepId;
+  String? get errorMessage => _errorMessage;
+  String get query => _query;
+  ApprovalStatusFilter get statusFilter => _statusFilter;
+  DateTime? get fromDate => _fromDate;
+  DateTime? get toDate => _toDate;
+  List<ApprovalAction> get actionOptions => _actions;
+  bool get hasActionOptions => _actions.isNotEmpty;
+  List<ApprovalTemplate> get templates => _templates;
+  bool get isLoadingTemplates => _isLoadingTemplates;
+  bool get isApplyingTemplate => _isApplyingTemplate;
+  int? get applyingTemplateId => _applyingTemplateId;
+
+  Future<void> fetch({int page = 1}) async {
+    _isLoadingList = true;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final statusParam = switch (_statusFilter) {
+        ApprovalStatusFilter.all => null,
+        ApprovalStatusFilter.pending => 'pending',
+        ApprovalStatusFilter.inProgress => 'in_progress',
+        ApprovalStatusFilter.onHold => 'on_hold',
+        ApprovalStatusFilter.approved => 'approved',
+        ApprovalStatusFilter.rejected => 'rejected',
+      };
+      final response = await _repository.list(
+        page: page,
+        pageSize: _result?.pageSize ?? 20,
+        query: _query.isEmpty ? null : _query,
+        status: statusParam,
+        from: _fromDate,
+        to: _toDate,
+        includeSteps: false,
+        includeHistories: false,
+      );
+      _result = response;
+      if (_selected != null) {
+        final exists = response.items.any((item) => item.id == _selected?.id);
+        if (!exists) {
+          _selected = null;
+        }
+      }
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoadingList = false;
+      notifyListeners();
+    }
+  }
+
+  Future<void> loadActionOptions({bool force = false}) async {
+    if (_actions.isNotEmpty && !force) {
+      return;
+    }
+    _isLoadingActions = true;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final items = await _repository.listActions(activeOnly: true);
+      _actions = items;
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoadingActions = false;
+      notifyListeners();
+    }
+  }
+
+  Future<void> loadTemplates({bool force = false}) async {
+    if (_templates.isNotEmpty && !force) {
+      return;
+    }
+    _isLoadingTemplates = true;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final items = await _templateRepository.list(activeOnly: true);
+      _templates = items;
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoadingTemplates = false;
+      notifyListeners();
+    }
+  }
+
+  Future<void> selectApproval(int id) async {
+    _isLoadingDetail = true;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final detail = await _repository.fetchDetail(
+        id,
+        includeSteps: true,
+        includeHistories: true,
+      );
+      _selected = detail;
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoadingDetail = false;
+      notifyListeners();
+    }
+  }
+
+  void clearSelection() {
+    _selected = null;
+    notifyListeners();
+  }
+
+  Future<bool> performStepAction({
+    required ApprovalStep step,
+    required ApprovalStepActionType type,
+    String? note,
+  }) async {
+    if (step.id == null) {
+      _errorMessage = '단계 식별자가 없어 행위를 수행할 수 없습니다.';
+      notifyListeners();
+      return false;
+    }
+    final action = _findActionByType(type);
+    if (action == null) {
+      _errorMessage = '사용 가능한 결재 행위를 찾을 수 없습니다.';
+      notifyListeners();
+      return false;
+    }
+
+    _isPerformingAction = true;
+    _processingStepId = step.id;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final sanitizedNote = note?.trim();
+      final updated = await _repository.performStepAction(
+        ApprovalStepActionInput(
+          stepId: step.id!,
+          actionId: action.id,
+          note: sanitizedNote?.isEmpty ?? true ? null : sanitizedNote,
+        ),
+      );
+      _selected = updated;
+      if (_result != null && updated.id != null) {
+        final items = _result!.items
+            .map((item) => item.id == updated.id ? updated : item)
+            .toList();
+        _result = _result!.copyWith(items: items);
+      }
+      return true;
+    } catch (e) {
+      _errorMessage = e.toString();
+      return false;
+    } finally {
+      _isPerformingAction = false;
+      _processingStepId = null;
+      notifyListeners();
+    }
+  }
+
+  Future<bool> applyTemplate(int templateId) async {
+    final approvalId = _selected?.id;
+    if (approvalId == null) {
+      _errorMessage = '선택된 결재가 없어 템플릿을 적용할 수 없습니다.';
+      notifyListeners();
+      return false;
+    }
+
+    _isApplyingTemplate = true;
+    _applyingTemplateId = templateId;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final template = await _templateRepository.fetchDetail(
+        templateId,
+        includeSteps: true,
+      );
+      if (template.steps.isEmpty) {
+        _errorMessage = '선택한 템플릿에 등록된 단계가 없습니다.';
+        return false;
+      }
+
+      final sortedSteps = List.of(template.steps)
+        ..sort((a, b) => a.stepOrder.compareTo(b.stepOrder));
+      final input = ApprovalStepAssignmentInput(
+        approvalId: approvalId,
+        steps: sortedSteps
+            .map(
+              (step) => ApprovalStepAssignmentItem(
+                stepOrder: step.stepOrder,
+                approverId: step.approver.id,
+                note: step.note,
+              ),
+            )
+            .toList(),
+      );
+      final updated = await _repository.assignSteps(input);
+      _selected = updated;
+      if (_result != null && updated.id != null) {
+        final items = _result!.items
+            .map((item) => item.id == updated.id ? updated : item)
+            .toList();
+        _result = _result!.copyWith(items: items);
+      }
+      return true;
+    } catch (e) {
+      _errorMessage = e.toString();
+      return false;
+    } finally {
+      _isApplyingTemplate = false;
+      _applyingTemplateId = null;
+      notifyListeners();
+    }
+  }
+
+  void updateQuery(String value) {
+    _query = value;
+    notifyListeners();
+  }
+
+  void updateStatusFilter(ApprovalStatusFilter filter) {
+    _statusFilter = filter;
+    notifyListeners();
+  }
+
+  void updateDateRange(DateTime? from, DateTime? to) {
+    _fromDate = from;
+    _toDate = to;
+    notifyListeners();
+  }
+
+  void clearFilters() {
+    _query = '';
+    _statusFilter = ApprovalStatusFilter.all;
+    _fromDate = null;
+    _toDate = null;
+    notifyListeners();
+  }
+
+  void clearError() {
+    _errorMessage = null;
+    notifyListeners();
+  }
+
+  ApprovalAction? _findActionByType(ApprovalStepActionType type) {
+    final aliases = _actionAliases[type] ?? [type.code];
+    for (final action in _actions) {
+      final normalized = action.name.toLowerCase();
+      for (final alias in aliases) {
+        if (normalized == alias.toLowerCase()) {
+          return action;
+        }
+      }
+    }
+    return null;
+  }
+}

lib/features/approvals/request/presentation/pages/approval_request_page.dart

@@ -1,59 +1,12 @@
 import 'package:flutter/widgets.dart';
 
-import '../../../../../widgets/spec_page.dart';
+import '../../../presentation/pages/approval_page.dart';
 
 class ApprovalRequestPage extends StatelessWidget {
   const ApprovalRequestPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const SpecPage(
+    return const ApprovalPage();
-      title: '결재 관리',
-      summary: '결재 번호와 상태, 상신자를 확인하고 결재 플로우를 제어합니다.',
-      sections: [
-        SpecSection(
-          title: '입력 폼',
-          items: [
-            '트랜잭션번호 [Dropdown]',
-            '결재번호 [자동생성]',
-            '결재상태 [Dropdown]',
-            '상신자 [자동]',
-            '비고 [Text]',
-          ],
-        ),
-        SpecSection(
-          title: '수정 폼',
-          items: ['결재번호 [ReadOnly]', '상신자 [ReadOnly]', '요청일시 [ReadOnly]'],
-        ),
-        SpecSection(
-          title: '테이블 리스트',
-          description: '1행 예시',
-          table: SpecTable(
-            columns: [
-              '번호',
-              '결재번호',
-              '트랜잭션번호',
-              '상태',
-              '상신자',
-              '요청일시',
-              '최종결정일시',
-              '비고',
-            ],
-            rows: [
-              [
-                '1',
-                'APP-20240301-001',
-                'IN-20240301-001',
-                '승인대기',
-                '홍길동',
-                '2024-03-01 09:00',
-                '-',
-                '-',
-              ],
-            ],
-          ),
-        ),
-      ],
-    );
   }
 }

lib/features/approvals/step/presentation/pages/approval_step_page.dart

@@ -1,5 +1,11 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
 
+import '../../../../../core/config/environment.dart';
+import '../../../../../core/constants/app_sections.dart';
+import '../../../../../widgets/app_layout.dart';
+import '../../../../../widgets/components/coming_soon_card.dart';
+import '../../../../../widgets/components/filter_bar.dart';
 import '../../../../../widgets/spec_page.dart';
 
 class ApprovalStepPage extends StatelessWidget {
@@ -7,6 +13,8 @@ class ApprovalStepPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final enabled = Environment.flag('FEATURE_APPROVALS_ENABLED');
+    if (!enabled) {
       return const SpecPage(
         title: '결재 단계 관리',
         summary: '결재 단계 순서와 승인자를 구성합니다.',
@@ -29,7 +37,16 @@ class ApprovalStepPage extends StatelessWidget {
             title: '테이블 리스트',
             description: '1행 예시',
             table: SpecTable(
-            columns: ['번호', '결재ID', '단계순서', '승인자', '상태', '배정일시', '결정일시', '비고'],
+              columns: [
+                '번호',
+                '결재ID',
+                '단계순서',
+                '승인자',
+                '상태',
+                '배정일시',
+                '결정일시',
+                '비고',
+              ],
               rows: [
                 [
                   '1',
@@ -47,4 +64,30 @@ class ApprovalStepPage extends StatelessWidget {
         ],
       );
     }
+
+    return AppLayout(
+      title: '결재 단계 관리',
+      subtitle: '결재 순서를 정의하고 승인자를 배정할 수 있도록 준비 중입니다.',
+      breadcrumbs: const [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+        AppBreadcrumbItem(label: '결재', path: '/approvals/steps'),
+        AppBreadcrumbItem(label: '결재 단계'),
+      ],
+      actions: [
+        ShadButton(
+          onPressed: null,
+          leading: const Icon(LucideIcons.plus, size: 16),
+          child: const Text('단계 추가'),
+        ),
+      ],
+      toolbar: FilterBar(
+        children: const [Text('필터 구성은 결재 단계 API 확정 후 제공될 예정입니다.')],
+      ),
+      child: const ComingSoonCard(
+        title: '결재 단계 화면 구현 준비 중',
+        description: '결재 단계 CRUD와 템플릿 연동 요구사항을 정리하는 중입니다.',
+        items: ['결재 요청별 단계 조회 및 정렬', '승인자 지정과 단계 상태 변경', '템플릿에서 단계 일괄 불러오기'],
+      ),
+    );
+  }
 }

lib/features/approvals/template/presentation/pages/approval_template_page.dart

@@ -1,5 +1,11 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
 
+import '../../../../../core/config/environment.dart';
+import '../../../../../core/constants/app_sections.dart';
+import '../../../../../widgets/app_layout.dart';
+import '../../../../../widgets/components/coming_soon_card.dart';
+import '../../../../../widgets/components/filter_bar.dart';
 import '../../../../../widgets/spec_page.dart';
 
 class ApprovalTemplatePage extends StatelessWidget {
@@ -7,6 +13,8 @@ class ApprovalTemplatePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final enabled = Environment.flag('FEATURE_APPROVALS_ENABLED');
+    if (!enabled) {
       return const SpecPage(
         title: '결재 템플릿 관리',
         summary: '반복적인 결재 흐름을 템플릿으로 정의합니다.',
@@ -48,4 +56,30 @@ class ApprovalTemplatePage extends StatelessWidget {
         ],
       );
     }
+
+    return AppLayout(
+      title: '결재 템플릿 관리',
+      subtitle: '반복되는 결재 단계를 템플릿으로 구성할 수 있도록 준비 중입니다.',
+      breadcrumbs: const [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+        AppBreadcrumbItem(label: '결재', path: '/approvals/templates'),
+        AppBreadcrumbItem(label: '결재 템플릿'),
+      ],
+      actions: [
+        ShadButton(
+          onPressed: null,
+          leading: const Icon(LucideIcons.plus, size: 16),
+          child: const Text('템플릿 생성'),
+        ),
+      ],
+      toolbar: FilterBar(
+        children: const [Text('템플릿 검색/필터 UI는 결재 요구사항 확정 후 제공됩니다.')],
+      ),
+      child: const ComingSoonCard(
+        title: '결재 템플릿 화면 구현 준비 중',
+        description: '템플릿 헤더 정보와 단계 반복 입력을 다루는 UI를 설계하고 있습니다.',
+        items: ['템플릿 목록 정렬 및 사용여부 토글', '단계 편집/추가/삭제 인터랙션', '템플릿 버전 관리 및 배포 전략'],
+      ),
+    );
+  }
 }

lib/features/inventory/inbound/presentation/pages/inbound_page.dart

@@ -1,6 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
 class InboundPage extends StatefulWidget {
   const InboundPage({super.key});
 
@@ -43,55 +47,28 @@ class _InboundPageState extends State<InboundPage> {
     final theme = ShadTheme.of(context);
     final filtered = _filteredRecords;
 
-    return SingleChildScrollView(
+    return AppLayout(
-      padding: const EdgeInsets.all(24),
+      title: '입고 관리',
-      child: Column(
+      subtitle: '입고 처리, 라인 품목, 상태를 한 화면에서 확인하고 관리합니다.',
-        crossAxisAlignment: CrossAxisAlignment.start,
+      breadcrumbs: const [
-        children: [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-          Row(
+        AppBreadcrumbItem(label: '입·출고', path: '/inventory/inbound'),
-            crossAxisAlignment: CrossAxisAlignment.start,
+        AppBreadcrumbItem(label: '입고'),
-            children: [
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('입고 관리', style: theme.textTheme.h2),
-                    const SizedBox(height: 6),
-                    Text(
-                      '입고 처리, 라인 품목, 상태를 한 화면에서 확인하고 관리합니다.',
-                      style: theme.textTheme.muted,
-                    ),
       ],
-                ),
+      actions: [
-              ),
-              Row(
-                children: [
         ShadButton(
           leading: const Icon(LucideIcons.plus, size: 16),
           onPressed: _handleCreate,
           child: const Text('입고 등록'),
         ),
-                  const SizedBox(width: 12),
         ShadButton.outline(
           leading: const Icon(LucideIcons.pencil, size: 16),
-                    onPressed: _selectedRecord == null
+          onPressed:
-                        ? null
+              _selectedRecord == null ? null : () => _handleEdit(_selectedRecord!),
-                        : () => _handleEdit(_selectedRecord!),
           child: const Text('선택 항목 수정'),
         ),
       ],
-              ),
+      toolbar: FilterBar(
-            ],
-          ),
-          const SizedBox(height: 24),
-          ShadCard(
-            title: Text('검색 필터', style: theme.textTheme.h3),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Wrap(
-                  spacing: 16,
-                  runSpacing: 16,
         children: [
           SizedBox(
             width: 260,
@@ -128,10 +105,9 @@ class _InboundPageState extends State<InboundPage> {
             ),
         ],
       ),
-              ],
+      child: Column(
-            ),
+        crossAxisAlignment: CrossAxisAlignment.start,
-          ),
+        children: [
-          const SizedBox(height: 24),
           ShadCard(
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -158,18 +134,21 @@ class _InboundPageState extends State<InboundPage> {
                           .toList(),
                       children: [
                         for (final record in filtered)
-                          _buildRecordRow(record).map(
+                          _buildRecordRow(record)
+                              .map(
                                 (value) => ShadTableCell(
                                   child: Text(
                                     value,
                                     overflow: TextOverflow.ellipsis,
                                   ),
                                 ),
-                          ),
+                              )
+                              .toList(),
                       ],
                       columnSpanExtent: (index) =>
                           const FixedTableSpanExtent(140),
-                      rowSpanExtent: (index) => const FixedTableSpanExtent(56),
+                      rowSpanExtent: (index) =>
+                          const FixedTableSpanExtent(56),
                       onRowTap: (rowIndex) {
                         setState(() {
                           _selectedRecord = filtered[rowIndex];

lib/features/inventory/outbound/presentation/pages/outbound_page.dart

@@ -1,6 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
 class OutboundPage extends StatefulWidget {
   const OutboundPage({super.key});
 
@@ -50,55 +54,28 @@ class _OutboundPageState extends State<OutboundPage> {
     final theme = ShadTheme.of(context);
     final filtered = _filteredRecords;
 
-    return SingleChildScrollView(
+    return AppLayout(
-      padding: const EdgeInsets.all(24),
+      title: '출고 관리',
-      child: Column(
+      subtitle: '출고 처리, 고객사 연결, 품목 라인을 실시간으로 확인합니다.',
-        crossAxisAlignment: CrossAxisAlignment.start,
+      breadcrumbs: const [
-        children: [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-          Row(
+        AppBreadcrumbItem(label: '입·출고', path: '/inventory/outbound'),
-            crossAxisAlignment: CrossAxisAlignment.start,
+        AppBreadcrumbItem(label: '출고'),
-            children: [
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('출고 관리', style: theme.textTheme.h2),
-                    const SizedBox(height: 6),
-                    Text(
-                      '출고 처리, 고객사 연결, 품목 라인을 실시간으로 확인합니다.',
-                      style: theme.textTheme.muted,
-                    ),
       ],
-                ),
+      actions: [
-              ),
-              Row(
-                children: [
         ShadButton(
           leading: const Icon(LucideIcons.plus, size: 16),
           onPressed: _handleCreate,
           child: const Text('출고 등록'),
         ),
-                  const SizedBox(width: 12),
         ShadButton.outline(
           leading: const Icon(LucideIcons.pencil, size: 16),
-                    onPressed: _selectedRecord == null
+          onPressed:
-                        ? null
+              _selectedRecord == null ? null : () => _handleEdit(_selectedRecord!),
-                        : () => _handleEdit(_selectedRecord!),
           child: const Text('선택 항목 수정'),
         ),
       ],
-              ),
+      toolbar: FilterBar(
-            ],
-          ),
-          const SizedBox(height: 24),
-          ShadCard(
-            title: Text('검색 필터', style: theme.textTheme.h3),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Wrap(
-                  spacing: 16,
-                  runSpacing: 16,
         children: [
           SizedBox(
             width: 260,
@@ -135,10 +112,9 @@ class _OutboundPageState extends State<OutboundPage> {
             ),
         ],
       ),
-              ],
+      child: Column(
-            ),
+        crossAxisAlignment: CrossAxisAlignment.start,
-          ),
+        children: [
-          const SizedBox(height: 24),
           ShadCard(
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,

lib/features/inventory/rental/presentation/pages/rental_page.dart

@@ -1,6 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
 class RentalPage extends StatefulWidget {
   const RentalPage({super.key});
 
@@ -51,35 +55,20 @@ class _RentalPageState extends State<RentalPage> {
     final theme = ShadTheme.of(context);
     final filtered = _filteredRecords;
 
-    return SingleChildScrollView(
+    return AppLayout(
-      padding: const EdgeInsets.all(24),
+      title: '대여 관리',
-      child: Column(
+      subtitle: '대여/반납 구분, 반납 예정일, 고객사 현황을 확인합니다.',
-        crossAxisAlignment: CrossAxisAlignment.start,
+      breadcrumbs: const [
-        children: [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-          Row(
+        AppBreadcrumbItem(label: '입·출고', path: '/inventory/rental'),
-            crossAxisAlignment: CrossAxisAlignment.start,
+        AppBreadcrumbItem(label: '대여'),
-            children: [
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('대여 관리', style: theme.textTheme.h2),
-                    const SizedBox(height: 6),
-                    Text(
-                      '대여/반납 구분, 반납 예정일, 고객사 현황을 확인합니다.',
-                      style: theme.textTheme.muted,
-                    ),
       ],
-                ),
+      actions: [
-              ),
-              Row(
-                children: [
         ShadButton(
           leading: const Icon(LucideIcons.plus, size: 16),
           onPressed: _handleCreate,
           child: const Text('대여 등록'),
         ),
-                  const SizedBox(width: 12),
         ShadButton.outline(
           leading: const Icon(LucideIcons.pencil, size: 16),
           onPressed: _selectedRecord == null
@@ -88,18 +77,7 @@ class _RentalPageState extends State<RentalPage> {
           child: const Text('선택 항목 수정'),
         ),
       ],
-              ),
+      toolbar: FilterBar(
-            ],
-          ),
-          const SizedBox(height: 24),
-          ShadCard(
-            title: Text('검색 필터', style: theme.textTheme.h3),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Wrap(
-                  spacing: 16,
-                  runSpacing: 16,
         children: [
           SizedBox(
             width: 260,
@@ -136,10 +114,9 @@ class _RentalPageState extends State<RentalPage> {
             ),
         ],
       ),
-              ],
+      child: Column(
-            ),
+        crossAxisAlignment: CrossAxisAlignment.start,
-          ),
+        children: [
-          const SizedBox(height: 24),
           ShadCard(
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,

lib/features/masters/customer/presentation/pages/customer_page.dart

@@ -2,6 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:get_it/get_it.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
 import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
 import '../../domain/entities/customer.dart';
@@ -137,45 +141,28 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
+        final showReset = _searchController.text.isNotEmpty ||
-          padding: const EdgeInsets.all(24),
+            _controller.typeFilter != CustomerTypeFilter.all ||
-          child: Column(
+            _controller.statusFilter != CustomerStatusFilter.all;
-            crossAxisAlignment: CrossAxisAlignment.start,
+
-            children: [
+        return AppLayout(
-              Row(
+          title: '회사(고객사) 관리',
-                crossAxisAlignment: CrossAxisAlignment.start,
+          subtitle: '고객사 기본 정보와 연락처, 주소를 관리합니다.',
-                children: [
+          breadcrumbs: const [
-                  Expanded(
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-                    child: Column(
+            AppBreadcrumbItem(label: '마스터', path: '/masters/customers'),
-                      crossAxisAlignment: CrossAxisAlignment.start,
+            AppBreadcrumbItem(label: '고객사'),
-                      children: [
-                        Text('회사(고객사) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '고객사 기본 정보와 연락처, 주소를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
           ],
-                    ),
+          actions: [
-                  ),
-                  const SizedBox(width: 16),
             ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
               onPressed: _controller.isSubmitting
                   ? null
                   : () => _openCustomerForm(context),
               child: const Text('신규 등록'),
             ),
           ],
-              ),
+          toolbar: FilterBar(
-              const SizedBox(height: 24),
-              ShadCard(
-                title: Text('검색 및 필터', style: theme.textTheme.h3),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Wrap(
-                      spacing: 16,
-                      runSpacing: 16,
             children: [
               SizedBox(
                 width: 260,
@@ -230,15 +217,10 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
                 ),
               ),
               ShadButton.outline(
-                          onPressed: _controller.isLoading
+                onPressed: _controller.isLoading ? null : _applyFilters,
-                              ? null
-                              : _applyFilters,
                 child: const Text('검색 적용'),
               ),
-                        if (_searchController.text.isNotEmpty ||
+              if (showReset)
-                            _controller.typeFilter != CustomerTypeFilter.all ||
-                            _controller.statusFilter !=
-                                CustomerStatusFilter.all)
                 ShadButton.ghost(
                   onPressed: _controller.isLoading
                       ? null
@@ -246,9 +228,7 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
                           _searchController.clear();
                           _searchFocus.requestFocus();
                           _controller.updateQuery('');
-                                    _controller.updateTypeFilter(
+                          _controller.updateTypeFilter(CustomerTypeFilter.all);
-                                      CustomerTypeFilter.all,
-                                    );
                           _controller.updateStatusFilter(
                             CustomerStatusFilter.all,
                           );
@@ -258,11 +238,7 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
                 ),
             ],
           ),
-                  ],
+          child: ShadCard(
-                ),
-              ),
-              const SizedBox(height: 24),
-              ShadCard(
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -315,10 +291,8 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
                         customers: customers,
                         onEdit: _controller.isSubmitting
                             ? null
-                            : (customer) => _openCustomerForm(
+                            : (customer) =>
-                                context,
+                                  _openCustomerForm(context, customer: customer),
-                                customer: customer,
-                              ),
                         onDelete: _controller.isSubmitting
                             ? null
                             : _confirmDelete,
@@ -327,8 +301,6 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
                             : _restoreCustomer,
                       ),
           ),
-            ],
-          ),
         );
       },
     );

lib/features/masters/group/data/dtos/group_dto.dart

@@ -6,6 +6,7 @@ class GroupDto {
   GroupDto({
     this.id,
     required this.groupName,
+    this.description,
     this.isDefault = false,
     this.isActive = true,
     this.isDeleted = false,
@@ -16,6 +17,7 @@ class GroupDto {
 
   final int? id;
   final String groupName;
+  final String? description;
   final bool isDefault;
   final bool isActive;
   final bool isDeleted;
@@ -27,6 +29,7 @@ class GroupDto {
     return GroupDto(
       id: json['id'] as int?,
       groupName: json['group_name'] as String,
+      description: json['description'] as String?,
       isDefault: (json['is_default'] as bool?) ?? false,
       isActive: (json['is_active'] as bool?) ?? true,
       isDeleted: (json['is_deleted'] as bool?) ?? false,
@@ -39,6 +42,7 @@ class GroupDto {
   Group toEntity() => Group(
     id: id,
     groupName: groupName,
+    description: description,
     isDefault: isDefault,
     isActive: isActive,
     isDeleted: isDeleted,

lib/features/masters/group/data/repositories/group_repository_remote.dart

@@ -18,6 +18,7 @@ class GroupRepositoryRemote implements GroupRepository {
     int page = 1,
     int pageSize = 20,
     String? query,
+    bool? isDefault,
     bool? isActive,
   }) async {
     final response = await _api.get<Map<String, dynamic>>(
@@ -26,10 +27,48 @@ class GroupRepositoryRemote implements GroupRepository {
         'page': page,
         'page_size': pageSize,
         if (query != null && query.isNotEmpty) 'q': query,
+        if (isDefault != null) 'is_default': isDefault,
         if (isActive != null) 'is_active': isActive,
       },
       options: Options(responseType: ResponseType.json),
     );
     return GroupDto.parsePaginated(response.data ?? const {});
   }
+
+  @override
+  Future<Group> create(GroupInput input) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      _basePath,
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return GroupDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<Group> update(int id, GroupInput input) async {
+    final response = await _api.patch<Map<String, dynamic>>(
+      '$_basePath/$id',
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return GroupDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<void> delete(int id) async {
+    await _api.delete<void>('$_basePath/$id');
+  }
+
+  @override
+  Future<Group> restore(int id) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      '$_basePath/$id/restore',
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return GroupDto.fromJson(data).toEntity();
+  }
 }

lib/features/masters/group/domain/entities/group.dart

@@ -1,7 +1,12 @@
+/// 그룹(권한 집합) 엔티티
+///
+/// - SRP: 그룹의 속성 정보만 표현한다.
+/// - presentation/data 레이어의 구현 세부사항을 포함하지 않는다.
 class Group {
   Group({
     this.id,
     required this.groupName,
+    this.description,
     this.isDefault = false,
     this.isActive = true,
     this.isDeleted = false,
@@ -10,18 +15,35 @@ class Group {
     this.updatedAt,
   });
 
+  /// PK (null 이면 신규 생성)
   final int? id;
+
+  /// 그룹명
   final String groupName;
+
+  /// 그룹 설명(선택)
+  final String? description;
+
+  /// 기본 그룹 여부
   final bool isDefault;
+
+  /// 사용 여부
   final bool isActive;
+
+  /// 삭제 여부(소프트 삭제)
   final bool isDeleted;
+
+  /// 비고 메모
   final String? note;
+
+  /// 타임스탬프
   final DateTime? createdAt;
   final DateTime? updatedAt;
 
   Group copyWith({
     int? id,
     String? groupName,
+    String? description,
     bool? isDefault,
     bool? isActive,
     bool? isDeleted,
@@ -32,6 +54,7 @@ class Group {
     return Group(
       id: id ?? this.id,
       groupName: groupName ?? this.groupName,
+      description: description ?? this.description,
       isDefault: isDefault ?? this.isDefault,
       isActive: isActive ?? this.isActive,
       isDeleted: isDeleted ?? this.isDeleted,
@@ -41,3 +64,30 @@ class Group {
     );
   }
 }
+
+/// 그룹 생성/수정 입력 모델
+class GroupInput {
+  GroupInput({
+    required this.groupName,
+    this.description,
+    this.isDefault = false,
+    this.isActive = true,
+    this.note,
+  });
+
+  final String groupName;
+  final String? description;
+  final bool isDefault;
+  final bool isActive;
+  final String? note;
+
+  Map<String, dynamic> toPayload() {
+    return {
+      'group_name': groupName,
+      'description': description,
+      'is_default': isDefault,
+      'is_active': isActive,
+      'note': note,
+    };
+  }
+}

lib/features/masters/group/domain/repositories/group_repository.dart

@@ -3,10 +3,24 @@ import 'package:superport_v2/core/common/models/paginated_result.dart';
 import '../entities/group.dart';
 
 abstract class GroupRepository {
+  /// 그룹 목록 조회
   Future<PaginatedResult<Group>> list({
     int page = 1,
     int pageSize = 20,
     String? query,
+    bool? isDefault,
     bool? isActive,
   });
+
+  /// 그룹 신규 등록
+  Future<Group> create(GroupInput input);
+
+  /// 그룹 정보 수정
+  Future<Group> update(int id, GroupInput input);
+
+  /// 그룹 삭제(소프트)
+  Future<void> delete(int id);
+
+  /// 그룹 복구
+  Future<Group> restore(int id);
 }

lib/features/masters/group/presentation/controllers/group_controller.dart

@@ -0,0 +1,152 @@
+import 'package:flutter/foundation.dart';
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../../domain/entities/group.dart';
+import '../../domain/repositories/group_repository.dart';
+
+enum GroupDefaultFilter { all, defaultOnly, nonDefault }
+
+enum GroupStatusFilter { all, activeOnly, inactiveOnly }
+
+/// 그룹 마스터 화면 상태 컨트롤러
+///
+/// - 목록 조회 및 필터, 페이징 상태를 담당한다.
+/// - 생성/수정/삭제/복구 요청을 래핑하여 UI와 통신한다.
+class GroupController extends ChangeNotifier {
+  GroupController({required GroupRepository repository})
+    : _repository = repository;
+
+  final GroupRepository _repository;
+
+  PaginatedResult<Group>? _result;
+  bool _isLoading = false;
+  bool _isSubmitting = false;
+  String _query = '';
+  GroupDefaultFilter _defaultFilter = GroupDefaultFilter.all;
+  GroupStatusFilter _statusFilter = GroupStatusFilter.all;
+  String? _errorMessage;
+
+  PaginatedResult<Group>? get result => _result;
+  bool get isLoading => _isLoading;
+  bool get isSubmitting => _isSubmitting;
+  String get query => _query;
+  GroupDefaultFilter get defaultFilter => _defaultFilter;
+  GroupStatusFilter get statusFilter => _statusFilter;
+  String? get errorMessage => _errorMessage;
+
+  Future<void> fetch({int page = 1}) async {
+    _isLoading = true;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final isDefault = switch (_defaultFilter) {
+        GroupDefaultFilter.all => null,
+        GroupDefaultFilter.defaultOnly => true,
+        GroupDefaultFilter.nonDefault => false,
+      };
+      final isActive = switch (_statusFilter) {
+        GroupStatusFilter.all => null,
+        GroupStatusFilter.activeOnly => true,
+        GroupStatusFilter.inactiveOnly => false,
+      };
+      final response = await _repository.list(
+        page: page,
+        pageSize: _result?.pageSize ?? 20,
+        query: _query.isEmpty ? null : _query,
+        isDefault: isDefault,
+        isActive: isActive,
+      );
+      _result = response;
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoading = false;
+      notifyListeners();
+    }
+  }
+
+  void updateQuery(String value) {
+    _query = value;
+    notifyListeners();
+  }
+
+  void updateDefaultFilter(GroupDefaultFilter filter) {
+    _defaultFilter = filter;
+    notifyListeners();
+  }
+
+  void updateStatusFilter(GroupStatusFilter filter) {
+    _statusFilter = filter;
+    notifyListeners();
+  }
+
+  Future<Group?> create(GroupInput input) async {
+    _setSubmitting(true);
+    try {
+      final created = await _repository.create(input);
+      await fetch(page: 1);
+      return created;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<Group?> update(int id, GroupInput input) async {
+    _setSubmitting(true);
+    try {
+      final updated = await _repository.update(id, input);
+      await fetch(page: _result?.page ?? 1);
+      return updated;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<bool> delete(int id) async {
+    _setSubmitting(true);
+    try {
+      await _repository.delete(id);
+      await fetch(page: _result?.page ?? 1);
+      return true;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return false;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<Group?> restore(int id) async {
+    _setSubmitting(true);
+    try {
+      final restored = await _repository.restore(id);
+      await fetch(page: _result?.page ?? 1);
+      return restored;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  void clearError() {
+    _errorMessage = null;
+    notifyListeners();
+  }
+
+  void _setSubmitting(bool value) {
+    _isSubmitting = value;
+    notifyListeners();
+  }
+}

lib/features/masters/group/presentation/pages/group_page.dart

@@ -1,24 +1,49 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
+import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
+import '../../domain/entities/group.dart';
+import '../../domain/repositories/group_repository.dart';
+import '../controllers/group_controller.dart';
 
 class GroupPage extends StatelessWidget {
   const GroupPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const SpecPage(
+    final enabled = Environment.flag('FEATURE_GROUPS_ENABLED');
+    if (!enabled) {
+      return SpecPage(
         title: '그룹 관리',
-      summary: '권한 그룹 정의와 기본여부 설정을 제공합니다.',
+        summary: '권한 그룹 정의와 기본 여부 설정을 제공합니다.',
-      sections: [
+        trailing: ShadBadge(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Icon(LucideIcons.info, size: 14),
+                const SizedBox(width: 6),
+                Text('비활성화 (백엔드 준비 중)'),
+              ],
+            ),
+          ),
+        ),
+        sections: const [
           SpecSection(
             title: '입력 폼',
             items: [
               '그룹명 [Text]',
-            '그룹설명 [Text]',
+              '설명 [Textarea]',
               '기본여부 [Switch]',
               '사용여부 [Switch]',
-            '비고 [Text]',
+              '비고 [Textarea]',
             ],
           ),
           SpecSection(
@@ -38,4 +63,665 @@ class GroupPage extends StatelessWidget {
         ],
       );
     }
+
+    return const _GroupEnabledPage();
+  }
+}
+
+class _GroupEnabledPage extends StatefulWidget {
+  const _GroupEnabledPage();
+
+  @override
+  State<_GroupEnabledPage> createState() => _GroupEnabledPageState();
+}
+
+class _GroupEnabledPageState extends State<_GroupEnabledPage> {
+  late final GroupController _controller;
+  final TextEditingController _searchController = TextEditingController();
+  final FocusNode _searchFocus = FocusNode();
+  final DateFormat _dateFormat = DateFormat('yyyy-MM-dd HH:mm');
+  String? _lastError;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = GroupController(repository: GetIt.I<GroupRepository>())
+      ..addListener(_handleControllerUpdate);
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _controller.fetch();
+    });
+  }
+
+  void _handleControllerUpdate() {
+    final error = _controller.errorMessage;
+    if (error != null && error != _lastError && mounted) {
+      _lastError = error;
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(SnackBar(content: Text(error)));
+      _controller.clearError();
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.removeListener(_handleControllerUpdate);
+    _controller.dispose();
+    _searchController.dispose();
+    _searchFocus.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, _) {
+        final result = _controller.result;
+        final groups = result?.items ?? const <Group>[];
+        final totalCount = result?.total ?? 0;
+        final currentPage = result?.page ?? 1;
+        final totalPages = result == null || result.pageSize == 0
+            ? 1
+            : (result.total / result.pageSize).ceil().clamp(1, 9999);
+        final hasNext = result == null
+            ? false
+            : (result.page * result.pageSize) < result.total;
+
+        final showReset = _searchController.text.isNotEmpty ||
+            _controller.defaultFilter != GroupDefaultFilter.all ||
+            _controller.statusFilter != GroupStatusFilter.all;
+
+        return AppLayout(
+          title: '그룹 관리',
+          subtitle: '권한 그룹 정의와 기본 여부, 사용 상태를 관리합니다.',
+          breadcrumbs: const [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+            AppBreadcrumbItem(label: '마스터', path: '/masters/groups'),
+            AppBreadcrumbItem(label: '그룹'),
+          ],
+          actions: [
+            ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
+              onPressed:
+                  _controller.isSubmitting ? null : () => _openGroupForm(context),
+              child: const Text('신규 등록'),
+            ),
+          ],
+          toolbar: FilterBar(
+            children: [
+              SizedBox(
+                width: 260,
+                child: ShadInput(
+                  controller: _searchController,
+                  focusNode: _searchFocus,
+                  placeholder: const Text('그룹명, 설명 검색'),
+                  leading: const Icon(LucideIcons.search, size: 16),
+                  onSubmitted: (_) => _applyFilters(),
+                ),
+              ),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<GroupDefaultFilter>(
+                  key: ValueKey(_controller.defaultFilter),
+                  initialValue: _controller.defaultFilter,
+                  selectedOptionBuilder: (context, filter) =>
+                      Text(_defaultLabel(filter)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateDefaultFilter(value);
+                    _controller.fetch(page: 1);
+                  },
+                  options: GroupDefaultFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_defaultLabel(filter)),
+                        ),
+                      )
+                      .toList(),
+                ),
+              ),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<GroupStatusFilter>(
+                  key: ValueKey(_controller.statusFilter),
+                  initialValue: _controller.statusFilter,
+                  selectedOptionBuilder: (context, filter) =>
+                      Text(_statusLabel(filter)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateStatusFilter(value);
+                    _controller.fetch(page: 1);
+                  },
+                  options: GroupStatusFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_statusLabel(filter)),
+                        ),
+                      )
+                      .toList(),
+                ),
+              ),
+              ShadButton.outline(
+                onPressed: _controller.isLoading ? null : _applyFilters,
+                child: const Text('검색 적용'),
+              ),
+              if (showReset)
+                ShadButton.ghost(
+                  onPressed: _controller.isLoading
+                      ? null
+                      : () {
+                          _searchController.clear();
+                          _searchFocus.requestFocus();
+                          _controller.updateQuery('');
+                          _controller.updateDefaultFilter(
+                            GroupDefaultFilter.all,
+                          );
+                          _controller.updateStatusFilter(
+                            GroupStatusFilter.all,
+                          );
+                          _controller.fetch(page: 1);
+                        },
+                  child: const Text('초기화'),
+                ),
+            ],
+          ),
+          child: ShadCard(
+            title: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text('그룹 목록', style: theme.textTheme.h3),
+                Text('$totalCount건', style: theme.textTheme.muted),
+              ],
+            ),
+            footer: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  '페이지 $currentPage / $totalPages',
+                  style: theme.textTheme.small,
+                ),
+                Row(
+                  children: [
+                    ShadButton.outline(
+                      size: ShadButtonSize.sm,
+                      onPressed: _controller.isLoading || currentPage <= 1
+                          ? null
+                          : () => _controller.fetch(page: currentPage - 1),
+                      child: const Text('이전'),
+                    ),
+                    const SizedBox(width: 8),
+                    ShadButton.outline(
+                      size: ShadButtonSize.sm,
+                      onPressed: _controller.isLoading || !hasNext
+                          ? null
+                          : () => _controller.fetch(page: currentPage + 1),
+                      child: const Text('다음'),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+            child: _controller.isLoading
+                ? const Padding(
+                    padding: EdgeInsets.all(48),
+                    child: Center(child: CircularProgressIndicator()),
+                  )
+                : groups.isEmpty
+                    ? Padding(
+                        padding: const EdgeInsets.all(32),
+                        child: Text(
+                          '조건에 맞는 그룹이 없습니다.',
+                          style: theme.textTheme.muted,
+                        ),
+                      )
+                    : _GroupTable(
+                        groups: groups,
+                        dateFormat: _dateFormat,
+                        onEdit: _controller.isSubmitting
+                            ? null
+                            : (group) => _openGroupForm(context, group: group),
+                        onDelete: _controller.isSubmitting
+                            ? null
+                            : _confirmDelete,
+                        onRestore: _controller.isSubmitting
+                            ? null
+                            : _restoreGroup,
+                      ),
+          ),
+        );
+      },
+    );
+  }
+
+  void _applyFilters() {
+    _controller.updateQuery(_searchController.text.trim());
+    _controller.fetch(page: 1);
+  }
+
+  String _defaultLabel(GroupDefaultFilter filter) {
+    switch (filter) {
+      case GroupDefaultFilter.all:
+        return '전체(기본/일반)';
+      case GroupDefaultFilter.defaultOnly:
+        return '기본 그룹만';
+      case GroupDefaultFilter.nonDefault:
+        return '일반 그룹만';
+    }
+  }
+
+  String _statusLabel(GroupStatusFilter filter) {
+    switch (filter) {
+      case GroupStatusFilter.all:
+        return '전체(사용/미사용)';
+      case GroupStatusFilter.activeOnly:
+        return '사용중';
+      case GroupStatusFilter.inactiveOnly:
+        return '미사용';
+    }
+  }
+
+  Future<void> _openGroupForm(BuildContext context, {Group? group}) async {
+    final existingGroup = group;
+    final isEdit = existingGroup != null;
+    final groupId = existingGroup?.id;
+    if (isEdit && groupId == null) {
+      _showSnack('ID 정보가 없어 수정할 수 없습니다.');
+      return;
+    }
+
+    final nameController = TextEditingController(
+      text: existingGroup?.groupName ?? '',
+    );
+    final descriptionController = TextEditingController(
+      text: existingGroup?.description ?? '',
+    );
+    final noteController = TextEditingController(
+      text: existingGroup?.note ?? '',
+    );
+    final isDefaultNotifier = ValueNotifier<bool>(
+      existingGroup?.isDefault ?? false,
+    );
+    final isActiveNotifier = ValueNotifier<bool>(
+      existingGroup?.isActive ?? true,
+    );
+    final saving = ValueNotifier<bool>(false);
+    final nameError = ValueNotifier<String?>(null);
+
+    await showDialog<bool>(
+      context: context,
+      builder: (dialogContext) {
+        final theme = ShadTheme.of(dialogContext);
+        final materialTheme = Theme.of(dialogContext);
+        final navigator = Navigator.of(dialogContext);
+        return Dialog(
+          insetPadding: const EdgeInsets.all(24),
+          clipBehavior: Clip.antiAlias,
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 540),
+            child: ShadCard(
+              title: Text(
+                isEdit ? '그룹 수정' : '그룹 등록',
+                style: theme.textTheme.h3,
+              ),
+              description: Text(
+                '그룹 정보를 ${isEdit ? '수정' : '입력'}하세요.',
+                style: theme.textTheme.muted,
+              ),
+              footer: ValueListenableBuilder<bool>(
+                valueListenable: saving,
+                builder: (_, isSaving, __) {
+                  return Row(
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [
+                      ShadButton.ghost(
+                        onPressed: isSaving ? null : () => navigator.pop(false),
+                        child: const Text('취소'),
+                      ),
+                      const SizedBox(width: 12),
+                      ShadButton(
+                        onPressed: isSaving
+                            ? null
+                            : () async {
+                                final name = nameController.text.trim();
+                                final description = descriptionController.text
+                                    .trim();
+                                final note = noteController.text.trim();
+
+                                nameError.value = name.isEmpty
+                                    ? '그룹명을 입력하세요.'
+                                    : null;
+
+                                if (nameError.value != null) {
+                                  return;
+                                }
+
+                                saving.value = true;
+                                final input = GroupInput(
+                                  groupName: name,
+                                  description: description.isEmpty
+                                      ? null
+                                      : description,
+                                  isDefault: isDefaultNotifier.value,
+                                  isActive: isActiveNotifier.value,
+                                  note: note.isEmpty ? null : note,
+                                );
+                                final response = isEdit
+                                    ? await _controller.update(groupId!, input)
+                                    : await _controller.create(input);
+                                saving.value = false;
+                                if (response != null) {
+                                  if (!navigator.mounted) {
+                                    return;
+                                  }
+                                  if (mounted) {
+                                    _showSnack(
+                                      isEdit ? '그룹을 수정했습니다.' : '그룹을 등록했습니다.',
+                                    );
+                                  }
+                                  navigator.pop(true);
+                                }
+                              },
+                        child: Text(isEdit ? '저장' : '등록'),
+                      ),
+                    ],
+                  );
+                },
+              ),
+              child: SizedBox(
+                width: double.infinity,
+                child: SingleChildScrollView(
+                  padding: const EdgeInsets.only(right: 12),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      ValueListenableBuilder<String?>(
+                        valueListenable: nameError,
+                        builder: (_, errorText, __) {
+                          return _FormField(
+                            label: '그룹명',
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                ShadInput(
+                                  controller: nameController,
+                                  readOnly: isEdit,
+                                  onChanged: (_) {
+                                    if (nameController.text.trim().isNotEmpty) {
+                                      nameError.value = null;
+                                    }
+                                  },
+                                ),
+                                if (errorText != null)
+                                  Padding(
+                                    padding: const EdgeInsets.only(top: 6),
+                                    child: Text(
+                                      errorText,
+                                      style: theme.textTheme.small.copyWith(
+                                        color: materialTheme.colorScheme.error,
+                                      ),
+                                    ),
+                                  ),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      _FormField(
+                        label: '설명',
+                        child: ShadTextarea(controller: descriptionController),
+                      ),
+                      const SizedBox(height: 16),
+                      ValueListenableBuilder<bool>(
+                        valueListenable: isDefaultNotifier,
+                        builder: (_, value, __) {
+                          return _FormField(
+                            label: '기본여부',
+                            child: Row(
+                              children: [
+                                ShadSwitch(
+                                  value: value,
+                                  onChanged: saving.value
+                                      ? null
+                                      : (next) =>
+                                            isDefaultNotifier.value = next,
+                                ),
+                                const SizedBox(width: 8),
+                                Text(value ? '기본 그룹' : '일반 그룹'),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      ValueListenableBuilder<bool>(
+                        valueListenable: isActiveNotifier,
+                        builder: (_, value, __) {
+                          return _FormField(
+                            label: '사용여부',
+                            child: Row(
+                              children: [
+                                ShadSwitch(
+                                  value: value,
+                                  onChanged: saving.value
+                                      ? null
+                                      : (next) => isActiveNotifier.value = next,
+                                ),
+                                const SizedBox(width: 8),
+                                Text(value ? '사용' : '미사용'),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      _FormField(
+                        label: '비고',
+                        child: ShadTextarea(controller: noteController),
+                      ),
+                      if (isEdit) ...[
+                        const SizedBox(height: 20),
+                        Text(
+                          '생성일시: ${_formatDateTime(existingGroup.createdAt)}',
+                          style: theme.textTheme.small,
+                        ),
+                        const SizedBox(height: 4),
+                        Text(
+                          '수정일시: ${_formatDateTime(existingGroup.updatedAt)}',
+                          style: theme.textTheme.small,
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+
+    nameController.dispose();
+    descriptionController.dispose();
+    noteController.dispose();
+    isDefaultNotifier.dispose();
+    isActiveNotifier.dispose();
+    saving.dispose();
+    nameError.dispose();
+  }
+
+  Future<void> _confirmDelete(Group group) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (dialogContext) {
+        return AlertDialog(
+          title: const Text('그룹 삭제'),
+          content: Text('"${group.groupName}" 그룹을 삭제하시겠습니까?'),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(false),
+              child: const Text('취소'),
+            ),
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(true),
+              child: const Text('삭제'),
+            ),
+          ],
+        );
+      },
+    );
+
+    if (confirmed == true && group.id != null) {
+      final success = await _controller.delete(group.id!);
+      if (success && mounted) {
+        _showSnack('그룹을 삭제했습니다.');
+      }
+    }
+  }
+
+  Future<void> _restoreGroup(Group group) async {
+    if (group.id == null) return;
+    final restored = await _controller.restore(group.id!);
+    if (restored != null && mounted) {
+      _showSnack('그룹을 복구했습니다.');
+    }
+  }
+
+  void _showSnack(String message) {
+    if (!mounted) return;
+    ScaffoldMessenger.of(
+      context,
+    ).showSnackBar(SnackBar(content: Text(message)));
+  }
+
+  String _formatDateTime(DateTime? value) {
+    if (value == null) {
+      return '-';
+    }
+    return _dateFormat.format(value.toLocal());
+  }
+}
+
+class _GroupTable extends StatelessWidget {
+  const _GroupTable({
+    required this.groups,
+    required this.onEdit,
+    required this.onDelete,
+    required this.onRestore,
+    required this.dateFormat,
+  });
+
+  final List<Group> groups;
+  final void Function(Group group)? onEdit;
+  final void Function(Group group)? onDelete;
+  final void Function(Group group)? onRestore;
+  final DateFormat dateFormat;
+
+  @override
+  Widget build(BuildContext context) {
+    final header = [
+      'ID',
+      '그룹명',
+      '설명',
+      '기본',
+      '사용',
+      '삭제',
+      '비고',
+      '변경일시',
+      '동작',
+    ].map((text) => ShadTableCell.header(child: Text(text))).toList();
+
+    final rows = groups.map((group) {
+      final cells = [
+        group.id?.toString() ?? '-',
+        group.groupName,
+        (group.description?.isEmpty ?? true) ? '-' : group.description!,
+        group.isDefault ? 'Y' : 'N',
+        group.isActive ? 'Y' : 'N',
+        group.isDeleted ? 'Y' : '-',
+        (group.note?.isEmpty ?? true) ? '-' : group.note!,
+        group.updatedAt == null
+            ? '-'
+            : dateFormat.format(group.updatedAt!.toLocal()),
+      ].map((text) => ShadTableCell(child: Text(text))).toList();
+
+      cells.add(
+        ShadTableCell(
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              ShadButton.ghost(
+                size: ShadButtonSize.sm,
+                onPressed: onEdit == null ? null : () => onEdit!(group),
+                child: const Icon(LucideIcons.pencil, size: 16),
+              ),
+              const SizedBox(width: 8),
+              group.isDeleted
+                  ? ShadButton.ghost(
+                      size: ShadButtonSize.sm,
+                      onPressed: onRestore == null
+                          ? null
+                          : () => onRestore!(group),
+                      child: const Icon(LucideIcons.history, size: 16),
+                    )
+                  : ShadButton.ghost(
+                      size: ShadButtonSize.sm,
+                      onPressed: onDelete == null
+                          ? null
+                          : () => onDelete!(group),
+                      child: const Icon(LucideIcons.trash2, size: 16),
+                    ),
+            ],
+          ),
+        ),
+      );
+      return cells;
+    }).toList();
+
+    return SizedBox(
+      height: 56.0 * (groups.length + 1),
+      child: ShadTable.list(
+        header: header,
+        children: rows,
+        columnSpanExtent: (index) {
+          if (index == 8) {
+            return const FixedTableSpanExtent(160);
+          }
+          if (index == 2) {
+            return const FixedTableSpanExtent(220);
+          }
+          if (index == 6) {
+            return const FixedTableSpanExtent(200);
+          }
+          return const FixedTableSpanExtent(120);
+        },
+      ),
+    );
+  }
+}
+
+class _FormField extends StatelessWidget {
+  const _FormField({required this.label, required this.child});
+
+  final String label;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(label, style: theme.textTheme.small),
+        const SizedBox(height: 6),
+        child,
+      ],
+    );
+  }
 }

lib/features/masters/group_permission/data/dtos/group_permission_dto.dart

@@ -0,0 +1,127 @@
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../../domain/entities/group_permission.dart';
+
+class GroupPermissionDto {
+  GroupPermissionDto({
+    this.id,
+    required this.group,
+    required this.menu,
+    this.canCreate = false,
+    this.canRead = true,
+    this.canUpdate = false,
+    this.canDelete = false,
+    this.isActive = true,
+    this.isDeleted = false,
+    this.note,
+    this.createdAt,
+    this.updatedAt,
+  });
+
+  final int? id;
+  final GroupPermissionGroupDto group;
+  final GroupPermissionMenuDto menu;
+  final bool canCreate;
+  final bool canRead;
+  final bool canUpdate;
+  final bool canDelete;
+  final bool isActive;
+  final bool isDeleted;
+  final String? note;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+
+  factory GroupPermissionDto.fromJson(Map<String, dynamic> json) {
+    return GroupPermissionDto(
+      id: json['id'] as int?,
+      group: GroupPermissionGroupDto.fromJson(
+        (json['group'] as Map<String, dynamic>? ?? const {}),
+      ),
+      menu: GroupPermissionMenuDto.fromJson(
+        (json['menu'] as Map<String, dynamic>? ?? const {}),
+      ),
+      canCreate: (json['can_create'] as bool?) ?? false,
+      canRead: (json['can_read'] as bool?) ?? true,
+      canUpdate: (json['can_update'] as bool?) ?? false,
+      canDelete: (json['can_delete'] as bool?) ?? false,
+      isActive: (json['is_active'] as bool?) ?? true,
+      isDeleted: (json['is_deleted'] as bool?) ?? false,
+      note: json['note'] as String?,
+      createdAt: _parseDate(json['created_at']),
+      updatedAt: _parseDate(json['updated_at']),
+    );
+  }
+
+  GroupPermission toEntity() => GroupPermission(
+    id: id,
+    group: group.toEntity(),
+    menu: menu.toEntity(),
+    canCreate: canCreate,
+    canRead: canRead,
+    canUpdate: canUpdate,
+    canDelete: canDelete,
+    isActive: isActive,
+    isDeleted: isDeleted,
+    note: note,
+    createdAt: createdAt,
+    updatedAt: updatedAt,
+  );
+
+  static PaginatedResult<GroupPermission> parsePaginated(
+    Map<String, dynamic>? json,
+  ) {
+    final items = (json?['items'] as List<dynamic>? ?? [])
+        .whereType<Map<String, dynamic>>()
+        .map(GroupPermissionDto.fromJson)
+        .map((dto) => dto.toEntity())
+        .toList();
+    return PaginatedResult<GroupPermission>(
+      items: items,
+      page: json?['page'] as int? ?? 1,
+      pageSize: json?['page_size'] as int? ?? items.length,
+      total: json?['total'] as int? ?? items.length,
+    );
+  }
+}
+
+class GroupPermissionGroupDto {
+  GroupPermissionGroupDto({required this.id, required this.groupName});
+
+  final int id;
+  final String groupName;
+
+  factory GroupPermissionGroupDto.fromJson(Map<String, dynamic> json) {
+    return GroupPermissionGroupDto(
+      id: json['id'] as int? ?? json['group_id'] as int,
+      groupName:
+          json['group_name'] as String? ?? json['name'] as String? ?? '-',
+    );
+  }
+
+  GroupPermissionGroup toEntity() =>
+      GroupPermissionGroup(id: id, groupName: groupName);
+}
+
+class GroupPermissionMenuDto {
+  GroupPermissionMenuDto({required this.id, required this.menuName});
+
+  final int id;
+  final String menuName;
+
+  factory GroupPermissionMenuDto.fromJson(Map<String, dynamic> json) {
+    return GroupPermissionMenuDto(
+      id: json['id'] as int? ?? json['menu_id'] as int,
+      menuName: json['menu_name'] as String? ?? json['name'] as String? ?? '-',
+    );
+  }
+
+  GroupPermissionMenu toEntity() =>
+      GroupPermissionMenu(id: id, menuName: menuName);
+}
+
+DateTime? _parseDate(Object? value) {
+  if (value == null) return null;
+  if (value is DateTime) return value;
+  if (value is String) return DateTime.tryParse(value);
+  return null;
+}

lib/features/masters/group_permission/data/repositories/group_permission_repository_remote.dart

@@ -0,0 +1,78 @@
+import 'package:dio/dio.dart';
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/core/network/api_client.dart';
+
+import '../../domain/entities/group_permission.dart';
+import '../../domain/repositories/group_permission_repository.dart';
+import '../dtos/group_permission_dto.dart';
+
+class GroupPermissionRepositoryRemote implements GroupPermissionRepository {
+  GroupPermissionRepositoryRemote({required ApiClient apiClient})
+    : _api = apiClient;
+
+  final ApiClient _api;
+
+  static const _basePath = '/group-menu-permissions';
+
+  @override
+  Future<PaginatedResult<GroupPermission>> list({
+    int page = 1,
+    int pageSize = 20,
+    int? groupId,
+    int? menuId,
+    bool? isActive,
+    bool includeDeleted = false,
+  }) async {
+    final response = await _api.get<Map<String, dynamic>>(
+      _basePath,
+      query: {
+        'page': page,
+        'page_size': pageSize,
+        if (groupId != null) 'group_id': groupId,
+        if (menuId != null) 'menu_id': menuId,
+        if (isActive != null) 'is_active': isActive,
+        if (includeDeleted) 'include_deleted': true,
+        'include': 'group,menu',
+      },
+      options: Options(responseType: ResponseType.json),
+    );
+    return GroupPermissionDto.parsePaginated(response.data ?? const {});
+  }
+
+  @override
+  Future<GroupPermission> create(GroupPermissionInput input) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      _basePath,
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return GroupPermissionDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<GroupPermission> update(int id, GroupPermissionInput input) async {
+    final response = await _api.patch<Map<String, dynamic>>(
+      '$_basePath/$id',
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return GroupPermissionDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<void> delete(int id) async {
+    await _api.delete<void>('$_basePath/$id');
+  }
+
+  @override
+  Future<GroupPermission> restore(int id) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      '$_basePath/$id/restore',
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return GroupPermissionDto.fromJson(data).toEntity();
+  }
+}

lib/features/masters/group_permission/domain/entities/group_permission.dart

@@ -0,0 +1,113 @@
+/// 그룹-메뉴 권한 엔티티
+///
+/// - 그룹과 메뉴별 CRUD 권한을 표현한다.
+/// - presentation/data 레이어 세부 사항에 의존하지 않는다.
+class GroupPermission {
+  GroupPermission({
+    this.id,
+    required this.group,
+    required this.menu,
+    this.canCreate = false,
+    this.canRead = true,
+    this.canUpdate = false,
+    this.canDelete = false,
+    this.isActive = true,
+    this.isDeleted = false,
+    this.note,
+    this.createdAt,
+    this.updatedAt,
+  });
+
+  final int? id;
+  final GroupPermissionGroup group;
+  final GroupPermissionMenu menu;
+  final bool canCreate;
+  final bool canRead;
+  final bool canUpdate;
+  final bool canDelete;
+  final bool isActive;
+  final bool isDeleted;
+  final String? note;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+
+  GroupPermission copyWith({
+    int? id,
+    GroupPermissionGroup? group,
+    GroupPermissionMenu? menu,
+    bool? canCreate,
+    bool? canRead,
+    bool? canUpdate,
+    bool? canDelete,
+    bool? isActive,
+    bool? isDeleted,
+    String? note,
+    DateTime? createdAt,
+    DateTime? updatedAt,
+  }) {
+    return GroupPermission(
+      id: id ?? this.id,
+      group: group ?? this.group,
+      menu: menu ?? this.menu,
+      canCreate: canCreate ?? this.canCreate,
+      canRead: canRead ?? this.canRead,
+      canUpdate: canUpdate ?? this.canUpdate,
+      canDelete: canDelete ?? this.canDelete,
+      isActive: isActive ?? this.isActive,
+      isDeleted: isDeleted ?? this.isDeleted,
+      note: note ?? this.note,
+      createdAt: createdAt ?? this.createdAt,
+      updatedAt: updatedAt ?? this.updatedAt,
+    );
+  }
+}
+
+class GroupPermissionGroup {
+  GroupPermissionGroup({required this.id, required this.groupName});
+
+  final int id;
+  final String groupName;
+}
+
+class GroupPermissionMenu {
+  GroupPermissionMenu({required this.id, required this.menuName});
+
+  final int id;
+  final String menuName;
+}
+
+/// 그룹 권한 생성/수정 입력 모델
+class GroupPermissionInput {
+  GroupPermissionInput({
+    required this.groupId,
+    required this.menuId,
+    this.canCreate = false,
+    this.canRead = true,
+    this.canUpdate = false,
+    this.canDelete = false,
+    this.isActive = true,
+    this.note,
+  });
+
+  final int groupId;
+  final int menuId;
+  final bool canCreate;
+  final bool canRead;
+  final bool canUpdate;
+  final bool canDelete;
+  final bool isActive;
+  final String? note;
+
+  Map<String, dynamic> toPayload() {
+    return {
+      'group_id': groupId,
+      'menu_id': menuId,
+      'can_create': canCreate,
+      'can_read': canRead,
+      'can_update': canUpdate,
+      'can_delete': canDelete,
+      'is_active': isActive,
+      'note': note,
+    };
+  }
+}

lib/features/masters/group_permission/domain/repositories/group_permission_repository.dart

@@ -0,0 +1,22 @@
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../entities/group_permission.dart';
+
+abstract class GroupPermissionRepository {
+  Future<PaginatedResult<GroupPermission>> list({
+    int page = 1,
+    int pageSize = 20,
+    int? groupId,
+    int? menuId,
+    bool? isActive,
+    bool includeDeleted = false,
+  });
+
+  Future<GroupPermission> create(GroupPermissionInput input);
+
+  Future<GroupPermission> update(int id, GroupPermissionInput input);
+
+  Future<void> delete(int id);
+
+  Future<GroupPermission> restore(int id);
+}

lib/features/masters/group_permission/presentation/controllers/group_permission_controller.dart

@@ -0,0 +1,208 @@
+import 'package:flutter/foundation.dart';
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../../../group/domain/entities/group.dart';
+import '../../../group/domain/repositories/group_repository.dart';
+import '../../../menu/domain/entities/menu.dart';
+import '../../../menu/domain/repositories/menu_repository.dart';
+import '../../domain/entities/group_permission.dart';
+import '../../domain/repositories/group_permission_repository.dart';
+
+enum GroupPermissionStatusFilter { all, activeOnly, inactiveOnly }
+
+/// 그룹-메뉴 권한 화면용 컨트롤러
+///
+/// - 목록/필터 상태를 관리하고, CRUD/복구 동작을 래핑한다.
+/// - 그룹/메뉴 선택을 위해 참조 데이터를 로드한다.
+class GroupPermissionController extends ChangeNotifier {
+  GroupPermissionController({
+    required GroupPermissionRepository permissionRepository,
+    required GroupRepository groupRepository,
+    required MenuRepository menuRepository,
+  }) : _permissionRepository = permissionRepository,
+       _groupRepository = groupRepository,
+       _menuRepository = menuRepository;
+
+  final GroupPermissionRepository _permissionRepository;
+  final GroupRepository _groupRepository;
+  final MenuRepository _menuRepository;
+
+  PaginatedResult<GroupPermission>? _result;
+  bool _isLoading = false;
+  bool _isSubmitting = false;
+  bool _isLoadingGroups = false;
+  bool _isLoadingMenus = false;
+  String? _errorMessage;
+  GroupPermissionStatusFilter _statusFilter = GroupPermissionStatusFilter.all;
+  int? _groupFilter;
+  int? _menuFilter;
+  bool _includeDeleted = false;
+  final List<Group> _groups = [];
+  final List<MenuItem> _menus = [];
+
+  PaginatedResult<GroupPermission>? get result => _result;
+  bool get isLoading => _isLoading;
+  bool get isSubmitting => _isSubmitting;
+  bool get isLoadingGroups => _isLoadingGroups;
+  bool get isLoadingMenus => _isLoadingMenus;
+  String? get errorMessage => _errorMessage;
+  GroupPermissionStatusFilter get statusFilter => _statusFilter;
+  int? get groupFilter => _groupFilter;
+  int? get menuFilter => _menuFilter;
+  bool get includeDeleted => _includeDeleted;
+  List<Group> get groups => List.unmodifiable(_groups);
+  List<MenuItem> get menus => List.unmodifiable(_menus);
+
+  Future<void> loadGroups() async {
+    _isLoadingGroups = true;
+    notifyListeners();
+    try {
+      final response = await _groupRepository.list(page: 1, pageSize: 200);
+      _groups
+        ..clear()
+        ..addAll(response.items);
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoadingGroups = false;
+      notifyListeners();
+    }
+  }
+
+  Future<void> loadMenus() async {
+    _isLoadingMenus = true;
+    notifyListeners();
+    try {
+      final response = await _menuRepository.list(
+        page: 1,
+        pageSize: 200,
+        includeDeleted: false,
+      );
+      _menus
+        ..clear()
+        ..addAll(response.items);
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoadingMenus = false;
+      notifyListeners();
+    }
+  }
+
+  Future<void> fetch({int page = 1}) async {
+    _isLoading = true;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final isActive = switch (_statusFilter) {
+        GroupPermissionStatusFilter.all => null,
+        GroupPermissionStatusFilter.activeOnly => true,
+        GroupPermissionStatusFilter.inactiveOnly => false,
+      };
+      final response = await _permissionRepository.list(
+        page: page,
+        pageSize: _result?.pageSize ?? 20,
+        groupId: _groupFilter,
+        menuId: _menuFilter,
+        isActive: isActive,
+        includeDeleted: _includeDeleted,
+      );
+      _result = response;
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoading = false;
+      notifyListeners();
+    }
+  }
+
+  void updateGroupFilter(int? groupId) {
+    _groupFilter = groupId;
+    notifyListeners();
+  }
+
+  void updateMenuFilter(int? menuId) {
+    _menuFilter = menuId;
+    notifyListeners();
+  }
+
+  void updateStatusFilter(GroupPermissionStatusFilter filter) {
+    _statusFilter = filter;
+    notifyListeners();
+  }
+
+  void updateIncludeDeleted(bool value) {
+    _includeDeleted = value;
+    notifyListeners();
+  }
+
+  Future<GroupPermission?> create(GroupPermissionInput input) async {
+    _setSubmitting(true);
+    try {
+      final created = await _permissionRepository.create(input);
+      await fetch(page: 1);
+      return created;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<GroupPermission?> update(int id, GroupPermissionInput input) async {
+    _setSubmitting(true);
+    try {
+      final updated = await _permissionRepository.update(id, input);
+      await fetch(page: _result?.page ?? 1);
+      return updated;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<bool> delete(int id) async {
+    _setSubmitting(true);
+    try {
+      await _permissionRepository.delete(id);
+      await fetch(page: _result?.page ?? 1);
+      return true;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return false;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<GroupPermission?> restore(int id) async {
+    _setSubmitting(true);
+    try {
+      final restored = await _permissionRepository.restore(id);
+      await fetch(page: _result?.page ?? 1);
+      return restored;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  void clearError() {
+    _errorMessage = null;
+    notifyListeners();
+  }
+
+  void _setSubmitting(bool value) {
+    _isSubmitting = value;
+    notifyListeners();
+  }
+}

lib/features/masters/group_permission/presentation/pages/group_permission_page.dart

@@ -1,16 +1,46 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+import 'package:intl/intl.dart' as intl;
+import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
+import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
+import '../../../group/domain/entities/group.dart';
+import '../../../group/domain/repositories/group_repository.dart';
+import '../../../menu/domain/entities/menu.dart';
+import '../../../menu/domain/repositories/menu_repository.dart';
+import '../../domain/entities/group_permission.dart';
+import '../../domain/repositories/group_permission_repository.dart';
+import '../controllers/group_permission_controller.dart';
 
 class GroupPermissionPage extends StatelessWidget {
   const GroupPermissionPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const SpecPage(
+    final enabled = Environment.flag('FEATURE_GROUP_PERMISSIONS_ENABLED');
-      title: '그룹 메뉴 권한 관리',
+    if (!enabled) {
-      summary: '그룹별 메뉴 접근과 CRUD 권한을 설정합니다.',
+      return SpecPage(
-      sections: [
+        title: '그룹 권한 관리',
+        summary: '그룹과 메뉴별 CRUD 권한을 확인하고 수정합니다.',
+        trailing: ShadBadge(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: const [
+                Icon(LucideIcons.info, size: 14),
+                SizedBox(width: 6),
+                Text('비활성화 (백엔드 준비 중)'),
+              ],
+            ),
+          ),
+        ),
+        sections: const [
           SpecSection(
             title: '입력 폼',
             items: [
@@ -21,9 +51,13 @@ class GroupPermissionPage extends StatelessWidget {
               '수정권한 [Checkbox]',
               '삭제권한 [Checkbox]',
               '사용여부 [Switch]',
+              '비고 [Text]',
             ],
           ),
-        SpecSection(title: '수정 폼', items: ['그룹 [ReadOnly]', '메뉴 [ReadOnly]']),
+          SpecSection(
+            title: '수정 폼',
+            items: ['그룹 [ReadOnly]', '메뉴 [ReadOnly]', '생성일시 [ReadOnly]'],
+          ),
           SpecSection(
             title: '테이블 리스트',
             description: '1행 예시',
@@ -37,14 +71,896 @@ class GroupPermissionPage extends StatelessWidget {
                 '수정',
                 '삭제',
                 '사용여부',
+                '비고',
                 '변경일시',
               ],
               rows: [
-              ['1', '관리자', '대시보드', 'Y', 'Y', 'Y', 'Y', 'Y', '2024-03-01 10:00'],
+                [
+                  '1',
+                  '관리자',
+                  '대시보드',
+                  'Y',
+                  'Y',
+                  'Y',
+                  'Y',
+                  'Y',
+                  '-',
+                  '2024-03-01 10:00',
+                ],
               ],
             ),
           ),
         ],
       );
     }
+
+    return const _GroupPermissionEnabledPage();
+  }
+}
+
+class _GroupPermissionEnabledPage extends StatefulWidget {
+  const _GroupPermissionEnabledPage();
+
+  @override
+  State<_GroupPermissionEnabledPage> createState() =>
+      _GroupPermissionEnabledPageState();
+}
+
+class _GroupPermissionEnabledPageState
+    extends State<_GroupPermissionEnabledPage> {
+  late final GroupPermissionController _controller;
+  final TextEditingController _searchController = TextEditingController();
+  final FocusNode _searchFocus = FocusNode();
+  final intl.DateFormat _dateFormat = intl.DateFormat('yyyy-MM-dd HH:mm');
+  String? _lastError;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = GroupPermissionController(
+      permissionRepository: GetIt.I<GroupPermissionRepository>(),
+      groupRepository: GetIt.I<GroupRepository>(),
+      menuRepository: GetIt.I<MenuRepository>(),
+    )..addListener(_handleControllerUpdate);
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      await _controller.loadGroups();
+      await _controller.loadMenus();
+      await _controller.fetch();
+    });
+  }
+
+  void _handleControllerUpdate() {
+    final error = _controller.errorMessage;
+    if (error != null && error != _lastError && mounted) {
+      _lastError = error;
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(SnackBar(content: Text(error)));
+      _controller.clearError();
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.removeListener(_handleControllerUpdate);
+    _controller.dispose();
+    _searchController.dispose();
+    _searchFocus.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, _) {
+        final result = _controller.result;
+        final permissions = result?.items ?? const <GroupPermission>[];
+        final totalCount = result?.total ?? 0;
+        final currentPage = result?.page ?? 1;
+        final totalPages = result == null || result.pageSize == 0
+            ? 1
+            : (result.total / result.pageSize).ceil().clamp(1, 9999);
+        final hasNext = result == null
+            ? false
+            : (result.page * result.pageSize) < result.total;
+
+        final showReset = _searchController.text.isNotEmpty ||
+            _controller.groupFilter != null ||
+            _controller.menuFilter != null ||
+            _controller.statusFilter != GroupPermissionStatusFilter.all ||
+            _controller.includeDeleted;
+
+        return AppLayout(
+          title: '그룹 권한 관리',
+          subtitle: '그룹별 메뉴 CRUD 권한을 체크박스로 관리합니다.',
+          breadcrumbs: const [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+            AppBreadcrumbItem(label: '마스터', path: '/masters/group-permissions'),
+            AppBreadcrumbItem(label: '그룹 권한'),
+          ],
+          actions: [
+            ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
+              onPressed: _controller.isSubmitting
+                  ? null
+                  : () => _openPermissionForm(context),
+              child: const Text('신규 등록'),
+            ),
+          ],
+          toolbar: FilterBar(
+            children: [
+              SizedBox(
+                width: 260,
+                child: ShadInput(
+                  controller: _searchController,
+                  focusNode: _searchFocus,
+                  placeholder: const Text('그룹/메뉴/비고 검색'),
+                  leading: const Icon(LucideIcons.search, size: 16),
+                  onSubmitted: (_) => _applyFilters(),
+                ),
+              ),
+              SizedBox(
+                width: 220,
+                child: ShadSelect<int?>(
+                  key: ValueKey(_controller.groupFilter),
+                  initialValue: _controller.groupFilter,
+                  placeholder: Text(
+                    _controller.groups.isEmpty
+                        ? '그룹 로딩중...'
+                        : '그룹 전체',
+                  ),
+                  selectedOptionBuilder: (context, value) {
+                    if (value == null) {
+                      return Text(
+                        _controller.groups.isEmpty
+                            ? '그룹 로딩중...'
+                            : '그룹 전체',
+                      );
+                    }
+                    final group = _controller.groups.firstWhere(
+                      (g) => g.id == value,
+                      orElse: () => Group(id: value, groupName: ''),
+                    );
+                    return Text(group.groupName);
+                  },
+                  onChanged: (value) {
+                    _controller.updateGroupFilter(value);
+                  },
+                  options: [
+                    const ShadOption<int?>(
+                      value: null,
+                      child: Text('그룹 전체'),
+                    ),
+                    ..._controller.groups.map(
+                      (group) => ShadOption<int?>(
+                        value: group.id,
+                        child: Text(group.groupName),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              SizedBox(
+                width: 220,
+                child: ShadSelect<int?>(
+                  key: ValueKey(_controller.menuFilter),
+                  initialValue: _controller.menuFilter,
+                  placeholder: Text(
+                    _controller.menus.isEmpty
+                        ? '메뉴 로딩중...'
+                        : '메뉴 전체',
+                  ),
+                  selectedOptionBuilder: (context, value) {
+                    if (value == null) {
+                      return Text(
+                        _controller.menus.isEmpty
+                            ? '메뉴 로딩중...'
+                            : '메뉴 전체',
+                      );
+                    }
+                    final menuItem = _controller.menus.firstWhere(
+                      (m) => m.id == value,
+                      orElse: () => MenuItem(
+                        id: value,
+                        menuCode: '',
+                        menuName: '',
+                      ),
+                    );
+                    return Text(menuItem.menuName);
+                  },
+                  onChanged: (value) {
+                    _controller.updateMenuFilter(value);
+                  },
+                  options: [
+                    const ShadOption<int?>(
+                      value: null,
+                      child: Text('메뉴 전체'),
+                    ),
+                    ..._controller.menus.map(
+                      (menuItem) => ShadOption<int?>(
+                        value: menuItem.id,
+                        child: Text(menuItem.menuName),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<GroupPermissionStatusFilter>(
+                  key: ValueKey(_controller.statusFilter),
+                  initialValue: _controller.statusFilter,
+                  selectedOptionBuilder: (context, filter) =>
+                      Text(_statusLabel(filter)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateStatusFilter(value);
+                  },
+                  options: GroupPermissionStatusFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_statusLabel(filter)),
+                        ),
+                      )
+                      .toList(),
+                ),
+              ),
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  ShadSwitch(
+                    value: _controller.includeDeleted,
+                    onChanged: (value) {
+                      _controller.updateIncludeDeleted(value);
+                    },
+                  ),
+                  const SizedBox(width: 8),
+                  const Text('삭제 포함'),
+                ],
+              ),
+              ShadButton.outline(
+                onPressed: _controller.isLoading ? null : _applyFilters,
+                child: const Text('검색 적용'),
+              ),
+              if (showReset)
+                ShadButton.ghost(
+                  onPressed: _controller.isLoading
+                      ? null
+                      : () {
+                          _searchController.clear();
+                          _searchFocus.requestFocus();
+                          _controller.updateGroupFilter(null);
+                          _controller.updateMenuFilter(null);
+                          _controller.updateIncludeDeleted(false);
+                          _controller.fetch(page: 1);
+                        },
+                  child: const Text('초기화'),
+                ),
+            ],
+          ),
+          child: ShadCard(
+            title: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text('그룹 권한 목록', style: theme.textTheme.h3),
+                Text('$totalCount건', style: theme.textTheme.muted),
+              ],
+            ),
+            footer: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  '페이지 $currentPage / $totalPages',
+                  style: theme.textTheme.small,
+                ),
+                Row(
+                  children: [
+                    ShadButton.outline(
+                      size: ShadButtonSize.sm,
+                      onPressed: _controller.isLoading || currentPage <= 1
+                          ? null
+                          : () => _controller.fetch(page: currentPage - 1),
+                      child: const Text('이전'),
+                    ),
+                    const SizedBox(width: 8),
+                    ShadButton.outline(
+                      size: ShadButtonSize.sm,
+                      onPressed: _controller.isLoading || !hasNext
+                          ? null
+                          : () => _controller.fetch(page: currentPage + 1),
+                      child: const Text('다음'),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+            child: _controller.isLoading
+                ? const Padding(
+                    padding: EdgeInsets.all(48),
+                    child: Center(child: CircularProgressIndicator()),
+                  )
+                : permissions.isEmpty
+                    ? Padding(
+                        padding: const EdgeInsets.all(32),
+                        child: Text(
+                          '조건에 맞는 권한이 없습니다.',
+                          style: theme.textTheme.muted,
+                        ),
+                      )
+                    : _PermissionTable(
+                        permissions: permissions,
+                        dateFormat: _dateFormat,
+                        onEdit: _controller.isSubmitting
+                            ? null
+                            : (permission) =>
+                                  _openPermissionForm(context, permission: permission),
+                        onDelete: _controller.isSubmitting
+                            ? null
+                            : _confirmDelete,
+                        onRestore: _controller.isSubmitting
+                            ? null
+                            : _restorePermission,
+                      ),
+          ),
+        );
+      },
+    );
+  }
+
+  void _applyFilters() {
+    _controller.fetch(page: 1);
+  }
+
+  String _statusLabel(GroupPermissionStatusFilter filter) {
+    switch (filter) {
+      case GroupPermissionStatusFilter.all:
+        return '전체(사용/미사용)';
+      case GroupPermissionStatusFilter.activeOnly:
+        return '사용중';
+      case GroupPermissionStatusFilter.inactiveOnly:
+        return '미사용';
+    }
+  }
+
+  Future<void> _openPermissionForm(
+    BuildContext context, {
+    GroupPermission? permission,
+  }) async {
+    final isEdit = permission != null;
+    final permissionId = permission?.id;
+    if (isEdit && permissionId == null) {
+      _showSnack('ID 정보가 없어 수정할 수 없습니다.');
+      return;
+    }
+
+    final groupNotifier = ValueNotifier<int?>(permission?.group.id);
+    final menuNotifier = ValueNotifier<int?>(permission?.menu.id);
+    final createNotifier = ValueNotifier<bool>(permission?.canCreate ?? false);
+    final readNotifier = ValueNotifier<bool>(permission?.canRead ?? true);
+    final updateNotifier = ValueNotifier<bool>(permission?.canUpdate ?? false);
+    final deleteNotifier = ValueNotifier<bool>(permission?.canDelete ?? false);
+    final activeNotifier = ValueNotifier<bool>(permission?.isActive ?? true);
+    final noteController = TextEditingController(text: permission?.note ?? '');
+    final saving = ValueNotifier<bool>(false);
+    final groupError = ValueNotifier<String?>(null);
+    final menuError = ValueNotifier<String?>(null);
+
+    await showDialog<bool>(
+      context: context,
+      builder: (dialogContext) {
+        final theme = ShadTheme.of(dialogContext);
+        final materialTheme = Theme.of(dialogContext);
+        final navigator = Navigator.of(dialogContext);
+        return Dialog(
+          insetPadding: const EdgeInsets.all(24),
+          clipBehavior: Clip.antiAlias,
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 600),
+            child: ShadCard(
+              title: Text(
+                isEdit ? '권한 수정' : '권한 등록',
+                style: theme.textTheme.h3,
+              ),
+              description: Text(
+                '그룹과 메뉴의 권한을 ${isEdit ? '수정' : '등록'}하세요.',
+                style: theme.textTheme.muted,
+              ),
+              footer: ValueListenableBuilder<bool>(
+                valueListenable: saving,
+                builder: (_, isSaving, __) {
+                  return Row(
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [
+                      ShadButton.ghost(
+                        onPressed: isSaving ? null : () => navigator.pop(false),
+                        child: const Text('취소'),
+                      ),
+                      const SizedBox(width: 12),
+                      ShadButton(
+                        onPressed: isSaving
+                            ? null
+                            : () async {
+                                final groupId = groupNotifier.value;
+                                final menuId = menuNotifier.value;
+                                groupError.value = groupId == null
+                                    ? '그룹을 선택하세요.'
+                                    : null;
+                                menuError.value = menuId == null
+                                    ? '메뉴를 선택하세요.'
+                                    : null;
+                                if (groupError.value != null ||
+                                    menuError.value != null) {
+                                  return;
+                                }
+
+                                saving.value = true;
+                                final input = GroupPermissionInput(
+                                  groupId: groupId!,
+                                  menuId: menuId!,
+                                  canCreate: createNotifier.value,
+                                  canRead: readNotifier.value,
+                                  canUpdate: updateNotifier.value,
+                                  canDelete: deleteNotifier.value,
+                                  isActive: activeNotifier.value,
+                                  note: noteController.text.trim().isEmpty
+                                      ? null
+                                      : noteController.text.trim(),
+                                );
+                                final response = isEdit
+                                    ? await _controller.update(
+                                        permissionId!,
+                                        input,
+                                      )
+                                    : await _controller.create(input);
+                                saving.value = false;
+                                if (response != null) {
+                                  if (!navigator.mounted) {
+                                    return;
+                                  }
+                                  if (mounted) {
+                                    _showSnack(
+                                      isEdit ? '권한을 수정했습니다.' : '권한을 등록했습니다.',
+                                    );
+                                  }
+                                  navigator.pop(true);
+                                }
+                              },
+                        child: Text(isEdit ? '저장' : '등록'),
+                      ),
+                    ],
+                  );
+                },
+              ),
+              child: SizedBox(
+                width: double.infinity,
+                child: SingleChildScrollView(
+                  padding: const EdgeInsets.only(right: 12),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      ValueListenableBuilder<String?>(
+                        valueListenable: groupError,
+                        builder: (_, errorText, __) {
+                          return _FormField(
+                            label: '그룹',
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                ShadSelect<int?>(
+                                  initialValue: groupNotifier.value,
+                                  placeholder: const Text('그룹을 선택하세요'),
+                                  selectedOptionBuilder: (context, value) {
+                                    if (value == null) {
+                                      return const Text('그룹을 선택하세요');
+                                    }
+                                    final groupId = value;
+                                    final group = _controller.groups.firstWhere(
+                                      (g) => g.id == groupId,
+                                      orElse: () =>
+                                          Group(id: groupId, groupName: ''),
+                                    );
+                                    return Text(
+                                      group.groupName.isEmpty
+                                          ? '그룹을 선택하세요'
+                                          : group.groupName,
+                                    );
+                                  },
+                                  onChanged: saving.value || isEdit
+                                      ? null
+                                      : (value) {
+                                          groupNotifier.value = value;
+                                          if (value != null) {
+                                            groupError.value = null;
+                                          }
+                                        },
+                                  options: [
+                                    ..._controller.groups.map(
+                                      (group) => ShadOption<int?>(
+                                        value: group.id,
+                                        child: Text(group.groupName),
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                                if (errorText != null)
+                                  Padding(
+                                    padding: const EdgeInsets.only(top: 6),
+                                    child: Text(
+                                      errorText,
+                                      style: theme.textTheme.small.copyWith(
+                                        color: materialTheme.colorScheme.error,
+                                      ),
+                                    ),
+                                  ),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      ValueListenableBuilder<String?>(
+                        valueListenable: menuError,
+                        builder: (_, errorText, __) {
+                          return _FormField(
+                            label: '메뉴',
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                ShadSelect<int?>(
+                                  initialValue: menuNotifier.value,
+                                  placeholder: const Text('메뉴를 선택하세요'),
+                                  selectedOptionBuilder: (context, value) {
+                                    if (value == null) {
+                                      return const Text('메뉴를 선택하세요');
+                                    }
+                                    final menuId = value;
+                                    final menu = _controller.menus.firstWhere(
+                                      (m) => m.id == menuId,
+                                      orElse: () => MenuItem(
+                                        id: menuId,
+                                        menuCode: '',
+                                        menuName: '',
+                                      ),
+                                    );
+                                    return Text(
+                                      menu.menuName.isEmpty
+                                          ? '메뉴를 선택하세요'
+                                          : menu.menuName,
+                                    );
+                                  },
+                                  onChanged: saving.value || isEdit
+                                      ? null
+                                      : (value) {
+                                          menuNotifier.value = value;
+                                          if (value != null) {
+                                            menuError.value = null;
+                                          }
+                                        },
+                                  options: [
+                                    ..._controller.menus.map(
+                                      (menu) => ShadOption<int?>(
+                                        value: menu.id,
+                                        child: Text(menu.menuName),
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                                if (errorText != null)
+                                  Padding(
+                                    padding: const EdgeInsets.only(top: 6),
+                                    child: Text(
+                                      errorText,
+                                      style: theme.textTheme.small.copyWith(
+                                        color: materialTheme.colorScheme.error,
+                                      ),
+                                    ),
+                                  ),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 20),
+                      _PermissionToggleRow(
+                        label: '생성권한',
+                        notifier: createNotifier,
+                        enabled: !saving.value,
+                      ),
+                      const SizedBox(height: 12),
+                      _PermissionToggleRow(
+                        label: '조회권한',
+                        notifier: readNotifier,
+                        enabled: !saving.value,
+                      ),
+                      const SizedBox(height: 12),
+                      _PermissionToggleRow(
+                        label: '수정권한',
+                        notifier: updateNotifier,
+                        enabled: !saving.value,
+                      ),
+                      const SizedBox(height: 12),
+                      _PermissionToggleRow(
+                        label: '삭제권한',
+                        notifier: deleteNotifier,
+                        enabled: !saving.value,
+                      ),
+                      const SizedBox(height: 16),
+                      ValueListenableBuilder<bool>(
+                        valueListenable: activeNotifier,
+                        builder: (_, value, __) {
+                          return _FormField(
+                            label: '사용여부',
+                            child: Row(
+                              children: [
+                                ShadSwitch(
+                                  value: value,
+                                  onChanged: saving.value
+                                      ? null
+                                      : (next) => activeNotifier.value = next,
+                                ),
+                                const SizedBox(width: 8),
+                                Text(value ? '사용' : '미사용'),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      _FormField(
+                        label: '비고',
+                        child: ShadTextarea(controller: noteController),
+                      ),
+                      if (isEdit) ...[
+                        const SizedBox(height: 20),
+                        Text(
+                          '생성일시: ${_formatDateTime(permission.createdAt)}',
+                          style: theme.textTheme.small,
+                        ),
+                        const SizedBox(height: 4),
+                        Text(
+                          '수정일시: ${_formatDateTime(permission.updatedAt)}',
+                          style: theme.textTheme.small,
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+
+    groupNotifier.dispose();
+    menuNotifier.dispose();
+    createNotifier.dispose();
+    readNotifier.dispose();
+    updateNotifier.dispose();
+    deleteNotifier.dispose();
+    activeNotifier.dispose();
+    noteController.dispose();
+    saving.dispose();
+    groupError.dispose();
+    menuError.dispose();
+  }
+
+  Future<void> _confirmDelete(GroupPermission permission) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (dialogContext) {
+        return AlertDialog(
+          title: const Text('권한 삭제'),
+          content: Text(
+            '"${permission.group.groupName}" → "${permission.menu.menuName}" 권한을 삭제하시겠습니까?',
+          ),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(false),
+              child: const Text('취소'),
+            ),
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(true),
+              child: const Text('삭제'),
+            ),
+          ],
+        );
+      },
+    );
+
+    if (confirmed == true && permission.id != null) {
+      final success = await _controller.delete(permission.id!);
+      if (success && mounted) {
+        _showSnack('권한을 삭제했습니다.');
+      }
+    }
+  }
+
+  Future<void> _restorePermission(GroupPermission permission) async {
+    if (permission.id == null) return;
+    final restored = await _controller.restore(permission.id!);
+    if (restored != null && mounted) {
+      _showSnack('권한을 복구했습니다.');
+    }
+  }
+
+  void _showSnack(String message) {
+    if (!mounted) return;
+    ScaffoldMessenger.of(
+      context,
+    ).showSnackBar(SnackBar(content: Text(message)));
+  }
+
+  String _formatDateTime(DateTime? value) {
+    if (value == null) {
+      return '-';
+    }
+    return _dateFormat.format(value.toLocal());
+  }
+}
+
+class _PermissionTable extends StatelessWidget {
+  const _PermissionTable({
+    required this.permissions,
+    required this.dateFormat,
+    required this.onEdit,
+    required this.onDelete,
+    required this.onRestore,
+  });
+
+  final List<GroupPermission> permissions;
+  final intl.DateFormat dateFormat;
+  final void Function(GroupPermission permission)? onEdit;
+  final void Function(GroupPermission permission)? onDelete;
+  final void Function(GroupPermission permission)? onRestore;
+
+  @override
+  Widget build(BuildContext context) {
+    final header = [
+      'ID',
+      '그룹명',
+      '메뉴명',
+      '생성',
+      '조회',
+      '수정',
+      '삭제',
+      '사용',
+      '삭제',
+      '비고',
+      '변경일시',
+      '동작',
+    ].map((text) => ShadTableCell.header(child: Text(text))).toList();
+
+    final rows = permissions.map((permission) {
+      final cells = [
+        permission.id?.toString() ?? '-',
+        permission.group.groupName,
+        permission.menu.menuName,
+        permission.canCreate ? 'Y' : '-',
+        permission.canRead ? 'Y' : '-',
+        permission.canUpdate ? 'Y' : '-',
+        permission.canDelete ? 'Y' : '-',
+        permission.isActive ? 'Y' : 'N',
+        permission.isDeleted ? 'Y' : '-',
+        permission.note?.isEmpty ?? true ? '-' : permission.note!,
+        permission.updatedAt == null
+            ? '-'
+            : dateFormat.format(permission.updatedAt!.toLocal()),
+      ].map((text) => ShadTableCell(child: Text(text))).toList();
+
+      cells.add(
+        ShadTableCell(
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              ShadButton.ghost(
+                size: ShadButtonSize.sm,
+                onPressed: onEdit == null ? null : () => onEdit!(permission),
+                child: const Icon(LucideIcons.pencil, size: 16),
+              ),
+              const SizedBox(width: 8),
+              permission.isDeleted
+                  ? ShadButton.ghost(
+                      size: ShadButtonSize.sm,
+                      onPressed: onRestore == null
+                          ? null
+                          : () => onRestore!(permission),
+                      child: const Icon(LucideIcons.history, size: 16),
+                    )
+                  : ShadButton.ghost(
+                      size: ShadButtonSize.sm,
+                      onPressed: onDelete == null
+                          ? null
+                          : () => onDelete!(permission),
+                      child: const Icon(LucideIcons.trash2, size: 16),
+                    ),
+            ],
+          ),
+        ),
+      );
+
+      return cells;
+    }).toList();
+
+    return SizedBox(
+      height: 56.0 * (permissions.length + 1),
+      child: ShadTable.list(
+        header: header,
+        children: rows,
+        columnSpanExtent: (index) {
+          switch (index) {
+            case 1:
+            case 2:
+              return const FixedTableSpanExtent(180);
+            case 9:
+              return const FixedTableSpanExtent(220);
+            case 11:
+              return const FixedTableSpanExtent(160);
+            default:
+              return const FixedTableSpanExtent(110);
+          }
+        },
+      ),
+    );
+  }
+}
+
+class _FormField extends StatelessWidget {
+  const _FormField({required this.label, required this.child});
+
+  final String label;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(label, style: theme.textTheme.small),
+        const SizedBox(height: 6),
+        child,
+      ],
+    );
+  }
+}
+
+class _PermissionToggleRow extends StatelessWidget {
+  const _PermissionToggleRow({
+    required this.label,
+    required this.notifier,
+    required this.enabled,
+  });
+
+  final String label;
+  final ValueNotifier<bool> notifier;
+  final bool enabled;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    return ValueListenableBuilder<bool>(
+      valueListenable: notifier,
+      builder: (_, value, __) {
+        return _FormField(
+          label: label,
+          child: Row(
+            children: [
+              ShadSwitch(
+                value: value,
+                onChanged: !enabled ? null : (next) => notifier.value = next,
+              ),
+              const SizedBox(width: 8),
+              Text(value ? '허용' : '차단', style: theme.textTheme.small),
+            ],
+          ),
+        );
+      },
+    );
+  }
 }

lib/features/masters/menu/data/dtos/menu_dto.dart

@@ -0,0 +1,102 @@
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../../domain/entities/menu.dart';
+
+class MenuDto {
+  MenuDto({
+    this.id,
+    required this.menuCode,
+    required this.menuName,
+    this.parent,
+    this.path,
+    this.displayOrder,
+    this.isActive = true,
+    this.isDeleted = false,
+    this.note,
+    this.createdAt,
+    this.updatedAt,
+  });
+
+  final int? id;
+  final String menuCode;
+  final String menuName;
+  final MenuSummaryDto? parent;
+  final String? path;
+  final int? displayOrder;
+  final bool isActive;
+  final bool isDeleted;
+  final String? note;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+
+  factory MenuDto.fromJson(Map<String, dynamic> json) {
+    return MenuDto(
+      id: json['id'] as int?,
+      menuCode: json['menu_code'] as String,
+      menuName: json['menu_name'] as String,
+      parent: json['parent_menu'] is Map<String, dynamic>
+          ? MenuSummaryDto.fromJson(json['parent_menu'] as Map<String, dynamic>)
+          : json['parent'] is Map<String, dynamic>
+          ? MenuSummaryDto.fromJson(json['parent'] as Map<String, dynamic>)
+          : null,
+      path: json['path'] as String?,
+      displayOrder: json['display_order'] as int?,
+      isActive: (json['is_active'] as bool?) ?? true,
+      isDeleted: (json['is_deleted'] as bool?) ?? false,
+      note: json['note'] as String?,
+      createdAt: _parseDate(json['created_at']),
+      updatedAt: _parseDate(json['updated_at']),
+    );
+  }
+
+  MenuItem toEntity() => MenuItem(
+    id: id,
+    menuCode: menuCode,
+    menuName: menuName,
+    parent: parent?.toEntity(),
+    path: path,
+    displayOrder: displayOrder,
+    isActive: isActive,
+    isDeleted: isDeleted,
+    note: note,
+    createdAt: createdAt,
+    updatedAt: updatedAt,
+  );
+
+  static PaginatedResult<MenuItem> parsePaginated(Map<String, dynamic>? json) {
+    final items = (json?['items'] as List<dynamic>? ?? [])
+        .whereType<Map<String, dynamic>>()
+        .map(MenuDto.fromJson)
+        .map((dto) => dto.toEntity())
+        .toList();
+    return PaginatedResult<MenuItem>(
+      items: items,
+      page: json?['page'] as int? ?? 1,
+      pageSize: json?['page_size'] as int? ?? items.length,
+      total: json?['total'] as int? ?? items.length,
+    );
+  }
+}
+
+class MenuSummaryDto {
+  MenuSummaryDto({required this.id, required this.menuName});
+
+  final int id;
+  final String menuName;
+
+  factory MenuSummaryDto.fromJson(Map<String, dynamic> json) {
+    return MenuSummaryDto(
+      id: json['id'] as int,
+      menuName: json['menu_name'] as String,
+    );
+  }
+
+  MenuSummary toEntity() => MenuSummary(id: id, menuName: menuName);
+}
+
+DateTime? _parseDate(Object? value) {
+  if (value == null) return null;
+  if (value is DateTime) return value;
+  if (value is String) return DateTime.tryParse(value);
+  return null;
+}

lib/features/masters/menu/data/repositories/menu_repository_remote.dart

@@ -0,0 +1,77 @@
+import 'package:dio/dio.dart';
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/core/network/api_client.dart';
+
+import '../../domain/entities/menu.dart';
+import '../../domain/repositories/menu_repository.dart';
+import '../dtos/menu_dto.dart';
+
+class MenuRepositoryRemote implements MenuRepository {
+  MenuRepositoryRemote({required ApiClient apiClient}) : _api = apiClient;
+
+  final ApiClient _api;
+
+  static const _basePath = '/menus';
+
+  @override
+  Future<PaginatedResult<MenuItem>> list({
+    int page = 1,
+    int pageSize = 20,
+    String? query,
+    int? parentId,
+    bool? isActive,
+    bool includeDeleted = false,
+  }) async {
+    final response = await _api.get<Map<String, dynamic>>(
+      _basePath,
+      query: {
+        'page': page,
+        'page_size': pageSize,
+        if (query != null && query.isNotEmpty) 'q': query,
+        if (parentId != null) 'parent_id': parentId,
+        if (isActive != null) 'is_active': isActive,
+        if (includeDeleted) 'include_deleted': true,
+        'include': 'parent',
+      },
+      options: Options(responseType: ResponseType.json),
+    );
+    return MenuDto.parsePaginated(response.data ?? const {});
+  }
+
+  @override
+  Future<MenuItem> create(MenuInput input) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      _basePath,
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return MenuDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<MenuItem> update(int id, MenuInput input) async {
+    final response = await _api.patch<Map<String, dynamic>>(
+      '$_basePath/$id',
+      data: input.toPayload(),
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return MenuDto.fromJson(data).toEntity();
+  }
+
+  @override
+  Future<void> delete(int id) async {
+    await _api.delete<void>('$_basePath/$id');
+  }
+
+  @override
+  Future<MenuItem> restore(int id) async {
+    final response = await _api.post<Map<String, dynamic>>(
+      '$_basePath/$id/restore',
+      options: Options(responseType: ResponseType.json),
+    );
+    final data = (response.data?['data'] as Map<String, dynamic>?) ?? {};
+    return MenuDto.fromJson(data).toEntity();
+  }
+}

lib/features/masters/menu/domain/entities/menu.dart

@@ -0,0 +1,119 @@
+/// 메뉴 엔티티
+///
+/// - 계층 구조를 표현하기 위해 상위 메뉴 정보를 포함한다.
+/// - presentation/data 레이어 세부 구현에 의존하지 않는다.
+class MenuItem {
+  MenuItem({
+    this.id,
+    required this.menuCode,
+    required this.menuName,
+    this.parent,
+    this.path,
+    this.displayOrder,
+    this.isActive = true,
+    this.isDeleted = false,
+    this.note,
+    this.createdAt,
+    this.updatedAt,
+  });
+
+  /// PK (null 이면 신규 생성)
+  final int? id;
+
+  /// 메뉴 코드 (고유)
+  final String menuCode;
+
+  /// 메뉴명
+  final String menuName;
+
+  /// 상위 메뉴 정보
+  final MenuSummary? parent;
+
+  /// 라우트 경로
+  final String? path;
+
+  /// 표시 순서
+  final int? displayOrder;
+
+  /// 사용 여부
+  final bool isActive;
+
+  /// 소프트 삭제 여부
+  final bool isDeleted;
+
+  /// 비고
+  final String? note;
+
+  /// 생성/수정 일시
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+
+  MenuItem copyWith({
+    int? id,
+    String? menuCode,
+    String? menuName,
+    MenuSummary? parent,
+    String? path,
+    int? displayOrder,
+    bool? isActive,
+    bool? isDeleted,
+    String? note,
+    DateTime? createdAt,
+    DateTime? updatedAt,
+  }) {
+    return MenuItem(
+      id: id ?? this.id,
+      menuCode: menuCode ?? this.menuCode,
+      menuName: menuName ?? this.menuName,
+      parent: parent ?? this.parent,
+      path: path ?? this.path,
+      displayOrder: displayOrder ?? this.displayOrder,
+      isActive: isActive ?? this.isActive,
+      isDeleted: isDeleted ?? this.isDeleted,
+      note: note ?? this.note,
+      createdAt: createdAt ?? this.createdAt,
+      updatedAt: updatedAt ?? this.updatedAt,
+    );
+  }
+}
+
+/// 상위 메뉴 요약 정보
+class MenuSummary {
+  MenuSummary({required this.id, required this.menuName});
+
+  final int id;
+  final String menuName;
+}
+
+/// 메뉴 생성/수정 입력 모델
+class MenuInput {
+  MenuInput({
+    required this.menuCode,
+    required this.menuName,
+    this.parentMenuId,
+    this.path,
+    this.displayOrder,
+    this.isActive = true,
+    this.note,
+  });
+
+  final String menuCode;
+  final String menuName;
+  final int? parentMenuId;
+  final String? path;
+  final int? displayOrder;
+  final bool isActive;
+  final String? note;
+
+  Map<String, dynamic> toPayload() {
+    return {
+      'menu_code': menuCode,
+      'menu_name': menuName,
+      'parent_menu_id': parentMenuId,
+      'path': path,
+      'display_order': displayOrder,
+      'is_active': isActive,
+      'note': note,
+    };
+  }
+}

lib/features/masters/menu/domain/repositories/menu_repository.dart

@@ -0,0 +1,27 @@
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../entities/menu.dart';
+
+abstract class MenuRepository {
+  /// 메뉴 목록 조회
+  Future<PaginatedResult<MenuItem>> list({
+    int page = 1,
+    int pageSize = 20,
+    String? query,
+    int? parentId,
+    bool? isActive,
+    bool includeDeleted = false,
+  });
+
+  /// 메뉴 신규 등록
+  Future<MenuItem> create(MenuInput input);
+
+  /// 메뉴 수정
+  Future<MenuItem> update(int id, MenuInput input);
+
+  /// 메뉴 삭제(소프트)
+  Future<void> delete(int id);
+
+  /// 메뉴 복구
+  Future<MenuItem> restore(int id);
+}

lib/features/masters/menu/presentation/controllers/menu_controller.dart

@@ -0,0 +1,179 @@
+import 'package:flutter/foundation.dart';
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+
+import '../../domain/entities/menu.dart';
+import '../../domain/repositories/menu_repository.dart';
+
+enum MenuStatusFilter { all, activeOnly, inactiveOnly }
+
+/// 메뉴 마스터 상태 컨트롤러
+///
+/// - 목록, 필터, 페이지 상태를 관리한다.
+/// - CRUD 및 복구 요청을 처리한다.
+class MenuController extends ChangeNotifier {
+  MenuController({required MenuRepository repository})
+    : _repository = repository;
+
+  final MenuRepository _repository;
+
+  PaginatedResult<MenuItem>? _result;
+  bool _isLoading = false;
+  bool _isSubmitting = false;
+  bool _isLoadingParents = false;
+  String _query = '';
+  int? _parentFilter;
+  MenuStatusFilter _statusFilter = MenuStatusFilter.all;
+  bool _includeDeleted = false;
+  String? _errorMessage;
+  List<MenuItem> _parents = const [];
+
+  PaginatedResult<MenuItem>? get result => _result;
+  bool get isLoading => _isLoading;
+  bool get isSubmitting => _isSubmitting;
+  bool get isLoadingParents => _isLoadingParents;
+  String get query => _query;
+  int? get parentFilter => _parentFilter;
+  MenuStatusFilter get statusFilter => _statusFilter;
+  bool get includeDeleted => _includeDeleted;
+  String? get errorMessage => _errorMessage;
+  List<MenuItem> get parents => _parents;
+
+  Future<void> loadParents() async {
+    _isLoadingParents = true;
+    notifyListeners();
+    try {
+      final response = await _repository.list(
+        page: 1,
+        pageSize: 200,
+        includeDeleted: false,
+      );
+      _parents = response.items;
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoadingParents = false;
+      notifyListeners();
+    }
+  }
+
+  Future<void> fetch({int page = 1}) async {
+    _isLoading = true;
+    _errorMessage = null;
+    notifyListeners();
+    try {
+      final isActive = switch (_statusFilter) {
+        MenuStatusFilter.all => null,
+        MenuStatusFilter.activeOnly => true,
+        MenuStatusFilter.inactiveOnly => false,
+      };
+      final response = await _repository.list(
+        page: page,
+        pageSize: _result?.pageSize ?? 20,
+        query: _query.isEmpty ? null : _query,
+        parentId: _parentFilter,
+        isActive: isActive,
+        includeDeleted: _includeDeleted,
+      );
+      _result = response;
+    } catch (e) {
+      _errorMessage = e.toString();
+    } finally {
+      _isLoading = false;
+      notifyListeners();
+    }
+  }
+
+  void updateQuery(String value) {
+    _query = value;
+    notifyListeners();
+  }
+
+  void updateParentFilter(int? parentId) {
+    _parentFilter = parentId;
+    notifyListeners();
+  }
+
+  void updateStatusFilter(MenuStatusFilter filter) {
+    _statusFilter = filter;
+    notifyListeners();
+  }
+
+  void updateIncludeDeleted(bool value) {
+    _includeDeleted = value;
+    notifyListeners();
+  }
+
+  Future<MenuItem?> create(MenuInput input) async {
+    _setSubmitting(true);
+    try {
+      final created = await _repository.create(input);
+      await fetch(page: 1);
+      await loadParents();
+      return created;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<MenuItem?> update(int id, MenuInput input) async {
+    _setSubmitting(true);
+    try {
+      final updated = await _repository.update(id, input);
+      await fetch(page: _result?.page ?? 1);
+      await loadParents();
+      return updated;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<bool> delete(int id) async {
+    _setSubmitting(true);
+    try {
+      await _repository.delete(id);
+      await fetch(page: _result?.page ?? 1);
+      await loadParents();
+      return true;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return false;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  Future<MenuItem?> restore(int id) async {
+    _setSubmitting(true);
+    try {
+      final restored = await _repository.restore(id);
+      await fetch(page: _result?.page ?? 1);
+      await loadParents();
+      return restored;
+    } catch (e) {
+      _errorMessage = e.toString();
+      notifyListeners();
+      return null;
+    } finally {
+      _setSubmitting(false);
+    }
+  }
+
+  void clearError() {
+    _errorMessage = null;
+    notifyListeners();
+  }
+
+  void _setSubmitting(bool value) {
+    _isSubmitting = value;
+    notifyListeners();
+  }
+}

lib/features/masters/menu/presentation/pages/menu_page.dart

@@ -1,16 +1,41 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
+import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
+import '../../domain/entities/menu.dart';
+import '../../domain/repositories/menu_repository.dart';
+import '../controllers/menu_controller.dart' as menu;
 
 class MenuPage extends StatelessWidget {
   const MenuPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const SpecPage(
+    final enabled = Environment.flag('FEATURE_MENUS_ENABLED');
+    if (!enabled) {
+      return SpecPage(
         title: '메뉴 관리',
-      summary: '메뉴 계층, 경로, 노출 순서를 구성합니다.',
+        summary: '메뉴 코드, 트리 구조, 사용여부를 관리합니다.',
-      sections: [
+        trailing: ShadBadge(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Icon(LucideIcons.info, size: 14),
+                const SizedBox(width: 6),
+                const Text('비활성화 (백엔드 준비 중)'),
+              ],
+            ),
+          ),
+        ),
+        sections: const [
           SpecSection(
             title: '입력 폼',
             items: [
@@ -31,11 +56,20 @@ class MenuPage extends StatelessWidget {
             title: '테이블 리스트',
             description: '1행 예시',
             table: SpecTable(
-            columns: ['번호', '메뉴코드', '메뉴명', '상위메뉴', '경로', '사용여부', '비고', '변경일시'],
+              columns: [
+                '번호',
+                '메뉴코드',
+                '메뉴명',
+                '상위메뉴',
+                '경로',
+                '사용여부',
+                '비고',
+                '변경일시',
+              ],
               rows: [
                 [
                   '1',
-                'MN-001',
+                  'MENU001',
                   '대시보드',
                   '-',
                   '/dashboard',
@@ -49,4 +83,812 @@ class MenuPage extends StatelessWidget {
         ],
       );
     }
+
+    return const _MenuEnabledPage();
+  }
+}
+
+class _MenuEnabledPage extends StatefulWidget {
+  const _MenuEnabledPage();
+
+  @override
+  State<_MenuEnabledPage> createState() => _MenuEnabledPageState();
+}
+
+class _MenuEnabledPageState extends State<_MenuEnabledPage> {
+  late final menu.MenuController _controller;
+  final TextEditingController _searchController = TextEditingController();
+  final FocusNode _searchFocus = FocusNode();
+  final DateFormat _dateFormat = DateFormat('yyyy-MM-dd HH:mm');
+  String? _lastError;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = menu.MenuController(repository: GetIt.I<MenuRepository>())
+      ..addListener(_handleControllerUpdate);
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      await _controller.loadParents();
+      await _controller.fetch();
+    });
+  }
+
+  void _handleControllerUpdate() {
+    final error = _controller.errorMessage;
+    if (error != null && error != _lastError && mounted) {
+      _lastError = error;
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(SnackBar(content: Text(error)));
+      _controller.clearError();
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.removeListener(_handleControllerUpdate);
+    _controller.dispose();
+    _searchController.dispose();
+    _searchFocus.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, _) {
+        final result = _controller.result;
+        final menus = result?.items ?? const <MenuItem>[];
+        final totalCount = result?.total ?? 0;
+        final currentPage = result?.page ?? 1;
+        final totalPages = result == null || result.pageSize == 0
+            ? 1
+            : (result.total / result.pageSize).ceil().clamp(1, 9999);
+        final hasNext = result == null
+            ? false
+            : (result.page * result.pageSize) < result.total;
+
+        final showReset = _searchController.text.isNotEmpty ||
+            _controller.parentFilter != null ||
+            _controller.statusFilter != menu.MenuStatusFilter.all ||
+            _controller.includeDeleted;
+
+        return AppLayout(
+          title: '메뉴 관리',
+          subtitle: '메뉴 트리와 경로, 사용 상태를 관리합니다.',
+          breadcrumbs: const [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+            AppBreadcrumbItem(label: '마스터', path: '/masters/menus'),
+            AppBreadcrumbItem(label: '메뉴'),
+          ],
+          actions: [
+            ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
+              onPressed:
+                  _controller.isSubmitting ? null : () => _openMenuForm(context),
+              child: const Text('신규 등록'),
+            ),
+          ],
+          toolbar: FilterBar(
+            children: [
+              SizedBox(
+                width: 260,
+                child: ShadInput(
+                  controller: _searchController,
+                  focusNode: _searchFocus,
+                  placeholder: const Text('메뉴코드, 메뉴명 검색'),
+                  leading: const Icon(LucideIcons.search, size: 16),
+                  onSubmitted: (_) => _applyFilters(),
+                ),
+              ),
+              SizedBox(
+                width: 220,
+                child: ShadSelect<int?>(
+                  key: ValueKey(_controller.parentFilter),
+                  initialValue: _controller.parentFilter,
+                  placeholder: Text(
+                    _controller.isLoadingParents ? '상위 로딩중...' : '상위 전체',
+                  ),
+                  selectedOptionBuilder: (context, value) {
+                    if (value == null) {
+                      return Text(
+                        _controller.isLoadingParents
+                            ? '상위 로딩중...'
+                            : '상위 전체',
+                      );
+                    }
+                    final target = _controller.parents.firstWhere(
+                      (menuItem) => menuItem.id == value,
+                      orElse: () => MenuItem(
+                        id: value,
+                        menuCode: '',
+                        menuName: '',
+                      ),
+                    );
+                    final label = target.menuName.isEmpty
+                        ? '상위 전체'
+                        : target.menuName;
+                    return Text(label);
+                  },
+                  onChanged: _controller.isLoadingParents
+                      ? null
+                      : (value) {
+                          _controller.updateParentFilter(value);
+                          _controller.fetch(page: 1);
+                        },
+                  options: [
+                    const ShadOption<int?>(
+                      value: null,
+                      child: Text('상위 전체'),
+                    ),
+                    ..._controller.parents.map(
+                      (menuItem) => ShadOption<int?>(
+                        value: menuItem.id,
+                        child: Text(menuItem.menuName),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<menu.MenuStatusFilter>(
+                  key: ValueKey(_controller.statusFilter),
+                  initialValue: _controller.statusFilter,
+                  selectedOptionBuilder: (context, filter) =>
+                      Text(_statusLabel(filter)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateStatusFilter(value);
+                    _controller.fetch(page: 1);
+                  },
+                  options: menu.MenuStatusFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_statusLabel(filter)),
+                        ),
+                      )
+                      .toList(),
+                ),
+              ),
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  ShadSwitch(
+                    value: _controller.includeDeleted,
+                    onChanged: (value) {
+                      _controller.updateIncludeDeleted(value);
+                      _controller.fetch(page: 1);
+                    },
+                  ),
+                  const SizedBox(width: 8),
+                  const Text('삭제 포함'),
+                ],
+              ),
+              ShadButton.outline(
+                onPressed: _controller.isLoading ? null : _applyFilters,
+                child: const Text('검색 적용'),
+              ),
+              if (showReset)
+                ShadButton.ghost(
+                  onPressed: _controller.isLoading
+                      ? null
+                      : () {
+                          _searchController.clear();
+                          _searchFocus.requestFocus();
+                          _controller.updateQuery('');
+                          _controller.updateParentFilter(null);
+                          _controller.updateStatusFilter(
+                            menu.MenuStatusFilter.all,
+                          );
+                          _controller.updateIncludeDeleted(false);
+                          _controller.fetch(page: 1);
+                        },
+                  child: const Text('초기화'),
+                ),
+            ],
+          ),
+          child: ShadCard(
+            title: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text('메뉴 목록', style: theme.textTheme.h3),
+                Text('$totalCount건', style: theme.textTheme.muted),
+              ],
+            ),
+            footer: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  '페이지 $currentPage / $totalPages',
+                  style: theme.textTheme.small,
+                ),
+                Row(
+                  children: [
+                    ShadButton.outline(
+                      size: ShadButtonSize.sm,
+                      onPressed: _controller.isLoading || currentPage <= 1
+                          ? null
+                          : () => _controller.fetch(page: currentPage - 1),
+                      child: const Text('이전'),
+                    ),
+                    const SizedBox(width: 8),
+                    ShadButton.outline(
+                      size: ShadButtonSize.sm,
+                      onPressed: _controller.isLoading || !hasNext
+                          ? null
+                          : () => _controller.fetch(page: currentPage + 1),
+                      child: const Text('다음'),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+            child: _controller.isLoading
+                ? const Padding(
+                    padding: EdgeInsets.all(48),
+                    child: Center(child: CircularProgressIndicator()),
+                  )
+                : menus.isEmpty
+                    ? Padding(
+                        padding: const EdgeInsets.all(32),
+                        child: Text(
+                          '조건에 맞는 메뉴가 없습니다.',
+                          style: theme.textTheme.muted,
+                        ),
+                      )
+                    : _MenuTable(
+                        menus: menus,
+                        dateFormat: _dateFormat,
+                        onEdit: _controller.isSubmitting
+                            ? null
+                            : (menuItem) =>
+                                  _openMenuForm(context, menu: menuItem),
+                        onDelete: _controller.isSubmitting
+                            ? null
+                            : _confirmDelete,
+                        onRestore: _controller.isSubmitting
+                            ? null
+                            : _restoreMenu,
+                      ),
+          ),
+        );
+      },
+    );
+  }
+
+  void _applyFilters() {
+    _controller.updateQuery(_searchController.text.trim());
+    _controller.fetch(page: 1);
+  }
+
+  String _statusLabel(menu.MenuStatusFilter filter) {
+    switch (filter) {
+      case menu.MenuStatusFilter.all:
+        return '전체(사용/미사용)';
+      case menu.MenuStatusFilter.activeOnly:
+        return '사용중';
+      case menu.MenuStatusFilter.inactiveOnly:
+        return '미사용';
+    }
+  }
+
+  Future<void> _openMenuForm(BuildContext context, {MenuItem? menu}) async {
+    final existingMenu = menu;
+    final isEdit = existingMenu != null;
+    final menuId = existingMenu?.id;
+    if (isEdit && menuId == null) {
+      _showSnack('ID 정보가 없어 수정할 수 없습니다.');
+      return;
+    }
+
+    final codeController = TextEditingController(
+      text: existingMenu?.menuCode ?? '',
+    );
+    final nameController = TextEditingController(
+      text: existingMenu?.menuName ?? '',
+    );
+    final pathController = TextEditingController(
+      text: existingMenu?.path ?? '',
+    );
+    final orderController = TextEditingController(
+      text: existingMenu?.displayOrder?.toString() ?? '',
+    );
+    final noteController = TextEditingController(
+      text: existingMenu?.note ?? '',
+    );
+    final parentNotifier = ValueNotifier<int?>(existingMenu?.parent?.id);
+    final isActiveNotifier = ValueNotifier<bool>(
+      existingMenu?.isActive ?? true,
+    );
+    final saving = ValueNotifier<bool>(false);
+    final codeError = ValueNotifier<String?>(null);
+    final nameError = ValueNotifier<String?>(null);
+    final orderError = ValueNotifier<String?>(null);
+
+    await showDialog<bool>(
+      context: context,
+      builder: (dialogContext) {
+        final theme = ShadTheme.of(dialogContext);
+        final materialTheme = Theme.of(dialogContext);
+        final navigator = Navigator.of(dialogContext);
+        return Dialog(
+          insetPadding: const EdgeInsets.all(24),
+          clipBehavior: Clip.antiAlias,
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 560),
+            child: ShadCard(
+              title: Text(
+                isEdit ? '메뉴 수정' : '메뉴 등록',
+                style: theme.textTheme.h3,
+              ),
+              description: Text(
+                '메뉴 정보를 ${isEdit ? '수정' : '입력'}하세요.',
+                style: theme.textTheme.muted,
+              ),
+              footer: ValueListenableBuilder<bool>(
+                valueListenable: saving,
+                builder: (_, isSaving, __) {
+                  return Row(
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [
+                      ShadButton.ghost(
+                        onPressed: isSaving ? null : () => navigator.pop(false),
+                        child: const Text('취소'),
+                      ),
+                      const SizedBox(width: 12),
+                      ShadButton(
+                        onPressed: isSaving
+                            ? null
+                            : () async {
+                                final code = codeController.text.trim();
+                                final name = nameController.text.trim();
+                                final path = pathController.text.trim();
+                                final orderText = orderController.text.trim();
+                                final note = noteController.text.trim();
+
+                                codeError.value = code.isEmpty
+                                    ? '메뉴코드를 입력하세요.'
+                                    : null;
+                                nameError.value = name.isEmpty
+                                    ? '메뉴명을 입력하세요.'
+                                    : null;
+
+                                int? orderValue;
+                                if (orderText.isNotEmpty) {
+                                  orderValue = int.tryParse(orderText);
+                                  if (orderValue == null) {
+                                    orderError.value = '표시순서는 숫자여야 합니다.';
+                                  } else {
+                                    orderError.value = null;
+                                  }
+                                } else {
+                                  orderError.value = null;
+                                }
+
+                                if (codeError.value != null ||
+                                    nameError.value != null ||
+                                    orderError.value != null) {
+                                  return;
+                                }
+
+                                saving.value = true;
+                                final input = MenuInput(
+                                  menuCode: code,
+                                  menuName: name,
+                                  parentMenuId: parentNotifier.value,
+                                  path: path.isEmpty ? null : path,
+                                  displayOrder: orderValue,
+                                  isActive: isActiveNotifier.value,
+                                  note: note.isEmpty ? null : note,
+                                );
+                                final response = isEdit
+                                    ? await _controller.update(menuId!, input)
+                                    : await _controller.create(input);
+                                saving.value = false;
+                                if (response != null) {
+                                  if (!navigator.mounted) {
+                                    return;
+                                  }
+                                  if (mounted) {
+                                    _showSnack(
+                                      isEdit ? '메뉴를 수정했습니다.' : '메뉴를 등록했습니다.',
+                                    );
+                                  }
+                                  navigator.pop(true);
+                                }
+                              },
+                        child: Text(isEdit ? '저장' : '등록'),
+                      ),
+                    ],
+                  );
+                },
+              ),
+              child: SizedBox(
+                width: double.infinity,
+                child: SingleChildScrollView(
+                  padding: const EdgeInsets.only(right: 12),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      ValueListenableBuilder<String?>(
+                        valueListenable: codeError,
+                        builder: (_, errorText, __) {
+                          return _FormField(
+                            label: '메뉴코드',
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                ShadInput(
+                                  controller: codeController,
+                                  readOnly: isEdit,
+                                  onChanged: (_) {
+                                    if (codeController.text.trim().isNotEmpty) {
+                                      codeError.value = null;
+                                    }
+                                  },
+                                ),
+                                if (errorText != null)
+                                  Padding(
+                                    padding: const EdgeInsets.only(top: 6),
+                                    child: Text(
+                                      errorText,
+                                      style: theme.textTheme.small.copyWith(
+                                        color: materialTheme.colorScheme.error,
+                                      ),
+                                    ),
+                                  ),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      ValueListenableBuilder<String?>(
+                        valueListenable: nameError,
+                        builder: (_, errorText, __) {
+                          return _FormField(
+                            label: '메뉴명',
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                ShadInput(
+                                  controller: nameController,
+                                  onChanged: (_) {
+                                    if (nameController.text.trim().isNotEmpty) {
+                                      nameError.value = null;
+                                    }
+                                  },
+                                ),
+                                if (errorText != null)
+                                  Padding(
+                                    padding: const EdgeInsets.only(top: 6),
+                                    child: Text(
+                                      errorText,
+                                      style: theme.textTheme.small.copyWith(
+                                        color: materialTheme.colorScheme.error,
+                                      ),
+                                    ),
+                                  ),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      ValueListenableBuilder<int?>(
+                        valueListenable: parentNotifier,
+                        builder: (_, value, __) {
+                          return _FormField(
+                            label: '상위메뉴',
+                            child: ShadSelect<int?>(
+                              initialValue: value,
+                              placeholder: const Text('최상위'),
+                              selectedOptionBuilder: (context, selected) {
+                                if (selected == null) {
+                                  return const Text('최상위');
+                                }
+                                final target = _controller.parents.firstWhere(
+                                  (item) => item.id == selected,
+                                  orElse: () => MenuItem(
+                                    id: selected,
+                                    menuCode: '',
+                                    menuName: '',
+                                  ),
+                                );
+                                final label = target.menuName.isEmpty
+                                    ? '최상위'
+                                    : target.menuName;
+                                return Text(label);
+                              },
+                              onChanged: saving.value
+                                  ? null
+                                  : (next) => parentNotifier.value = next,
+                              options: [
+                                const ShadOption<int?>(
+                                  value: null,
+                                  child: Text('최상위'),
+                                ),
+                                ..._controller.parents
+                                    .where((item) => item.id != menuId)
+                                    .map(
+                                      (menuItem) => ShadOption<int?>(
+                                        value: menuItem.id,
+                                        child: Text(menuItem.menuName),
+                                      ),
+                                    ),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      _FormField(
+                        label: '경로',
+                        child: ShadInput(controller: pathController),
+                      ),
+                      const SizedBox(height: 16),
+                      ValueListenableBuilder<String?>(
+                        valueListenable: orderError,
+                        builder: (_, errorText, __) {
+                          return _FormField(
+                            label: '표시순서',
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                ShadInput(
+                                  controller: orderController,
+                                  keyboardType: TextInputType.number,
+                                ),
+                                if (errorText != null)
+                                  Padding(
+                                    padding: const EdgeInsets.only(top: 6),
+                                    child: Text(
+                                      errorText,
+                                      style: theme.textTheme.small.copyWith(
+                                        color: materialTheme.colorScheme.error,
+                                      ),
+                                    ),
+                                  ),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      ValueListenableBuilder<bool>(
+                        valueListenable: isActiveNotifier,
+                        builder: (_, value, __) {
+                          return _FormField(
+                            label: '사용여부',
+                            child: Row(
+                              children: [
+                                ShadSwitch(
+                                  value: value,
+                                  onChanged: saving.value
+                                      ? null
+                                      : (next) => isActiveNotifier.value = next,
+                                ),
+                                const SizedBox(width: 8),
+                                Text(value ? '사용' : '미사용'),
+                              ],
+                            ),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 16),
+                      _FormField(
+                        label: '비고',
+                        child: ShadTextarea(controller: noteController),
+                      ),
+                      if (isEdit) ...[
+                        const SizedBox(height: 20),
+                        Text(
+                          '생성일시: ${_formatDateTime(existingMenu.createdAt)}',
+                          style: theme.textTheme.small,
+                        ),
+                        const SizedBox(height: 4),
+                        Text(
+                          '수정일시: ${_formatDateTime(existingMenu.updatedAt)}',
+                          style: theme.textTheme.small,
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+
+    codeController.dispose();
+    nameController.dispose();
+    pathController.dispose();
+    orderController.dispose();
+    noteController.dispose();
+    parentNotifier.dispose();
+    isActiveNotifier.dispose();
+    saving.dispose();
+    codeError.dispose();
+    nameError.dispose();
+    orderError.dispose();
+  }
+
+  Future<void> _confirmDelete(MenuItem menu) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (dialogContext) {
+        return AlertDialog(
+          title: const Text('메뉴 삭제'),
+          content: Text('"${menu.menuName}" 메뉴를 삭제하시겠습니까?'),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(false),
+              child: const Text('취소'),
+            ),
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(true),
+              child: const Text('삭제'),
+            ),
+          ],
+        );
+      },
+    );
+
+    if (confirmed == true && menu.id != null) {
+      final success = await _controller.delete(menu.id!);
+      if (success && mounted) {
+        _showSnack('메뉴를 삭제했습니다.');
+      }
+    }
+  }
+
+  Future<void> _restoreMenu(MenuItem menu) async {
+    if (menu.id == null) return;
+    final restored = await _controller.restore(menu.id!);
+    if (restored != null && mounted) {
+      _showSnack('메뉴를 복구했습니다.');
+    }
+  }
+
+  void _showSnack(String message) {
+    if (!mounted) return;
+    ScaffoldMessenger.of(
+      context,
+    ).showSnackBar(SnackBar(content: Text(message)));
+  }
+
+  String _formatDateTime(DateTime? value) {
+    if (value == null) {
+      return '-';
+    }
+    return _dateFormat.format(value.toLocal());
+  }
+}
+
+class _MenuTable extends StatelessWidget {
+  const _MenuTable({
+    required this.menus,
+    required this.onEdit,
+    required this.onDelete,
+    required this.onRestore,
+    required this.dateFormat,
+  });
+
+  final List<MenuItem> menus;
+  final void Function(MenuItem menu)? onEdit;
+  final void Function(MenuItem menu)? onDelete;
+  final void Function(MenuItem menu)? onRestore;
+  final DateFormat dateFormat;
+
+  @override
+  Widget build(BuildContext context) {
+    final header = [
+      'ID',
+      '메뉴코드',
+      '메뉴명',
+      '상위메뉴',
+      '경로',
+      '사용',
+      '삭제',
+      '비고',
+      '변경일시',
+      '동작',
+    ].map((text) => ShadTableCell.header(child: Text(text))).toList();
+
+    final rows = menus.map((item) {
+      final cells = [
+        item.id?.toString() ?? '-',
+        item.menuCode,
+        item.menuName,
+        item.parent?.menuName ?? '-',
+        item.path?.isEmpty ?? true ? '-' : item.path!,
+        item.isActive ? 'Y' : 'N',
+        item.isDeleted ? 'Y' : '-',
+        item.note?.isEmpty ?? true ? '-' : item.note!,
+        item.updatedAt == null
+            ? '-'
+            : dateFormat.format(item.updatedAt!.toLocal()),
+      ].map((text) => ShadTableCell(child: Text(text))).toList();
+
+      cells.add(
+        ShadTableCell(
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              ShadButton.ghost(
+                size: ShadButtonSize.sm,
+                onPressed: onEdit == null ? null : () => onEdit!(item),
+                child: const Icon(LucideIcons.pencil, size: 16),
+              ),
+              const SizedBox(width: 8),
+              item.isDeleted
+                  ? ShadButton.ghost(
+                      size: ShadButtonSize.sm,
+                      onPressed: onRestore == null
+                          ? null
+                          : () => onRestore!(item),
+                      child: const Icon(LucideIcons.history, size: 16),
+                    )
+                  : ShadButton.ghost(
+                      size: ShadButtonSize.sm,
+                      onPressed: onDelete == null
+                          ? null
+                          : () => onDelete!(item),
+                      child: const Icon(LucideIcons.trash2, size: 16),
+                    ),
+            ],
+          ),
+        ),
+      );
+      return cells;
+    }).toList();
+
+    return SizedBox(
+      height: 56.0 * (menus.length + 1),
+      child: ShadTable.list(
+        header: header,
+        children: rows,
+        columnSpanExtent: (index) {
+          switch (index) {
+            case 4:
+              return const FixedTableSpanExtent(200);
+            case 7:
+              return const FixedTableSpanExtent(200);
+            case 9:
+              return const FixedTableSpanExtent(160);
+            default:
+              return const FixedTableSpanExtent(120);
+          }
+        },
+      ),
+    );
+  }
+}
+
+class _FormField extends StatelessWidget {
+  const _FormField({required this.label, required this.child});
+
+  final String label;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(label, style: theme.textTheme.small),
+        const SizedBox(height: 6),
+        child,
+      ],
+    );
+  }
 }

lib/features/masters/product/presentation/pages/product_page.dart

@@ -2,6 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:get_it/get_it.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
 import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
 import '../../../uom/domain/entities/uom.dart';
@@ -134,28 +138,20 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
+        final showReset = _searchController.text.isNotEmpty ||
-          padding: const EdgeInsets.all(24),
+            _controller.vendorFilter != null ||
-          child: Column(
+            _controller.uomFilter != null ||
-            crossAxisAlignment: CrossAxisAlignment.start,
+            _controller.statusFilter != ProductStatusFilter.all;
-            children: [
+
-              Row(
+        return AppLayout(
-                crossAxisAlignment: CrossAxisAlignment.start,
+          title: '장비 모델(제품) 관리',
-                children: [
+          subtitle: '제품코드, 제조사, 단위 정보를 관리합니다.',
-                  Expanded(
+          breadcrumbs: const [
-                    child: Column(
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-                      crossAxisAlignment: CrossAxisAlignment.start,
+            AppBreadcrumbItem(label: '마스터', path: '/masters/products'),
-                      children: [
+            AppBreadcrumbItem(label: '제품'),
-                        Text('장비 모델(제품) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '제품코드, 제조사, 단위 정보를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
           ],
-                    ),
+          actions: [
-                  ),
-                  const SizedBox(width: 16),
             ShadButton(
               leading: const Icon(LucideIcons.plus, size: 16),
               onPressed: _controller.isSubmitting
@@ -164,16 +160,7 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
               child: const Text('신규 등록'),
             ),
           ],
-              ),
+          toolbar: FilterBar(
-              const SizedBox(height: 24),
-              ShadCard(
-                title: Text('검색 및 필터', style: theme.textTheme.h3),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Wrap(
-                      spacing: 16,
-                      runSpacing: 16,
             children: [
               SizedBox(
                 width: 260,
@@ -195,20 +182,13 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
                     if (value == null) {
                       return const Text('제조사 전체');
                     }
-                              final vendor = _controller.vendorOptions
+                    final vendor = _controller.vendorOptions.firstWhere(
-                                  .firstWhere(
                       (v) => v.id == value,
-                                    orElse: () => Vendor(
+                      orElse: () => Vendor(id: value, vendorCode: '', vendorName: ''),
-                                      id: value,
-                                      vendorCode: '',
-                                      vendorName: '',
-                                    ),
                     );
                     return Text(vendor.vendorName);
                   },
-                            onChanged: (value) {
+                  onChanged: (value) => _controller.updateVendorFilter(value),
-                              _controller.updateVendorFilter(value);
-                            },
                   options: [
                     const ShadOption<int?>(
                       value: null,
@@ -239,9 +219,7 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
                     );
                     return Text(uom.uomName);
                   },
-                            onChanged: (value) {
+                  onChanged: (value) => _controller.updateUomFilter(value),
-                              _controller.updateUomFilter(value);
-                            },
                   options: [
                     const ShadOption<int?>(
                       value: null,
@@ -278,15 +256,10 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
                 ),
               ),
               ShadButton.outline(
-                          onPressed: _controller.isLoading
+                onPressed: _controller.isLoading ? null : _applyFilters,
-                              ? null
-                              : _applyFilters,
                 child: const Text('검색 적용'),
               ),
-                        if (_searchController.text.isNotEmpty ||
+              if (showReset)
-                            _controller.vendorFilter != null ||
-                            _controller.uomFilter != null ||
-                            _controller.statusFilter != ProductStatusFilter.all)
                 ShadButton.ghost(
                   onPressed: _controller.isLoading
                       ? null
@@ -305,11 +278,7 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
                 ),
             ],
           ),
-                  ],
+          child: ShadCard(
-                ),
-              ),
-              const SizedBox(height: 24),
-              ShadCard(
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -373,8 +342,6 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
                             : _restoreProduct,
                       ),
           ),
-            ],
-          ),
         );
       },
     );

lib/features/masters/user/presentation/pages/user_page.dart

@@ -2,6 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:get_it/get_it.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
 import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
 import '../../../group/domain/entities/group.dart';
@@ -143,45 +147,27 @@ class _UserEnabledPageState extends State<_UserEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
+        final showReset = _searchController.text.isNotEmpty ||
-          padding: const EdgeInsets.all(24),
+            _controller.groupFilter != null ||
-          child: Column(
+            _controller.statusFilter != UserStatusFilter.all;
-            crossAxisAlignment: CrossAxisAlignment.start,
+
-            children: [
+        return AppLayout(
-              Row(
+          title: '사용자(사원) 관리',
-                crossAxisAlignment: CrossAxisAlignment.start,
+          subtitle: '사번 기반 계정과 그룹, 사용 상태를 관리합니다.',
-                children: [
+          breadcrumbs: const [
-                  Expanded(
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-                    child: Column(
+            AppBreadcrumbItem(label: '마스터', path: '/masters/users'),
-                      crossAxisAlignment: CrossAxisAlignment.start,
+            AppBreadcrumbItem(label: '사용자'),
-                      children: [
-                        Text('사용자(사원) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '사번 기반 계정과 그룹, 사용 상태를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
           ],
-                    ),
+          actions: [
-                  ),
-                  const SizedBox(width: 16),
             ShadButton(
-                    onPressed: _controller.isSubmitting
+              leading: const Icon(LucideIcons.plus, size: 16),
-                        ? null
+              onPressed:
-                        : () => _openUserForm(context),
+                  _controller.isSubmitting ? null : () => _openUserForm(context),
               child: const Text('신규 등록'),
             ),
           ],
-              ),
+          toolbar: FilterBar(
-              const SizedBox(height: 24),
-              ShadCard(
-                title: Text('검색 및 필터', style: theme.textTheme.h3),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Wrap(
-                      spacing: 16,
-                      runSpacing: 16,
             children: [
               SizedBox(
                 width: 260,
@@ -254,14 +240,10 @@ class _UserEnabledPageState extends State<_UserEnabledPage> {
                 ),
               ),
               ShadButton.outline(
-                          onPressed: _controller.isLoading
+                onPressed: _controller.isLoading ? null : _applyFilters,
-                              ? null
-                              : _applyFilters,
                 child: const Text('검색 적용'),
               ),
-                        if (_searchController.text.isNotEmpty ||
+              if (showReset)
-                            _controller.groupFilter != null ||
-                            _controller.statusFilter != UserStatusFilter.all)
                 ShadButton.ghost(
                   onPressed: _controller.isLoading
                       ? null
@@ -279,11 +261,7 @@ class _UserEnabledPageState extends State<_UserEnabledPage> {
                 ),
             ],
           ),
-                  ],
+          child: ShadCard(
-                ),
-              ),
-              const SizedBox(height: 24),
-              ShadCard(
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -345,8 +323,6 @@ class _UserEnabledPageState extends State<_UserEnabledPage> {
                             : _restoreUser,
                       ),
           ),
-            ],
-          ),
         );
       },
     );

lib/features/masters/vendor/presentation/pages/vendor_page.dart

@@ -2,6 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:get_it/get_it.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
 import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
 import '../../../vendor/domain/entities/vendor.dart';
@@ -118,28 +122,15 @@ class _VendorEnabledPageState extends State<_VendorEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
+        return AppLayout(
-          padding: const EdgeInsets.all(24),
+          title: '제조사(벤더) 관리',
-          child: Column(
+          subtitle: '벤더코드, 명칭, 사용여부, 삭제 상태를 관리합니다.',
-            crossAxisAlignment: CrossAxisAlignment.start,
+          breadcrumbs: const [
-            children: [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-              Row(
+            AppBreadcrumbItem(label: '마스터', path: '/masters/vendors'),
-                crossAxisAlignment: CrossAxisAlignment.start,
+            AppBreadcrumbItem(label: '벤더'),
-                children: [
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text('제조사(벤더) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '벤더코드, 명칭, 사용여부, 삭제 상태를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
           ],
-                    ),
+          actions: [
-                  ),
-                  const SizedBox(width: 16),
             ShadButton(
               leading: const Icon(LucideIcons.plus, size: 16),
               onPressed: _controller.isSubmitting
@@ -148,16 +139,7 @@ class _VendorEnabledPageState extends State<_VendorEnabledPage> {
               child: const Text('신규 등록'),
             ),
           ],
-              ),
+          toolbar: FilterBar(
-              const SizedBox(height: 24),
-              ShadCard(
-                title: Text('검색 및 필터', style: theme.textTheme.h3),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Wrap(
-                      spacing: 16,
-                      runSpacing: 16,
             children: [
               SizedBox(
                 width: 280,
@@ -193,9 +175,7 @@ class _VendorEnabledPageState extends State<_VendorEnabledPage> {
                 ),
               ),
               ShadButton.outline(
-                          onPressed: _controller.isLoading
+                onPressed: _controller.isLoading ? null : _applyFilters,
-                              ? null
-                              : _applyFilters,
                 child: const Text('검색 적용'),
               ),
               if (_searchController.text.isNotEmpty ||
@@ -216,11 +196,7 @@ class _VendorEnabledPageState extends State<_VendorEnabledPage> {
                 ),
             ],
           ),
-                  ],
+          child: ShadCard(
-                ),
-              ),
-              const SizedBox(height: 24),
-              ShadCard(
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -284,8 +260,6 @@ class _VendorEnabledPageState extends State<_VendorEnabledPage> {
                         dateFormat: _dateFormat,
                       ),
           ),
-            ],
-          ),
         );
       },
     );

lib/features/masters/warehouse/presentation/pages/warehouse_page.dart

@@ -2,6 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:get_it/get_it.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
+import 'package:superport_v2/core/constants/app_sections.dart';
+import 'package:superport_v2/widgets/app_layout.dart';
+import 'package:superport_v2/widgets/components/filter_bar.dart';
+
 import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
 import '../../domain/entities/warehouse.dart';
@@ -133,28 +137,18 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
+        final showReset = _searchController.text.isNotEmpty ||
-          padding: const EdgeInsets.all(24),
+            _controller.statusFilter != WarehouseStatusFilter.all;
-          child: Column(
+
-            crossAxisAlignment: CrossAxisAlignment.start,
+        return AppLayout(
-            children: [
+          title: '입고지(창고) 관리',
-              Row(
+          subtitle: '창고 코드, 주소, 사용여부를 관리합니다.',
-                crossAxisAlignment: CrossAxisAlignment.start,
+          breadcrumbs: const [
-                children: [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-                  Expanded(
+            AppBreadcrumbItem(label: '마스터', path: '/masters/warehouses'),
-                    child: Column(
+            AppBreadcrumbItem(label: '창고'),
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text('입고지(창고) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '창고 코드, 주소, 사용여부를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
           ],
-                    ),
+          actions: [
-                  ),
-                  const SizedBox(width: 16),
             ShadButton(
               leading: const Icon(LucideIcons.plus, size: 16),
               onPressed: _controller.isSubmitting
@@ -163,16 +157,7 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
               child: const Text('신규 등록'),
             ),
           ],
-              ),
+          toolbar: FilterBar(
-              const SizedBox(height: 24),
-              ShadCard(
-                title: Text('검색 및 필터', style: theme.textTheme.h3),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Wrap(
-                      spacing: 16,
-                      runSpacing: 16,
             children: [
               SizedBox(
                 width: 260,
@@ -206,14 +191,10 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
                 ),
               ),
               ShadButton.outline(
-                          onPressed: _controller.isLoading
+                onPressed: _controller.isLoading ? null : _applyFilters,
-                              ? null
-                              : _applyFilters,
                 child: const Text('검색 적용'),
               ),
-                        if (_searchController.text.isNotEmpty ||
+              if (showReset)
-                            _controller.statusFilter !=
-                                WarehouseStatusFilter.all)
                 ShadButton.ghost(
                   onPressed: _controller.isLoading
                       ? null
@@ -230,11 +211,7 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
                 ),
             ],
           ),
-                  ],
+          child: ShadCard(
-                ),
-              ),
-              const SizedBox(height: 24),
-              ShadCard(
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -288,10 +265,8 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
                         dateFormat: _dateFormat,
                         onEdit: _controller.isSubmitting
                             ? null
-                            : (warehouse) => _openWarehouseForm(
+                            : (warehouse) =>
-                                context,
+                                  _openWarehouseForm(context, warehouse: warehouse),
-                                warehouse: warehouse,
-                              ),
                         onDelete: _controller.isSubmitting
                             ? null
                             : _confirmDelete,
@@ -300,8 +275,6 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
                             : _restoreWarehouse,
                       ),
           ),
-            ],
-          ),
         );
       },
     );

lib/features/reporting/presentation/pages/reporting_page.dart

@@ -1,30 +1,71 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
 
-import '../../../../widgets/spec_page.dart';
+import '../../../../core/constants/app_sections.dart';
+import '../../../../widgets/app_layout.dart';
+import '../../../../widgets/components/coming_soon_card.dart';
+import '../../../../widgets/components/filter_bar.dart';
 
 class ReportingPage extends StatelessWidget {
   const ReportingPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const SpecPage(
+    return AppLayout(
       title: '보고서',
-      summary: '기간, 유형, 창고, 상태 조건으로 보고서를 조회하고 내보냅니다.',
+      subtitle: '기간, 유형, 창고 조건을 선택해 통합 보고서를 내려받을 수 있도록 준비 중입니다.',
-      sections: [
+      breadcrumbs: const [
-        SpecSection(
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
-          title: '조건 입력',
+        AppBreadcrumbItem(label: '보고', path: '/reports'),
-          items: [
+        AppBreadcrumbItem(label: '보고서'),
-            '기간 [Date Range]',
-            '유형 [Dropdown]',
-            '창고 [Dropdown]',
-            '상태 [Dropdown]',
       ],
+      actions: [
+        ShadButton(
+          onPressed: null,
+          leading: const Icon(LucideIcons.fileDown, size: 16),
+          child: const Text('XLSX 다운로드'),
         ),
-        SpecSection(
+        ShadButton.outline(
-          title: '출력 옵션',
+          onPressed: null,
-          items: ['XLSX 다운로드 [Button]', 'PDF 다운로드 [Button]'],
+          leading: const Icon(LucideIcons.fileText, size: 16),
+          child: const Text('PDF 다운로드'),
         ),
       ],
+      toolbar: FilterBar(
+        children: [
+          ShadButton.outline(
+            onPressed: null,
+            leading: const Icon(LucideIcons.calendar, size: 16),
+            child: const Text('기간 선택 (준비중)'),
+          ),
+          ShadButton.outline(
+            onPressed: null,
+            leading: const Icon(LucideIcons.layers, size: 16),
+            child: const Text('유형 선택 (준비중)'),
+          ),
+          ShadButton.outline(
+            onPressed: null,
+            leading: const Icon(LucideIcons.warehouse, size: 16),
+            child: const Text('창고 선택 (준비중)'),
+          ),
+          ShadButton.outline(
+            onPressed: null,
+            leading: const Icon(LucideIcons.badgeCheck, size: 16),
+            child: const Text('상태 선택 (준비중)'),
+          ),
+          const ShadBadge(
+            child: Padding(
+              padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+              child: Text('API 스펙 정리 후 필터가 활성화됩니다.'),
+            ),
+          ),
+        ],
+      ),
+      child: const ComingSoonCard(
+        title: '보고서 화면 구현 준비 중',
+        description: '입·출고/결재 데이터를 조건별로 조회하고 다운로드할 수 있는 UI를 설계 중입니다.',
+        items: ['조건별 보고서 템플릿 매핑', '다운로드 진행 상태 표시 및 실패 처리', '즐겨찾는 조건 저장/불러오기'],
+      ),
     );
   }
 }

lib/injection_container.dart

@@ -9,6 +9,10 @@ import 'features/masters/customer/data/repositories/customer_repository_remote.d
 import 'features/masters/customer/domain/repositories/customer_repository.dart';
 import 'features/masters/group/data/repositories/group_repository_remote.dart';
 import 'features/masters/group/domain/repositories/group_repository.dart';
+import 'features/masters/menu/data/repositories/menu_repository_remote.dart';
+import 'features/masters/menu/domain/repositories/menu_repository.dart';
+import 'features/masters/group_permission/data/repositories/group_permission_repository_remote.dart';
+import 'features/masters/group_permission/domain/repositories/group_permission_repository.dart';
 import 'features/masters/product/data/repositories/product_repository_remote.dart';
 import 'features/masters/product/domain/repositories/product_repository.dart';
 import 'features/masters/user/data/repositories/user_repository_remote.dart';
@@ -19,6 +23,10 @@ import 'features/masters/warehouse/data/repositories/warehouse_repository_remote
 import 'features/masters/warehouse/domain/repositories/warehouse_repository.dart';
 import 'features/masters/uom/data/repositories/uom_repository_remote.dart';
 import 'features/masters/uom/domain/repositories/uom_repository.dart';
+import 'features/approvals/data/repositories/approval_repository_remote.dart';
+import 'features/approvals/data/repositories/approval_template_repository_remote.dart';
+import 'features/approvals/domain/repositories/approval_repository.dart';
+import 'features/approvals/domain/repositories/approval_template_repository.dart';
 
 /// 전역 DI 컨테이너
 final GetIt sl = GetIt.instance;
@@ -77,4 +85,20 @@ Future<void> initInjection({
   sl.registerLazySingleton<UserRepository>(
     () => UserRepositoryRemote(apiClient: sl<ApiClient>()),
   );
+
+  sl.registerLazySingleton<MenuRepository>(
+    () => MenuRepositoryRemote(apiClient: sl<ApiClient>()),
+  );
+
+  sl.registerLazySingleton<GroupPermissionRepository>(
+    () => GroupPermissionRepositoryRemote(apiClient: sl<ApiClient>()),
+  );
+
+  sl.registerLazySingleton<ApprovalRepository>(
+    () => ApprovalRepositoryRemote(apiClient: sl<ApiClient>()),
+  );
+
+  sl.registerLazySingleton<ApprovalTemplateRepository>(
+    () => ApprovalTemplateRepositoryRemote(apiClient: sl<ApiClient>()),
+  );
 }

lib/widgets/app_layout.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+import 'components/page_header.dart';
+
+/// 앱 공통 레이아웃: 브레드크럼/헤더/툴바/본문을 일관되게 배치한다.
+class AppLayout extends StatelessWidget {
+  const AppLayout({
+    super.key,
+    required this.title,
+    this.subtitle,
+    this.breadcrumbs = const <AppBreadcrumbItem>[],
+    this.actions,
+    this.toolbar,
+    required this.child,
+  });
+
+  final String title;
+  final String? subtitle;
+  final List<AppBreadcrumbItem> breadcrumbs;
+  final List<Widget>? actions;
+  final Widget? toolbar;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return SelectionArea(
+      child: SingleChildScrollView(
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if (breadcrumbs.isNotEmpty) ...[
+              _BreadcrumbBar(items: breadcrumbs),
+              const SizedBox(height: 16),
+            ],
+            PageHeader(
+              title: title,
+              subtitle: subtitle,
+              actions: actions,
+            ),
+            if (toolbar != null) ...[
+              const SizedBox(height: 16),
+              toolbar!,
+            ],
+            const SizedBox(height: 24),
+            child,
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class AppBreadcrumbItem {
+  const AppBreadcrumbItem({
+    required this.label,
+    this.path,
+    this.onTap,
+  });
+
+  final String label;
+  final String? path;
+  final VoidCallback? onTap;
+
+  void navigate(BuildContext context) {
+    if (path != null && path!.isNotEmpty) {
+      context.go(path!);
+      return;
+    }
+    onTap?.call();
+  }
+}
+
+class _BreadcrumbBar extends StatelessWidget {
+  const _BreadcrumbBar({required this.items});
+
+  final List<AppBreadcrumbItem> items;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    return Wrap(
+      spacing: 8,
+      crossAxisAlignment: WrapCrossAlignment.center,
+      children: [
+        for (int index = 0; index < items.length; index++) ...[
+          if (index != 0)
+            Icon(
+              LucideIcons.chevronRight,
+              size: 14,
+              color: colorScheme.mutedForeground,
+            ),
+          _BreadcrumbChip(item: items[index], isLast: index == items.length - 1),
+        ],
+      ],
+    );
+  }
+}
+
+class _BreadcrumbChip extends StatelessWidget {
+  const _BreadcrumbChip({required this.item, required this.isLast});
+
+  final AppBreadcrumbItem item;
+  final bool isLast;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    final label = Text(
+      item.label,
+      style: theme.textTheme.small.copyWith(
+        color: isLast ? theme.colorScheme.foreground : theme.colorScheme.mutedForeground,
+      ),
+    );
+
+    if (isLast || (item.path == null && item.onTap == null)) {
+      return label;
+    }
+
+    return InkWell(
+      onTap: () => item.navigate(context),
+      borderRadius: BorderRadius.circular(6),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+        child: label,
+      ),
+    );
+  }
+}

lib/widgets/components/coming_soon_card.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/widgets.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+/// 구축 예정인 화면에 안내 메시지를 제공하는 카드 위젯.
+class ComingSoonCard extends StatelessWidget {
+  const ComingSoonCard({
+    super.key,
+    required this.title,
+    required this.description,
+    this.items = const <String>[],
+  });
+
+  final String title;
+  final String description;
+  final List<String> items;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return ShadCard(
+      child: Padding(
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(title, style: theme.textTheme.h3),
+            const SizedBox(height: 12),
+            Text(description, style: theme.textTheme.p),
+            if (items.isNotEmpty) ...[
+              const SizedBox(height: 16),
+              for (final item in items)
+                Padding(
+                  padding: const EdgeInsets.only(top: 8),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      const Text('• '),
+                      Expanded(child: Text(item, style: theme.textTheme.p)),
+                    ],
+                  ),
+                ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/components/empty_state.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+class EmptyState extends StatelessWidget {
+  const EmptyState({super.key, required this.message, this.icon});
+
+  final String message;
+  final IconData? icon;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (icon != null)
+            Icon(icon, size: 48, color: theme.colorScheme.mutedForeground),
+          if (icon != null) const SizedBox(height: 16),
+          Text(message, style: theme.textTheme.muted),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/components/filter_bar.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+/// 검색/필터 영역을 위한 공통 래퍼.
+class FilterBar extends StatelessWidget {
+  const FilterBar({super.key, required this.children});
+
+  final List<Widget> children;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    return ShadCard(
+      title: Text('검색 및 필터', style: theme.textTheme.h3),
+      child: Align(
+        alignment: Alignment.centerLeft,
+        child: Wrap(
+          spacing: 16,
+          runSpacing: 16,
+          children: children,
+        ),
+      ),
+    );
+  }
+}

lib/widgets/components/page_header.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+/// 페이지 상단 타이틀/설명/액션을 일관되게 출력하는 헤더.
+class PageHeader extends StatelessWidget {
+  const PageHeader({
+    super.key,
+    required this.title,
+    this.subtitle,
+    this.leading,
+    this.actions,
+    this.trailing,
+  });
+
+  final String title;
+  final String? subtitle;
+  final Widget? leading;
+  final List<Widget>? actions;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (leading != null) ...[
+          leading!,
+          const SizedBox(width: 16),
+        ],
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(title, style: theme.textTheme.h2),
+              if (subtitle != null) ...[
+                const SizedBox(height: 6),
+                Text(subtitle!, style: theme.textTheme.muted),
+              ],
+            ],
+          ),
+        ),
+        if (actions != null && actions!.isNotEmpty) ...[
+          Wrap(
+            spacing: 12,
+            runSpacing: 12,
+            children: actions!,
+          ),
+        ],
+        if (trailing != null) ...[
+          const SizedBox(width: 16),
+          trailing!,
+        ],
+      ],
+    );
+  }
+}

lib/widgets/components/responsive.dart

@@ -0,0 +1,6 @@
+const double desktopBreakpoint = 1200;
+const double tabletBreakpoint = 960;
+
+bool isDesktop(double width) => width >= desktopBreakpoint;
+bool isTablet(double width) => width >= tabletBreakpoint && width < desktopBreakpoint;
+bool isMobile(double width) => width < tabletBreakpoint;

lib/widgets/components/superport_dialog.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+/// 공통 모달 다이얼로그.
+Future<T?> showSuperportDialog<T>({
+  required BuildContext context,
+  required String title,
+  String? description,
+  required Widget body,
+  List<Widget>? actions,
+  bool barrierDismissible = true,
+}) {
+  return showDialog<T>(
+    context: context,
+    barrierDismissible: barrierDismissible,
+    builder: (dialogContext) {
+      final theme = ShadTheme.of(dialogContext);
+      return Dialog(
+        insetPadding: const EdgeInsets.all(24),
+        clipBehavior: Clip.antiAlias,
+        child: ShadCard(
+          title: Text(title, style: theme.textTheme.h3),
+          description: description == null
+              ? null
+              : Text(description, style: theme.textTheme.muted),
+          footer: Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: actions ?? <Widget>[
+              ShadButton.ghost(
+                onPressed: () => Navigator.of(dialogContext).pop(),
+                child: const Text('닫기'),
+              ),
+            ],
+          ),
+          child: body,
+        ),
+      );
+    },
+  );
+}

lib/widgets/components/superport_table.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+/// ShadTable.list를 감싼 공통 테이블 래퍼.
+class SuperportTable extends StatelessWidget {
+  const SuperportTable({
+    super.key,
+    required this.columns,
+    required this.rows,
+    this.columnSpanExtent,
+    this.rowHeight = 56,
+    this.onRowTap,
+    this.emptyLabel = '데이터가 없습니다.',
+  });
+
+  final List<Widget> columns;
+  final List<List<Widget>> rows;
+  final TableSpanExtent? Function(int index)? columnSpanExtent;
+  final double rowHeight;
+  final void Function(int index)? onRowTap;
+  final String emptyLabel;
+
+  @override
+  Widget build(BuildContext context) {
+    if (rows.isEmpty) {
+      final theme = ShadTheme.of(context);
+      return Padding(
+        padding: const EdgeInsets.all(32),
+        child: Center(
+          child: Text(emptyLabel, style: theme.textTheme.muted),
+        ),
+      );
+    }
+
+    final tableRows = [
+      for (final row in rows)
+        row
+            .map(
+              (cell) => cell is ShadTableCell ? cell : ShadTableCell(child: cell),
+            )
+            .toList(),
+    ];
+
+    return ShadTable.list(
+      header: columns
+          .map(
+            (cell) => cell is ShadTableCell
+                ? cell
+                : ShadTableCell.header(child: cell),
+          )
+          .toList(),
+      columnSpanExtent: columnSpanExtent,
+      rowSpanExtent: (_) => FixedTableSpanExtent(rowHeight),
+      onRowTap: onRowTap,
+      children: tableRows,
+    );
+  }
+}

test/features/approvals/presentation/controllers/approval_controller_test.dart

@@ -0,0 +1,504 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/features/approvals/domain/entities/approval.dart';
+import 'package:superport_v2/features/approvals/domain/entities/approval_template.dart';
+import 'package:superport_v2/features/approvals/domain/repositories/approval_repository.dart';
+import 'package:superport_v2/features/approvals/domain/repositories/approval_template_repository.dart';
+import 'package:superport_v2/features/approvals/presentation/controllers/approval_controller.dart';
+
+class _MockApprovalRepository extends Mock implements ApprovalRepository {}
+
+class _FakeApprovalInput extends Fake implements ApprovalInput {}
+
+class _FakeStepActionInput extends Fake implements ApprovalStepActionInput {}
+
+class _MockApprovalTemplateRepository extends Mock
+    implements ApprovalTemplateRepository {}
+
+class _FakeStepAssignmentInput extends Fake
+    implements ApprovalStepAssignmentInput {}
+
+void main() {
+  late ApprovalController controller;
+  late _MockApprovalRepository repository;
+  late _MockApprovalTemplateRepository templateRepository;
+
+  final sampleStep = ApprovalStep(
+    id: 11,
+    stepOrder: 1,
+    approver: ApprovalApprover(id: 21, employeeNo: 'E001', name: '최승인'),
+    status: ApprovalStatus(id: 1, name: '대기'),
+    assignedAt: DateTime(2024, 4, 1, 9),
+  );
+
+  final sampleApproval = Approval(
+    id: 1,
+    approvalNo: 'AP-24001',
+    transactionNo: 'TRX-001',
+    status: ApprovalStatus(id: 1, name: '대기'),
+    currentStep: sampleStep,
+    requester: ApprovalRequester(id: 31, employeeNo: 'EMP001', name: '김상신'),
+    requestedAt: DateTime(2024, 4, 1, 9),
+    note: '긴급 결재',
+    steps: [sampleStep],
+    histories: const [],
+  );
+
+  PaginatedResult<Approval> createResult(List<Approval> items) {
+    return PaginatedResult<Approval>(
+      items: items,
+      page: 1,
+      pageSize: 20,
+      total: items.length,
+    );
+  }
+
+  setUpAll(() {
+    registerFallbackValue(_FakeApprovalInput());
+    registerFallbackValue(_FakeStepActionInput());
+    registerFallbackValue(_FakeStepAssignmentInput());
+  });
+
+  setUp(() {
+    repository = _MockApprovalRepository();
+    templateRepository = _MockApprovalTemplateRepository();
+    controller = ApprovalController(
+      approvalRepository: repository,
+      templateRepository: templateRepository,
+    );
+  });
+
+  group('fetch', () {
+    setUp(() {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          status: any(named: 'status'),
+          from: any(named: 'from'),
+          to: any(named: 'to'),
+          includeHistories: any(named: 'includeHistories'),
+          includeSteps: any(named: 'includeSteps'),
+        ),
+      ).thenAnswer((_) async => createResult([sampleApproval]));
+    });
+
+    test('목록을 조회한다', () async {
+      await controller.fetch();
+
+      expect(controller.result?.items, isNotEmpty);
+      expect(controller.errorMessage, isNull);
+    });
+
+    test('필터 전달을 검증한다', () async {
+      controller.updateQuery('TRX');
+      controller.updateStatusFilter(ApprovalStatusFilter.approved);
+      final from = DateTime(2024, 4, 1);
+      final to = DateTime(2024, 4, 30);
+      controller.updateDateRange(from, to);
+
+      await controller.fetch(page: 3);
+
+      verify(
+        () => repository.list(
+          page: 3,
+          pageSize: 20,
+          query: 'TRX',
+          status: 'approved',
+          from: from,
+          to: to,
+          includeHistories: false,
+          includeSteps: false,
+        ),
+      ).called(1);
+    });
+
+    test('에러 발생 시 errorMessage 설정', () async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          status: any(named: 'status'),
+          from: any(named: 'from'),
+          to: any(named: 'to'),
+          includeHistories: any(named: 'includeHistories'),
+          includeSteps: any(named: 'includeSteps'),
+        ),
+      ).thenThrow(Exception('fail'));
+
+      await controller.fetch();
+
+      expect(controller.errorMessage, isNotNull);
+    });
+  });
+
+  group('selectApproval', () {
+    test('상세를 조회하고 저장한다', () async {
+      when(
+        () => repository.fetchDetail(
+          any(),
+          includeSteps: any(named: 'includeSteps'),
+          includeHistories: any(named: 'includeHistories'),
+        ),
+      ).thenAnswer((_) async => sampleApproval);
+
+      await controller.selectApproval(1);
+
+      expect(controller.selected, isNotNull);
+      verify(
+        () => repository.fetchDetail(
+          1,
+          includeSteps: true,
+          includeHistories: true,
+        ),
+      ).called(1);
+    });
+
+    test('에러 발생 시 errorMessage 설정', () async {
+      when(
+        () => repository.fetchDetail(
+          any(),
+          includeSteps: any(named: 'includeSteps'),
+          includeHistories: any(named: 'includeHistories'),
+        ),
+      ).thenThrow(Exception('detail fail'));
+
+      await controller.selectApproval(1);
+
+      expect(controller.errorMessage, isNotNull);
+    });
+  });
+
+  group('loadActionOptions', () {
+    test('행위 목록을 불러오고 캐시한다', () async {
+      when(
+        () => repository.listActions(activeOnly: any(named: 'activeOnly')),
+      ).thenAnswer((_) async => [ApprovalAction(id: 1, name: 'approve')]);
+
+      await controller.loadActionOptions(force: true);
+
+      expect(controller.hasActionOptions, isTrue);
+      expect(controller.actionOptions.length, 1);
+
+      clearInteractions(repository);
+
+      await controller.loadActionOptions();
+
+      verifyNever(
+        () => repository.listActions(activeOnly: any(named: 'activeOnly')),
+      );
+    });
+
+    test('에러 발생 시 errorMessage 설정', () async {
+      when(
+        () => repository.listActions(activeOnly: any(named: 'activeOnly')),
+      ).thenThrow(Exception('actions fail'));
+
+      await controller.loadActionOptions(force: true);
+
+      expect(controller.errorMessage, isNotNull);
+    });
+  });
+
+  group('loadTemplates', () {
+    test('템플릿 목록을 불러오고 캐시한다', () async {
+      when(
+        () => templateRepository.list(activeOnly: any(named: 'activeOnly')),
+      ).thenAnswer(
+        (_) async => [
+          ApprovalTemplate(id: 1, code: 'TEMP', name: '기본 템플릿', isActive: true),
+        ],
+      );
+
+      await controller.loadTemplates(force: true);
+
+      expect(controller.templates.length, 1);
+      expect(controller.isLoadingTemplates, isFalse);
+
+      clearInteractions(templateRepository);
+
+      await controller.loadTemplates();
+
+      verifyNever(
+        () => templateRepository.list(activeOnly: any(named: 'activeOnly')),
+      );
+    });
+
+    test('에러 발생 시 errorMessage 설정', () async {
+      when(
+        () => templateRepository.list(activeOnly: any(named: 'activeOnly')),
+      ).thenThrow(Exception('template fail'));
+
+      await controller.loadTemplates(force: true);
+
+      expect(controller.errorMessage, isNotNull);
+      expect(controller.isLoadingTemplates, isFalse);
+    });
+  });
+
+  group('performStepAction', () {
+    late ApprovalStep updatedStep;
+    late Approval updatedApproval;
+
+    setUp(() {
+      when(
+        () => repository.listActions(activeOnly: any(named: 'activeOnly')),
+      ).thenAnswer(
+        (_) async => [
+          ApprovalAction(id: 1, name: 'approve'),
+          ApprovalAction(id: 2, name: 'reject'),
+          ApprovalAction(id: 3, name: 'comment'),
+        ],
+      );
+
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          status: any(named: 'status'),
+          from: any(named: 'from'),
+          to: any(named: 'to'),
+          includeHistories: any(named: 'includeHistories'),
+          includeSteps: any(named: 'includeSteps'),
+        ),
+      ).thenAnswer((_) async => createResult([sampleApproval]));
+
+      when(
+        () => repository.fetchDetail(
+          any(),
+          includeSteps: any(named: 'includeSteps'),
+          includeHistories: any(named: 'includeHistories'),
+        ),
+      ).thenAnswer((_) async => sampleApproval);
+
+      updatedStep = ApprovalStep(
+        id: 11,
+        stepOrder: 1,
+        approver: sampleStep.approver,
+        status: ApprovalStatus(id: 2, name: '승인'),
+        assignedAt: sampleStep.assignedAt,
+        decidedAt: DateTime(2024, 4, 1, 9, 30),
+        note: '승인 완료',
+      );
+
+      updatedApproval = sampleApproval.copyWith(
+        status: ApprovalStatus(id: 2, name: '승인'),
+        currentStep: updatedStep,
+        steps: [updatedStep],
+      );
+    });
+
+    test('성공 시 상세와 목록을 갱신한다', () async {
+      when(
+        () => repository.performStepAction(any()),
+      ).thenAnswer((_) async => updatedApproval);
+
+      await controller.loadActionOptions(force: true);
+      await controller.fetch();
+      await controller.selectApproval(sampleApproval.id!);
+
+      final success = await controller.performStepAction(
+        step: sampleStep,
+        type: ApprovalStepActionType.approve,
+      );
+
+      expect(success, isTrue);
+      expect(controller.selected?.status.name, '승인');
+      expect(controller.result?.items.first.status.name, '승인');
+      expect(controller.isPerformingAction, isFalse);
+      verify(() => repository.performStepAction(any())).called(1);
+    });
+
+    test('예외 발생 시 errorMessage 설정', () async {
+      when(
+        () => repository.performStepAction(any()),
+      ).thenThrow(Exception('action fail'));
+
+      await controller.loadActionOptions(force: true);
+      await controller.fetch();
+      await controller.selectApproval(sampleApproval.id!);
+
+      final success = await controller.performStepAction(
+        step: sampleStep,
+        type: ApprovalStepActionType.approve,
+      );
+
+      expect(success, isFalse);
+      expect(controller.errorMessage, isNotNull);
+      expect(controller.isPerformingAction, isFalse);
+    });
+
+    test('행위를 찾지 못하면 요청하지 않는다', () async {
+      when(
+        () => repository.listActions(activeOnly: any(named: 'activeOnly')),
+      ).thenAnswer((_) async => [ApprovalAction(id: 9, name: 'other')]);
+
+      await controller.loadActionOptions(force: true);
+      await controller.fetch();
+      await controller.selectApproval(sampleApproval.id!);
+
+      final success = await controller.performStepAction(
+        step: sampleStep,
+        type: ApprovalStepActionType.approve,
+      );
+
+      expect(success, isFalse);
+      expect(controller.errorMessage, isNotNull);
+      verifyNever(() => repository.performStepAction(any()));
+    });
+  });
+
+  group('applyTemplate', () {
+    late ApprovalTemplate template;
+    late Approval updatedApproval;
+
+    setUp(() {
+      template = ApprovalTemplate(
+        id: 901,
+        code: 'TEMP-001',
+        name: '입고 1단계',
+        isActive: true,
+        steps: [
+          ApprovalTemplateStep(
+            stepOrder: 1,
+            approver: ApprovalTemplateApprover(
+              id: 21,
+              employeeNo: 'E001',
+              name: '최승인',
+            ),
+          ),
+        ],
+      );
+
+      when(
+        () => templateRepository.fetchDetail(
+          any(),
+          includeSteps: any(named: 'includeSteps'),
+        ),
+      ).thenAnswer((_) async => template);
+
+      when(
+        () => templateRepository.list(activeOnly: any(named: 'activeOnly')),
+      ).thenAnswer((_) async => [template]);
+
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          status: any(named: 'status'),
+          from: any(named: 'from'),
+          to: any(named: 'to'),
+          includeHistories: any(named: 'includeHistories'),
+          includeSteps: any(named: 'includeSteps'),
+        ),
+      ).thenAnswer((_) async => createResult([sampleApproval]));
+
+      when(
+        () => repository.fetchDetail(
+          any(),
+          includeSteps: any(named: 'includeSteps'),
+          includeHistories: any(named: 'includeHistories'),
+        ),
+      ).thenAnswer((_) async => sampleApproval);
+
+      updatedApproval = sampleApproval.copyWith(
+        steps: [
+          ApprovalStep(
+            id: 11,
+            stepOrder: 1,
+            approver: ApprovalApprover(id: 21, employeeNo: 'E001', name: '최승인'),
+            status: ApprovalStatus(id: 1, name: '대기'),
+            assignedAt: DateTime(2024, 4, 1, 9),
+          ),
+        ],
+      );
+    });
+
+    test('성공 시 결재 상세를 갱신한다', () async {
+      when(
+        () => repository.assignSteps(any()),
+      ).thenAnswer((_) async => updatedApproval);
+
+      await controller.loadTemplates(force: true);
+      await controller.fetch();
+      await controller.selectApproval(sampleApproval.id!);
+
+      final success = await controller.applyTemplate(template.id);
+
+      expect(success, isTrue);
+      expect(controller.selected?.steps.length, 1);
+      verify(() => repository.assignSteps(any())).called(1);
+    });
+
+    test('템플릿 단계가 없으면 실패한다', () async {
+      when(
+        () => templateRepository.fetchDetail(
+          any(),
+          includeSteps: any(named: 'includeSteps'),
+        ),
+      ).thenAnswer(
+        (_) async => ApprovalTemplate(
+          id: template.id,
+          code: template.code,
+          name: template.name,
+          description: template.description,
+          isActive: template.isActive,
+          createdBy: template.createdBy,
+          createdAt: template.createdAt,
+          updatedAt: template.updatedAt,
+          steps: const [],
+        ),
+      );
+
+      await controller.selectApproval(sampleApproval.id!);
+
+      final success = await controller.applyTemplate(template.id);
+
+      expect(success, isFalse);
+      expect(controller.errorMessage, isNotNull);
+    });
+
+    test('예외 발생 시 errorMessage 설정', () async {
+      when(
+        () => templateRepository.fetchDetail(
+          any(),
+          includeSteps: any(named: 'includeSteps'),
+        ),
+      ).thenThrow(Exception('template detail fail'));
+
+      await controller.selectApproval(sampleApproval.id!);
+
+      final success = await controller.applyTemplate(template.id);
+
+      expect(success, isFalse);
+      expect(controller.errorMessage, isNotNull);
+    });
+
+    test('선택된 결재가 없으면 적용하지 않는다', () async {
+      final success = await controller.applyTemplate(template.id);
+
+      expect(success, isFalse);
+      expect(controller.errorMessage, isNotNull);
+      verifyNever(() => repository.assignSteps(any()));
+    });
+  });
+
+  test('필터 초기화', () {
+    controller.updateQuery('abc');
+    controller.updateStatusFilter(ApprovalStatusFilter.rejected);
+    controller.updateDateRange(DateTime(2024, 1, 1), DateTime(2024, 1, 31));
+
+    controller.clearFilters();
+
+    expect(controller.query, isEmpty);
+    expect(controller.statusFilter, ApprovalStatusFilter.all);
+    expect(controller.fromDate, isNull);
+    expect(controller.toDate, isNull);
+  });
+}

test/features/approvals/presentation/pages/approval_page_test.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:get_it/get_it.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+import 'package:superport_v2/features/approvals/domain/entities/approval.dart';
+import 'package:superport_v2/features/approvals/domain/repositories/approval_repository.dart';
+import 'package:superport_v2/features/approvals/presentation/pages/approval_page.dart';
+
+class _MockApprovalRepository extends Mock implements ApprovalRepository {}
+
+class _FakeApprovalInput extends Fake implements ApprovalInput {}
+
+Widget _buildApp(Widget child) {
+  return MaterialApp(
+    home: ShadTheme(
+      data: ShadThemeData(
+        colorScheme: const ShadSlateColorScheme.light(),
+        brightness: Brightness.light,
+      ),
+      child: Scaffold(body: child),
+    ),
+  );
+}
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  setUpAll(() {
+    registerFallbackValue(_FakeApprovalInput());
+  });
+
+  tearDown(() async {
+    await GetIt.I.reset();
+    dotenv.clean();
+  });
+
+  testWidgets('플래그 Off 시 스펙 화면', (tester) async {
+    dotenv.testLoad(fileInput: 'FEATURE_APPROVALS_ENABLED=false\n');
+
+    await tester.pumpWidget(_buildApp(const ApprovalPage()));
+    await tester.pump();
+
+    expect(find.text('결재 관리'), findsOneWidget);
+    expect(find.text('비활성화 (백엔드 준비 중)'), findsOneWidget);
+  });
+
+  group('플래그 On', () {
+    late _MockApprovalRepository repository;
+
+    setUp(() {
+      dotenv.testLoad(fileInput: 'FEATURE_APPROVALS_ENABLED=true\n');
+      repository = _MockApprovalRepository();
+      GetIt.I.registerLazySingleton<ApprovalRepository>(() => repository);
+    });
+
+  });
+}

test/features/masters/group/presentation/controllers/group_controller_test.dart

@@ -0,0 +1,193 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/features/masters/group/domain/entities/group.dart';
+import 'package:superport_v2/features/masters/group/domain/repositories/group_repository.dart';
+import 'package:superport_v2/features/masters/group/presentation/controllers/group_controller.dart';
+
+class _MockGroupRepository extends Mock implements GroupRepository {}
+
+class _FakeGroupInput extends Fake implements GroupInput {}
+
+void main() {
+  late GroupController controller;
+  late _MockGroupRepository repository;
+
+  final sampleGroup = Group(
+    id: 1,
+    groupName: '관리자',
+    description: '전체 권한',
+    isDefault: true,
+    isActive: true,
+    isDeleted: false,
+  );
+
+  PaginatedResult<Group> createResult({List<Group>? items}) {
+    final list = items ?? [sampleGroup];
+    return PaginatedResult<Group>(
+      items: list,
+      page: 1,
+      pageSize: 20,
+      total: list.length,
+    );
+  }
+
+  setUpAll(() {
+    registerFallbackValue(_FakeGroupInput());
+  });
+
+  setUp(() {
+    repository = _MockGroupRepository();
+    controller = GroupController(repository: repository);
+  });
+
+  group('fetch', () {
+    test('정상 조회 시 결과가 갱신된다', () async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenAnswer((_) async => createResult());
+
+      await controller.fetch();
+
+      expect(controller.isLoading, isFalse);
+      expect(controller.errorMessage, isNull);
+      expect(controller.result?.items, isNotEmpty);
+      verify(
+        () => repository.list(
+          page: 1,
+          pageSize: 20,
+          query: null,
+          isDefault: null,
+          isActive: null,
+        ),
+      ).called(1);
+    });
+
+    test('에러 발생 시 errorMessage에 저장한다', () async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenThrow(Exception('fail'));
+
+      await controller.fetch();
+
+      expect(controller.isLoading, isFalse);
+      expect(controller.errorMessage, isNotNull);
+    });
+
+    test('필터 상태를 파라미터에 반영한다', () async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenAnswer((_) async => createResult());
+
+      controller.updateQuery('admin');
+      controller.updateDefaultFilter(GroupDefaultFilter.defaultOnly);
+      controller.updateStatusFilter(GroupStatusFilter.inactiveOnly);
+
+      await controller.fetch();
+
+      verify(
+        () => repository.list(
+          page: 1,
+          pageSize: 20,
+          query: 'admin',
+          isDefault: true,
+          isActive: false,
+        ),
+      ).called(1);
+    });
+  });
+
+  test('필터 업데이트 메서드', () {
+    controller.updateQuery('abc');
+    controller.updateDefaultFilter(GroupDefaultFilter.nonDefault);
+    controller.updateStatusFilter(GroupStatusFilter.activeOnly);
+
+    expect(controller.query, 'abc');
+    expect(controller.defaultFilter, GroupDefaultFilter.nonDefault);
+    expect(controller.statusFilter, GroupStatusFilter.activeOnly);
+  });
+
+  group('mutations', () {
+    setUp(() {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenAnswer((_) async => createResult());
+    });
+
+    final input = GroupInput(groupName: '관리자');
+
+    test('create 성공 시 목록 재조회', () async {
+      when(() => repository.create(any())).thenAnswer((_) async => sampleGroup);
+
+      final created = await controller.create(input);
+
+      expect(created, isNotNull);
+      verify(() => repository.create(any())).called(1);
+      verify(
+        () => repository.list(
+          page: 1,
+          pageSize: 20,
+          query: null,
+          isDefault: null,
+          isActive: null,
+        ),
+      ).called(greaterThanOrEqualTo(1));
+    });
+
+    test('update 성공 시 현재 페이지 유지', () async {
+      when(
+        () => repository.update(any(), any()),
+      ).thenAnswer((_) async => sampleGroup);
+
+      final updated = await controller.update(1, input);
+
+      expect(updated, isNotNull);
+      verify(() => repository.update(1, any())).called(1);
+    });
+
+    test('delete 성공 시 true 반환', () async {
+      when(() => repository.delete(any())).thenAnswer((_) async {});
+
+      final deleted = await controller.delete(1);
+
+      expect(deleted, isTrue);
+      verify(() => repository.delete(1)).called(1);
+    });
+
+    test('restore 성공 시 그룹 반환', () async {
+      when(
+        () => repository.restore(any()),
+      ).thenAnswer((_) async => sampleGroup);
+
+      final restored = await controller.restore(1);
+
+      expect(restored, isNotNull);
+      verify(() => repository.restore(1)).called(1);
+    });
+  });
+}

test/features/masters/group/presentation/pages/group_page_test.dart

@@ -0,0 +1,192 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:get_it/get_it.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/features/masters/group/domain/entities/group.dart';
+import 'package:superport_v2/features/masters/group/domain/repositories/group_repository.dart';
+import 'package:superport_v2/features/masters/group/presentation/pages/group_page.dart';
+
+class _MockGroupRepository extends Mock implements GroupRepository {}
+
+class _FakeGroupInput extends Fake implements GroupInput {}
+
+Widget _buildApp(Widget child) {
+  return MaterialApp(
+    home: ShadTheme(
+      data: ShadThemeData(
+        colorScheme: const ShadSlateColorScheme.light(),
+        brightness: Brightness.light,
+      ),
+      child: Scaffold(body: child),
+    ),
+  );
+}
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  setUpAll(() {
+    registerFallbackValue(_FakeGroupInput());
+  });
+
+  tearDown(() async {
+    await GetIt.I.reset();
+    dotenv.clean();
+  });
+
+  testWidgets('플래그 Off 시 스펙 페이지 표시', (tester) async {
+    dotenv.testLoad(fileInput: 'FEATURE_GROUPS_ENABLED=false\n');
+
+    await tester.pumpWidget(_buildApp(const GroupPage()));
+    await tester.pump();
+
+    expect(find.text('그룹 관리'), findsOneWidget);
+    expect(find.text('비활성화 (백엔드 준비 중)'), findsOneWidget);
+  });
+
+  group('플래그 On', () {
+    late _MockGroupRepository repository;
+
+    setUp(() {
+      dotenv.testLoad(fileInput: 'FEATURE_GROUPS_ENABLED=true\n');
+      repository = _MockGroupRepository();
+      GetIt.I.registerLazySingleton<GroupRepository>(() => repository);
+    });
+
+    testWidgets('목록을 조회하여 표에 렌더링한다', (tester) async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<Group>(
+          items: [
+            Group(
+              id: 1,
+              groupName: '관리자',
+              description: '전체 권한',
+              isDefault: true,
+            ),
+          ],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        ),
+      );
+
+      await tester.pumpWidget(_buildApp(const GroupPage()));
+      await tester.pumpAndSettle();
+
+      expect(find.text('관리자'), findsOneWidget);
+      verify(
+        () => repository.list(
+          page: 1,
+          pageSize: 20,
+          query: null,
+          isDefault: null,
+          isActive: null,
+        ),
+      ).called(1);
+    });
+
+    testWidgets('신규 등록 폼 검증 오류를 노출한다', (tester) async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<Group>(
+          items: const [],
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        ),
+      );
+
+      await tester.pumpWidget(_buildApp(const GroupPage()));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('신규 등록'));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text('등록'));
+      await tester.pump();
+
+      expect(find.text('그룹명을 입력하세요.'), findsOneWidget);
+    });
+
+    testWidgets('신규 등록 성공 시 목록이 갱신된다', (tester) async {
+      var listCallCount = 0;
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenAnswer((_) async {
+        listCallCount += 1;
+        if (listCallCount == 1) {
+          return PaginatedResult<Group>(
+            items: const [],
+            page: 1,
+            pageSize: 20,
+            total: 0,
+          );
+        }
+        return PaginatedResult<Group>(
+          items: [Group(id: 2, groupName: '운영팀', description: '운영 담당')],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        );
+      });
+
+      GroupInput? capturedInput;
+      when(() => repository.create(any())).thenAnswer((invocation) async {
+        capturedInput = invocation.positionalArguments.first as GroupInput;
+        return Group(
+          id: 2,
+          groupName: capturedInput!.groupName,
+          description: capturedInput!.description,
+        );
+      });
+
+      await tester.pumpWidget(_buildApp(const GroupPage()));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('신규 등록'));
+      await tester.pumpAndSettle();
+
+      final dialog = find.byType(Dialog);
+      final editableTexts = find.descendant(
+        of: dialog,
+        matching: find.byType(EditableText),
+      );
+
+      await tester.enterText(editableTexts.at(0), '운영팀');
+      await tester.enterText(editableTexts.at(1), '운영 담당');
+
+      await tester.tap(find.text('등록'));
+      await tester.pumpAndSettle();
+
+      expect(capturedInput, isNotNull);
+      expect(capturedInput?.groupName, '운영팀');
+      expect(find.byType(Dialog), findsNothing);
+      expect(find.text('운영팀'), findsOneWidget);
+      verify(() => repository.create(any())).called(1);
+    });
+  });
+}

test/features/masters/group_permission/presentation/controllers/group_permission_controller_test.dart

@@ -0,0 +1,240 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/features/masters/group/domain/entities/group.dart';
+import 'package:superport_v2/features/masters/group/domain/repositories/group_repository.dart';
+import 'package:superport_v2/features/masters/group_permission/domain/entities/group_permission.dart';
+import 'package:superport_v2/features/masters/group_permission/domain/repositories/group_permission_repository.dart';
+import 'package:superport_v2/features/masters/group_permission/presentation/controllers/group_permission_controller.dart';
+import 'package:superport_v2/features/masters/menu/domain/entities/menu.dart';
+import 'package:superport_v2/features/masters/menu/domain/repositories/menu_repository.dart';
+
+class _MockPermissionRepository extends Mock
+    implements GroupPermissionRepository {}
+
+class _MockGroupRepository extends Mock implements GroupRepository {}
+
+class _MockMenuRepository extends Mock implements MenuRepository {}
+
+class _FakeGroupPermissionInput extends Fake implements GroupPermissionInput {}
+
+void main() {
+  late GroupPermissionController controller;
+  late _MockPermissionRepository permissionRepository;
+  late _MockGroupRepository groupRepository;
+  late _MockMenuRepository menuRepository;
+
+  final samplePermission = GroupPermission(
+    id: 1,
+    group: GroupPermissionGroup(id: 1, groupName: '관리자'),
+    menu: GroupPermissionMenu(id: 10, menuName: '대시보드'),
+    canCreate: true,
+    canRead: true,
+    canUpdate: false,
+    canDelete: false,
+  );
+
+  PaginatedResult<GroupPermission> createResult(List<GroupPermission> items) {
+    return PaginatedResult<GroupPermission>(
+      items: items,
+      page: 1,
+      pageSize: 20,
+      total: items.length,
+    );
+  }
+
+  setUpAll(() {
+    registerFallbackValue(_FakeGroupPermissionInput());
+  });
+
+  setUp(() {
+    permissionRepository = _MockPermissionRepository();
+    groupRepository = _MockGroupRepository();
+    menuRepository = _MockMenuRepository();
+    controller = GroupPermissionController(
+      permissionRepository: permissionRepository,
+      groupRepository: groupRepository,
+      menuRepository: menuRepository,
+    );
+  });
+
+  group('loadGroups/loadMenus', () {
+    test('그룹 목록을 로드한다', () async {
+      when(
+        () => groupRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<Group>(
+          items: [Group(id: 1, groupName: '관리자')],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        ),
+      );
+
+      await controller.loadGroups();
+
+      expect(controller.groups, isNotEmpty);
+    });
+
+    test('메뉴 목록을 로드한다', () async {
+      when(
+        () => menuRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<MenuItem>(
+          items: [MenuItem(id: 10, menuCode: 'MENU001', menuName: '대시보드')],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        ),
+      );
+
+      await controller.loadMenus();
+
+      expect(controller.menus, isNotEmpty);
+    });
+  });
+
+  group('fetch', () {
+    setUp(() {
+      when(
+        () => permissionRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          groupId: any(named: 'groupId'),
+          menuId: any(named: 'menuId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer((_) async => createResult([samplePermission]));
+    });
+
+    test('정상 조회 시 데이터를 보관한다', () async {
+      await controller.fetch();
+
+      expect(controller.result?.items, isNotEmpty);
+      expect(controller.errorMessage, isNull);
+    });
+
+    test('필터 값을 전달한다', () async {
+      controller.updateGroupFilter(2);
+      controller.updateMenuFilter(5);
+      controller.updateStatusFilter(GroupPermissionStatusFilter.inactiveOnly);
+      controller.updateIncludeDeleted(true);
+
+      await controller.fetch(page: 3);
+
+      verify(
+        () => permissionRepository.list(
+          page: 3,
+          pageSize: 20,
+          groupId: 2,
+          menuId: 5,
+          isActive: false,
+          includeDeleted: true,
+        ),
+      ).called(1);
+    });
+
+    test('에러 발생 시 errorMessage에 저장', () async {
+      when(
+        () => permissionRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          groupId: any(named: 'groupId'),
+          menuId: any(named: 'menuId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenThrow(Exception('fail'));
+
+      await controller.fetch();
+
+      expect(controller.errorMessage, isNotNull);
+    });
+  });
+
+  test('필터 업데이트 메서드', () {
+    controller.updateGroupFilter(3);
+    controller.updateMenuFilter(7);
+    controller.updateStatusFilter(GroupPermissionStatusFilter.activeOnly);
+    controller.updateIncludeDeleted(true);
+
+    expect(controller.groupFilter, 3);
+    expect(controller.menuFilter, 7);
+    expect(controller.statusFilter, GroupPermissionStatusFilter.activeOnly);
+    expect(controller.includeDeleted, isTrue);
+  });
+
+  group('mutations', () {
+    setUp(() {
+      when(
+        () => permissionRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          groupId: any(named: 'groupId'),
+          menuId: any(named: 'menuId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer((_) async => createResult([samplePermission]));
+    });
+
+    final input = GroupPermissionInput(groupId: 1, menuId: 2);
+
+    test('create 성공', () async {
+      when(
+        () => permissionRepository.create(any()),
+      ).thenAnswer((_) async => samplePermission);
+
+      final created = await controller.create(input);
+
+      expect(created, isNotNull);
+      verify(() => permissionRepository.create(any())).called(1);
+    });
+
+    test('update 성공', () async {
+      when(
+        () => permissionRepository.update(any(), any()),
+      ).thenAnswer((_) async => samplePermission);
+
+      final updated = await controller.update(1, input);
+
+      expect(updated, isNotNull);
+      verify(() => permissionRepository.update(1, any())).called(1);
+    });
+
+    test('delete 성공', () async {
+      when(() => permissionRepository.delete(any())).thenAnswer((_) async {});
+
+      final result = await controller.delete(1);
+
+      expect(result, isTrue);
+      verify(() => permissionRepository.delete(1)).called(1);
+    });
+
+    test('restore 성공', () async {
+      when(
+        () => permissionRepository.restore(any()),
+      ).thenAnswer((_) async => samplePermission);
+
+      final restored = await controller.restore(1);
+
+      expect(restored, isNotNull);
+      verify(() => permissionRepository.restore(1)).called(1);
+    });
+  });
+}

test/features/masters/group_permission/presentation/pages/group_permission_page_test.dart

@@ -0,0 +1,285 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:get_it/get_it.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/features/masters/group/domain/entities/group.dart';
+import 'package:superport_v2/features/masters/group/domain/repositories/group_repository.dart';
+import 'package:superport_v2/features/masters/group_permission/domain/entities/group_permission.dart';
+import 'package:superport_v2/features/masters/group_permission/domain/repositories/group_permission_repository.dart';
+import 'package:superport_v2/features/masters/group_permission/presentation/pages/group_permission_page.dart';
+import 'package:superport_v2/features/masters/menu/domain/entities/menu.dart';
+import 'package:superport_v2/features/masters/menu/domain/repositories/menu_repository.dart';
+
+class _MockPermissionRepository extends Mock
+    implements GroupPermissionRepository {}
+
+class _MockGroupRepository extends Mock implements GroupRepository {}
+
+class _MockMenuRepository extends Mock implements MenuRepository {}
+
+class _FakeGroupPermissionInput extends Fake implements GroupPermissionInput {}
+
+Widget _buildApp(Widget child) {
+  return MaterialApp(
+    home: ShadTheme(
+      data: ShadThemeData(
+        colorScheme: const ShadSlateColorScheme.light(),
+        brightness: Brightness.light,
+      ),
+      child: Scaffold(body: child),
+    ),
+  );
+}
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  setUpAll(() {
+    registerFallbackValue(_FakeGroupPermissionInput());
+  });
+
+  tearDown(() async {
+    await GetIt.I.reset();
+    dotenv.clean();
+  });
+
+  testWidgets('플래그 Off 시 스펙 화면 표시', (tester) async {
+    dotenv.testLoad(fileInput: 'FEATURE_GROUP_PERMISSIONS_ENABLED=false\n');
+
+    await tester.pumpWidget(_buildApp(const GroupPermissionPage()));
+    await tester.pump();
+
+    expect(find.text('그룹 권한 관리'), findsOneWidget);
+    expect(find.text('비활성화 (백엔드 준비 중)'), findsOneWidget);
+  });
+
+  group('플래그 On', () {
+    late _MockPermissionRepository permissionRepository;
+    late _MockGroupRepository groupRepository;
+    late _MockMenuRepository menuRepository;
+
+    setUp(() {
+      dotenv.testLoad(fileInput: 'FEATURE_GROUP_PERMISSIONS_ENABLED=true\n');
+      permissionRepository = _MockPermissionRepository();
+      groupRepository = _MockGroupRepository();
+      menuRepository = _MockMenuRepository();
+      GetIt.I.registerLazySingleton<GroupPermissionRepository>(
+        () => permissionRepository,
+      );
+      GetIt.I.registerLazySingleton<GroupRepository>(() => groupRepository);
+      GetIt.I.registerLazySingleton<MenuRepository>(() => menuRepository);
+
+      when(
+        () => groupRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
+          isActive: any(named: 'isActive'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<Group>(
+          items: [Group(id: 1, groupName: '관리자')],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        ),
+      );
+
+      when(
+        () => menuRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<MenuItem>(
+          items: [MenuItem(id: 10, menuCode: 'MENU001', menuName: '대시보드')],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        ),
+      );
+    });
+
+    testWidgets('목록을 조회해 테이블에 렌더링한다', (tester) async {
+      when(
+        () => permissionRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          groupId: any(named: 'groupId'),
+          menuId: any(named: 'menuId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<GroupPermission>(
+          items: [
+            GroupPermission(
+              id: 1,
+              group: GroupPermissionGroup(id: 1, groupName: '관리자'),
+              menu: GroupPermissionMenu(id: 10, menuName: '대시보드'),
+              canCreate: true,
+              canRead: true,
+            ),
+          ],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        ),
+      );
+
+      await tester.pumpWidget(_buildApp(const GroupPermissionPage()));
+      await tester.pumpAndSettle();
+
+      expect(find.text('대시보드'), findsOneWidget);
+      expect(find.text('관리자'), findsOneWidget);
+    });
+
+    testWidgets('신규 등록 폼 검증 메시지를 표시한다', (tester) async {
+      when(
+        () => permissionRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          groupId: any(named: 'groupId'),
+          menuId: any(named: 'menuId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<GroupPermission>(
+          items: const [],
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        ),
+      );
+
+      await tester.pumpWidget(_buildApp(const GroupPermissionPage()));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('신규 등록'));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('등록'));
+      await tester.pump();
+
+      expect(find.text('그룹을 선택하세요.'), findsOneWidget);
+      expect(find.text('메뉴를 선택하세요.'), findsOneWidget);
+    });
+
+    testWidgets('신규 등록 성공 시 repository.create 호출', (tester) async {
+      var listCall = 0;
+      when(
+        () => permissionRepository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          groupId: any(named: 'groupId'),
+          menuId: any(named: 'menuId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer((_) async {
+        listCall += 1;
+        if (listCall == 1) {
+          return PaginatedResult<GroupPermission>(
+            items: const [],
+            page: 1,
+            pageSize: 20,
+            total: 0,
+          );
+        }
+        return PaginatedResult<GroupPermission>(
+          items: [
+            GroupPermission(
+              id: 5,
+              group: GroupPermissionGroup(id: 1, groupName: '관리자'),
+              menu: GroupPermissionMenu(id: 10, menuName: '대시보드'),
+              canCreate: true,
+              canRead: true,
+            ),
+          ],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        );
+      });
+
+      GroupPermissionInput? capturedInput;
+      when(() => permissionRepository.create(any())).thenAnswer((
+        invocation,
+      ) async {
+        capturedInput =
+            invocation.positionalArguments.first as GroupPermissionInput;
+        return GroupPermission(
+          id: 5,
+          group: GroupPermissionGroup(
+            id: capturedInput!.groupId,
+            groupName: '관리자',
+          ),
+          menu: GroupPermissionMenu(
+            id: capturedInput!.menuId,
+            menuName: '대시보드',
+          ),
+          canCreate: capturedInput!.canCreate,
+          canRead: capturedInput!.canRead,
+        );
+      });
+
+      await tester.pumpWidget(_buildApp(const GroupPermissionPage()));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('신규 등록'));
+      await tester.pumpAndSettle();
+
+      final dialog = find.byType(Dialog);
+      final selects = find.descendant(
+        of: dialog,
+        matching: find.byType(ShadSelect<int?>),
+      );
+
+      // 그룹 선택
+      await tester.tap(selects.at(0));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text('관리자').last);
+      await tester.pumpAndSettle();
+
+      // 메뉴 선택
+      await tester.tap(selects.at(1));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text('대시보드').last);
+      await tester.pumpAndSettle();
+
+      // 권한 체크 (생성, 수정, 삭제 on)
+      final switches = find.descendant(
+        of: dialog,
+        matching: find.byType(ShadSwitch),
+      );
+      await tester.tap(switches.at(0));
+      await tester.pump();
+      await tester.tap(switches.at(2));
+      await tester.pump();
+      await tester.tap(switches.at(3));
+      await tester.pump();
+
+      await tester.tap(find.text('등록'));
+      await tester.pumpAndSettle();
+
+      expect(capturedInput, isNotNull);
+      expect(capturedInput?.groupId, 1);
+      expect(capturedInput?.menuId, 10);
+      expect(capturedInput?.canCreate, isTrue);
+      expect(capturedInput?.canUpdate, isTrue);
+      expect(find.byType(Dialog), findsNothing);
+      expect(find.text('대시보드'), findsOneWidget);
+      verify(() => permissionRepository.create(any())).called(1);
+    });
+  });
+}

test/features/masters/menu/presentation/controllers/menu_controller_test.dart

@@ -0,0 +1,207 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/features/masters/menu/domain/entities/menu.dart';
+import 'package:superport_v2/features/masters/menu/domain/repositories/menu_repository.dart';
+import 'package:superport_v2/features/masters/menu/presentation/controllers/menu_controller.dart';
+
+class _MockMenuRepository extends Mock implements MenuRepository {}
+
+class _FakeMenuInput extends Fake implements MenuInput {}
+
+void main() {
+  late MenuController controller;
+  late _MockMenuRepository repository;
+
+  final sampleMenu = MenuItem(
+    id: 1,
+    menuCode: 'MENU001',
+    menuName: '대시보드',
+    isActive: true,
+    isDeleted: false,
+  );
+
+  PaginatedResult<MenuItem> createResult({List<MenuItem>? items}) {
+    final list = items ?? [sampleMenu];
+    return PaginatedResult<MenuItem>(
+      items: list,
+      page: 1,
+      pageSize: 20,
+      total: list.length,
+    );
+  }
+
+  setUpAll(() {
+    registerFallbackValue(_FakeMenuInput());
+  });
+
+  setUp(() {
+    repository = _MockMenuRepository();
+    controller = MenuController(repository: repository);
+  });
+
+  group('loadParents', () {
+    test('상위 메뉴를 로드한다', () async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer((_) async => createResult());
+
+      await controller.loadParents();
+
+      expect(controller.parents, isNotEmpty);
+      verify(
+        () => repository.list(
+          page: 1,
+          pageSize: 200,
+          query: null,
+          parentId: null,
+          isActive: null,
+          includeDeleted: false,
+        ),
+      ).called(1);
+    });
+  });
+
+  group('fetch', () {
+    test('정상 조회 시 결과 저장', () async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer((_) async => createResult());
+
+      await controller.fetch();
+
+      expect(controller.result?.items, isNotEmpty);
+      expect(controller.errorMessage, isNull);
+    });
+
+    test('필터 조건 적용', () async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer((_) async => createResult());
+
+      controller.updateQuery('dash');
+      controller.updateParentFilter(10);
+      controller.updateStatusFilter(MenuStatusFilter.activeOnly);
+      controller.updateIncludeDeleted(true);
+
+      await controller.fetch(page: 2);
+
+      verify(
+        () => repository.list(
+          page: 2,
+          pageSize: 20,
+          query: 'dash',
+          parentId: 10,
+          isActive: true,
+          includeDeleted: true,
+        ),
+      ).called(1);
+    });
+
+    test('에러 시 errorMessage 세팅', () async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenThrow(Exception('fail'));
+
+      await controller.fetch();
+
+      expect(controller.errorMessage, isNotNull);
+    });
+  });
+
+  test('필터 업데이트', () {
+    controller.updateQuery('code');
+    controller.updateParentFilter(1);
+    controller.updateStatusFilter(MenuStatusFilter.inactiveOnly);
+    controller.updateIncludeDeleted(true);
+
+    expect(controller.query, 'code');
+    expect(controller.parentFilter, 1);
+    expect(controller.statusFilter, MenuStatusFilter.inactiveOnly);
+    expect(controller.includeDeleted, isTrue);
+  });
+
+  group('mutations', () {
+    setUp(() {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer((_) async => createResult());
+    });
+
+    final input = MenuInput(menuCode: 'MENU001', menuName: '대시보드');
+
+    test('create 성공', () async {
+      when(() => repository.create(any())).thenAnswer((_) async => sampleMenu);
+
+      final created = await controller.create(input);
+
+      expect(created, isNotNull);
+      verify(() => repository.create(any())).called(1);
+    });
+
+    test('update 성공', () async {
+      when(
+        () => repository.update(any(), any()),
+      ).thenAnswer((_) async => sampleMenu);
+
+      final updated = await controller.update(1, input);
+
+      expect(updated, isNotNull);
+      verify(() => repository.update(1, any())).called(1);
+    });
+
+    test('delete 성공', () async {
+      when(() => repository.delete(any())).thenAnswer((_) async {});
+
+      final success = await controller.delete(1);
+
+      expect(success, isTrue);
+      verify(() => repository.delete(1)).called(1);
+    });
+
+    test('restore 성공', () async {
+      when(() => repository.restore(any())).thenAnswer((_) async => sampleMenu);
+
+      final restored = await controller.restore(1);
+
+      expect(restored, isNotNull);
+      verify(() => repository.restore(1)).called(1);
+    });
+  });
+}

test/features/masters/menu/presentation/pages/menu_page_test.dart

@@ -0,0 +1,181 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:get_it/get_it.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+import 'package:superport_v2/core/common/models/paginated_result.dart';
+import 'package:superport_v2/features/masters/menu/domain/entities/menu.dart';
+import 'package:superport_v2/features/masters/menu/domain/repositories/menu_repository.dart';
+import 'package:superport_v2/features/masters/menu/presentation/pages/menu_page.dart';
+
+class _MockMenuRepository extends Mock implements MenuRepository {}
+
+class _FakeMenuInput extends Fake implements MenuInput {}
+
+Widget _buildApp(Widget child) {
+  return MaterialApp(
+    home: ShadTheme(
+      data: ShadThemeData(
+        colorScheme: const ShadSlateColorScheme.light(),
+        brightness: Brightness.light,
+      ),
+      child: Scaffold(body: child),
+    ),
+  );
+}
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  setUpAll(() {
+    registerFallbackValue(_FakeMenuInput());
+  });
+
+  tearDown(() async {
+    await GetIt.I.reset();
+    dotenv.clean();
+  });
+
+  testWidgets('플래그 Off 시 스펙 화면 노출', (tester) async {
+    dotenv.testLoad(fileInput: 'FEATURE_MENUS_ENABLED=false\n');
+
+    await tester.pumpWidget(_buildApp(const MenuPage()));
+    await tester.pump();
+
+    expect(find.text('메뉴 관리'), findsOneWidget);
+    expect(find.text('비활성화 (백엔드 준비 중)'), findsOneWidget);
+  });
+
+  group('플래그 On', () {
+    late _MockMenuRepository repository;
+
+    setUp(() {
+      dotenv.testLoad(fileInput: 'FEATURE_MENUS_ENABLED=true\n');
+      repository = _MockMenuRepository();
+      GetIt.I.registerLazySingleton<MenuRepository>(() => repository);
+    });
+
+    testWidgets('목록을 조회해 테이블을 렌더링한다', (tester) async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<MenuItem>(
+          items: [MenuItem(id: 1, menuCode: 'MENU001', menuName: '대시보드')],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        ),
+      );
+
+      await tester.pumpWidget(_buildApp(const MenuPage()));
+      await tester.pumpAndSettle();
+
+      expect(find.text('MENU001'), findsOneWidget);
+    });
+
+    testWidgets('신규 등록 폼 검증 에러 표시', (tester) async {
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer(
+        (_) async => PaginatedResult<MenuItem>(
+          items: const [],
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        ),
+      );
+
+      await tester.pumpWidget(_buildApp(const MenuPage()));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('신규 등록'));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('등록'));
+      await tester.pump();
+
+      expect(find.text('메뉴코드를 입력하세요.'), findsOneWidget);
+      expect(find.text('메뉴명을 입력하세요.'), findsOneWidget);
+    });
+
+    testWidgets('신규 등록 성공 시 repository.create 호출', (tester) async {
+      var listCall = 0;
+      when(
+        () => repository.list(
+          page: any(named: 'page'),
+          pageSize: any(named: 'pageSize'),
+          query: any(named: 'query'),
+          parentId: any(named: 'parentId'),
+          isActive: any(named: 'isActive'),
+          includeDeleted: any(named: 'includeDeleted'),
+        ),
+      ).thenAnswer((_) async {
+        listCall += 1;
+        if (listCall == 1) {
+          return PaginatedResult<MenuItem>(
+            items: const [],
+            page: 1,
+            pageSize: 20,
+            total: 0,
+          );
+        }
+        return PaginatedResult<MenuItem>(
+          items: [MenuItem(id: 10, menuCode: 'MENU010', menuName: '신규 메뉴')],
+          page: 1,
+          pageSize: 20,
+          total: 1,
+        );
+      });
+
+      MenuInput? capturedInput;
+      when(() => repository.create(any())).thenAnswer((invocation) async {
+        capturedInput = invocation.positionalArguments.first as MenuInput;
+        return MenuItem(
+          id: 10,
+          menuCode: capturedInput!.menuCode,
+          menuName: capturedInput!.menuName,
+        );
+      });
+
+      await tester.pumpWidget(_buildApp(const MenuPage()));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('신규 등록'));
+      await tester.pumpAndSettle();
+
+      final dialog = find.byType(Dialog);
+      final editableTexts = find.descendant(
+        of: dialog,
+        matching: find.byType(EditableText),
+      );
+
+      await tester.enterText(editableTexts.at(0), 'MENU010');
+      await tester.enterText(editableTexts.at(1), '신규 메뉴');
+
+      await tester.tap(find.text('등록'));
+      await tester.pumpAndSettle();
+
+      expect(capturedInput, isNotNull);
+      expect(capturedInput?.menuCode, 'MENU010');
+      expect(find.byType(Dialog), findsNothing);
+      expect(find.text('MENU010'), findsOneWidget);
+      verify(() => repository.create(any())).called(1);
+    });
+  });
+}

test/features/masters/user/presentation/controllers/user_controller_test.dart

@@ -56,6 +56,7 @@ void main() {
         page: any(named: 'page'),
         pageSize: any(named: 'pageSize'),
         query: any(named: 'query'),
+        isDefault: any(named: 'isDefault'),
         isActive: any(named: 'isActive'),
       ),
     ).thenAnswer(
@@ -79,6 +80,7 @@ void main() {
           page: any(named: 'page'),
           pageSize: any(named: 'pageSize'),
           query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
           isActive: any(named: 'isActive'),
         ),
       ).thenAnswer(

test/features/masters/user/presentation/pages/user_page_test.dart

@@ -68,6 +68,7 @@ void main() {
           page: any(named: 'page'),
           pageSize: any(named: 'pageSize'),
           query: any(named: 'query'),
+          isDefault: any(named: 'isDefault'),
           isActive: any(named: 'isActive'),
         ),
       ).thenAnswer(