1.테마/컬러 수정

2. UI 텍스트 한국어 번역
3. SettingScreen(설정 페이지) -현재 페이지는 레이아웃만 완성되었으며, 토글 스위치 및 링크 연결 기능은 미완성 상태입니다.
This commit is contained in:
KIMGYEONGRAN
2025-12-01 17:55:38 +09:00
parent c1d8fc597d
commit acb297fec1
9 changed files with 1178 additions and 659 deletions

View File

@@ -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
),