julian/superport
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: UI 일관성 개선 및 테이블 구조 통일

Browse Source 
장비관리 화면을 기준으로 전체 화면 UI 일관성 개선:

- 모든 화면 검색바/버튼/드롭다운 높이 40px 통일
- 테이블 헤더 패딩 vertical 10px, 행 패딩 vertical 4px 통일
- 배지 스타일 통일 (border 제거, opacity 0.9 적용)
- 페이지네이션 10개 이하에서도 항상 표시
- 테이블 헤더 폰트 스타일 통일 (fontSize: 13, fontWeight: w500)

각 화면별 수정사항:
1. 장비관리: 컬럼 너비 최적화, 검색 컴포넌트 높이 명시
2. 입고지 관리: 페이지네이션 조건 개선
3. 회사관리: UnifiedSearchBar 통합, 배지 스타일 개선
4. 유지보수: ListView.builder → map() 변경, 테이블 구조 재설계

키포인트 색상을 teal로 통일하여 브랜드 일관성 확보
This commit is contained in:
JiWoong Sul
2025-08-08 18:03:07 +09:00
parent 844c7bd92f
commit b8f10dd588
17 changed files with 2065 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/screens/common/app_layout_redesign.dart
View File

@@ -199,7 +199,7 @@ class _AppLayoutRedesignState extends State<AppLayoutRedesign>
decoration: BoxDecoration(
color: ShadcnTheme.background,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
border: Border.all(color: ShadcnTheme.border),
border: Border.all(color: Colors.black),
boxShadow: ShadcnTheme.cardShadow,
),
child: Column(
@@ -237,10 +237,9 @@ class _AppLayoutRedesignState extends State<AppLayoutRedesign>
height: 64,
decoration: BoxDecoration(
color: ShadcnTheme.background,
border: Border(bottom: BorderSide(color: ShadcnTheme.border)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 2),
),
@@ -368,7 +367,6 @@ class _AppLayoutRedesignState extends State<AppLayoutRedesign>
return Container(
decoration: BoxDecoration(
color: ShadcnTheme.background,
border: Border(right: BorderSide(color: ShadcnTheme.border)),
),
child: SidebarMenuRedesign(
currentRoute: _currentRoute,
@@ -385,7 +383,7 @@ class _AppLayoutRedesignState extends State<AppLayoutRedesign>
return Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing6),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: ShadcnTheme.border)),
border: Border(bottom: BorderSide(color: Colors.black)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,

18
lib/screens/common/components/shadcn_components.dart
View File

@@ -32,7 +32,7 @@ class ShadcnCard extends StatelessWidget {
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
border: Border.all(color: ShadcnTheme.border),
border: Border.all(color: Colors.black),
boxShadow: ShadcnTheme.cardShadow,
),
child: child,
@@ -145,7 +145,7 @@ class ShadcnButton extends StatelessWidget {
return OutlinedButton.styleFrom(
backgroundColor: backgroundColor ?? ShadcnTheme.secondary,
foregroundColor: textColor ?? ShadcnTheme.secondaryForeground,
side: const BorderSide(color: ShadcnTheme.border),
side: const BorderSide(color: Colors.black),
elevation: 0,
shadowColor: Colors.transparent,
shape: RoundedRectangleBorder(
@@ -180,12 +180,12 @@ class ShadcnButton extends StatelessWidget {
case ShadcnButtonSize.small:
return const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing3,
vertical: ShadcnTheme.spacing1,
vertical: 6,
);
case ShadcnButtonSize.medium:
return const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: ShadcnTheme.spacing2,
vertical: 10,
);
case ShadcnButtonSize.large:
return const EdgeInsets.symmetric(
@@ -291,7 +291,7 @@ class ShadcnInput extends StatelessWidget {
fillColor: ShadcnTheme.background,
contentPadding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing3,
vertical: ShadcnTheme.spacing2,
vertical: 10,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
@@ -317,7 +317,7 @@ class ShadcnInput extends StatelessWidget {
),
),
hintStyle: ShadcnTheme.bodyMedium.copyWith(
color: ShadcnTheme.mutedForeground,
color: ShadcnTheme.mutedForeground.withValues(alpha: 0.8),
),
),
),
@@ -392,7 +392,7 @@ class ShadcnBadge extends StatelessWidget {
Color _getBorderColor() {
switch (variant) {
case ShadcnBadgeVariant.outline:
return ShadcnTheme.border;
return Colors.black;
default:
return Colors.transparent;
}
@@ -448,7 +448,7 @@ class ShadcnSeparator extends StatelessWidget {
return Container(
width: direction == Axis.horizontal ? double.infinity : thickness,
height: direction == Axis.vertical ? double.infinity : thickness,
color: color ?? ShadcnTheme.border,
color: color ?? Colors.black,
);
}
}
@@ -476,7 +476,7 @@ class ShadcnAvatar extends StatelessWidget {
decoration: BoxDecoration(
color: backgroundColor ?? ShadcnTheme.muted,
shape: BoxShape.circle,
border: Border.all(color: ShadcnTheme.border),
border: Border.all(color: Colors.black),
),
child: ClipOval(
child:

143
lib/screens/common/layouts/base_list_screen.dart Normal file
View File

@@ -0,0 +1,143 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
/// 모든 리스트 화면의 기본 레이아웃을 제공하는 베이스 위젯
///
/// 일관된 레이아웃 구조를 보장하기 위한 템플릿
class BaseListScreen extends StatelessWidget {
final Widget? headerSection; // 상단 통계 카드 등
final Widget searchBar; // 검색바 섹션
final Widget? filterSection; // 필터 섹션
final Widget actionBar; // 액션 버튼 섹션
final Widget dataTable; // 데이터 테이블
final Widget? pagination; // 페이지네이션
final bool isLoading;
final String? error;
final VoidCallback? onRefresh;
final String emptyMessage;
final IconData emptyIcon;
const BaseListScreen({
Key? key,
this.headerSection,
required this.searchBar,
this.filterSection,
required this.actionBar,
required this.dataTable,
this.pagination,
this.isLoading = false,
this.error,
this.onRefresh,
this.emptyMessage = '데이터가 없습니다',
this.emptyIcon = Icons.inbox_outlined,
}) : super(key: key);
@override
Widget build(BuildContext context) {
if (isLoading) {
return _buildLoadingState();
}
if (error != null) {
return _buildErrorState();
}
return Container(
color: ShadcnTheme.background,
child: SingleChildScrollView(
padding: const EdgeInsets.all(ShadcnTheme.spacing6),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 헤더 섹션 (통계 카드 등)
if (headerSection != null) ...[
headerSection!,
const SizedBox(height: ShadcnTheme.spacing4),
],
// 검색바 섹션
searchBar,
const SizedBox(height: ShadcnTheme.spacing4),
// 필터 섹션
if (filterSection != null) ...[
filterSection!,
const SizedBox(height: ShadcnTheme.spacing4),
],
// 액션바 섹션
actionBar,
const SizedBox(height: ShadcnTheme.spacing4),
// 데이터 테이블
dataTable,
// 페이지네이션
if (pagination != null) ...[
const SizedBox(height: ShadcnTheme.spacing4),
pagination!,
],
],
),
),
);
}
Widget _buildLoadingState() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(color: ShadcnTheme.primary),
const SizedBox(height: ShadcnTheme.spacing4),
Text('데이터를 불러오는 중...', style: ShadcnTheme.bodyMuted),
],
),
);
}
Widget _buildErrorState() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.error_outline, size: 48, color: ShadcnTheme.destructive),
const SizedBox(height: ShadcnTheme.spacing4),
Text('오류가 발생했습니다', style: ShadcnTheme.headingH4),
const SizedBox(height: ShadcnTheme.spacing2),
Text(error ?? '', style: ShadcnTheme.bodyMuted),
if (onRefresh != null) ...[
const SizedBox(height: ShadcnTheme.spacing4),
ElevatedButton(
onPressed: onRefresh,
style: ElevatedButton.styleFrom(
backgroundColor: ShadcnTheme.primary,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
),
),
child: const Text('다시 시도'),
),
],
],
),
);
}
Widget buildEmptyState() {
return Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing8),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(emptyIcon, size: 48, color: ShadcnTheme.mutedForeground),
const SizedBox(height: ShadcnTheme.spacing4),
Text(emptyMessage, style: ShadcnTheme.bodyMuted),
],
),
),
);
}
}

101
lib/screens/common/theme_shadcn.dart
View File

@@ -3,58 +3,63 @@ import 'package:google_fonts/google_fonts.dart';
/// shadcn/ui 스타일 테마 시스템
class ShadcnTheme {
// shadcn/ui 색상 시스템
// Teal 기반 색상 시스템
static const Color background = Color(0xFFFFFFFF);
static const Color foreground = Color(0xFF020817);
static const Color foreground = Color(0xFF0F172A);
static const Color card = Color(0xFFFFFFFF);
static const Color cardForeground = Color(0xFF020817);
static const Color cardForeground = Color(0xFF0F172A);
static const Color popover = Color(0xFFFFFFFF);
static const Color popoverForeground = Color(0xFF020817);
static const Color primary = Color(0xFF0F172A);
static const Color primaryForeground = Color(0xFFF8FAFC);
static const Color secondary = Color(0xFFF1F5F9);
static const Color secondaryForeground = Color(0xFF0F172A);
static const Color muted = Color(0xFFF1F5F9);
static const Color mutedForeground = Color(0xFF64748B);
static const Color accent = Color(0xFFF1F5F9);
static const Color accentForeground = Color(0xFF0F172A);
static const Color destructive = Color(0xFFEF4444);
static const Color destructiveForeground = Color(0xFFF8FAFC);
static const Color border = Color(0xFFE2E8F0);
static const Color input = Color(0xFFE2E8F0);
static const Color ring = Color(0xFF020817);
static const Color popoverForeground = Color(0xFF0F172A);
static const Color primary = Color(0xFF0D9488); // teal-600
static const Color primaryForeground = Color(0xFFFFFFFF);
static const Color secondary = Color(0xFFF0FDFA); // teal-50
static const Color secondaryForeground = Color(0xFF134E4A); // teal-900
static const Color muted = Color(0xFFF1F5F9); // slate-100
static const Color mutedForeground = Color(0xFF64748B); // slate-500
static const Color accent = Color(0xFF14B8A6); // teal-500
static const Color accentForeground = Color(0xFFFFFFFF);
static const Color destructive = Color(0xFFEF4444); // red-500
static const Color destructiveForeground = Color(0xFFFFFFFF);
static const Color border = Color(0xFFE5E7EB); // gray-200 (기본 border는 연한 회색)
static const Color input = Color(0xFFE5E7EB); // gray-200
static const Color ring = Color(0xFF14B8A6); // teal-500
static const Color radius = Color(0xFF000000); // 사용하지 않음
// 그라데이션 색상
static const Color gradient1 = Color(0xFF6366F1);
static const Color gradient2 = Color(0xFF8B5CF6);
static const Color gradient3 = Color(0xFFEC4899);
// Teal 그라데이션 색상
static const Color gradient1 = Color(0xFF14B8A6); // teal-500
static const Color gradient2 = Color(0xFF0D9488); // teal-600
static const Color gradient3 = Color(0xFF0F766E); // teal-700
// 상태 색상
static const Color success = Color(0xFF10B981);
static const Color warning = Color(0xFFF59E0B);
static const Color error = Color(0xFFEF4444);
static const Color info = Color(0xFF3B82F6);
static const Color success = Color(0xFF10B981); // emerald-500
static const Color warning = Color(0xFFF59E0B); // amber-500
static const Color error = Color(0xFFEF4444); // red-500
static const Color info = Color(0xFF0891B2); // cyan-600
// 추가 색상 (회사 구분용)
static const Color blue = Color(0xFF3B82F6); // blue-500
static const Color purple = Color(0xFF8B5CF6); // purple-500
static const Color green = Color(0xFF22C55E); // green-500
// 그림자 설정
static List<BoxShadow> get cardShadow => [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 6,
color: primary.withValues(alpha: 0.08),
blurRadius: 8,
offset: const Offset(0, 2),
),
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 20,
offset: const Offset(0, 10),
color: Colors.black.withValues(alpha: 0.04),
blurRadius: 16,
offset: const Offset(0, 8),
),
];
static List<BoxShadow> get buttonShadow => [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 3,
offset: const Offset(0, 1),
color: primary.withValues(alpha: 0.2),
blurRadius: 4,
offset: const Offset(0, 2),
),
];
@@ -81,37 +86,37 @@ class ShadcnTheme {
static const double radius3xl = 24.0;
static const double radiusFull = 9999.0;
// 타이포그래피 시스템
// 타이포그래피 시스템 (통일된 크기)
static TextStyle get headingH1 => GoogleFonts.inter(
fontSize: 36,
fontWeight: FontWeight.w800,
color: foreground,
letterSpacing: -0.02,
);
static TextStyle get headingH2 => GoogleFonts.inter(
fontSize: 30,
fontSize: 32,
fontWeight: FontWeight.w700,
color: foreground,
letterSpacing: -0.02,
);
static TextStyle get headingH3 => GoogleFonts.inter(
static TextStyle get headingH2 => GoogleFonts.inter(
fontSize: 24,
fontWeight: FontWeight.w600,
color: foreground,
letterSpacing: -0.01,
);
static TextStyle get headingH4 => GoogleFonts.inter(
static TextStyle get headingH3 => GoogleFonts.inter(
fontSize: 20,
fontWeight: FontWeight.w600,
fontWeight: FontWeight.w500,
color: foreground,
letterSpacing: -0.01,
);
static TextStyle get bodyLarge => GoogleFonts.inter(
static TextStyle get headingH4 => GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w500,
color: foreground,
letterSpacing: 0,
);
static TextStyle get bodyLarge => GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w400,
color: foreground,
letterSpacing: 0,
@@ -194,7 +199,7 @@ class ShadcnTheme {
foregroundColor: foreground,
elevation: 0,
scrolledUnderElevation: 1,
shadowColor: Colors.black.withOpacity(0.1),
shadowColor: Colors.black.withValues(alpha: 0.1),
surfaceTintColor: Colors.transparent,
titleTextStyle: headingH4,
iconTheme: const IconThemeData(color: foreground),
@@ -206,7 +211,7 @@ class ShadcnTheme {
borderRadius: BorderRadius.circular(radiusLg),
side: const BorderSide(color: border, width: 1),
),
shadowColor: Colors.black.withOpacity(0.05),
shadowColor: Colors.black.withValues(alpha: 0.05),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(

136
lib/screens/common/widgets/pagination.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
/// 페이지네이션 위젯 (<< < 1 2 3 ... 10 > >>)
/// - totalCount: 전체 아이템 수
@@ -33,56 +34,105 @@ class Pagination extends StatelessWidget {
for (int i = startPage; i <= endPage; i++) {
pageButtons.add(
Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: const Size(36, 36),
backgroundColor: i == currentPage ? Colors.blue : Colors.white,
foregroundColor: i == currentPage ? Colors.white : Colors.black,
padding: EdgeInsets.zero,
padding: const EdgeInsets.symmetric(horizontal: 4),
child: InkWell(
onTap: i == currentPage ? null : () => onPageChanged(i),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
child: Container(
height: 32,
constraints: const BoxConstraints(minWidth: 32),
padding: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: i == currentPage ? ShadcnTheme.primary : Colors.transparent,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(
color: i == currentPage ? ShadcnTheme.primary : Colors.black,
),
),
alignment: Alignment.center,
child: Text(
'$i',
style: ShadcnTheme.labelMedium.copyWith(
color: i == currentPage
? ShadcnTheme.primaryForeground
: ShadcnTheme.foreground,
),
),
),
onPressed: i == currentPage ? null : () => onPageChanged(i),
child: Text('$i'),
),
),
);
}
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 가장 처음 페이지로 이동
IconButton(
icon: const Icon(Icons.first_page),
tooltip: '처음',
onPressed: currentPage > 1 ? () => onPageChanged(1) : null,
return Container(
padding: const EdgeInsets.symmetric(vertical: ShadcnTheme.spacing4),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 가장 처음 페이지로 이동
_buildNavigationButton(
icon: Icons.first_page,
tooltip: '처음',
onPressed: currentPage > 1 ? () => onPageChanged(1) : null,
),
const SizedBox(width: 4),
// 이전 페이지로 이동
_buildNavigationButton(
icon: Icons.chevron_left,
tooltip: '이전',
onPressed: currentPage > 1 ? () => onPageChanged(currentPage - 1) : null,
),
const SizedBox(width: 8),
// 페이지 번호 버튼들
...pageButtons,
const SizedBox(width: 8),
// 다음 페이지로 이동
_buildNavigationButton(
icon: Icons.chevron_right,
tooltip: '다음',
onPressed: currentPage < totalPages
? () => onPageChanged(currentPage + 1)
: null,
),
const SizedBox(width: 4),
// 마짉 페이지로 이동
_buildNavigationButton(
icon: Icons.last_page,
tooltip: '마짉',
onPressed: currentPage < totalPages ? () => onPageChanged(totalPages) : null,
),
],
),
);
}
Widget _buildNavigationButton({
required IconData icon,
required String tooltip,
VoidCallback? onPressed,
}) {
final isDisabled = onPressed == null;
return Tooltip(
message: tooltip,
child: InkWell(
onTap: onPressed,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
child: Container(
height: 32,
width: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(
color: isDisabled ? ShadcnTheme.muted : Colors.black,
),
),
child: Icon(
icon,
size: 18,
color: isDisabled ? ShadcnTheme.mutedForeground : ShadcnTheme.foreground,
),
),
// 이전 페이지로 이동
IconButton(
icon: const Icon(Icons.chevron_left),
tooltip: '이전',
onPressed:
currentPage > 1 ? () => onPageChanged(currentPage - 1) : null,
),
// 페이지 번호 버튼들
...pageButtons,
// 다음 페이지로 이동
IconButton(
icon: const Icon(Icons.chevron_right),
tooltip: '다음',
onPressed:
currentPage < totalPages
? () => onPageChanged(currentPage + 1)
: null,
),
// 마지막 페이지로 이동
IconButton(
icon: const Icon(Icons.last_page),
tooltip: '마지막',
onPressed:
currentPage < totalPages ? () => onPageChanged(totalPages) : null,
),
],
),
);
}
}

235
lib/screens/common/widgets/standard_action_bar.dart Normal file
View File

@@ -0,0 +1,235 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
/// 표준 액션바 위젯
///
/// 모든 리스트 화면에서 일관된 액션 버튼 배치와 상태 표시 제공
class StandardActionBar extends StatelessWidget {
final List<Widget> leftActions; // 왼쪽 액션 버튼들
final List<Widget> rightActions; // 오른쪽 액션 버튼들
final int? selectedCount; // 선택된 항목 수
final int totalCount; // 전체 항목 수
final VoidCallback? onRefresh; // 새로고침 콜백
final String? statusMessage; // 추가 상태 메시지
const StandardActionBar({
Key? key,
this.leftActions = const [],
this.rightActions = const [],
this.selectedCount,
required this.totalCount,
this.onRefresh,
this.statusMessage,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 왼쪽 액션 버튼들
Row(
children: [
...leftActions.map((action) => Padding(
padding: const EdgeInsets.only(right: ShadcnTheme.spacing2),
child: action,
)),
],
),
// 오른쪽 상태 표시 및 액션들
Row(
children: [
// 추가 상태 메시지
if (statusMessage != null) ...[
Text(statusMessage!, style: ShadcnTheme.bodyMuted),
const SizedBox(width: ShadcnTheme.spacing3),
],
// 선택된 항목 수 표시
if (selectedCount != null && selectedCount! > 0) ...[
Container(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
decoration: BoxDecoration(
color: ShadcnTheme.primary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusSm),
border: Border.all(color: ShadcnTheme.primary.withValues(alpha: 0.3)),
),
child: Text(
'$selectedCount개 선택됨',
style: TextStyle(
fontWeight: FontWeight.bold,
color: ShadcnTheme.primary,
),
),
),
const SizedBox(width: ShadcnTheme.spacing3),
],
// 전체 항목 수 표시
Container(
padding: const EdgeInsets.symmetric(
vertical: 6,
horizontal: 12,
),
decoration: BoxDecoration(
color: ShadcnTheme.muted.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusSm),
),
child: Text(
'총 $totalCount개',
style: ShadcnTheme.bodySmall,
),
),
// 새로고침 버튼
if (onRefresh != null) ...[
const SizedBox(width: ShadcnTheme.spacing3),
IconButton(
icon: const Icon(Icons.refresh),
onPressed: onRefresh,
tooltip: '새로고침',
iconSize: 20,
),
],
// 오른쪽 액션 버튼들
...rightActions.map((action) => Padding(
padding: const EdgeInsets.only(left: ShadcnTheme.spacing2),
child: action,
)),
],
),
],
);
}
}
/// 표준 액션 버튼 그룹
class StandardActionButtons {
/// 추가 버튼
static Widget addButton({
required String text,
required VoidCallback onPressed,
IconData icon = Icons.add,
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: Icon(icon, size: 16),
);
}
/// 삭제 버튼
static Widget deleteButton({
required VoidCallback? onPressed,
bool enabled = true,
String text = '삭제',
}) {
return ShadcnButton(
text: text,
onPressed: enabled ? onPressed : null,
variant: enabled
? ShadcnButtonVariant.destructive
: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.delete, size: 16),
);
}
/// 엑셀 내보내기 버튼
static Widget exportButton({
required VoidCallback onPressed,
String text = '엑셀 내보내기',
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.download, size: 16),
);
}
/// 엑셀 가져오기 버튼
static Widget importButton({
required VoidCallback onPressed,
String text = '엑셀 가져오기',
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.upload, size: 16),
);
}
/// 새로고침 버튼
static Widget refreshButton({
required VoidCallback onPressed,
String text = '새로고침',
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.refresh, size: 16),
);
}
/// 필터 초기화 버튼
static Widget clearFiltersButton({
required VoidCallback onPressed,
String text = '필터 초기화',
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.ghost,
icon: const Icon(Icons.clear_all, size: 16),
);
}
}
/// 표준 필터 드롭다운
class StandardFilterDropdown<T> extends StatelessWidget {
final T value;
final List<DropdownMenuItem<T>> items;
final ValueChanged<T?> onChanged;
final String? hint;
const StandardFilterDropdown({
Key? key,
required this.value,
required this.items,
required this.onChanged,
this.hint,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 40,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: ShadcnTheme.card,
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<T>(
value: value,
items: items,
onChanged: onChanged,
hint: hint != null ? Text(hint!) : null,
style: ShadcnTheme.bodySmall,
icon: const Icon(Icons.arrow_drop_down, size: 20),
),
),
);
}
}

315
lib/screens/common/widgets/standard_data_table.dart Normal file
View File

@@ -0,0 +1,315 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
/// 표준 데이터 테이블 컬럼 정의
class DataColumn {
final String label;
final double? width;
final int? flex;
final bool isNumeric;
final TextAlign textAlign;
DataColumn({
required this.label,
this.width,
this.flex,
this.isNumeric = false,
TextAlign? textAlign,
}) : textAlign = textAlign ?? (isNumeric ? TextAlign.right : TextAlign.left);
}
/// 표준 데이터 테이블 위젯
///
/// 모든 리스트 화면에서 일관된 테이블 스타일 제공
class StandardDataTable extends StatelessWidget {
final List<DataColumn> columns;
final List<Widget> rows;
final bool showCheckbox;
final bool? isAllSelected;
final ValueChanged<bool?>? onSelectAll;
final bool enableHorizontalScroll;
final ScrollController? horizontalScrollController;
final Widget? emptyWidget;
final bool applyZebraStripes; // 짝수 행 배경색 적용 여부
const StandardDataTable({
Key? key,
required this.columns,
required this.rows,
this.showCheckbox = false,
this.isAllSelected,
this.onSelectAll,
this.enableHorizontalScroll = false,
this.horizontalScrollController,
this.emptyWidget,
this.applyZebraStripes = true,
}) : super(key: key);
@override
Widget build(BuildContext context) {
if (rows.isEmpty) {
return _buildEmptyState();
}
final table = Container(
width: double.infinity,
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
border: Border.all(color: Colors.black),
boxShadow: ShadcnTheme.cardShadow,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 테이블 헤더
_buildHeader(),
// 테이블 데이터 행들
...rows,
],
),
);
if (enableHorizontalScroll) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: horizontalScrollController,
child: table,
);
}
return table;
}
Widget _buildHeader() {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: 10,
),
decoration: BoxDecoration(
color: ShadcnTheme.muted.withValues(alpha: 0.3),
border: Border(
bottom: BorderSide(color: Colors.black),
),
),
child: Row(
children: [
// 체크박스 컬럼
if (showCheckbox)
SizedBox(
width: 40,
child: Checkbox(
value: isAllSelected,
onChanged: onSelectAll,
tristate: false,
),
),
// 데이터 컬럼들
...columns.map((column) {
Widget child = Text(
column.label,
style: ShadcnTheme.bodyMedium.copyWith(
fontWeight: FontWeight.bold,
),
textAlign: column.textAlign,
);
if (column.width != null) {
return SizedBox(
width: column.width,
child: child,
);
} else if (column.flex != null) {
return Expanded(
flex: column.flex!,
child: child,
);
} else {
return Expanded(child: child);
}
}),
],
),
);
}
Widget _buildEmptyState() {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(ShadcnTheme.spacing8),
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
border: Border.all(color: Colors.black),
boxShadow: ShadcnTheme.cardShadow,
),
child: emptyWidget ??
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.inbox_outlined,
size: 48,
color: ShadcnTheme.muted,
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
'데이터가 없습니다',
style: ShadcnTheme.bodyMuted,
),
],
),
),
);
}
}
/// 표준 데이터 행 위젯
class StandardDataRow extends StatelessWidget {
final int index;
final List<Widget> cells;
final bool showCheckbox;
final bool? isSelected;
final ValueChanged<bool?>? onSelect;
final bool applyZebraStripes;
final List<DataColumn> columns;
const StandardDataRow({
Key? key,
required this.index,
required this.cells,
this.showCheckbox = false,
this.isSelected,
this.onSelect,
this.applyZebraStripes = true,
required this.columns,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: 4,
),
decoration: BoxDecoration(
color: applyZebraStripes && index % 2 == 1
? ShadcnTheme.muted.withValues(alpha: 0.1)
: null,
border: Border(
bottom: BorderSide(color: Colors.black),
),
),
child: Row(
children: [
// 체크박스
if (showCheckbox)
SizedBox(
width: 40,
child: Checkbox(
value: isSelected,
onChanged: onSelect,
tristate: false,
),
),
// 데이터 셀들
...cells.asMap().entries.map((entry) {
final cellIndex = entry.key;
final cell = entry.value;
if (cellIndex >= columns.length) return const SizedBox.shrink();
final column = columns[cellIndex];
if (column.width != null) {
return SizedBox(
width: column.width,
child: cell,
);
} else if (column.flex != null) {
return Expanded(
flex: column.flex!,
child: cell,
);
} else {
return Expanded(child: cell);
}
}),
],
),
);
}
}
/// 표준 관리 버튼 세트
class StandardActionButtons extends StatelessWidget {
final VoidCallback? onView;
final VoidCallback? onEdit;
final VoidCallback? onDelete;
final List<Widget>? customButtons;
final double buttonSize;
const StandardActionButtons({
Key? key,
this.onView,
this.onEdit,
this.onDelete,
this.customButtons,
this.buttonSize = 32,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
if (onView != null)
_buildIconButton(
Icons.visibility_outlined,
onView!,
'보기',
ShadcnTheme.primary,
),
if (onEdit != null)
_buildIconButton(
Icons.edit_outlined,
onEdit!,
'수정',
ShadcnTheme.primary,
),
if (onDelete != null)
_buildIconButton(
Icons.delete_outline,
onDelete!,
'삭제',
ShadcnTheme.destructive,
),
if (customButtons != null) ...customButtons!,
],
);
}
Widget _buildIconButton(
IconData icon,
VoidCallback onPressed,
String tooltip,
Color color,
) {
return IconButton(
constraints: BoxConstraints(
minWidth: buttonSize,
minHeight: buttonSize,
maxWidth: buttonSize,
maxHeight: buttonSize,
),
padding: const EdgeInsets.all(4),
icon: Icon(icon, size: 16, color: color),
onPressed: onPressed,
tooltip: tooltip,
);
}
}

297
lib/screens/common/widgets/standard_states.dart Normal file
View File

@@ -0,0 +1,297 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
/// 표준 로딩 상태 위젯
class StandardLoadingState extends StatelessWidget {
final String message;
const StandardLoadingState({
Key? key,
this.message = '데이터를 불러오는 중...',
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(
color: ShadcnTheme.primary,
strokeWidth: 3,
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
message,
style: ShadcnTheme.bodyMuted,
),
],
),
);
}
}
/// 표준 에러 상태 위젯
class StandardErrorState extends StatelessWidget {
final String title;
final String? message;
final VoidCallback? onRetry;
final IconData icon;
const StandardErrorState({
Key? key,
this.title = '오류가 발생했습니다',
this.message,
this.onRetry,
this.icon = Icons.error_outline,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing6),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
size: 64,
color: ShadcnTheme.destructive.withValues(alpha: 0.8),
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
title,
style: ShadcnTheme.headingH4,
textAlign: TextAlign.center,
),
if (message != null) ...[
const SizedBox(height: ShadcnTheme.spacing2),
Text(
message!,
style: ShadcnTheme.bodyMuted,
textAlign: TextAlign.center,
),
],
if (onRetry != null) ...[
const SizedBox(height: ShadcnTheme.spacing6),
ShadcnButton(
text: '다시 시도',
onPressed: onRetry,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: const Icon(Icons.refresh, size: 16),
),
],
],
),
),
);
}
}
/// 표준 빈 상태 위젯
class StandardEmptyState extends StatelessWidget {
final String title;
final String? message;
final Widget? action;
final IconData icon;
const StandardEmptyState({
Key? key,
this.title = '데이터가 없습니다',
this.message,
this.action,
this.icon = Icons.inbox_outlined,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
size: 64,
color: ShadcnTheme.mutedForeground.withValues(alpha: 0.5),
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
title,
style: ShadcnTheme.headingH4.copyWith(
color: ShadcnTheme.mutedForeground,
),
textAlign: TextAlign.center,
),
if (message != null) ...[
const SizedBox(height: ShadcnTheme.spacing2),
Text(
message!,
style: ShadcnTheme.bodyMuted,
textAlign: TextAlign.center,
),
],
if (action != null) ...[
const SizedBox(height: ShadcnTheme.spacing6),
action!,
],
],
),
),
);
}
}
/// 표준 정보 메시지 위젯
class StandardInfoMessage extends StatelessWidget {
final String message;
final IconData icon;
final Color? color;
final VoidCallback? onClose;
const StandardInfoMessage({
Key? key,
required this.message,
this.icon = Icons.info_outline,
this.color,
this.onClose,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final displayColor = color ?? ShadcnTheme.primary;
return Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing3),
decoration: BoxDecoration(
color: displayColor.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(
color: displayColor.withValues(alpha: 0.3),
),
),
child: Row(
children: [
Icon(
icon,
size: 20,
color: displayColor,
),
const SizedBox(width: ShadcnTheme.spacing2),
Expanded(
child: Text(
message,
style: TextStyle(
color: displayColor,
fontSize: 14,
),
),
),
if (onClose != null)
IconButton(
icon: Icon(
Icons.close,
size: 16,
color: displayColor,
),
onPressed: onClose,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(
maxHeight: 24,
maxWidth: 24,
),
),
],
),
);
}
}
/// 표준 통계 카드 위젯
class StandardStatCard extends StatelessWidget {
final String title;
final String value;
final IconData icon;
final Color color;
final String? subtitle;
const StandardStatCard({
Key? key,
required this.title,
required this.value,
required this.icon,
required this.color,
this.subtitle,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing5),
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(color: Colors.black),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusSm),
),
child: Icon(
icon,
size: 20,
color: color,
),
),
const SizedBox(width: ShadcnTheme.spacing3),
Expanded(
child: Text(
title,
style: ShadcnTheme.bodySmall.copyWith(
color: ShadcnTheme.mutedForeground,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: ShadcnTheme.spacing3),
Text(
value,
style: ShadcnTheme.headingH3.copyWith(
color: color,
fontWeight: FontWeight.bold,
),
),
if (subtitle != null) ...[
const SizedBox(height: ShadcnTheme.spacing1),
Text(
subtitle!,
style: ShadcnTheme.bodySmall.copyWith(
color: ShadcnTheme.mutedForeground,
),
),
],
],
),
);
}
}

109
lib/screens/common/widgets/unified_search_bar.dart Normal file
View File

@@ -0,0 +1,109 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
/// 통일된 검색바 위젯
///
/// 모든 리스트 화면에서 동일한 스타일과 동작을 보장
class UnifiedSearchBar extends StatelessWidget {
final TextEditingController controller;
final String placeholder;
final VoidCallback onSearch;
final ValueChanged<String>? onChanged; // 실시간 검색을 위한 콜백
final VoidCallback? onClear;
final Widget? suffixButton; // 검색 버튼 외 추가 버튼
final List<Widget>? filters; // 필터 위젯들
final bool showSearchButton;
const UnifiedSearchBar({
Key? key,
required this.controller,
this.placeholder = '검색어를 입력하세요...',
required this.onSearch,
this.onChanged,
this.onClear,
this.suffixButton,
this.filters,
this.showSearchButton = true,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
children: [
// 검색 입력 필드
Expanded(
child: Container(
height: 40,
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(color: Colors.black),
),
child: TextField(
controller: controller,
onChanged: onChanged,
onSubmitted: (_) => onSearch(),
decoration: InputDecoration(
hintText: placeholder,
hintStyle: TextStyle(color: ShadcnTheme.muted),
prefixIcon: Icon(Icons.search, color: ShadcnTheme.muted, size: 20),
suffixIcon: controller.text.isNotEmpty && onClear != null
? IconButton(
icon: Icon(Icons.clear, color: ShadcnTheme.muted, size: 18),
onPressed: () {
controller.clear();
onClear!();
},
padding: EdgeInsets.zero,
constraints: const BoxConstraints(maxHeight: 40, maxWidth: 40),
)
: null,
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
),
),
),
),
// 검색 버튼
if (showSearchButton) ...[
const SizedBox(width: ShadcnTheme.spacing2),
SizedBox(
height: 40,
child: ShadcnButton(
text: '검색',
onPressed: onSearch,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: const Icon(Icons.search, size: 16),
),
),
],
// 추가 버튼 (예: 추가, 필터 등)
if (suffixButton != null) ...[
const SizedBox(width: ShadcnTheme.spacing2),
suffixButton!,
],
],
),
// 필터 섹션
if (filters != null && filters!.isNotEmpty) ...[
const SizedBox(height: ShadcnTheme.spacing3),
Row(
children: [
...filters!.map((filter) => Padding(
padding: const EdgeInsets.only(right: ShadcnTheme.spacing2),
child: filter,
)),
],
),
],
],
);
}
}