1.테마/컬러 수정
2. UI 텍스트 한국어 번역 3. SettingScreen(설정 페이지) -현재 페이지는 레이아웃만 완성되었으며, 토글 스위치 및 링크 연결 기능은 미완성 상태입니다.
This commit is contained in:
@@ -32,16 +32,28 @@ class HistoryScreen extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _HistoryScreenState extends State<HistoryScreen> {
|
||||
static const Color kBackgroundColor = Color(0xFF27292B);
|
||||
static const Color kCardColor = Color(0xFF30343B);
|
||||
static const Color kAccentColor = Colors.white;
|
||||
static const Color kRedAccent = Color(0xFFFF5252);
|
||||
// 🟦 최종 확정 테마 컬러 정의 (대비 구조 교체)
|
||||
final Color _mainBlueColor = const Color(0xFF002FA7); // 진한 블루 (0xFF002FA7 -> 0xFF0A68FF로 통일)
|
||||
final Color _mainTextColor = const Color(0xFF1C1C1E); // 어두운 텍스트
|
||||
final Color _subTextColor = const Color(0xFF6A717B); // 보조 텍스트
|
||||
final Color _pageBackgroundColor = const Color(0xFFF5F7F9); // 🚩 Scaffold 배경 (연한 그레이)
|
||||
final Color _cardBackgroundColor = Colors.white; // 🚩 카드 배경 (순수 화이트)
|
||||
final Color _accentContainerColor = const Color(0xFFF0F2F5); // 🚩 내부 상세 박스 배경 (중간 그레이)
|
||||
final Color _borderColor = const Color(0xFF0A68FF).withOpacity(0.8);
|
||||
|
||||
// 🚩 그림자 스타일 정의
|
||||
static const BoxShadow _cleanShadow = BoxShadow(
|
||||
color: Color.fromRGBO(0, 0, 0, 0.07),
|
||||
blurRadius: 8,
|
||||
offset: Offset(0, 4),
|
||||
spreadRadius: 0,
|
||||
);
|
||||
|
||||
int _selectedFilterIndex = 0;
|
||||
|
||||
final List<UsageHistory> _allHistoryList = [
|
||||
UsageHistory(
|
||||
date: '2025.11.25 (Tue)',
|
||||
date: '2025.11.25 (화)', // 🇰🇷 요일 변경
|
||||
startTime: '18:30',
|
||||
endTime: '19:15',
|
||||
duration: 45,
|
||||
@@ -52,7 +64,7 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
isDried: true,
|
||||
),
|
||||
UsageHistory(
|
||||
date: '2025.11.23 (Sun)',
|
||||
date: '2025.11.23 (일)', // 🇰🇷 요일 변경
|
||||
startTime: '14:00',
|
||||
endTime: '15:30',
|
||||
duration: 90,
|
||||
@@ -63,7 +75,7 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
isDried: false,
|
||||
),
|
||||
UsageHistory(
|
||||
date: '2025.11.06 (Thu)',
|
||||
date: '2025.11.06 (목)', // 🇰🇷 요일 변경
|
||||
startTime: '09:00',
|
||||
endTime: '09:30',
|
||||
duration: 30,
|
||||
@@ -74,7 +86,7 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
isDried: true,
|
||||
),
|
||||
UsageHistory(
|
||||
date: '2025.09.20 (Sat)',
|
||||
date: '2025.09.20 (토)', // 🇰🇷 요일 변경
|
||||
startTime: '20:00',
|
||||
endTime: '21:00',
|
||||
duration: 60,
|
||||
@@ -120,16 +132,16 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
final currentList = _filteredList;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: kBackgroundColor,
|
||||
backgroundColor: _pageBackgroundColor,
|
||||
appBar: AppBar(
|
||||
title: const Text('HISTORY', style: TextStyle(fontWeight: FontWeight
|
||||
.bold, fontSize: 16, color: Colors.white)),
|
||||
backgroundColor: kBackgroundColor,
|
||||
title: Text('나의 기록', style: TextStyle(fontWeight: FontWeight
|
||||
.bold, fontSize: 18, letterSpacing: 0.5, color: _mainTextColor)),
|
||||
backgroundColor: _pageBackgroundColor,
|
||||
scrolledUnderElevation: 0,
|
||||
elevation: 0,
|
||||
centerTitle: false,
|
||||
actions: [
|
||||
IconButton(icon: const Icon(Icons.filter_list, color: Colors.white),
|
||||
IconButton(icon: Icon(Icons.filter_list, color: _mainTextColor),
|
||||
onPressed: () {}),
|
||||
],
|
||||
),
|
||||
@@ -138,8 +150,8 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
_buildFilterTabs(),
|
||||
Expanded(
|
||||
child: currentList.isEmpty
|
||||
? const Center(
|
||||
child: Text("기록이 없습니다.", style: TextStyle(color: Colors.grey)))
|
||||
? Center(
|
||||
child: Text("기록이 없습니다.", style: TextStyle(color: _subTextColor)))
|
||||
: ListView.builder(
|
||||
padding: const EdgeInsets.all(16),
|
||||
itemCount: currentList.length,
|
||||
@@ -183,15 +195,15 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
onSelected: (selected) {
|
||||
setState(() => _selectedFilterIndex = index);
|
||||
},
|
||||
backgroundColor: kCardColor,
|
||||
selectedColor: kAccentColor,
|
||||
checkmarkColor: Colors.black,
|
||||
backgroundColor: _cardBackgroundColor,
|
||||
selectedColor: _mainBlueColor,
|
||||
checkmarkColor: Colors.white,
|
||||
labelStyle: TextStyle(
|
||||
color: isSelected ? Colors.black : Colors.white,
|
||||
color: isSelected ? Colors.white : _mainTextColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20), side: BorderSide.none),
|
||||
borderRadius: BorderRadius.circular(8), side: BorderSide.none),
|
||||
);
|
||||
},
|
||||
),
|
||||
@@ -203,8 +215,8 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
padding: const EdgeInsets.symmetric(vertical: 16.0),
|
||||
child: Text(
|
||||
date,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
style: TextStyle(
|
||||
color: _mainTextColor,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold
|
||||
),
|
||||
@@ -216,12 +228,13 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: kCardColor,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
color: _cardBackgroundColor,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
boxShadow: [_cleanShadow]
|
||||
),
|
||||
child: InkWell(
|
||||
onTap: () => _showHistoryDetail(context, history),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
@@ -231,7 +244,7 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
children: [
|
||||
Text(
|
||||
'${history.startTime} - ${history.endTime}',
|
||||
style: const TextStyle(color: Colors.white,
|
||||
style: TextStyle(color: _mainTextColor,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold),
|
||||
),
|
||||
@@ -239,12 +252,12 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
color: _mainBlueColor,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
'${history.duration} min',
|
||||
style: const TextStyle(color: Colors.black,
|
||||
'${history.duration}분', // 🇰🇷 min -> 분
|
||||
style: const TextStyle(color: Colors.white,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600),
|
||||
),
|
||||
@@ -254,54 +267,53 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
_buildDot(Colors.grey),
|
||||
_buildDot(_subTextColor),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(child: Text(history.startStation,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 13),
|
||||
style: TextStyle(color: _mainTextColor, fontSize: 13),
|
||||
overflow: TextOverflow.ellipsis)),
|
||||
],
|
||||
),
|
||||
Container(
|
||||
margin: const EdgeInsets.only(left: 3),
|
||||
height: 10,
|
||||
decoration: const BoxDecoration(
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
left: BorderSide(color: Colors.grey, width: 1)),
|
||||
left: BorderSide(color: _subTextColor.withOpacity(0.5), width: 1)),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
_buildDot(kRedAccent),
|
||||
_buildDot(_mainBlueColor),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(child: Text(history.endStation,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 13),
|
||||
style: TextStyle(color: _mainTextColor, fontSize: 13),
|
||||
overflow: TextOverflow.ellipsis)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
const Divider(color: Colors.white, thickness: 0.5,),
|
||||
Divider(color: _subTextColor.withOpacity(0.5), thickness: 0.5,),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
if (history.isSanitized)
|
||||
_buildDot(kRedAccent),
|
||||
_buildDot(_mainBlueColor),
|
||||
if (history.isSanitized)
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
history.isSanitized ? "살균 완료" : "Pending",
|
||||
history.isSanitized ? "살균 완료" : "진행 중", // 🇰🇷 Pending -> 진행 중
|
||||
style: TextStyle(
|
||||
color: history.isSanitized ? Colors.white : Colors
|
||||
.white,
|
||||
color: history.isSanitized ? _mainTextColor : _subTextColor,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold),
|
||||
),
|
||||
],
|
||||
),
|
||||
const Text(
|
||||
"VIEW DETAILS >",
|
||||
style: TextStyle(color: Colors.white, fontSize: 11),
|
||||
Text(
|
||||
"상세 보기 >", // 🇰🇷 VIEW DETAILS > -> 상세 보기 >
|
||||
style: TextStyle(color: _subTextColor, fontSize: 11),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -330,16 +342,17 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
.of(context)
|
||||
.size
|
||||
.height * 0.75,
|
||||
decoration: const BoxDecoration(
|
||||
color: kBackgroundColor,
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
||||
decoration: BoxDecoration(
|
||||
color: _cardBackgroundColor,
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(12)),
|
||||
boxShadow: [_cleanShadow]
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 12),
|
||||
Container(width: 40,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(color: Colors.grey[600],
|
||||
decoration: BoxDecoration(color: _subTextColor,
|
||||
borderRadius: BorderRadius.circular(2))),
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
@@ -347,45 +360,45 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text("HISTORY DETAILS", style: TextStyle(
|
||||
color: Colors.white,
|
||||
Text("이용 상세 정보", style: TextStyle( // 🇰🇷 HISTORY DETAILS
|
||||
color: _mainTextColor,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
history.date,
|
||||
style: const TextStyle(color: Colors.white),
|
||||
style: TextStyle(color: _subTextColor),
|
||||
),
|
||||
const SizedBox(height: 30),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(color: kCardColor,
|
||||
borderRadius: BorderRadius.circular(16)),
|
||||
decoration: BoxDecoration(color: _accentContainerColor,
|
||||
borderRadius: BorderRadius.circular(8)),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text("이용 시간", style: TextStyle(
|
||||
color: Colors.white, fontSize: 12)),
|
||||
Text("이용 시간", style: TextStyle( // 🇰🇷 이용 시간
|
||||
color: _subTextColor, fontSize: 12)),
|
||||
const SizedBox(height: 4),
|
||||
Text("${history.duration} min",
|
||||
style: const TextStyle(color: Colors.white,
|
||||
Text("${history.duration}분", // 🇰🇷 min -> 분
|
||||
style: TextStyle(color: _mainTextColor,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold)),
|
||||
],
|
||||
),
|
||||
Container(
|
||||
width: 1, height: 40, color: Colors.white24),
|
||||
width: 1, height: 40, color: _subTextColor.withOpacity(0.5)),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text("이용 금액", style: TextStyle(
|
||||
color: Colors.white, fontSize: 12)),
|
||||
Text("이용 금액", style: TextStyle( // 🇰🇷 이용 금액
|
||||
color: _subTextColor, fontSize: 12)),
|
||||
const SizedBox(height: 4),
|
||||
Text("$cost ₩", style: const TextStyle(
|
||||
color: Colors.white,
|
||||
Text("₩ $cost", style: TextStyle( // 🇰🇷 ₩ 위치 수정
|
||||
color: _mainTextColor,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold)),
|
||||
],
|
||||
@@ -394,8 +407,8 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 30),
|
||||
const Text("TIMELINE", style: TextStyle(
|
||||
color: Colors.white,
|
||||
Text("시간별 기록", style: TextStyle( // 🇰🇷 TIMELINE
|
||||
color: _mainTextColor,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 1.0)),
|
||||
@@ -407,14 +420,14 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
history.endTime, "반납 완료", history.endStation,
|
||||
isCompleted: true),
|
||||
_buildTimelineItem(
|
||||
history.endTime, "살균 시작", "Auto-Cleaning System",
|
||||
history.endTime, "살균 시작", "자동 살균 시스템", // 🇰🇷 Auto-Cleaning System
|
||||
isCompleted: true),
|
||||
_buildTimelineItem(
|
||||
"15 min later", "살균 완료", "Ready for next user",
|
||||
"15분 후", "살균 완료", "다음 사용자 준비 완료", // 🇰🇷 15 min later, Ready for next user
|
||||
isLast: true, isCompleted: history.isSanitized),
|
||||
const SizedBox(height: 30),
|
||||
const Text("CONDITION", style: TextStyle(
|
||||
color: Colors.white,
|
||||
Text("살균/건조 상태", style: TextStyle( // 🇰🇷 CONDITION
|
||||
color: _mainTextColor,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 8),
|
||||
@@ -442,25 +455,28 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
|
||||
Widget _buildTimelineItem(String time, String title, String subtitle,
|
||||
{bool isFirst = false, bool isLast = false, bool isCompleted = false}) {
|
||||
// 🇰🇷 15 min later -> 15분 후 로직 처리
|
||||
String displayTime = time.contains("min later") ? "15분 후" : time;
|
||||
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 60,
|
||||
child: Text(
|
||||
time, style: const TextStyle(color: Colors.white, fontSize: 12)),
|
||||
displayTime, style: TextStyle(color: _mainTextColor, fontSize: 12)),
|
||||
),
|
||||
Column(
|
||||
children: [
|
||||
Icon(
|
||||
isCompleted ? Icons.check_circle : Icons.radio_button_unchecked,
|
||||
color: isCompleted ? kRedAccent : Colors.grey, size: 20),
|
||||
color: isCompleted ? _mainBlueColor : _subTextColor, size: 20),
|
||||
if (!isLast)
|
||||
Container(width: 2,
|
||||
height: 40,
|
||||
color: isCompleted
|
||||
? kRedAccent.withValues(alpha: 0.5)
|
||||
: Colors.grey[800]),
|
||||
? _mainBlueColor.withOpacity(0.5)
|
||||
: Colors.grey.shade300),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
@@ -469,12 +485,12 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(title, style: TextStyle(
|
||||
color: isCompleted ? Colors.white : Colors.grey,
|
||||
color: isCompleted ? _mainTextColor : _subTextColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14)),
|
||||
const SizedBox(height: 4),
|
||||
Text(subtitle,
|
||||
style: TextStyle(color: Colors.white, fontSize: 12)),
|
||||
style: TextStyle(color: _subTextColor, fontSize: 12)),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
),
|
||||
@@ -489,29 +505,30 @@ class _HistoryScreenState extends State<HistoryScreen> {
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: kCardColor,
|
||||
color: _accentContainerColor, // 내부 상세 박스 배경 (중간 그레이)
|
||||
boxShadow: isDone ? [_cleanShadow] : null,
|
||||
border: Border.all(
|
||||
color: isDone ? Colors.white : Colors.transparent, width: 1.0),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
color: isDone ? _mainBlueColor.withOpacity(0.9) : _subTextColor.withOpacity(0.3), width: 1.0),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(icon, color: Colors.white, size: 28),
|
||||
Icon(icon, color: _mainBlueColor, size: 28),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
style: TextStyle(
|
||||
color: _mainTextColor,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
isDone ? "Completed" : "In Progress",
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
isDone ? "완료됨" : "진행 중", // 🇰🇷 Completed/In Progress
|
||||
style: TextStyle(
|
||||
color: _subTextColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user