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

618
lib/screens/license/license_list_redesign.dart
View File

@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
import 'package:superport/models/license_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/license/controllers/license_list_controller.dart';
import 'package:superport/utils/constants.dart';
import 'package:superport/services/mock_data_service.dart';
@@ -22,7 +23,8 @@ class _LicenseListRedesignState extends State<LicenseListRedesign> {
final MockDataService _dataService = MockDataService();
final TextEditingController _searchController = TextEditingController();
final ScrollController _horizontalScrollController = ScrollController();
final ScrollController _verticalScrollController = ScrollController();
int _currentPage = 1;
final int _pageSize = 10;
// 날짜 포맷터
final DateFormat _dateFormat = DateFormat('yyyy-MM-dd');
@@ -52,36 +54,29 @@ class _LicenseListRedesignState extends State<LicenseListRedesign> {
WidgetsBinding.instance.addPostFrameCallback((_) {
_controller.loadData();
});
// 무한 스크롤 리스너 추가
_verticalScrollController.addListener(_onScroll);
}
@override
void dispose() {
// 리스너 제거
_verticalScrollController.removeListener(_onScroll);
_controller.removeListener(_handleControllerUpdate);
// 컨트롤러 dispose
_searchController.dispose();
_horizontalScrollController.dispose();
_verticalScrollController.dispose();
_controller.dispose();
super.dispose();
}
/// 스크롤 이벤트 처리 (무한 스크롤)
void _onScroll() {
if (!_verticalScrollController.hasClients) return;
if (_verticalScrollController.position.pixels >=
_verticalScrollController.position.maxScrollExtent * 0.8) {
// 스크롤이 80% 이상 내려갔을 때 다음 페이지 로드
if (!_controller.isLoading && _controller.hasMore) {
_controller.loadNextPage();
}
}
/// 페이지네이션용 라이선스 가져오기
List<License> _getPagedLicenses() {
final licenses = _controller.licenses;
final int startIndex = (_currentPage - 1) * _pageSize;
final int endIndex = startIndex + _pageSize;
return licenses.sublist(
startIndex,
endIndex > licenses.length ? licenses.length : endIndex,
);
}
/// 검색 실행
@@ -302,26 +297,32 @@ class _LicenseListRedesignState extends State<LicenseListRedesign> {
/// 통계 카드 위젯
Widget _buildStatCard(String title, String value, IconData icon, Color color) {
return Container(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(color: ShadcnTheme.border),
border: Border.all(color: Colors.black),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
child: Row(
children: [
Row(
children: [
Icon(icon, size: 20, color: color),
const SizedBox(width: 8),
Text(title, style: ShadcnTheme.bodySmall),
],
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, size: 16, color: color),
),
const SizedBox(height: 12),
const SizedBox(width: 12),
Text(title, style: ShadcnTheme.bodySmall),
const Spacer(),
Text(
value,
style: ShadcnTheme.headingH3.copyWith(color: color),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: color,
),
),
],
),
@@ -340,60 +341,84 @@ class _LicenseListRedesignState extends State<LicenseListRedesign> {
// 검색 입력
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<LicenseStatusFilter>(
value: _controller.statusFilter,
onChanged: (value) {
if (value != null) {
_controller.changeStatusFilter(value);
}
},
underline: const SizedBox.shrink(),
items: const [
DropdownMenuItem(
value: LicenseStatusFilter.all,
child: Text('전체'),
),
DropdownMenuItem(
value: LicenseStatusFilter.active,
child: Text('활성'),
),
DropdownMenuItem(
value: LicenseStatusFilter.inactive,
child: Text('비활성'),
),
DropdownMenuItem(
value: LicenseStatusFilter.expiringSoon,
child: Text('만료예정'),
),
DropdownMenuItem(
value: LicenseStatusFilter.expired,
child: Text('만료됨'),
),
],
child: DropdownButtonHideUnderline(
child: DropdownButton<LicenseStatusFilter>(
value: _controller.statusFilter,
onChanged: (value) {
if (value != null) {
_controller.changeStatusFilter(value);
}
},
style: TextStyle(fontSize: 14, color: ShadcnTheme.foreground),
icon: const Icon(Icons.arrow_drop_down, size: 20),
items: const [
DropdownMenuItem(
value: LicenseStatusFilter.all,
child: Text('전체'),
),
DropdownMenuItem(
value: LicenseStatusFilter.active,
child: Text('활성'),
),
DropdownMenuItem(
value: LicenseStatusFilter.inactive,
child: Text('비활성'),
),
DropdownMenuItem(
value: LicenseStatusFilter.expiringSoon,
child: Text('만료예정'),
),
DropdownMenuItem(
value: LicenseStatusFilter.expired,
child: Text('만료됨'),
),
],
),
),
),
],
@@ -544,122 +569,38 @@ class _LicenseListRedesignState extends State<LicenseListRedesign> {
);
}
final pagedLicenses = _getPagedLicenses();
return SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: _horizontalScrollController,
child: Container(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width - 48,
),
decoration: BoxDecoration(
border: Border.all(color: ShadcnTheme.border),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
),
child: Column(
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),
),
),
child: Row(
children: [
// 체크박스
SizedBox(
width: 40,
child: Checkbox(
value: _controller.isAllSelected,
onChanged: (value) => _controller.selectAll(value),
tristate: false,
),
),
// 번호
const SizedBox(
width: 60,
child: Text('번호', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 제품명
const SizedBox(
width: 200,
child: Text('제품명', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 라이선스 키
const SizedBox(
width: 150,
child: Text('라이선스 키', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 벤더
const SizedBox(
width: 120,
child: Text('벤더', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 회사명
const SizedBox(
width: 150,
child: Text('회사명', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 할당 사용자
const SizedBox(
width: 100,
child: Text('할당 사용자', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 상태
const SizedBox(
width: 80,
child: Text('상태', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 구매일
const SizedBox(
width: 100,
child: Text('구매일', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 만료일
const SizedBox(
width: 100,
child: Text('만료일', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 남은 일수
const SizedBox(
width: 80,
child: Text('남은 일수', style: TextStyle(fontWeight: FontWeight.bold)),
),
// 관리
const SizedBox(
width: 100,
child: Text('관리', style: TextStyle(fontWeight: FontWeight.bold)),
),
],
),
child: Column(
children: [
// 테이블 컨테이너 (가로 스크롤 지원)
SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: _horizontalScrollController,
child: Container(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width - 48, // padding 고려
),
// 테이블 데이터
SizedBox(
height: 400,
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
),
child: SizedBox(
width: 1360, // 모든 컬럼 너비의 합
child: ListView.builder(
controller: _verticalScrollController,
itemCount: licenses.length,
itemBuilder: (context, index) {
final license = licenses[index];
final daysRemaining = _controller.getDaysUntilExpiry(license);
return Container(
child: Column(
children: [
// 테이블 헤더
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(
@@ -668,168 +609,249 @@ class _LicenseListRedesignState extends State<LicenseListRedesign> {
SizedBox(
width: 40,
child: Checkbox(
value: license.id != null && _controller.selectedLicenseIds.contains(license.id),
onChanged: license.id != null
? (value) => _controller.selectLicense(license.id, value)
: null,
value: _controller.isAllSelected,
onChanged: (value) => _controller.selectAll(value),
tristate: false,
),
),
// 번호
SizedBox(
const SizedBox(
width: 60,
child: Text('${index + 1}', style: ShadcnTheme.bodySmall),
child: Text('번호', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 제품명
SizedBox(
const SizedBox(
width: 200,
child: Text(
license.productName ?? '-',
style: ShadcnTheme.bodyMedium,
overflow: TextOverflow.ellipsis,
),
child: Text('제품명', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 라이선스 키
SizedBox(
const SizedBox(
width: 150,
child: Text(
license.licenseKey,
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
child: Text('라이선스 키', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 벤더
SizedBox(
const SizedBox(
width: 120,
child: Text(
license.vendor ?? '-',
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
child: Text('벤더', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 회사명
SizedBox(
const SizedBox(
width: 150,
child: Text(
license.companyName ?? '-',
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
child: Text('회사명', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 할당 사용자
SizedBox(
const SizedBox(
width: 100,
child: Text(
license.assignedUserName ?? '-',
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
child: Text('할당 사용자', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 상태
SizedBox(
const SizedBox(
width: 80,
child: _buildStatusBadge(license, daysRemaining),
child: Text('상태', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 구매일
SizedBox(
const SizedBox(
width: 100,
child: Text(
license.purchaseDate != null
? _dateFormat.format(license.purchaseDate!)
: '-',
style: ShadcnTheme.bodySmall,
),
child: Text('구매일', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 만료일
SizedBox(
const SizedBox(
width: 100,
child: Text(
license.expiryDate != null
? _dateFormat.format(license.expiryDate!)
: '-',
style: ShadcnTheme.bodySmall,
),
child: Text('만료일', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 남은 일수
SizedBox(
const SizedBox(
width: 80,
child: Text(
_getDaysRemainingText(daysRemaining),
style: TextStyle(
fontSize: 12,
color: _getDaysRemainingColor(daysRemaining),
fontWeight: daysRemaining != null && daysRemaining <= 30
? FontWeight.bold
: FontWeight.normal,
),
),
child: Text('남은 일수', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
// 관리
SizedBox(
const SizedBox(
width: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
constraints: const BoxConstraints(
minWidth: 32,
minHeight: 32,
),
padding: EdgeInsets.zero,
icon: Icon(
Icons.edit,
size: 16,
color: ShadcnTheme.primary,
),
onPressed: license.id != null
? () => _navigateToEdit(license.id!)
: null,
tooltip: '수정',
),
IconButton(
constraints: const BoxConstraints(
minWidth: 32,
minHeight: 32,
),
padding: EdgeInsets.zero,
icon: Icon(
Icons.delete,
size: 16,
color: ShadcnTheme.destructive,
),
onPressed: license.id != null
? () => _showDeleteDialog(license.id!)
: null,
tooltip: '삭제',
),
],
),
child: Text('관리', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
],
),
);
},
),
// 테이블 데이터
...pagedLicenses.asMap().entries.map((entry) {
final displayIndex = entry.key;
final license = entry.value;
final index = (_currentPage - 1) * _pageSize + displayIndex;
final daysRemaining = _controller.getDaysUntilExpiry(license);
return Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: 4,
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.black),
),
),
child: Row(
children: [
// 체크박스
SizedBox(
width: 40,
child: Checkbox(
value: license.id != null && _controller.selectedLicenseIds.contains(license.id),
onChanged: license.id != null
? (value) => _controller.selectLicense(license.id, value)
: null,
tristate: false,
),
),
// 번호
SizedBox(
width: 60,
child: Text('${index + 1}', style: ShadcnTheme.bodySmall),
),
// 제품명
SizedBox(
width: 200,
child: Text(
license.productName ?? '-',
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
),
// 라이선스 키
SizedBox(
width: 150,
child: Text(
license.licenseKey,
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
),
// 벤더
SizedBox(
width: 120,
child: Text(
license.vendor ?? '-',
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
),
// 회사명
SizedBox(
width: 150,
child: Text(
license.companyName ?? '-',
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
),
// 할당 사용자
SizedBox(
width: 100,
child: Text(
license.assignedUserName ?? '-',
style: ShadcnTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
),
// 상태
SizedBox(
width: 80,
child: _buildStatusBadge(license, daysRemaining),
),
// 구매일
SizedBox(
width: 100,
child: Text(
license.purchaseDate != null
? _dateFormat.format(license.purchaseDate!)
: '-',
style: ShadcnTheme.bodySmall,
),
),
// 만료일
SizedBox(
width: 100,
child: Text(
license.expiryDate != null
? _dateFormat.format(license.expiryDate!)
: '-',
style: ShadcnTheme.bodySmall,
),
),
// 남은 일수
SizedBox(
width: 80,
child: Text(
_getDaysRemainingText(daysRemaining),
style: TextStyle(
fontSize: 12,
color: _getDaysRemainingColor(daysRemaining),
fontWeight: daysRemaining != null && daysRemaining <= 30
? FontWeight.bold
: FontWeight.normal,
),
),
),
// 관리
SizedBox(
width: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: IconButton(
constraints: const BoxConstraints(
minWidth: 30,
minHeight: 30,
),
padding: const EdgeInsets.all(4),
icon: const Icon(Icons.edit_outlined, size: 16),
onPressed: license.id != null
? () => _navigateToEdit(license.id!)
: null,
tooltip: '수정',
),
),
Flexible(
child: IconButton(
constraints: const BoxConstraints(
minWidth: 30,
minHeight: 30,
),
padding: const EdgeInsets.all(4),
icon: const Icon(Icons.delete_outline, size: 16),
onPressed: license.id != null
? () => _showDeleteDialog(license.id!)
: null,
tooltip: '삭제',
),
),
],
),
),
],
),
);
}).toList(),
],
),
),
// 더 보기 버튼
if (_controller.hasMore)
Container(
padding: const EdgeInsets.all(16),
child: Center(
child: _controller.isLoading
? const CircularProgressIndicator()
: ShadcnButton(
text: '더 보기',
onPressed: () => _controller.loadNextPage(),
variant: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.expand_more, size: 16),
),
),
),
],
),
),
),
// 페이지네이션 컴포넌트 (항상 표시)
if (licenses.length > _pageSize)
Pagination(
totalCount: licenses.length,
currentPage: _currentPage,
pageSize: _pageSize,
onPageChanged: (page) {
setState(() {
_currentPage = page;
});
},
),
],
),
);
}