feat(dialog): 상세 팝업 SuperportDetailDialog 통합

- SuperportDetailDialog 위젯과 showSuperportDetailDialog 헬퍼를 추가하고 metadata/섹션 패턴을 표준화

- 결재/재고/마스터 각 상세 다이얼로그를 dialogs 디렉터리에 신설하고 기존 페이지를 신규 팝업으로 전환

- SuperportTable 행 선택과 우편번호 검색 다이얼로그 onRowTap 보정을 통해 헤더 오프셋 버그를 제거

- 상세 다이얼로그 및 트랜잭션/상세 뷰 전용 위젯 테스트와 tester_extensions 유틸을 추가하여 회귀를 방지

- detail_dialog_unification_plan.md로 작업 배경과 필드 통합 계획을 문서화

lib/features/masters/group/presentation/dialogs/group_detail_dialog.dart

@@ -0,0 +1,501 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart' as intl;
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+import '../../../../../widgets/components/superport_detail_dialog.dart';
+import '../../domain/entities/group.dart';
+
+/// 그룹 상세 다이얼로그 사용자 액션 유형이다.
+enum GroupDetailDialogAction { created, updated, deleted, restored }
+
+/// 그룹 상세 다이얼로그 종료 시 반환되는 결과이다.
+class GroupDetailDialogResult {
+  const GroupDetailDialogResult({required this.action, required this.message});
+
+  final GroupDetailDialogAction action;
+  final String message;
+}
+
+typedef GroupCreateCallback = Future<Group?> Function(GroupInput input);
+typedef GroupUpdateCallback = Future<Group?> Function(int id, GroupInput input);
+typedef GroupDeleteCallback = Future<bool> Function(int id);
+typedef GroupRestoreCallback = Future<Group?> Function(int id);
+
+/// 그룹 상세 다이얼로그를 호출해 생성/수정/삭제/복구를 통합 처리한다.
+Future<GroupDetailDialogResult?> showGroupDetailDialog({
+  required BuildContext context,
+  required intl.DateFormat dateFormat,
+  Group? group,
+  required GroupCreateCallback onCreate,
+  required GroupUpdateCallback onUpdate,
+  required GroupDeleteCallback onDelete,
+  required GroupRestoreCallback onRestore,
+}) {
+  final groupValue = group;
+  final isEdit = groupValue != null;
+  final title = isEdit ? '그룹 상세' : '그룹 등록';
+  final description = isEdit
+      ? '그룹 기본 정보와 권한 상태를 확인하고 관리합니다.'
+      : '새로운 그룹 정보를 입력하세요.';
+
+  final metadata = groupValue == null
+      ? const <SuperportDetailMetadata>[]
+      : [
+          SuperportDetailMetadata.text(
+            label: 'ID',
+            value: groupValue.id?.toString() ?? '-',
+          ),
+          SuperportDetailMetadata.text(
+            label: '기본 여부',
+            value: groupValue.isDefault ? '기본 그룹' : '일반 그룹',
+          ),
+          SuperportDetailMetadata.text(
+            label: '사용 여부',
+            value: groupValue.isActive ? '사용중' : '미사용',
+          ),
+          SuperportDetailMetadata.text(
+            label: '삭제 여부',
+            value: groupValue.isDeleted ? '삭제됨' : '정상',
+          ),
+          SuperportDetailMetadata.text(
+            label: '생성일시',
+            value: groupValue.createdAt == null
+                ? '-'
+                : dateFormat.format(groupValue.createdAt!.toLocal()),
+          ),
+          SuperportDetailMetadata.text(
+            label: '변경일시',
+            value: groupValue.updatedAt == null
+                ? '-'
+                : dateFormat.format(groupValue.updatedAt!.toLocal()),
+          ),
+          SuperportDetailMetadata.text(
+            label: '비고',
+            value: groupValue.note?.isEmpty ?? true ? '-' : groupValue.note!,
+          ),
+        ];
+
+  return showSuperportDetailDialog<GroupDetailDialogResult>(
+    context: context,
+    title: title,
+    description: description,
+    summary: groupValue == null
+        ? null
+        : Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                groupValue.groupName,
+                style: ShadTheme.of(context).textTheme.h4,
+              ),
+              if (groupValue.description?.isNotEmpty ?? false) ...[
+                const SizedBox(height: 4),
+                Text(
+                  groupValue.description!,
+                  style: ShadTheme.of(context).textTheme.muted,
+                ),
+              ],
+            ],
+          ),
+    summaryBadges: groupValue == null
+        ? const []
+        : [
+            if (groupValue.isDefault)
+              const ShadBadge(child: Text('기본 그룹'))
+            else
+              const ShadBadge.outline(child: Text('일반 그룹')),
+            if (groupValue.isActive)
+              const ShadBadge(child: Text('사용중'))
+            else
+              const ShadBadge.outline(child: Text('미사용')),
+            if (groupValue.isDeleted)
+              const ShadBadge.destructive(child: Text('삭제됨')),
+          ],
+    metadata: metadata,
+    sections: [
+      _GroupEditSection(
+        id: isEdit ? _GroupDetailSections.edit : _GroupDetailSections.create,
+        label: isEdit ? '수정' : '등록',
+        group: groupValue,
+        onSubmit: (input) async {
+          if (groupValue == null) {
+            final created = await onCreate(input);
+            if (created == null) {
+              return null;
+            }
+            return const GroupDetailDialogResult(
+              action: GroupDetailDialogAction.created,
+              message: '그룹을 등록했습니다.',
+            );
+          }
+          final groupId = groupValue.id;
+          if (groupId == null) {
+            return null;
+          }
+          final updated = await onUpdate(groupId, input);
+          if (updated == null) {
+            return null;
+          }
+          return const GroupDetailDialogResult(
+            action: GroupDetailDialogAction.updated,
+            message: '그룹을 수정했습니다.',
+          );
+        },
+      ),
+      if (groupValue != null)
+        SuperportDetailDialogSection(
+          id: groupValue.isDeleted
+              ? _GroupDetailSections.restore
+              : _GroupDetailSections.delete,
+          label: groupValue.isDeleted ? '복구' : '삭제',
+          icon: groupValue.isDeleted ? LucideIcons.history : LucideIcons.trash2,
+          builder: (_) => _GroupDangerSection(
+            group: groupValue,
+            onDelete: () async {
+              final groupId = groupValue.id;
+              if (groupId == null) {
+                return null;
+              }
+              final success = await onDelete(groupId);
+              if (!success) {
+                return null;
+              }
+              return const GroupDetailDialogResult(
+                action: GroupDetailDialogAction.deleted,
+                message: '그룹을 삭제했습니다.',
+              );
+            },
+            onRestore: () async {
+              final groupId = groupValue.id;
+              if (groupId == null) {
+                return null;
+              }
+              final restored = await onRestore(groupId);
+              if (restored == null) {
+                return null;
+              }
+              return const GroupDetailDialogResult(
+                action: GroupDetailDialogAction.restored,
+                message: '그룹을 복구했습니다.',
+              );
+            },
+          ),
+        ),
+    ],
+    emptyPlaceholder: const Text('표시할 그룹 정보가 없습니다.'),
+    initialSectionId: groupValue == null
+        ? _GroupDetailSections.create
+        : _GroupDetailSections.edit,
+  );
+}
+
+/// 그룹 상세 다이얼로그 섹션 식별자이다.
+class _GroupDetailSections {
+  static const edit = 'edit';
+  static const delete = 'delete';
+  static const restore = 'restore';
+  static const create = 'create';
+}
+
+/// 그룹 생성/수정을 담당하는 섹션이다.
+class _GroupEditSection extends SuperportDetailDialogSection {
+  _GroupEditSection({
+    required super.id,
+    required super.label,
+    required Group? group,
+    required Future<GroupDetailDialogResult?> Function(GroupInput input)
+    onSubmit,
+  }) : super(
+         icon: LucideIcons.pencil,
+         builder: (context) => _GroupForm(group: group, onSubmit: onSubmit),
+       );
+}
+
+/// 그룹 삭제/복구를 실행하는 위험 영역이다.
+class _GroupDangerSection extends StatelessWidget {
+  const _GroupDangerSection({
+    required this.group,
+    required this.onDelete,
+    required this.onRestore,
+  });
+
+  final Group group;
+  final Future<GroupDetailDialogResult?> Function() onDelete;
+  final Future<GroupDetailDialogResult?> Function() onRestore;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    final isDeleted = group.isDeleted;
+    final description = isDeleted
+        ? '복구하면 그룹이 다시 목록에 노출되고 권한 동기화가 재개됩니다.'
+        : '삭제하면 그룹이 목록에서 숨겨지며 기존 데이터는 보존됩니다.';
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 8),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(description, style: theme.textTheme.small),
+          const SizedBox(height: 16),
+          if (isDeleted)
+            ShadButton(
+              onPressed: () async {
+                final navigator = Navigator.of(context, rootNavigator: true);
+                final result = await onRestore();
+                if (result != null && navigator.mounted) {
+                  navigator.pop(result);
+                }
+              },
+              child: const Text('복구'),
+            )
+          else
+            ShadButton.destructive(
+              onPressed: () async {
+                final navigator = Navigator.of(context, rootNavigator: true);
+                final result = await onDelete();
+                if (result != null && navigator.mounted) {
+                  navigator.pop(result);
+                }
+              },
+              child: const Text('삭제'),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+/// 그룹 입력 폼을 구성하는 위젯이다.
+class _GroupForm extends StatefulWidget {
+  const _GroupForm({required this.group, required this.onSubmit});
+
+  final Group? group;
+  final Future<GroupDetailDialogResult?> Function(GroupInput input) onSubmit;
+
+  bool get _isEdit => group != null;
+
+  @override
+  State<_GroupForm> createState() => _GroupFormState();
+}
+
+class _GroupFormState extends State<_GroupForm> {
+  late final TextEditingController _nameController;
+  late final TextEditingController _descriptionController;
+  late final TextEditingController _noteController;
+  late final ValueNotifier<bool> _isDefaultNotifier;
+  late final ValueNotifier<bool> _isActiveNotifier;
+  String? _nameError;
+  String? _submitError;
+  bool _isSubmitting = false;
+
+  bool get _isEdit => widget._isEdit;
+
+  @override
+  void initState() {
+    super.initState();
+    _nameController = TextEditingController(
+      text: widget.group?.groupName ?? '',
+    );
+    _descriptionController = TextEditingController(
+      text: widget.group?.description ?? '',
+    );
+    _noteController = TextEditingController(text: widget.group?.note ?? '');
+    _isDefaultNotifier = ValueNotifier<bool>(widget.group?.isDefault ?? false);
+    _isActiveNotifier = ValueNotifier<bool>(widget.group?.isActive ?? true);
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    _descriptionController.dispose();
+    _noteController.dispose();
+    _isDefaultNotifier.dispose();
+    _isActiveNotifier.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _GroupFormField(
+          label: '그룹명',
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              ShadInput(
+                controller: _nameController,
+                readOnly: _isEdit,
+                onChanged: (_) {
+                  if (_nameController.text.trim().isNotEmpty) {
+                    setState(() {
+                      _nameError = null;
+                    });
+                  }
+                },
+              ),
+              if (_nameError != null)
+                Padding(
+                  padding: const EdgeInsets.only(top: 6),
+                  child: Text(
+                    _nameError!,
+                    style: theme.textTheme.small.copyWith(
+                      color: theme.colorScheme.destructive,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
+        const SizedBox(height: 16),
+        _GroupFormField(
+          label: '설명',
+          child: ShadTextarea(
+            controller: _descriptionController,
+            minHeight: 96,
+            maxHeight: 220,
+          ),
+        ),
+        const SizedBox(height: 16),
+        _GroupFormField(
+          label: '기본 여부',
+          child: ValueListenableBuilder<bool>(
+            valueListenable: _isDefaultNotifier,
+            builder: (_, value, __) {
+              return Row(
+                children: [
+                  ShadSwitch(
+                    value: value,
+                    onChanged: _isSubmitting
+                        ? null
+                        : (next) => _isDefaultNotifier.value = next,
+                  ),
+                  const SizedBox(width: 8),
+                  Text(value ? '기본 그룹' : '일반 그룹'),
+                ],
+              );
+            },
+          ),
+        ),
+        const SizedBox(height: 16),
+        _GroupFormField(
+          label: '사용 여부',
+          child: ValueListenableBuilder<bool>(
+            valueListenable: _isActiveNotifier,
+            builder: (_, value, __) {
+              return Row(
+                children: [
+                  ShadSwitch(
+                    value: value,
+                    onChanged: _isSubmitting
+                        ? null
+                        : (next) => _isActiveNotifier.value = next,
+                  ),
+                  const SizedBox(width: 8),
+                  Text(value ? '사용' : '미사용'),
+                ],
+              );
+            },
+          ),
+        ),
+        const SizedBox(height: 16),
+        _GroupFormField(
+          label: '비고',
+          child: ShadTextarea(
+            controller: _noteController,
+            minHeight: 96,
+            maxHeight: 220,
+          ),
+        ),
+        if (_submitError != null) ...[
+          const SizedBox(height: 16),
+          Text(
+            _submitError!,
+            style: theme.textTheme.small.copyWith(
+              color: theme.colorScheme.destructive,
+            ),
+          ),
+        ],
+        const SizedBox(height: 20),
+        Align(
+          alignment: Alignment.centerRight,
+          child: ShadButton(
+            onPressed: _isSubmitting ? null : _handleSubmit,
+            child: Text(_isEdit ? '저장' : '등록'),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Future<void> _handleSubmit() async {
+    final name = _nameController.text.trim();
+
+    setState(() {
+      _nameError = name.isEmpty ? '그룹명을 입력하세요.' : null;
+      _submitError = null;
+    });
+
+    if (_nameError != null) {
+      return;
+    }
+
+    setState(() {
+      _isSubmitting = true;
+    });
+
+    final description = _descriptionController.text.trim();
+    final note = _noteController.text.trim();
+    final input = GroupInput(
+      groupName: name,
+      description: description.isEmpty ? null : description,
+      isDefault: _isDefaultNotifier.value,
+      isActive: _isActiveNotifier.value,
+      note: note.isEmpty ? null : note,
+    );
+    final navigator = Navigator.of(context, rootNavigator: true);
+    final result = await widget.onSubmit(input);
+
+    if (!mounted) {
+      return;
+    }
+
+    setState(() {
+      _isSubmitting = false;
+      _submitError = result == null ? '요청 처리에 실패했습니다.' : null;
+    });
+
+    if (result != null && navigator.mounted) {
+      navigator.pop(result);
+    }
+  }
+}
+
+/// 그룹 폼 필드 공통 레이아웃이다.
+class _GroupFormField extends StatelessWidget {
+  const _GroupFormField({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/presentation/pages/group_page.dart

@@ -5,13 +5,14 @@ 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 'package:superport_v2/widgets/components/superport_dialog.dart';
 import 'package:superport_v2/widgets/components/superport_pagination_controls.dart';
+import 'package:superport_v2/widgets/components/superport_table.dart';
 
 import '../../../../../core/config/environment.dart';
 import '../../../../../widgets/spec_page.dart';
 import '../../domain/entities/group.dart';
 import '../../domain/repositories/group_repository.dart';
+import '../dialogs/group_detail_dialog.dart';
 import '../controllers/group_controller.dart';
 
 /// 권한 그룹 관리 페이지. 기능 플래그에 따라 사양 화면 또는 실제 목록을 보여준다.
@@ -151,7 +152,7 @@ class _GroupEnabledPageState extends State<_GroupEnabledPage> {
               leading: const Icon(LucideIcons.plus, size: 16),
               onPressed: _controller.isSubmitting
                   ? null
-                  : () => _openGroupForm(context),
+                  : _openGroupCreateDialog,
               child: const Text('신규 등록'),
             ),
           ],
@@ -274,11 +275,9 @@ class _GroupEnabledPageState extends State<_GroupEnabledPage> {
                 : _GroupTable(
                     groups: groups,
                     dateFormat: _dateFormat,
-                    onEdit: _controller.isSubmitting
+                    onRowTap: _controller.isSubmitting
                         ? null
-                        : (group) => _openGroupForm(context, group: group),
-                    onDelete: _controller.isSubmitting ? null : _confirmDelete,
-                    onRestore: _controller.isSubmitting ? null : _restoreGroup,
+                        : _openGroupDetailDialog,
                   ),
           ),
         );
@@ -313,265 +312,37 @@ class _GroupEnabledPageState extends State<_GroupEnabledPage> {
     }
   }
 
-  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 정보가 없어 수정할 수 없습니다.');
+  Future<void> _openGroupCreateDialog() async {
+    final result = await showGroupDetailDialog(
+      context: context,
+      dateFormat: _dateFormat,
+      onCreate: _controller.create,
+      onUpdate: _controller.update,
+      onDelete: _controller.delete,
+      onRestore: _controller.restore,
+    );
+    if (result != null && mounted) {
+      _showSnack(result.message);
+    }
+  }
+
+  Future<void> _openGroupDetailDialog(Group group) async {
+    final groupId = group.id;
+    if (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 SuperportDialog.show<void>(
+    final result = await showGroupDetailDialog(
       context: context,
-      dialog: SuperportDialog(
-        title: isEdit ? '그룹 수정' : '그룹 등록',
-        description: '그룹 정보를 ${isEdit ? '수정' : '입력'}하세요.',
-        constraints: const BoxConstraints(maxWidth: 540),
-        actions: [
-          ValueListenableBuilder<bool>(
-            valueListenable: saving,
-            builder: (dialogContext, isSaving, __) {
-              return ShadButton.ghost(
-                onPressed: isSaving
-                    ? null
-                    : () => Navigator.of(
-                        dialogContext,
-                        rootNavigator: true,
-                      ).pop(),
-                child: const Text('취소'),
-              );
-            },
-          ),
-          ValueListenableBuilder<bool>(
-            valueListenable: saving,
-            builder: (dialogContext, isSaving, __) {
-              return 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 navigator = Navigator.of(
-                          dialogContext,
-                          rootNavigator: true,
-                        );
-                        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();
-                        }
-                      },
-                child: Text(isEdit ? '저장' : '등록'),
-              );
-            },
-          ),
-        ],
-        child: StatefulBuilder(
-          builder: (dialogContext, _) {
-            final theme = ShadTheme.of(dialogContext);
-            final materialTheme = Theme.of(dialogContext);
-
-            return 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 (existingGroup != null) ...[
-                      const SizedBox(height: 20),
-                      Text(
-                        '생성일시: ${_formatDateTime(existingGroup.createdAt)}',
-                        style: theme.textTheme.small,
-                      ),
-                      const SizedBox(height: 4),
-                      Text(
-                        '수정일시: ${_formatDateTime(existingGroup.updatedAt)}',
-                        style: theme.textTheme.small,
-                      ),
-                    ],
-                  ],
-                ),
-              ),
-            );
-          },
-        ),
-      ),
+      dateFormat: _dateFormat,
+      group: group,
+      onCreate: _controller.create,
+      onUpdate: _controller.update,
+      onDelete: _controller.delete,
+      onRestore: _controller.restore,
     );
-
-    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, rootNavigator: true).pop(false),
-              child: const Text('취소'),
-            ),
-            TextButton(
-              onPressed: () =>
-                  Navigator.of(dialogContext, rootNavigator: true).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('그룹을 복구했습니다.');
+    if (result != null && mounted) {
+      _showSnack(result.message);
     }
   }
 
@@ -585,129 +356,70 @@ class _GroupEnabledPageState extends State<_GroupEnabledPage> {
     }
     messenger.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,
+    required this.onRowTap,
   });
 
   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;
+  final void Function(Group group)? onRowTap;
 
   @override
   Widget build(BuildContext context) {
-    final header = [
-      'ID',
-      '그룹명',
-      '설명',
-      '기본',
-      '사용',
-      '삭제',
-      '비고',
-      '변경일시',
-      '동작',
-    ].map((text) => ShadTableCell.header(child: Text(text))).toList();
+    final columns = const [
+      Text('ID'),
+      Text('그룹명'),
+      Text('설명'),
+      Text('기본'),
+      Text('사용'),
+      Text('삭제'),
+      Text('비고'),
+      Text('변경일시'),
+    ];
 
-    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();
+    final rows = groups
+        .map(
+          (group) => <Widget>[
+            Text(group.id?.toString() ?? '-'),
+            Text(group.groupName),
+            Text(group.description?.isEmpty ?? true ? '-' : group.description!),
+            Text(group.isDefault ? 'Y' : 'N'),
+            Text(group.isActive ? 'Y' : 'N'),
+            Text(group.isDeleted ? 'Y' : '-'),
+            Text(group.note?.isEmpty ?? true ? '-' : group.note!),
+            Text(
+              group.updatedAt == null
+                  ? '-'
+                  : dateFormat.format(group.updatedAt!.toLocal()),
+            ),
+          ],
+        )
+        .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,
-      ],
+    return SuperportTable(
+      columns: columns,
+      rows: rows,
+      rowHeight: 56,
+      maxHeight: 56.0 * (groups.length + 1),
+      onRowTap: onRowTap == null
+          ? null
+          : (index) {
+              if (index < 0 || index >= groups.length) {
+                return;
+              }
+              onRowTap!(groups[index]);
+            },
+      columnSpanExtent: (index) => switch (index) {
+        2 => const FixedTableSpanExtent(220),
+        6 => const FixedTableSpanExtent(200),
+        7 => const FixedTableSpanExtent(160),
+        _ => const FixedTableSpanExtent(120),
+      },
     );
   }
 }