결재 템플릿 단계 적용 구현

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

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,41 +12,62 @@ class ApprovalHistoryPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const SpecPage(
-      title: '결재 이력 조회',
-      summary: '결재 단계별 변경 이력을 조회합니다.',
-      sections: [
-        SpecSection(
-          title: '조회 테이블',
-          description: '수정 없이 이력 리스트만 제공.',
-          table: SpecTable(
-            columns: [
-              '번호',
-              '결재ID',
-              '단계ID',
-              '승인자',
-              '행위',
-              '변경전상태',
-              '변경후상태',
-              '작업일시',
-              '비고',
-            ],
-            rows: [
-              [
-                '1',
-                'APP-20240301-001',
-                'STEP-1',
-                '최관리',
-                '승인',
-                '승인대기',
-                '승인완료',
-                '2024-03-01 10:30',
-                '-',
+    final enabled = Environment.flag('FEATURE_APPROVALS_ENABLED');
+    if (!enabled) {
+      return const SpecPage(
+        title: '결재 이력 조회',
+        summary: '결재 단계별 변경 이력을 조회합니다.',
+        sections: [
+          SpecSection(
+            title: '조회 테이블',
+            description: '수정 없이 이력 리스트만 제공.',
+            table: SpecTable(
+              columns: [
+                '번호',
+                '결재ID',
+                '단계ID',
+                '승인자',
+                '행위',
+                '변경전상태',
+                '변경후상태',
+                '작업일시',
+                '비고',
               ],
-            ],
+              rows: [
+                [
+                  '1',
+                  'APP-20240301-001',
+                  'STEP-1',
+                  '최관리',
+                  '승인',
+                  '승인대기',
+                  '승인완료',
+                  '2024-03-01 10:30',
+                  '-',
+                ],
+              ],
+            ),
           ),
-        ),
+        ],
+      );
+    }
+
+    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(
-      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',
-                '-',
-                '-',
-              ],
-            ],
-          ),
-        ),
-      ],
-    );
+    return const ApprovalPage();
   }
 }

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,44 +13,81 @@ class ApprovalStepPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const SpecPage(
-      title: '결재 단계 관리',
-      summary: '결재 단계 순서와 승인자를 구성합니다.',
-      sections: [
-        SpecSection(
-          title: '입력 폼',
-          items: [
-            '결재ID [Dropdown]',
-            '단계순서 [Number]',
-            '승인자 [Dropdown]',
-            '단계상태 [Dropdown]',
-            '비고 [Text]',
-          ],
-        ),
-        SpecSection(
-          title: '수정 폼',
-          items: ['결재ID [ReadOnly]', '단계순서 [ReadOnly]'],
-        ),
-        SpecSection(
-          title: '테이블 리스트',
-          description: '1행 예시',
-          table: SpecTable(
-            columns: ['번호', '결재ID', '단계순서', '승인자', '상태', '배정일시', '결정일시', '비고'],
-            rows: [
-              [
-                '1',
-                'APP-20240301-001',
-                '1',
-                '최관리',
-                '승인대기',
-                '2024-03-01 09:00',
-                '-',
-                '-',
-              ],
+    final enabled = Environment.flag('FEATURE_APPROVALS_ENABLED');
+    if (!enabled) {
+      return const SpecPage(
+        title: '결재 단계 관리',
+        summary: '결재 단계 순서와 승인자를 구성합니다.',
+        sections: [
+          SpecSection(
+            title: '입력 폼',
+            items: [
+              '결재ID [Dropdown]',
+              '단계순서 [Number]',
+              '승인자 [Dropdown]',
+              '단계상태 [Dropdown]',
+              '비고 [Text]',
             ],
           ),
+          SpecSection(
+            title: '수정 폼',
+            items: ['결재ID [ReadOnly]', '단계순서 [ReadOnly]'],
+          ),
+          SpecSection(
+            title: '테이블 리스트',
+            description: '1행 예시',
+            table: SpecTable(
+              columns: [
+                '번호',
+                '결재ID',
+                '단계순서',
+                '승인자',
+                '상태',
+                '배정일시',
+                '결정일시',
+                '비고',
+              ],
+              rows: [
+                [
+                  '1',
+                  'APP-20240301-001',
+                  '1',
+                  '최관리',
+                  '승인대기',
+                  '2024-03-01 09:00',
+                  '-',
+                  '-',
+                ],
+              ],
+            ),
+          ),
+        ],
+      );
+    }
+
+    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,45 +13,73 @@ class ApprovalTemplatePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const SpecPage(
-      title: '결재 템플릿 관리',
-      summary: '반복적인 결재 흐름을 템플릿으로 정의합니다.',
-      sections: [
-        SpecSection(
-          title: '입력 폼',
-          items: [
-            '템플릿코드 [Text]',
-            '템플릿명 [Text]',
-            '설명 [Text]',
-            '작성자 [ReadOnly]',
-            '사용여부 [Switch]',
-            '비고 [Text]',
-            '단계 추가: 순서 [Number], 승인자 [Dropdown]',
-          ],
-        ),
-        SpecSection(
-          title: '수정 폼',
-          items: ['템플릿코드 [ReadOnly]', '작성자 [ReadOnly]'],
-        ),
-        SpecSection(
-          title: '테이블 리스트',
-          description: '1행 예시',
-          table: SpecTable(
-            columns: ['번호', '템플릿코드', '템플릿명', '설명', '작성자', '사용여부', '변경일시'],
-            rows: [
-              [
-                '1',
-                'TEMP-001',
-                '입고 기본 결재',
-                '입고 처리 2단계 결재',
-                '홍길동',
-                'Y',
-                '2024-03-01 10:00',
-              ],
+    final enabled = Environment.flag('FEATURE_APPROVALS_ENABLED');
+    if (!enabled) {
+      return const SpecPage(
+        title: '결재 템플릿 관리',
+        summary: '반복적인 결재 흐름을 템플릿으로 정의합니다.',
+        sections: [
+          SpecSection(
+            title: '입력 폼',
+            items: [
+              '템플릿코드 [Text]',
+              '템플릿명 [Text]',
+              '설명 [Text]',
+              '작성자 [ReadOnly]',
+              '사용여부 [Switch]',
+              '비고 [Text]',
+              '단계 추가: 순서 [Number], 승인자 [Dropdown]',
             ],
           ),
+          SpecSection(
+            title: '수정 폼',
+            items: ['템플릿코드 [ReadOnly]', '작성자 [ReadOnly]'],
+          ),
+          SpecSection(
+            title: '테이블 리스트',
+            description: '1행 예시',
+            table: SpecTable(
+              columns: ['번호', '템플릿코드', '템플릿명', '설명', '작성자', '사용여부', '변경일시'],
+              rows: [
+                [
+                  '1',
+                  'TEMP-001',
+                  '입고 기본 결재',
+                  '입고 처리 2단계 결재',
+                  '홍길동',
+                  'Y',
+                  '2024-03-01 10:00',
+                ],
+              ],
+            ),
+          ),
+        ],
+      );
+    }
+
+    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,95 +47,67 @@ class _InboundPageState extends State<InboundPage> {
     final theme = ShadTheme.of(context);
     final filtered = _filteredRecords;
 
-    return SingleChildScrollView(
-      padding: const EdgeInsets.all(24),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+    return AppLayout(
+      title: '입고 관리',
+      subtitle: '입고 처리, 라인 품목, 상태를 한 화면에서 확인하고 관리합니다.',
+      breadcrumbs: const [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+        AppBreadcrumbItem(label: '입·출고', path: '/inventory/inbound'),
+        AppBreadcrumbItem(label: '입고'),
+      ],
+      actions: [
+        ShadButton(
+          leading: const Icon(LucideIcons.plus, size: 16),
+          onPressed: _handleCreate,
+          child: const Text('입고 등록'),
+        ),
+        ShadButton.outline(
+          leading: const Icon(LucideIcons.pencil, size: 16),
+          onPressed:
+              _selectedRecord == null ? null : () => _handleEdit(_selectedRecord!),
+          child: const Text('선택 항목 수정'),
+        ),
+      ],
+      toolbar: FilterBar(
         children: [
-          Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('입고 관리', style: theme.textTheme.h2),
-                    const SizedBox(height: 6),
-                    Text(
-                      '입고 처리, 라인 품목, 상태를 한 화면에서 확인하고 관리합니다.',
-                      style: theme.textTheme.muted,
-                    ),
-                  ],
-                ),
-              ),
-              Row(
+          SizedBox(
+            width: 260,
+            child: ShadInput(
+              controller: _searchController,
+              placeholder: const Text('트랜잭션번호, 작성자, 제품 검색'),
+              leading: const Icon(LucideIcons.search, size: 16),
+              onChanged: (_) => setState(() {}),
+            ),
+          ),
+          SizedBox(
+            width: 220,
+            child: ShadButton.outline(
+              onPressed: _pickDateRange,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
                 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
-                        ? null
-                        : () => _handleEdit(_selectedRecord!),
-                    child: const Text('선택 항목 수정'),
+                  const Icon(LucideIcons.calendar, size: 16),
+                  const SizedBox(width: 8),
+                  Text(
+                    _dateRange == null
+                        ? '기간 선택'
+                        : '${_dateFormatter.format(_dateRange!.start)} ~ ${_dateFormatter.format(_dateRange!.end)}',
                   ),
                 ],
               ),
-            ],
-          ),
-          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,
-                      child: ShadInput(
-                        controller: _searchController,
-                        placeholder: const Text('트랜잭션번호, 작성자, 제품 검색'),
-                        leading: const Icon(LucideIcons.search, size: 16),
-                        onChanged: (_) => setState(() {}),
-                      ),
-                    ),
-                    SizedBox(
-                      width: 220,
-                      child: ShadButton.outline(
-                        onPressed: _pickDateRange,
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.center,
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            const Icon(LucideIcons.calendar, size: 16),
-                            const SizedBox(width: 8),
-                            Text(
-                              _dateRange == null
-                                  ? '기간 선택'
-                                  : '${_dateFormatter.format(_dateRange!.start)} ~ ${_dateFormatter.format(_dateRange!.end)}',
-                            ),
-                          ],
-                        ),
-                      ),
-                    ),
-                    if (_dateRange != null)
-                      ShadButton.ghost(
-                        onPressed: () => setState(() => _dateRange = null),
-                        child: const Text('기간 초기화'),
-                      ),
-                  ],
-                ),
-              ],
             ),
           ),
-          const SizedBox(height: 24),
+          if (_dateRange != null)
+            ShadButton.ghost(
+              onPressed: () => setState(() => _dateRange = null),
+              child: const Text('기간 초기화'),
+            ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
           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(
-                            (value) => ShadTableCell(
-                              child: Text(
-                                value,
-                                overflow: TextOverflow.ellipsis,
-                              ),
-                            ),
-                          ),
+                          _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,95 +54,67 @@ class _OutboundPageState extends State<OutboundPage> {
     final theme = ShadTheme.of(context);
     final filtered = _filteredRecords;
 
-    return SingleChildScrollView(
-      padding: const EdgeInsets.all(24),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+    return AppLayout(
+      title: '출고 관리',
+      subtitle: '출고 처리, 고객사 연결, 품목 라인을 실시간으로 확인합니다.',
+      breadcrumbs: const [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+        AppBreadcrumbItem(label: '입·출고', path: '/inventory/outbound'),
+        AppBreadcrumbItem(label: '출고'),
+      ],
+      actions: [
+        ShadButton(
+          leading: const Icon(LucideIcons.plus, size: 16),
+          onPressed: _handleCreate,
+          child: const Text('출고 등록'),
+        ),
+        ShadButton.outline(
+          leading: const Icon(LucideIcons.pencil, size: 16),
+          onPressed:
+              _selectedRecord == null ? null : () => _handleEdit(_selectedRecord!),
+          child: const Text('선택 항목 수정'),
+        ),
+      ],
+      toolbar: FilterBar(
         children: [
-          Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('출고 관리', style: theme.textTheme.h2),
-                    const SizedBox(height: 6),
-                    Text(
-                      '출고 처리, 고객사 연결, 품목 라인을 실시간으로 확인합니다.',
-                      style: theme.textTheme.muted,
-                    ),
-                  ],
-                ),
-              ),
-              Row(
+          SizedBox(
+            width: 260,
+            child: ShadInput(
+              controller: _searchController,
+              placeholder: const Text('트랜잭션번호, 작성자, 제품, 고객사 검색'),
+              leading: const Icon(LucideIcons.search, size: 16),
+              onChanged: (_) => setState(() {}),
+            ),
+          ),
+          SizedBox(
+            width: 220,
+            child: ShadButton.outline(
+              onPressed: _pickDateRange,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
                 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
-                        ? null
-                        : () => _handleEdit(_selectedRecord!),
-                    child: const Text('선택 항목 수정'),
+                  const Icon(LucideIcons.calendar, size: 16),
+                  const SizedBox(width: 8),
+                  Text(
+                    _dateRange == null
+                        ? '기간 선택'
+                        : '${_dateFormatter.format(_dateRange!.start)} ~ ${_dateFormatter.format(_dateRange!.end)}',
                   ),
                 ],
               ),
-            ],
-          ),
-          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,
-                      child: ShadInput(
-                        controller: _searchController,
-                        placeholder: const Text('트랜잭션번호, 작성자, 제품, 고객사 검색'),
-                        leading: const Icon(LucideIcons.search, size: 16),
-                        onChanged: (_) => setState(() {}),
-                      ),
-                    ),
-                    SizedBox(
-                      width: 220,
-                      child: ShadButton.outline(
-                        onPressed: _pickDateRange,
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.center,
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            const Icon(LucideIcons.calendar, size: 16),
-                            const SizedBox(width: 8),
-                            Text(
-                              _dateRange == null
-                                  ? '기간 선택'
-                                  : '${_dateFormatter.format(_dateRange!.start)} ~ ${_dateFormatter.format(_dateRange!.end)}',
-                            ),
-                          ],
-                        ),
-                      ),
-                    ),
-                    if (_dateRange != null)
-                      ShadButton.ghost(
-                        onPressed: () => setState(() => _dateRange = null),
-                        child: const Text('기간 초기화'),
-                      ),
-                  ],
-                ),
-              ],
             ),
           ),
-          const SizedBox(height: 24),
+          if (_dateRange != null)
+            ShadButton.ghost(
+              onPressed: () => setState(() => _dateRange = null),
+              child: const Text('기간 초기화'),
+            ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
           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,95 +55,68 @@ class _RentalPageState extends State<RentalPage> {
     final theme = ShadTheme.of(context);
     final filtered = _filteredRecords;
 
-    return SingleChildScrollView(
-      padding: const EdgeInsets.all(24),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+    return AppLayout(
+      title: '대여 관리',
+      subtitle: '대여/반납 구분, 반납 예정일, 고객사 현황을 확인합니다.',
+      breadcrumbs: const [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+        AppBreadcrumbItem(label: '입·출고', path: '/inventory/rental'),
+        AppBreadcrumbItem(label: '대여'),
+      ],
+      actions: [
+        ShadButton(
+          leading: const Icon(LucideIcons.plus, size: 16),
+          onPressed: _handleCreate,
+          child: const Text('대여 등록'),
+        ),
+        ShadButton.outline(
+          leading: const Icon(LucideIcons.pencil, size: 16),
+          onPressed: _selectedRecord == null
+              ? null
+              : () => _handleEdit(_selectedRecord!),
+          child: const Text('선택 항목 수정'),
+        ),
+      ],
+      toolbar: FilterBar(
         children: [
-          Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('대여 관리', style: theme.textTheme.h2),
-                    const SizedBox(height: 6),
-                    Text(
-                      '대여/반납 구분, 반납 예정일, 고객사 현황을 확인합니다.',
-                      style: theme.textTheme.muted,
-                    ),
-                  ],
-                ),
-              ),
-              Row(
+          SizedBox(
+            width: 260,
+            child: ShadInput(
+              controller: _searchController,
+              placeholder: const Text('트랜잭션번호, 작성자, 제품, 고객사 검색'),
+              leading: const Icon(LucideIcons.search, size: 16),
+              onChanged: (_) => setState(() {}),
+            ),
+          ),
+          SizedBox(
+            width: 220,
+            child: ShadButton.outline(
+              onPressed: _pickDateRange,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
                 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
-                        ? null
-                        : () => _handleEdit(_selectedRecord!),
-                    child: const Text('선택 항목 수정'),
+                  const Icon(LucideIcons.calendar, size: 16),
+                  const SizedBox(width: 8),
+                  Text(
+                    _dateRange == null
+                        ? '기간 선택'
+                        : '${_dateFormatter.format(_dateRange!.start)} ~ ${_dateFormatter.format(_dateRange!.end)}',
                   ),
                 ],
               ),
-            ],
-          ),
-          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,
-                      child: ShadInput(
-                        controller: _searchController,
-                        placeholder: const Text('트랜잭션번호, 작성자, 제품, 고객사 검색'),
-                        leading: const Icon(LucideIcons.search, size: 16),
-                        onChanged: (_) => setState(() {}),
-                      ),
-                    ),
-                    SizedBox(
-                      width: 220,
-                      child: ShadButton.outline(
-                        onPressed: _pickDateRange,
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.center,
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            const Icon(LucideIcons.calendar, size: 16),
-                            const SizedBox(width: 8),
-                            Text(
-                              _dateRange == null
-                                  ? '기간 선택'
-                                  : '${_dateFormatter.format(_dateRange!.start)} ~ ${_dateFormatter.format(_dateRange!.end)}',
-                            ),
-                          ],
-                        ),
-                      ),
-                    ),
-                    if (_dateRange != null)
-                      ShadButton.ghost(
-                        onPressed: () => setState(() => _dateRange = null),
-                        child: const Text('기간 초기화'),
-                      ),
-                  ],
-                ),
-              ],
             ),
           ),
-          const SizedBox(height: 24),
+          if (_dateRange != null)
+            ShadButton.ghost(
+              onPressed: () => setState(() => _dateRange = null),
+              child: const Text('기간 초기화'),
+            ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
           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,173 +141,145 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
-          padding: const EdgeInsets.all(24),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
+        final showReset = _searchController.text.isNotEmpty ||
+            _controller.typeFilter != CustomerTypeFilter.all ||
+            _controller.statusFilter != CustomerStatusFilter.all;
+
+        return AppLayout(
+          title: '회사(고객사) 관리',
+          subtitle: '고객사 기본 정보와 연락처, 주소를 관리합니다.',
+          breadcrumbs: const [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+            AppBreadcrumbItem(label: '마스터', path: '/masters/customers'),
+            AppBreadcrumbItem(label: '고객사'),
+          ],
+          actions: [
+            ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
+              onPressed: _controller.isSubmitting
+                  ? null
+                  : () => _openCustomerForm(context),
+              child: const Text('신규 등록'),
+            ),
+          ],
+          toolbar: FilterBar(
             children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text('회사(고객사) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '고객사 기본 정보와 연락처, 주소를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(width: 16),
-                  ShadButton(
-                    onPressed: _controller.isSubmitting
-                        ? null
-                        : () => _openCustomerForm(context),
-                    child: const Text('신규 등록'),
-                  ),
-                ],
-              ),
-              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,
-                          child: ShadInput(
-                            controller: _searchController,
-                            focusNode: _searchFocus,
-                            placeholder: const Text('고객사코드, 고객사명 검색'),
-                            leading: const Icon(LucideIcons.search, size: 16),
-                            onSubmitted: (_) => _applyFilters(),
-                          ),
-                        ),
-                        SizedBox(
-                          width: 200,
-                          child: ShadSelect<CustomerTypeFilter>(
-                            key: ValueKey(_controller.typeFilter),
-                            initialValue: _controller.typeFilter,
-                            selectedOptionBuilder: (context, value) =>
-                                Text(_typeLabel(value)),
-                            onChanged: (value) {
-                              if (value == null) return;
-                              _controller.updateTypeFilter(value);
-                            },
-                            options: CustomerTypeFilter.values
-                                .map(
-                                  (filter) => ShadOption(
-                                    value: filter,
-                                    child: Text(_typeLabel(filter)),
-                                  ),
-                                )
-                                .toList(),
-                          ),
-                        ),
-                        SizedBox(
-                          width: 200,
-                          child: ShadSelect<CustomerStatusFilter>(
-                            key: ValueKey(_controller.statusFilter),
-                            initialValue: _controller.statusFilter,
-                            selectedOptionBuilder: (context, value) =>
-                                Text(_statusLabel(value)),
-                            onChanged: (value) {
-                              if (value == null) return;
-                              _controller.updateStatusFilter(value);
-                            },
-                            options: CustomerStatusFilter.values
-                                .map(
-                                  (filter) => ShadOption(
-                                    value: filter,
-                                    child: Text(_statusLabel(filter)),
-                                  ),
-                                )
-                                .toList(),
-                          ),
-                        ),
-                        ShadButton.outline(
-                          onPressed: _controller.isLoading
-                              ? null
-                              : _applyFilters,
-                          child: const Text('검색 적용'),
-                        ),
-                        if (_searchController.text.isNotEmpty ||
-                            _controller.typeFilter != CustomerTypeFilter.all ||
-                            _controller.statusFilter !=
-                                CustomerStatusFilter.all)
-                          ShadButton.ghost(
-                            onPressed: _controller.isLoading
-                                ? null
-                                : () {
-                                    _searchController.clear();
-                                    _searchFocus.requestFocus();
-                                    _controller.updateQuery('');
-                                    _controller.updateTypeFilter(
-                                      CustomerTypeFilter.all,
-                                    );
-                                    _controller.updateStatusFilter(
-                                      CustomerStatusFilter.all,
-                                    );
-                                    _controller.fetch(page: 1);
-                                  },
-                            child: const Text('초기화'),
-                          ),
-                      ],
-                    ),
-                  ],
+              SizedBox(
+                width: 260,
+                child: ShadInput(
+                  controller: _searchController,
+                  focusNode: _searchFocus,
+                  placeholder: const Text('고객사코드, 고객사명 검색'),
+                  leading: const Icon(LucideIcons.search, size: 16),
+                  onSubmitted: (_) => _applyFilters(),
                 ),
               ),
-              const SizedBox(height: 24),
-              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('이전'),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<CustomerTypeFilter>(
+                  key: ValueKey(_controller.typeFilter),
+                  initialValue: _controller.typeFilter,
+                  selectedOptionBuilder: (context, value) =>
+                      Text(_typeLabel(value)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateTypeFilter(value);
+                  },
+                  options: CustomerTypeFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_typeLabel(filter)),
                         ),
-                        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()),
                       )
-                    : customers.isEmpty
+                      .toList(),
+                ),
+              ),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<CustomerStatusFilter>(
+                  key: ValueKey(_controller.statusFilter),
+                  initialValue: _controller.statusFilter,
+                  selectedOptionBuilder: (context, value) =>
+                      Text(_statusLabel(value)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateStatusFilter(value);
+                  },
+                  options: CustomerStatusFilter.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.updateTypeFilter(CustomerTypeFilter.all);
+                          _controller.updateStatusFilter(
+                            CustomerStatusFilter.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()),
+                  )
+                : customers.isEmpty
                     ? Padding(
                         padding: const EdgeInsets.all(32),
                         child: Text(
@@ -315,10 +291,8 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
                         customers: customers,
                         onEdit: _controller.isSubmitting
                             ? null
-                            : (customer) => _openCustomerForm(
-                                context,
-                                customer: customer,
-                              ),
+                            : (customer) =>
+                                  _openCustomerForm(context, customer: customer),
                         onDelete: _controller.isSubmitting
                             ? null
                             : _confirmDelete,
@@ -326,8 +300,6 @@ class _CustomerEnabledPageState extends State<_CustomerEnabledPage> {
                             ? null
                             : _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,40 +1,726 @@
-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(
-      title: '그룹 관리',
-      summary: '권한 그룹 정의와 기본여부 설정을 제공합니다.',
-      sections: [
-        SpecSection(
-          title: '입력 폼',
-          items: [
-            '그룹명 [Text]',
-            '그룹설명 [Text]',
-            '기본여부 [Switch]',
-            '사용여부 [Switch]',
-            '비고 [Text]',
+    final enabled = Environment.flag('FEATURE_GROUPS_ENABLED');
+    if (!enabled) {
+      return SpecPage(
+        title: '그룹 관리',
+        summary: '권한 그룹 정의와 기본 여부 설정을 제공합니다.',
+        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]',
+              '설명 [Textarea]',
+              '기본여부 [Switch]',
+              '사용여부 [Switch]',
+              '비고 [Textarea]',
+            ],
+          ),
+          SpecSection(
+            title: '수정 폼',
+            items: ['그룹명 [ReadOnly]', '생성일시 [ReadOnly]'],
+          ),
+          SpecSection(
+            title: '테이블 리스트',
+            description: '1행 예시',
+            table: SpecTable(
+              columns: ['번호', '그룹명', '설명', '기본여부', '사용여부', '비고', '변경일시'],
+              rows: [
+                ['1', '관리자', '시스템 전체 권한', 'Y', 'Y', '-', '2024-03-01 10:00'],
+              ],
+            ),
+          ),
+        ],
+      );
+    }
+
+    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: '그룹'),
           ],
-        ),
-        SpecSection(
-          title: '수정 폼',
-          items: ['그룹명 [ReadOnly]', '생성일시 [ReadOnly]'],
-        ),
-        SpecSection(
-          title: '테이블 리스트',
-          description: '1행 예시',
-          table: SpecTable(
-            columns: ['번호', '그룹명', '설명', '기본여부', '사용여부', '비고', '변경일시'],
-            rows: [
-              ['1', '관리자', '시스템 전체 권한', 'Y', 'Y', '-', '2024-03-01 10:00'],
+          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,50 +1,966 @@
-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(
-      title: '그룹 메뉴 권한 관리',
-      summary: '그룹별 메뉴 접근과 CRUD 권한을 설정합니다.',
-      sections: [
-        SpecSection(
-          title: '입력 폼',
-          items: [
-            '그룹 [Dropdown]',
-            '메뉴 [Dropdown]',
-            '생성권한 [Checkbox]',
-            '조회권한 [Checkbox]',
-            '수정권한 [Checkbox]',
-            '삭제권한 [Checkbox]',
-            '사용여부 [Switch]',
-          ],
+    final enabled = Environment.flag('FEATURE_GROUP_PERMISSIONS_ENABLED');
+    if (!enabled) {
+      return SpecPage(
+        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('비활성화 (백엔드 준비 중)'),
+              ],
+            ),
+          ),
         ),
-        SpecSection(title: '수정 폼', items: ['그룹 [ReadOnly]', '메뉴 [ReadOnly]']),
-        SpecSection(
-          title: '테이블 리스트',
-          description: '1행 예시',
-          table: SpecTable(
-            columns: [
-              '번호',
-              '그룹명',
-              '메뉴명',
-              '생성',
-              '조회',
-              '수정',
-              '삭제',
-              '사용여부',
-              '변경일시',
+        sections: const [
+          SpecSection(
+            title: '입력 폼',
+            items: [
+              '그룹 [Dropdown]',
+              '메뉴 [Dropdown]',
+              '생성권한 [Checkbox]',
+              '조회권한 [Checkbox]',
+              '수정권한 [Checkbox]',
+              '삭제권한 [Checkbox]',
+              '사용여부 [Switch]',
+              '비고 [Text]',
             ],
-            rows: [
-              ['1', '관리자', '대시보드', 'Y', 'Y', 'Y', 'Y', 'Y', '2024-03-01 10:00'],
+          ),
+          SpecSection(
+            title: '수정 폼',
+            items: ['그룹 [ReadOnly]', '메뉴 [ReadOnly]', '생성일시 [ReadOnly]'],
+          ),
+          SpecSection(
+            title: '테이블 리스트',
+            description: '1행 예시',
+            table: SpecTable(
+              columns: [
+                '번호',
+                '그룹명',
+                '메뉴명',
+                '생성',
+                '조회',
+                '수정',
+                '삭제',
+                '사용여부',
+                '비고',
+                '변경일시',
+              ],
+              rows: [
+                [
+                  '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,51 +1,893 @@
-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(
-      title: '메뉴 관리',
-      summary: '메뉴 계층, 경로, 노출 순서를 구성합니다.',
-      sections: [
-        SpecSection(
-          title: '입력 폼',
-          items: [
-            '메뉴코드 [Text]',
-            '메뉴명 [Text]',
-            '상위메뉴 [Dropdown]',
-            '경로 [Text]',
-            '표시순서 [Number]',
-            '사용여부 [Switch]',
-            '비고 [Text]',
-          ],
-        ),
-        SpecSection(
-          title: '수정 폼',
-          items: ['메뉴코드 [ReadOnly]', '생성일시 [ReadOnly]'],
-        ),
-        SpecSection(
-          title: '테이블 리스트',
-          description: '1행 예시',
-          table: SpecTable(
-            columns: ['번호', '메뉴코드', '메뉴명', '상위메뉴', '경로', '사용여부', '비고', '변경일시'],
-            rows: [
-              [
-                '1',
-                'MN-001',
-                '대시보드',
-                '-',
-                '/dashboard',
-                'Y',
-                '-',
-                '2024-03-01 10:00',
+    final enabled = Environment.flag('FEATURE_MENUS_ENABLED');
+    if (!enabled) {
+      return SpecPage(
+        title: '메뉴 관리',
+        summary: '메뉴 코드, 트리 구조, 사용여부를 관리합니다.',
+        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: [
+              '메뉴코드 [Text]',
+              '메뉴명 [Text]',
+              '상위메뉴 [Dropdown]',
+              '경로 [Text]',
+              '표시순서 [Number]',
+              '사용여부 [Switch]',
+              '비고 [Text]',
+            ],
+          ),
+          SpecSection(
+            title: '수정 폼',
+            items: ['메뉴코드 [ReadOnly]', '생성일시 [ReadOnly]'],
+          ),
+          SpecSection(
+            title: '테이블 리스트',
+            description: '1행 예시',
+            table: SpecTable(
+              columns: [
+                '번호',
+                '메뉴코드',
+                '메뉴명',
+                '상위메뉴',
+                '경로',
+                '사용여부',
+                '비고',
+                '변경일시',
+              ],
+              rows: [
+                [
+                  '1',
+                  'MENU001',
+                  '대시보드',
+                  '-',
+                  '/dashboard',
+                  'Y',
+                  '-',
+                  '2024-03-01 10:00',
+                ],
+              ],
+            ),
+          ),
+        ],
+      );
+    }
+
+    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,223 +138,188 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
-          padding: const EdgeInsets.all(24),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
+        final showReset = _searchController.text.isNotEmpty ||
+            _controller.vendorFilter != null ||
+            _controller.uomFilter != null ||
+            _controller.statusFilter != ProductStatusFilter.all;
+
+        return AppLayout(
+          title: '장비 모델(제품) 관리',
+          subtitle: '제품코드, 제조사, 단위 정보를 관리합니다.',
+          breadcrumbs: const [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+            AppBreadcrumbItem(label: '마스터', path: '/masters/products'),
+            AppBreadcrumbItem(label: '제품'),
+          ],
+          actions: [
+            ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
+              onPressed: _controller.isSubmitting
+                  ? null
+                  : () => _openProductForm(context),
+              child: const Text('신규 등록'),
+            ),
+          ],
+          toolbar: FilterBar(
             children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text('장비 모델(제품) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '제품코드, 제조사, 단위 정보를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(width: 16),
-                  ShadButton(
-                    leading: const Icon(LucideIcons.plus, size: 16),
-                    onPressed: _controller.isSubmitting
-                        ? null
-                        : () => _openProductForm(context),
-                    child: const Text('신규 등록'),
-                  ),
-                ],
+              SizedBox(
+                width: 260,
+                child: ShadInput(
+                  controller: _searchController,
+                  focusNode: _searchFocus,
+                  placeholder: const Text('제품코드, 제품명 검색'),
+                  leading: const Icon(LucideIcons.search, size: 16),
+                  onSubmitted: (_) => _applyFilters(),
+                ),
               ),
-              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,
-                          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.vendorFilter),
-                            initialValue: _controller.vendorFilter,
-                            placeholder: const Text('제조사 전체'),
-                            selectedOptionBuilder: (context, value) {
-                              if (value == null) {
-                                return const Text('제조사 전체');
-                              }
-                              final vendor = _controller.vendorOptions
-                                  .firstWhere(
-                                    (v) => v.id == value,
-                                    orElse: () => Vendor(
-                                      id: value,
-                                      vendorCode: '',
-                                      vendorName: '',
-                                    ),
-                                  );
-                              return Text(vendor.vendorName);
-                            },
-                            onChanged: (value) {
-                              _controller.updateVendorFilter(value);
-                            },
-                            options: [
-                              const ShadOption<int?>(
-                                value: null,
-                                child: Text('제조사 전체'),
-                              ),
-                              ..._controller.vendorOptions.map(
-                                (vendor) => ShadOption<int?>(
-                                  value: vendor.id,
-                                  child: Text(vendor.vendorName),
-                                ),
-                              ),
-                            ],
-                          ),
-                        ),
-                        SizedBox(
-                          width: 220,
-                          child: ShadSelect<int?>(
-                            key: ValueKey(_controller.uomFilter),
-                            initialValue: _controller.uomFilter,
-                            placeholder: const Text('단위 전체'),
-                            selectedOptionBuilder: (context, value) {
-                              if (value == null) {
-                                return const Text('단위 전체');
-                              }
-                              final uom = _controller.uomOptions.firstWhere(
-                                (u) => u.id == value,
-                                orElse: () => Uom(id: value, uomName: ''),
-                              );
-                              return Text(uom.uomName);
-                            },
-                            onChanged: (value) {
-                              _controller.updateUomFilter(value);
-                            },
-                            options: [
-                              const ShadOption<int?>(
-                                value: null,
-                                child: Text('단위 전체'),
-                              ),
-                              ..._controller.uomOptions.map(
-                                (uom) => ShadOption<int?>(
-                                  value: uom.id,
-                                  child: Text(uom.uomName),
-                                ),
-                              ),
-                            ],
-                          ),
-                        ),
-                        SizedBox(
-                          width: 200,
-                          child: ShadSelect<ProductStatusFilter>(
-                            key: ValueKey(_controller.statusFilter),
-                            initialValue: _controller.statusFilter,
-                            selectedOptionBuilder: (context, filter) =>
-                                Text(_statusLabel(filter)),
-                            onChanged: (value) {
-                              if (value == null) return;
-                              _controller.updateStatusFilter(value);
-                            },
-                            options: ProductStatusFilter.values
-                                .map(
-                                  (filter) => ShadOption(
-                                    value: filter,
-                                    child: Text(_statusLabel(filter)),
-                                  ),
-                                )
-                                .toList(),
-                          ),
-                        ),
-                        ShadButton.outline(
-                          onPressed: _controller.isLoading
-                              ? null
-                              : _applyFilters,
-                          child: const Text('검색 적용'),
-                        ),
-                        if (_searchController.text.isNotEmpty ||
-                            _controller.vendorFilter != null ||
-                            _controller.uomFilter != null ||
-                            _controller.statusFilter != ProductStatusFilter.all)
-                          ShadButton.ghost(
-                            onPressed: _controller.isLoading
-                                ? null
-                                : () {
-                                    _searchController.clear();
-                                    _searchFocus.requestFocus();
-                                    _controller.updateQuery('');
-                                    _controller.updateVendorFilter(null);
-                                    _controller.updateUomFilter(null);
-                                    _controller.updateStatusFilter(
-                                      ProductStatusFilter.all,
-                                    );
-                                    _controller.fetch(page: 1);
-                                  },
-                            child: const Text('초기화'),
-                          ),
-                      ],
+              SizedBox(
+                width: 220,
+                child: ShadSelect<int?>(
+                  key: ValueKey(_controller.vendorFilter),
+                  initialValue: _controller.vendorFilter,
+                  placeholder: const Text('제조사 전체'),
+                  selectedOptionBuilder: (context, value) {
+                    if (value == null) {
+                      return const Text('제조사 전체');
+                    }
+                    final vendor = _controller.vendorOptions.firstWhere(
+                      (v) => v.id == value,
+                      orElse: () => Vendor(id: value, vendorCode: '', vendorName: ''),
+                    );
+                    return Text(vendor.vendorName);
+                  },
+                  onChanged: (value) => _controller.updateVendorFilter(value),
+                  options: [
+                    const ShadOption<int?>(
+                      value: null,
+                      child: Text('제조사 전체'),
+                    ),
+                    ..._controller.vendorOptions.map(
+                      (vendor) => ShadOption<int?>(
+                        value: vendor.id,
+                        child: Text(vendor.vendorName),
+                      ),
                     ),
                   ],
                 ),
               ),
-              const SizedBox(height: 24),
-              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,
+              SizedBox(
+                width: 220,
+                child: ShadSelect<int?>(
+                  key: ValueKey(_controller.uomFilter),
+                  initialValue: _controller.uomFilter,
+                  placeholder: const Text('단위 전체'),
+                  selectedOptionBuilder: (context, value) {
+                    if (value == null) {
+                      return const Text('단위 전체');
+                    }
+                    final uom = _controller.uomOptions.firstWhere(
+                      (u) => u.id == value,
+                      orElse: () => Uom(id: value, uomName: ''),
+                    );
+                    return Text(uom.uomName);
+                  },
+                  onChanged: (value) => _controller.updateUomFilter(value),
+                  options: [
+                    const ShadOption<int?>(
+                      value: null,
+                      child: Text('단위 전체'),
                     ),
-                    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('다음'),
-                        ),
-                      ],
+                    ..._controller.uomOptions.map(
+                      (uom) => ShadOption<int?>(
+                        value: uom.id,
+                        child: Text(uom.uomName),
+                      ),
                     ),
                   ],
                 ),
-                child: _controller.isLoading
-                    ? const Padding(
-                        padding: EdgeInsets.all(48),
-                        child: Center(child: CircularProgressIndicator()),
+              ),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<ProductStatusFilter>(
+                  key: ValueKey(_controller.statusFilter),
+                  initialValue: _controller.statusFilter,
+                  selectedOptionBuilder: (context, filter) =>
+                      Text(_statusLabel(filter)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateStatusFilter(value);
+                  },
+                  options: ProductStatusFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_statusLabel(filter)),
+                        ),
                       )
-                    : products.isEmpty
+                      .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.updateVendorFilter(null);
+                          _controller.updateUomFilter(null);
+                          _controller.updateStatusFilter(
+                            ProductStatusFilter.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()),
+                  )
+                : products.isEmpty
                     ? Padding(
                         padding: const EdgeInsets.all(32),
                         child: Text(
@@ -372,8 +341,6 @@ class _ProductEnabledPageState extends State<_ProductEnabledPage> {
                             ? null
                             : _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,188 +147,162 @@ class _UserEnabledPageState extends State<_UserEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
-          padding: const EdgeInsets.all(24),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
+        final showReset = _searchController.text.isNotEmpty ||
+            _controller.groupFilter != null ||
+            _controller.statusFilter != UserStatusFilter.all;
+
+        return AppLayout(
+          title: '사용자(사원) 관리',
+          subtitle: '사번 기반 계정과 그룹, 사용 상태를 관리합니다.',
+          breadcrumbs: const [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+            AppBreadcrumbItem(label: '마스터', path: '/masters/users'),
+            AppBreadcrumbItem(label: '사용자'),
+          ],
+          actions: [
+            ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
+              onPressed:
+                  _controller.isSubmitting ? null : () => _openUserForm(context),
+              child: const Text('신규 등록'),
+            ),
+          ],
+          toolbar: FilterBar(
             children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text('사용자(사원) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '사번 기반 계정과 그룹, 사용 상태를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(width: 16),
-                  ShadButton(
-                    onPressed: _controller.isSubmitting
-                        ? null
-                        : () => _openUserForm(context),
-                    child: const Text('신규 등록'),
-                  ),
-                ],
+              SizedBox(
+                width: 260,
+                child: ShadInput(
+                  controller: _searchController,
+                  focusNode: _searchFocus,
+                  placeholder: const Text('사번, 성명, 이메일 검색'),
+                  leading: const Icon(LucideIcons.search, size: 16),
+                  onSubmitted: (_) => _applyFilters(),
+                ),
               ),
-              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,
-                          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(
-                              _groupsLoaded ? '그룹 전체' : '그룹 로딩중...',
-                            ),
-                            selectedOptionBuilder: (context, value) {
-                              if (value == null) {
-                                return Text(
-                                  _groupsLoaded ? '그룹 전체' : '그룹 로딩중...',
-                                );
-                              }
-                              final group = _controller.groups.firstWhere(
-                                (g) => g.id == value,
-                                orElse: () => Group(id: value, groupName: ''),
-                              );
-                              return Text(group.groupName);
-                            },
-                            onChanged: _controller.isLoadingGroups
-                                ? null
-                                : (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: 200,
-                          child: ShadSelect<UserStatusFilter>(
-                            key: ValueKey(_controller.statusFilter),
-                            initialValue: _controller.statusFilter,
-                            selectedOptionBuilder: (context, filter) =>
-                                Text(_statusLabel(filter)),
-                            onChanged: (value) {
-                              if (value == null) return;
-                              _controller.updateStatusFilter(value);
-                            },
-                            options: UserStatusFilter.values
-                                .map(
-                                  (filter) => ShadOption(
-                                    value: filter,
-                                    child: Text(_statusLabel(filter)),
-                                  ),
-                                )
-                                .toList(),
-                          ),
-                        ),
-                        ShadButton.outline(
-                          onPressed: _controller.isLoading
-                              ? null
-                              : _applyFilters,
-                          child: const Text('검색 적용'),
-                        ),
-                        if (_searchController.text.isNotEmpty ||
-                            _controller.groupFilter != null ||
-                            _controller.statusFilter != UserStatusFilter.all)
-                          ShadButton.ghost(
-                            onPressed: _controller.isLoading
-                                ? null
-                                : () {
-                                    _searchController.clear();
-                                    _searchFocus.requestFocus();
-                                    _controller.updateQuery('');
-                                    _controller.updateGroupFilter(null);
-                                    _controller.updateStatusFilter(
-                                      UserStatusFilter.all,
-                                    );
-                                    _controller.fetch(page: 1);
-                                  },
-                            child: const Text('초기화'),
-                          ),
-                      ],
+              SizedBox(
+                width: 220,
+                child: ShadSelect<int?>(
+                  key: ValueKey(_controller.groupFilter),
+                  initialValue: _controller.groupFilter,
+                  placeholder: Text(
+                    _groupsLoaded ? '그룹 전체' : '그룹 로딩중...',
+                  ),
+                  selectedOptionBuilder: (context, value) {
+                    if (value == null) {
+                      return Text(
+                        _groupsLoaded ? '그룹 전체' : '그룹 로딩중...',
+                      );
+                    }
+                    final group = _controller.groups.firstWhere(
+                      (g) => g.id == value,
+                      orElse: () => Group(id: value, groupName: ''),
+                    );
+                    return Text(group.groupName);
+                  },
+                  onChanged: _controller.isLoadingGroups
+                      ? null
+                      : (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),
+                      ),
                     ),
                   ],
                 ),
               ),
-              const SizedBox(height: 24),
-              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('이전'),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<UserStatusFilter>(
+                  key: ValueKey(_controller.statusFilter),
+                  initialValue: _controller.statusFilter,
+                  selectedOptionBuilder: (context, filter) =>
+                      Text(_statusLabel(filter)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateStatusFilter(value);
+                  },
+                  options: UserStatusFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_statusLabel(filter)),
                         ),
-                        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()),
                       )
-                    : users.isEmpty
+                      .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.updateGroupFilter(null);
+                          _controller.updateStatusFilter(
+                            UserStatusFilter.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()),
+                  )
+                : users.isEmpty
                     ? Padding(
                         padding: const EdgeInsets.all(32),
                         child: Text(
@@ -344,8 +322,6 @@ class _UserEnabledPageState extends State<_UserEnabledPage> {
                             ? null
                             : _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,150 +122,122 @@ class _VendorEnabledPageState extends State<_VendorEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
-          padding: const EdgeInsets.all(24),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
+        return AppLayout(
+          title: '제조사(벤더) 관리',
+          subtitle: '벤더코드, 명칭, 사용여부, 삭제 상태를 관리합니다.',
+          breadcrumbs: const [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+            AppBreadcrumbItem(label: '마스터', path: '/masters/vendors'),
+            AppBreadcrumbItem(label: '벤더'),
+          ],
+          actions: [
+            ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
+              onPressed: _controller.isSubmitting
+                  ? null
+                  : () => _openVendorForm(context),
+              child: const Text('신규 등록'),
+            ),
+          ],
+          toolbar: FilterBar(
             children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text('제조사(벤더) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '벤더코드, 명칭, 사용여부, 삭제 상태를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(width: 16),
-                  ShadButton(
-                    leading: const Icon(LucideIcons.plus, size: 16),
-                    onPressed: _controller.isSubmitting
-                        ? null
-                        : () => _openVendorForm(context),
-                    child: const Text('신규 등록'),
-                  ),
-                ],
-              ),
-              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,
-                          child: ShadInput(
-                            controller: _searchController,
-                            focusNode: _searchFocusNode,
-                            placeholder: const Text('벤더코드, 벤더명 검색'),
-                            leading: const Icon(LucideIcons.search, size: 16),
-                            onSubmitted: (_) => _applyFilters(),
-                          ),
-                        ),
-                        SizedBox(
-                          width: 220,
-                          child: ShadSelect<VendorStatusFilter>(
-                            key: ValueKey(_controller.statusFilter),
-                            initialValue: _controller.statusFilter,
-                            selectedOptionBuilder: (context, value) =>
-                                Text(_statusLabel(value)),
-                            onChanged: (value) {
-                              if (value != null) {
-                                _controller.updateStatusFilter(value);
-                                _controller.fetch(page: 1);
-                              }
-                            },
-                            options: VendorStatusFilter.values
-                                .map(
-                                  (filter) => ShadOption(
-                                    value: filter,
-                                    child: Text(_statusLabel(filter)),
-                                  ),
-                                )
-                                .toList(),
-                          ),
-                        ),
-                        ShadButton.outline(
-                          onPressed: _controller.isLoading
-                              ? null
-                              : _applyFilters,
-                          child: const Text('검색 적용'),
-                        ),
-                        if (_searchController.text.isNotEmpty ||
-                            _controller.statusFilter != VendorStatusFilter.all)
-                          ShadButton.ghost(
-                            onPressed: _controller.isLoading
-                                ? null
-                                : () {
-                                    _searchController.clear();
-                                    _searchFocusNode.requestFocus();
-                                    _controller.updateQuery('');
-                                    _controller.updateStatusFilter(
-                                      VendorStatusFilter.all,
-                                    );
-                                    _controller.fetch(page: 1);
-                                  },
-                            child: const Text('초기화'),
-                          ),
-                      ],
-                    ),
-                  ],
+              SizedBox(
+                width: 280,
+                child: ShadInput(
+                  controller: _searchController,
+                  focusNode: _searchFocusNode,
+                  placeholder: const Text('벤더코드, 벤더명 검색'),
+                  leading: const Icon(LucideIcons.search, size: 16),
+                  onSubmitted: (_) => _applyFilters(),
                 ),
               ),
-              const SizedBox(height: 24),
-              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('이전'),
+              SizedBox(
+                width: 220,
+                child: ShadSelect<VendorStatusFilter>(
+                  key: ValueKey(_controller.statusFilter),
+                  initialValue: _controller.statusFilter,
+                  selectedOptionBuilder: (context, value) =>
+                      Text(_statusLabel(value)),
+                  onChanged: (value) {
+                    if (value != null) {
+                      _controller.updateStatusFilter(value);
+                      _controller.fetch(page: 1);
+                    }
+                  },
+                  options: VendorStatusFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_statusLabel(filter)),
                         ),
-                        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()),
                       )
-                    : vendors.isEmpty
+                      .toList(),
+                ),
+              ),
+              ShadButton.outline(
+                onPressed: _controller.isLoading ? null : _applyFilters,
+                child: const Text('검색 적용'),
+              ),
+              if (_searchController.text.isNotEmpty ||
+                  _controller.statusFilter != VendorStatusFilter.all)
+                ShadButton.ghost(
+                  onPressed: _controller.isLoading
+                      ? null
+                      : () {
+                          _searchController.clear();
+                          _searchFocusNode.requestFocus();
+                          _controller.updateQuery('');
+                          _controller.updateStatusFilter(
+                            VendorStatusFilter.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()),
+                  )
+                : vendors.isEmpty
                     ? Padding(
                         padding: const EdgeInsets.all(32),
                         child: Text(
@@ -283,8 +259,6 @@ class _VendorEnabledPageState extends State<_VendorEnabledPage> {
                             : _restoreVendor,
                         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,149 +137,122 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
             ? false
             : (result.page * result.pageSize) < result.total;
 
-        return SingleChildScrollView(
-          padding: const EdgeInsets.all(24),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
+        final showReset = _searchController.text.isNotEmpty ||
+            _controller.statusFilter != WarehouseStatusFilter.all;
+
+        return AppLayout(
+          title: '입고지(창고) 관리',
+          subtitle: '창고 코드, 주소, 사용여부를 관리합니다.',
+          breadcrumbs: const [
+            AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+            AppBreadcrumbItem(label: '마스터', path: '/masters/warehouses'),
+            AppBreadcrumbItem(label: '창고'),
+          ],
+          actions: [
+            ShadButton(
+              leading: const Icon(LucideIcons.plus, size: 16),
+              onPressed: _controller.isSubmitting
+                  ? null
+                  : () => _openWarehouseForm(context),
+              child: const Text('신규 등록'),
+            ),
+          ],
+          toolbar: FilterBar(
             children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text('입고지(창고) 관리', style: theme.textTheme.h2),
-                        const SizedBox(height: 6),
-                        Text(
-                          '창고 코드, 주소, 사용여부를 관리합니다.',
-                          style: theme.textTheme.muted,
-                        ),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(width: 16),
-                  ShadButton(
-                    leading: const Icon(LucideIcons.plus, size: 16),
-                    onPressed: _controller.isSubmitting
-                        ? null
-                        : () => _openWarehouseForm(context),
-                    child: const Text('신규 등록'),
-                  ),
-                ],
-              ),
-              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,
-                          child: ShadInput(
-                            controller: _searchController,
-                            focusNode: _searchFocus,
-                            placeholder: const Text('창고코드, 창고명 검색'),
-                            leading: const Icon(LucideIcons.search, size: 16),
-                            onSubmitted: (_) => _applyFilters(),
-                          ),
-                        ),
-                        SizedBox(
-                          width: 200,
-                          child: ShadSelect<WarehouseStatusFilter>(
-                            key: ValueKey(_controller.statusFilter),
-                            initialValue: _controller.statusFilter,
-                            selectedOptionBuilder: (context, filter) =>
-                                Text(_statusLabel(filter)),
-                            onChanged: (value) {
-                              if (value == null) return;
-                              _controller.updateStatusFilter(value);
-                            },
-                            options: WarehouseStatusFilter.values
-                                .map(
-                                  (filter) => ShadOption(
-                                    value: filter,
-                                    child: Text(_statusLabel(filter)),
-                                  ),
-                                )
-                                .toList(),
-                          ),
-                        ),
-                        ShadButton.outline(
-                          onPressed: _controller.isLoading
-                              ? null
-                              : _applyFilters,
-                          child: const Text('검색 적용'),
-                        ),
-                        if (_searchController.text.isNotEmpty ||
-                            _controller.statusFilter !=
-                                WarehouseStatusFilter.all)
-                          ShadButton.ghost(
-                            onPressed: _controller.isLoading
-                                ? null
-                                : () {
-                                    _searchController.clear();
-                                    _searchFocus.requestFocus();
-                                    _controller.updateQuery('');
-                                    _controller.updateStatusFilter(
-                                      WarehouseStatusFilter.all,
-                                    );
-                                    _controller.fetch(page: 1);
-                                  },
-                            child: const Text('초기화'),
-                          ),
-                      ],
-                    ),
-                  ],
+              SizedBox(
+                width: 260,
+                child: ShadInput(
+                  controller: _searchController,
+                  focusNode: _searchFocus,
+                  placeholder: const Text('창고코드, 창고명 검색'),
+                  leading: const Icon(LucideIcons.search, size: 16),
+                  onSubmitted: (_) => _applyFilters(),
                 ),
               ),
-              const SizedBox(height: 24),
-              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('이전'),
+              SizedBox(
+                width: 200,
+                child: ShadSelect<WarehouseStatusFilter>(
+                  key: ValueKey(_controller.statusFilter),
+                  initialValue: _controller.statusFilter,
+                  selectedOptionBuilder: (context, filter) =>
+                      Text(_statusLabel(filter)),
+                  onChanged: (value) {
+                    if (value == null) return;
+                    _controller.updateStatusFilter(value);
+                  },
+                  options: WarehouseStatusFilter.values
+                      .map(
+                        (filter) => ShadOption(
+                          value: filter,
+                          child: Text(_statusLabel(filter)),
                         ),
-                        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()),
                       )
-                    : warehouses.isEmpty
+                      .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.updateStatusFilter(
+                            WarehouseStatusFilter.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()),
+                  )
+                : warehouses.isEmpty
                     ? Padding(
                         padding: const EdgeInsets.all(32),
                         child: Text(
@@ -288,10 +265,8 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
                         dateFormat: _dateFormat,
                         onEdit: _controller.isSubmitting
                             ? null
-                            : (warehouse) => _openWarehouseForm(
-                                context,
-                                warehouse: warehouse,
-                              ),
+                            : (warehouse) =>
+                                  _openWarehouseForm(context, warehouse: warehouse),
                         onDelete: _controller.isSubmitting
                             ? null
                             : _confirmDelete,
@@ -299,8 +274,6 @@ class _WarehouseEnabledPageState extends State<_WarehouseEnabledPage> {
                             ? null
                             : _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: '기간, 유형, 창고, 상태 조건으로 보고서를 조회하고 내보냅니다.',
-      sections: [
-        SpecSection(
-          title: '조건 입력',
-          items: [
-            '기간 [Date Range]',
-            '유형 [Dropdown]',
-            '창고 [Dropdown]',
-            '상태 [Dropdown]',
-          ],
+      subtitle: '기간, 유형, 창고 조건을 선택해 통합 보고서를 내려받을 수 있도록 준비 중입니다.',
+      breadcrumbs: const [
+        AppBreadcrumbItem(label: '대시보드', path: dashboardRoutePath),
+        AppBreadcrumbItem(label: '보고', path: '/reports'),
+        AppBreadcrumbItem(label: '보고서'),
+      ],
+      actions: [
+        ShadButton(
+          onPressed: null,
+          leading: const Icon(LucideIcons.fileDown, size: 16),
+          child: const Text('XLSX 다운로드'),
         ),
-        SpecSection(
-          title: '출력 옵션',
-          items: ['XLSX 다운로드 [Button]', 'PDF 다운로드 [Button]'],
+        ShadButton.outline(
+          onPressed: null,
+          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,
+    );
+  }
+}