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

297
lib/screens/equipment/equipment_list_redesign.dart
View File

@@ -2,6 +2,11 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.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_action_bar.dart';
import 'package:superport/screens/common/widgets/standard_data_table.dart' as std_table;
import 'package:superport/screens/common/widgets/standard_states.dart';
import 'package:superport/screens/equipment/controllers/equipment_list_controller.dart';
import 'package:superport/services/mock_data_service.dart';
import 'package:superport/models/equipment_unified_model.dart';
@@ -24,7 +29,6 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
bool _showDetailedColumns = true;
final TextEditingController _searchController = TextEditingController();
final ScrollController _horizontalScrollController = ScrollController();
final ScrollController _verticalScrollController = ScrollController();
String _selectedStatus = 'all';
// String _searchKeyword = ''; // Removed - unused field
String _appliedSearchKeyword = '';
@@ -37,9 +41,6 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
_controller = EquipmentListController(dataService: MockDataService());
_setInitialFilter();
// 무한 스크롤 리스너 추가
_verticalScrollController.addListener(_onScroll);
// API 호출을 위해 Future로 변경
WidgetsBinding.instance.addPostFrameCallback((_) {
_controller.loadData(); // 비동기 호출
@@ -50,7 +51,6 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
void dispose() {
_searchController.dispose();
_horizontalScrollController.dispose();
_verticalScrollController.dispose();
_controller.dispose();
super.dispose();
}
@@ -149,16 +149,6 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
_controller.selectedEquipmentIds.contains('${e.id}:${e.status}'));
}
/// 스크롤 이벤트 처리 (무한 스크롤)
void _onScroll() {
if (_verticalScrollController.position.pixels >=
_verticalScrollController.position.maxScrollExtent * 0.8) {
// 스크롤이 80% 이상 내려갔을 때 다음 페이지 로드
if (!_controller.isLoading && _controller.hasMore) {
_controller.loadData();
}
}
}
/// 필터링된 장비 목록 반환
List<UnifiedEquipment> _getFilteredEquipments() {
@@ -433,42 +423,66 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
// 검색 입력
Expanded(
flex: 2,
child: ShadcnInput(
controller: _searchController,
placeholder: '장비명, 제조사, 카테고리, 시리얼번호 등...',
prefixIcon: const Icon(Icons.search),
child: Container(
height: 40,
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(color: Colors.black),
),
child: TextField(
controller: _searchController,
onSubmitted: (_) => _onSearch(),
decoration: InputDecoration(
hintText: '장비명, 제조사, 카테고리, 시리얼번호 등...',
hintStyle: TextStyle(color: ShadcnTheme.mutedForeground.withValues(alpha: 0.8), fontSize: 14),
prefixIcon: Icon(Icons.search, color: ShadcnTheme.muted, size: 20),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
),
style: ShadcnTheme.bodyMedium,
),
),
),
const SizedBox(width: 16),
// 검색 버튼
ShadcnButton(
text: '검색',
onPressed: _onSearch,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: const Icon(Icons.search, size: 16),
SizedBox(
height: 40,
child: ShadcnButton(
text: '검색',
onPressed: _onSearch,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: const Icon(Icons.search, size: 16),
),
),
const SizedBox(width: 16),
// 상태 필터 드롭다운
Container(
height: 40,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
border: Border.all(color: ShadcnTheme.border),
color: ShadcnTheme.card,
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
),
child: DropdownButton<String>(
value: _selectedStatus,
onChanged: (value) => _onStatusFilterChanged(value!),
underline: const SizedBox.shrink(),
items: const [
DropdownMenuItem(value: 'all', child: Text('전체')),
DropdownMenuItem(value: 'in', child: Text('입고')),
DropdownMenuItem(value: 'out', child: Text('출고')),
DropdownMenuItem(value: 'rent', child: Text('대여')),
],
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: _selectedStatus,
onChanged: (value) => _onStatusFilterChanged(value!),
style: TextStyle(fontSize: 14, color: ShadcnTheme.foreground),
icon: const Icon(Icons.arrow_drop_down, size: 20),
items: const [
DropdownMenuItem(value: 'all', child: Text('전체')),
DropdownMenuItem(value: 'in', child: Text('입고')),
DropdownMenuItem(value: 'out', child: Text('출고')),
DropdownMenuItem(value: 'rent', child: Text('대여')),
],
),
),
),
],
@@ -708,26 +722,26 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
double _calculateTableWidth(List<UnifiedEquipment> pagedEquipments) {
double totalWidth = 0;
// 기본 컬럼들
// 기본 컬럼들 (너비 최적화)
totalWidth += 40; // 체크박스
totalWidth += 60; // 번호
totalWidth += 150; // 제조사
totalWidth += 150; // 장비명
totalWidth += 150; // 카테고리
totalWidth += 60; // 수량
totalWidth += 80; // 상태
totalWidth += 100; // 날짜
totalWidth += 100; // 관리
totalWidth += 50; // 번호
totalWidth += 120; // 제조사
totalWidth += 120; // 장비명
totalWidth += 100; // 카테고리
totalWidth += 50; // 수량
totalWidth += 70; // 상태
totalWidth += 80; // 날짜
totalWidth += 90; // 관리
// 상세 컬럼들 (조건부)
if (_showDetailedColumns) {
totalWidth += 150; // 시리얼번호
totalWidth += 150; // 바코드
totalWidth += 120; // 시리얼번호
totalWidth += 120; // 바코드
// 출고 정보 (조건부)
if (pagedEquipments.any((e) => e.status == EquipmentStatus.out || e.status == EquipmentStatus.rent)) {
totalWidth += 150; // 회사
totalWidth += 100; // 담당자
totalWidth += 120; // 회사
totalWidth += 80; // 담당자
}
}
@@ -761,7 +775,7 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
minWidth: MediaQuery.of(context).size.width - 48, // padding 고려
),
decoration: BoxDecoration(
border: Border.all(color: ShadcnTheme.border),
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
),
child:
@@ -791,12 +805,12 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: ShadcnTheme.spacing3,
vertical: 10,
),
decoration: BoxDecoration(
color: ShadcnTheme.muted.withValues(alpha: 0.3),
border: Border(
bottom: BorderSide(color: ShadcnTheme.border),
bottom: BorderSide(color: Colors.black),
),
),
child: Row(
@@ -811,65 +825,65 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
),
// 번호
SizedBox(
width: 60,
child: Text('번호', style: ShadcnTheme.bodyMedium),
width: 50,
child: Text('번호', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 제조사
Expanded(
flex: 2,
child: Text('제조사', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 120,
child: Text('제조사', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 장비명
Expanded(
flex: 2,
child: Text('장비명', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 120,
child: Text('장비명', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 카테고리
Expanded(
flex: 2,
child: Text('카테고리', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 100,
child: Text('카테고리', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 상세 정보 (조건부)
if (_showDetailedColumns) ...[
Expanded(
flex: 2,
child: Text('시리얼번호', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 120,
child: Text('시리얼번호', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
Expanded(
flex: 2,
child: Text('바코드', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 120,
child: Text('바코드', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
],
// 수량
SizedBox(
width: 60,
child: Text('수량', style: ShadcnTheme.bodyMedium),
width: 50,
child: Text('수량', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 상태
Expanded(
flex: 1,
child: Text('상태', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 70,
child: Text('상태', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 날짜
Expanded(
flex: 1,
child: Text('날짜', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 80,
child: Text('날짜', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 출고 정보 (조건부 - 테이블에 출고/대여 항목이 있을 때만)
if (_showDetailedColumns && pagedEquipments.any((e) => e.status == EquipmentStatus.out || e.status == EquipmentStatus.rent)) ...[
Expanded(
flex: 2,
child: Text('회사', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 120,
child: Text('회사', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
Expanded(
flex: 1,
child: Text('담당자', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 80,
child: Text('담당자', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
],
// 관리
Expanded(
flex: 1,
child: Text('관리', style: ShadcnTheme.bodyMedium),
SizedBox(
width: 90,
child: Text('관리', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
],
),
@@ -883,11 +897,11 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: ShadcnTheme.spacing3,
vertical: 4,
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: ShadcnTheme.border),
bottom: BorderSide(color: Colors.black),
),
),
child: Row(
@@ -902,15 +916,15 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
),
// 번호
SizedBox(
width: 60,
width: 50,
child: Text(
'${startIndex + index + 1}',
style: ShadcnTheme.bodySmall,
),
),
// 제조사
Expanded(
flex: 2,
SizedBox(
width: 120,
child: Text(
equipment.equipment.manufacturer,
style: ShadcnTheme.bodySmall,
@@ -918,8 +932,8 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
),
),
// 장비명
Expanded(
flex: 2,
SizedBox(
width: 120,
child: Text(
equipment.equipment.name,
style: ShadcnTheme.bodySmall,
@@ -927,22 +941,22 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
),
),
// 카테고리
Expanded(
flex: 2,
SizedBox(
width: 100,
child: _buildCategoryWithTooltip(equipment),
),
// 상세 정보 (조건부)
if (_showDetailedColumns) ...[
Expanded(
flex: 2,
SizedBox(
width: 120,
child: Text(
equipment.equipment.serialNumber ?? '-',
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
),
Expanded(
flex: 2,
SizedBox(
width: 120,
child: Text(
equipment.equipment.barcode ?? '-',
style: ShadcnTheme.bodySmall,
@@ -952,15 +966,15 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
],
// 수량
SizedBox(
width: 60,
width: 50,
child: Text(
'${equipment.equipment.quantity}',
style: ShadcnTheme.bodySmall,
),
),
// 상태
Expanded(
flex: 1,
SizedBox(
width: 70,
child: ShadcnBadge(
text: _getStatusDisplayText(
equipment.status,
@@ -972,8 +986,8 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
),
),
// 날짜
Expanded(
flex: 1,
SizedBox(
width: 80,
child: Text(
equipment.date.toString().substring(0, 10),
style: ShadcnTheme.bodySmall,
@@ -981,8 +995,8 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
),
// 출고 정보 (조건부)
if (_showDetailedColumns && pagedEquipments.any((e) => e.status == EquipmentStatus.out || e.status == EquipmentStatus.rent)) ...[
Expanded(
flex: 2,
SizedBox(
width: 120,
child: Text(
equipment.status == EquipmentStatus.out || equipment.status == EquipmentStatus.rent
? _controller.getOutEquipmentInfo(equipment.id!, 'company')
@@ -991,8 +1005,8 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
overflow: TextOverflow.ellipsis,
),
),
Expanded(
flex: 1,
SizedBox(
width: 80,
child: Text(
equipment.status == EquipmentStatus.out || equipment.status == EquipmentStatus.rent
? _controller.getOutEquipmentInfo(equipment.id!, 'manager')
@@ -1003,8 +1017,8 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
),
],
// 관리 버튼
Expanded(
flex: 1,
SizedBox(
width: 90,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
@@ -1057,48 +1071,17 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
),
),
// 페이지네이션
// 페이지네이션 컴포넌트
if (totalCount > _pageSize)
Container(
padding: const EdgeInsets.symmetric(
vertical: ShadcnTheme.spacing4,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 이전 페이지 버튼
ShadcnButton(
text: '이전',
onPressed:
_currentPage > 1
? () => setState(() => _currentPage--)
: null,
variant: ShadcnButtonVariant.secondary,
size: ShadcnButtonSize.small,
),
const SizedBox(width: ShadcnTheme.spacing4),
// 페이지 정보
Text(
'$_currentPage / ${((totalCount - 1) ~/ _pageSize) + 1}',
style: ShadcnTheme.bodyMedium,
),
const SizedBox(width: ShadcnTheme.spacing4),
// 다음 페이지 버튼
ShadcnButton(
text: '다음',
onPressed:
_currentPage < ((totalCount - 1) ~/ _pageSize) + 1
? () => setState(() => _currentPage++)
: null,
variant: ShadcnButtonVariant.secondary,
size: ShadcnButtonSize.small,
),
],
),
Pagination(
totalCount: totalCount,
currentPage: _currentPage,
pageSize: _pageSize,
onPageChanged: (page) {
setState(() {
_currentPage = page;
});
},
),
],
),
@@ -1108,11 +1091,11 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
/// 상태 표시 텍스트 반환
String _getStatusDisplayText(String status) {
switch (status) {
case EquipmentStatus.in_:
case 'I': // EquipmentStatus.in_
return '입고';
case EquipmentStatus.out:
case 'O': // EquipmentStatus.out
return '출고';
case EquipmentStatus.rent:
case 'T': // EquipmentStatus.rent
return '대여';
default:
return '알수없음';
@@ -1122,11 +1105,11 @@ class _EquipmentListRedesignState extends State<EquipmentListRedesign> {
/// 상태에 따른 배지 변형 반환
ShadcnBadgeVariant _getStatusBadgeVariant(String status) {
switch (status) {
case EquipmentStatus.in_:
case 'I': // EquipmentStatus.in_
return ShadcnBadgeVariant.success;
case EquipmentStatus.out:
case 'O': // EquipmentStatus.out
return ShadcnBadgeVariant.destructive;
case EquipmentStatus.rent:
case 'T': // EquipmentStatus.rent
return ShadcnBadgeVariant.warning;
default:
return ShadcnBadgeVariant.secondary;