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

638
lib/screens/company/company_list_redesign.dart
View File

@@ -4,11 +4,17 @@ import 'dart:async';
import 'package:superport/models/company_model.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
import 'package:superport/screens/common/widgets/pagination.dart';
import 'package:superport/screens/common/widgets/unified_search_bar.dart';
import 'package:superport/screens/common/widgets/standard_data_table.dart' as std_table;
import 'package:superport/screens/common/widgets/standard_action_bar.dart';
import 'package:superport/screens/common/widgets/standard_states.dart';
import 'package:superport/screens/common/layouts/base_list_screen.dart';
import 'package:superport/services/mock_data_service.dart';
import 'package:superport/screens/company/widgets/company_branch_dialog.dart';
import 'package:superport/screens/company/controllers/company_list_controller.dart';
/// shadcn/ui 스타일로 재설계된 회사 관리 화면
/// shadcn/ui 스타일로 재설계된 회사 관리 화면 (통일된 UI 컴포넌트 사용)
class CompanyListRedesign extends StatefulWidget {
const CompanyListRedesign({super.key});
@@ -18,41 +24,33 @@ class CompanyListRedesign extends StatefulWidget {
class _CompanyListRedesignState extends State<CompanyListRedesign> {
late CompanyListController _controller;
final ScrollController _scrollController = ScrollController();
final TextEditingController _searchController = TextEditingController();
Timer? _debounceTimer;
int _currentPage = 1;
final int _pageSize = 10;
@override
void initState() {
super.initState();
_controller = CompanyListController(dataService: MockDataService());
_controller.initialize();
_setupScrollListener();
_controller.initializeWithPageSize(_pageSize);
}
@override
void dispose() {
_controller.dispose();
_scrollController.dispose();
_searchController.dispose();
_debounceTimer?.cancel();
super.dispose();
}
/// 스크롤 리스너 설정 (무한 스크롤)
void _setupScrollListener() {
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
_controller.loadMore();
}
});
}
/// 검색어 입력 처리 (디바운싱)
void _onSearchChanged(String value) {
_debounceTimer?.cancel();
_debounceTimer = Timer(const Duration(milliseconds: 500), () {
setState(() {
_currentPage = 1;
});
_controller.updateSearchKeyword(value);
});
}
@@ -82,13 +80,15 @@ class _CompanyListRedesignState extends State<CompanyListRedesign> {
onPressed: () async {
Navigator.pop(context);
final success = await _controller.deleteCompany(id);
if (!success && mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(_controller.error ?? '삭제에 실패했습니다'),
backgroundColor: Colors.red,
),
);
if (!success) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(_controller.error ?? '삭제에 실패했습니다'),
backgroundColor: Colors.red,
),
);
}
}
},
child: const Text('삭제'),
@@ -127,13 +127,38 @@ class _CompanyListRedesignState extends State<CompanyListRedesign> {
spacing: ShadcnTheme.spacing1,
children:
types.map((type) {
return ShadcnBadge(
text: companyTypeToString(type),
variant:
type == CompanyType.customer
? ShadcnBadgeVariant.primary
: ShadcnBadgeVariant.secondary,
size: ShadcnBadgeSize.small,
Color bgColor;
Color borderColor;
Color textColor;
switch(type) {
case CompanyType.customer:
bgColor = ShadcnTheme.green.withValues(alpha: 0.9);
textColor = Colors.white;
break;
case CompanyType.partner:
bgColor = ShadcnTheme.purple.withValues(alpha: 0.9);
textColor = Colors.white;
break;
default:
bgColor = ShadcnTheme.muted.withValues(alpha: 0.9);
textColor = ShadcnTheme.foreground;
}
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: bgColor,
borderRadius: BorderRadius.circular(4),
),
child: Text(
companyTypeToString(type),
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: textColor,
),
),
);
}).toList(),
);
@@ -141,11 +166,22 @@ class _CompanyListRedesignState extends State<CompanyListRedesign> {
/// 본사/지점 구분 배지 생성
Widget _buildCompanyTypeLabel(bool isBranch) {
return ShadcnBadge(
text: isBranch ? '지점' : '본사',
variant:
isBranch ? ShadcnBadgeVariant.outline : ShadcnBadgeVariant.primary,
size: ShadcnBadgeSize.small,
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: isBranch
? ShadcnTheme.blue.withValues(alpha: 0.9)
: ShadcnTheme.primary.withValues(alpha: 0.9),
borderRadius: BorderRadius.circular(4),
),
child: Text(
isBranch ? '지점' : '본사',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
);
}
@@ -184,7 +220,6 @@ class _CompanyListRedesignState extends State<CompanyListRedesign> {
'mainCompanyName': null,
});
if (company.branches != null) {
print('[CompanyListRedesign] Company ${company.name} has ${company.branches!.length} branches');
for (final branch in company.branches!) {
displayCompanies.add({
'branch': branch,
@@ -193,377 +228,214 @@ class _CompanyListRedesignState extends State<CompanyListRedesign> {
'mainCompanyName': company.name,
});
}
} else {
print('[CompanyListRedesign] Company ${company.name} has no branches');
}
}
final int totalCount = displayCompanies.length;
print('[CompanyListRedesign] Total display items: $totalCount (companies + branches)');
// 페이지네이션을 위한 데이터 처리
final int startIndex = (_currentPage - 1) * _pageSize;
final int endIndex = startIndex + _pageSize;
final List<Map<String, dynamic>> pagedCompanies = displayCompanies.sublist(
startIndex,
endIndex > displayCompanies.length ? displayCompanies.length : endIndex,
);
return SingleChildScrollView(
controller: _scrollController,
padding: const EdgeInsets.all(ShadcnTheme.spacing6),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 헤더 및 검색 바
Row(
children: [
Expanded(
child: Container(
height: 40,
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(color: ShadcnTheme.border),
),
child: TextField(
controller: _searchController,
onChanged: _onSearchChanged,
decoration: InputDecoration(
hintText: '회사명, 담당자명, 연락처로 검색',
hintStyle: TextStyle(color: ShadcnTheme.muted),
prefixIcon: Icon(Icons.search, color: ShadcnTheme.muted),
border: InputBorder.none,
contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
),
),
),
),
const SizedBox(width: ShadcnTheme.spacing4),
ShadcnButton(
text: '회사 추가',
onPressed: _navigateToAddScreen,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: Icon(Icons.add),
),
],
),
// 로딩 상태
if (controller.isLoading && controller.companies.isEmpty) {
return const StandardLoadingState(
message: '회사 데이터를 불러오는 중...',
);
}
const SizedBox(height: ShadcnTheme.spacing4),
return BaseListScreen(
isLoading: false,
error: controller.error,
onRefresh: controller.refresh,
emptyMessage: controller.searchKeyword.isNotEmpty
? '검색 결과가 없습니다'
: '등록된 회사가 없습니다',
emptyIcon: Icons.business_outlined,
// 검색바
searchBar: UnifiedSearchBar(
controller: _searchController,
placeholder: '회사명, 담당자명, 연락처로 검색',
onChanged: _onSearchChanged, // 실시간 검색 (디바운싱)
onSearch: () => _controller.updateSearchKeyword(_searchController.text), // 즉시 검색
onClear: () {
_searchController.clear();
_onSearchChanged('');
},
suffixButton: StandardActionButtons.addButton(
text: '회사 추가',
onPressed: _navigateToAddScreen,
),
),
// 액션바
actionBar: StandardActionBar(
leftActions: [],
totalCount: totalCount,
onRefresh: controller.refresh,
statusMessage: controller.searchKeyword.isNotEmpty
? '"${controller.searchKeyword}" 검색 결과'
: null,
),
// 결과 정보
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('총 $totalCount개 회사', style: ShadcnTheme.bodyMuted),
if (controller.searchKeyword.isNotEmpty)
Text(
'"${controller.searchKeyword}" 검색 결과',
style: ShadcnTheme.bodyMuted,
),
],
),
// 에러 메시지
filterSection: controller.error != null
? StandardInfoMessage(
message: controller.error!,
icon: Icons.error_outline,
color: ShadcnTheme.destructive,
onClose: controller.clearError,
)
: null,
const SizedBox(height: ShadcnTheme.spacing4),
// 데이터 테이블
dataTable: displayCompanies.isEmpty
? StandardEmptyState(
title: controller.searchKeyword.isNotEmpty
? '검색 결과가 없습니다'
: '등록된 회사가 없습니다',
icon: Icons.business_outlined,
action: controller.searchKeyword.isEmpty
? StandardActionButtons.addButton(
text: '첫 회사 추가하기',
onPressed: _navigateToAddScreen,
)
: null,
)
: std_table.StandardDataTable(
columns: [
std_table.DataColumn(label: '번호', flex: 1),
std_table.DataColumn(label: '회사명', flex: 3),
std_table.DataColumn(label: '구분', flex: 2),
std_table.DataColumn(label: '유형', flex: 2),
std_table.DataColumn(label: '연락처', flex: 2),
std_table.DataColumn(label: '관리', flex: 2),
],
rows: [
...pagedCompanies.asMap().entries.map((entry) {
final int index = startIndex + entry.key;
final companyData = entry.value;
final bool isBranch = companyData['isBranch'] as bool;
final Company company =
isBranch
? _convertBranchToCompany(companyData['branch'] as Branch)
: companyData['company'] as Company;
final String? mainCompanyName =
companyData['mainCompanyName'] as String?;
// 에러 메시지
if (controller.error != null)
Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing4),
margin: const EdgeInsets.only(bottom: ShadcnTheme.spacing4),
decoration: BoxDecoration(
color: Colors.red.shade50,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(color: Colors.red.shade200),
),
child: Row(
children: [
Icon(Icons.error_outline, color: Colors.red),
const SizedBox(width: ShadcnTheme.spacing2),
Expanded(
child: Text(
controller.error!,
style: TextStyle(color: Colors.red.shade700),
),
),
IconButton(
icon: Icon(Icons.close, size: 16),
onPressed: controller.clearError,
padding: EdgeInsets.zero,
constraints: BoxConstraints(maxHeight: 24, maxWidth: 24),
),
],
),
),
// 테이블 카드
Container(
width: double.infinity,
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
border: Border.all(color: ShadcnTheme.border),
boxShadow: ShadcnTheme.cardShadow,
),
child: controller.isLoading && controller.companies.isEmpty
? Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing8),
child: Center(
child: CircularProgressIndicator(),
),
)
: displayCompanies.isEmpty
? Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing8),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.business_outlined,
size: 48,
color: ShadcnTheme.muted,
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
controller.searchKeyword.isNotEmpty
? '검색 결과가 없습니다'
: '등록된 회사가 없습니다',
style: ShadcnTheme.bodyMuted,
),
],
),
),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 테이블 헤더
Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: ShadcnTheme.spacing3,
),
decoration: BoxDecoration(
color: ShadcnTheme.muted.withValues(alpha: 0.3),
border: Border(
bottom: BorderSide(color: ShadcnTheme.border),
return std_table.StandardDataRow(
index: index,
columns: [
std_table.DataColumn(label: '번호', flex: 1),
std_table.DataColumn(label: '회사명', flex: 3),
std_table.DataColumn(label: '구분', flex: 2),
std_table.DataColumn(label: '유형', flex: 2),
std_table.DataColumn(label: '연락처', flex: 2),
std_table.DataColumn(label: '관리', flex: 2),
],
cells: [
// 번호
Text(
'${index + 1}',
style: ShadcnTheme.bodySmall,
),
),
child: Row(
children: [
Expanded(
flex: 1,
child: Text(
'번호',
style: ShadcnTheme.bodyMedium,
),
),
Expanded(
flex: 3,
child: Text(
'회사명',
style: ShadcnTheme.bodyMedium,
),
),
Expanded(
flex: 2,
child: Text(
'구분',
style: ShadcnTheme.bodyMedium,
),
),
Expanded(
flex: 2,
child: Text(
'유형',
style: ShadcnTheme.bodyMedium,
),
),
Expanded(
flex: 2,
child: Text(
'연락처',
style: ShadcnTheme.bodyMedium,
),
),
Expanded(
flex: 2,
child: Text(
'관리',
style: ShadcnTheme.bodyMedium,
),
),
],
),
),
// 테이블 데이터
...displayCompanies.asMap().entries.map((entry) {
final int index = entry.key;
final companyData = entry.value;
final bool isBranch = companyData['isBranch'] as bool;
final Company company =
isBranch
? _convertBranchToCompany(companyData['branch'] as Branch)
: companyData['company'] as Company;
final String? mainCompanyName =
companyData['mainCompanyName'] as String?;
return Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: ShadcnTheme.spacing3,
// 회사명
_buildCompanyNameText(
company,
isBranch,
mainCompanyName: mainCompanyName,
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: ShadcnTheme.border),
),
// 구분
_buildCompanyTypeLabel(isBranch),
// 유형
_buildCompanyTypeChips(
company.companyTypes,
),
child: Row(
// 연락처
Text(
company.contactPhone ?? '-',
style: ShadcnTheme.bodySmall,
),
// 관리
Row(
mainAxisSize: MainAxisSize.min,
children: [
// 번호
Expanded(
flex: 1,
child: Text(
'${index + 1}',
style: ShadcnTheme.bodySmall,
if (!isBranch &&
company.branches != null &&
company.branches!.isNotEmpty) ...[
ShadcnButton(
text: '지점',
onPressed:
() => _showBranchDialog(company),
variant:
ShadcnButtonVariant.ghost,
size: ShadcnButtonSize.small,
),
),
// 회사명
Expanded(
flex: 3,
child: _buildCompanyNameText(
company,
isBranch,
mainCompanyName: mainCompanyName,
),
),
// 구분
Expanded(
flex: 2,
child: _buildCompanyTypeLabel(isBranch),
),
// 유형
Expanded(
flex: 2,
child: _buildCompanyTypeChips(
company.companyTypes,
),
),
// 연락처
Expanded(
flex: 2,
child: Text(
company.contactPhone ?? '-',
style: ShadcnTheme.bodySmall,
),
),
// 관리
Expanded(
flex: 2,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (!isBranch &&
company.branches != null &&
company.branches!.isNotEmpty)
ShadcnButton(
text: '지점보기',
onPressed:
() => _showBranchDialog(company),
variant:
ShadcnButtonVariant.secondary,
size: ShadcnButtonSize.small,
),
if (!isBranch &&
company.branches != null &&
company.branches!.isNotEmpty)
const SizedBox(
width: ShadcnTheme.spacing2,
),
ShadcnButton(
text: '수정',
onPressed: company.id != null
? () {
if (isBranch) {
Navigator.pushNamed(
context,
'/company/edit',
arguments: {
'companyId': companyData['companyId'],
'isBranch': true,
'mainCompanyName': mainCompanyName,
'branchId': company.id,
},
).then((result) {
if (result == true) controller.refresh();
});
} else {
Navigator.pushNamed(
context,
'/company/edit',
arguments: {
'companyId': company.id,
'isBranch': false,
},
).then((result) {
if (result == true) controller.refresh();
});
}
}
: null,
variant: ShadcnButtonVariant.secondary,
size: ShadcnButtonSize.small,
),
const SizedBox(
width: ShadcnTheme.spacing2,
),
ShadcnButton(
text: '삭제',
onPressed:
(!isBranch && company.id != null)
? () =>
_deleteCompany(company.id!)
: null,
variant:
ShadcnButtonVariant.destructive,
size: ShadcnButtonSize.small,
),
],
const SizedBox(
width: ShadcnTheme.spacing1,
),
],
std_table.StandardActionButtons(
onEdit: company.id != null
? () {
if (isBranch) {
Navigator.pushNamed(
context,
'/company/edit',
arguments: {
'companyId': companyData['companyId'],
'isBranch': true,
'mainCompanyName': mainCompanyName,
'branchId': company.id,
},
).then((result) {
if (result == true) controller.refresh();
});
} else {
Navigator.pushNamed(
context,
'/company/edit',
arguments: {
'companyId': company.id,
'isBranch': false,
},
).then((result) {
if (result == true) controller.refresh();
});
}
}
: null,
onDelete: (!isBranch && company.id != null)
? () => _deleteCompany(company.id!)
: null,
),
],
),
);
}),
],
),
),
// 무한 스크롤 로딩 인디케이터
if (controller.isLoading && controller.companies.isNotEmpty)
Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing4),
child: Center(
child: CircularProgressIndicator(),
),
],
);
}),
],
),
// 더 이상 로드할 데이터가 없을 때 메시지
if (!controller.hasMore && controller.companies.isNotEmpty)
Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing4),
child: Center(
child: Text(
'모든 회사를 불러왔습니다',
style: ShadcnTheme.bodyMuted,
),
),
),
],
// 페이지네이션 (항상 표시)
pagination: Pagination(
totalCount: totalCount,
currentPage: _currentPage,
pageSize: _pageSize,
onPageChanged: (page) {
setState(() {
_currentPage = page;
});
},
),
);
},
),
);
}
}
}

8
lib/screens/company/controllers/company_list_controller.dart
View File

@@ -21,7 +21,7 @@ class CompanyListController extends ChangeNotifier {
// 페이지네이션
int _currentPage = 1;
final int _perPage = 20;
int _perPage = 20;
bool _hasMore = true;
// 필터
@@ -40,6 +40,12 @@ class CompanyListController extends ChangeNotifier {
Future<void> initialize() async {
await loadData(isRefresh: true);
}
// 페이지 크기를 지정하여 초기화
Future<void> initializeWithPageSize(int pageSize) async {
_perPage = pageSize;
await loadData(isRefresh: true);
}
// 데이터 로드 및 필터 적용
Future<void> loadData({bool isRefresh = false}) async {