Files
school-attendance/lib/ui/main_dashboard.dart
T
sihooandClaude Sonnet 5 7495ece0c8 대시보드 배너/타이틀 중앙정렬 + 타일 UI 편집(드래그 이동/크기조절) + 로그인 유지 기능 추가
- 이름/부제, "스마트 관리 시스템 메뉴" 제목을 중앙 정렬
- 타일을 1x1~4x4 크기로 자유 배치할 수 있는 편집 모드 추가 (6x4 캔버스, 삼성 One UI 위젯 편집 방식)
- 타일 배치는 계정별로 서버에 저장/복원 (dashboard_layout_controller.dart)
- 설정 화면(톱니바퀴 아이콘) > "UI 편집" 진입점 추가
- shared_preferences로 로그인 유지 기능 추가 (비밀번호는 저장하지 않음)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-07 22:18:16 +09:00

788 lines
28 KiB
Dart

// 🏠 통합 대시보드 (UI 전용). 학생/교사/관리자가 전부 이 화면 하나를 공유하고,
// 권한(role)에 따라 배너 색상/문구와 보이는 타일만 달라진다.
// 타일 배치(위치/크기)는 사용자가 직접 편집할 수 있고, 계정별로 서버에 저장된다
// (lib/function/dashboard_layout_controller.dart). 캔버스는 가로 6칸×세로 4칸,
// 타일 크기는 1x1~4x4.
import 'package:flutter/material.dart';
import '../function/dashboard_layout_controller.dart';
import '../function/session_store.dart';
import '../function/student_dashboard_controller.dart';
import '../models/dashboard_tile_layout.dart';
import '../theme/app_palette.dart';
import 'admin_dashboard.dart';
import 'dashboard_settings_page.dart';
import 'device_checkout_ledger_page.dart';
import 'device_checkout_request_screen.dart';
import 'login_screen.dart';
import 'nfc_poccket_checkin_screen.dart';
import 'nfc_tag_writer_screen.dart';
import 'teacher_attendance_page.dart';
import 'teacher_student_management_page.dart';
class MainDashboard extends StatefulWidget {
final String? userId;
final String? userName;
final String role; // 'student' | 'teacher' | 'admin'
final bool isDeviceMatched;
const MainDashboard({
super.key,
this.userId,
this.userName,
required this.role,
this.isDeviceMatched = true,
});
@override
State<MainDashboard> createState() => _MainDashboardState();
}
class _MainDashboardState extends State<MainDashboard> {
final StudentDashboardController _controller = StudentDashboardController();
late final DashboardLayoutController _layout;
// 🎯 타일 이동/크기조절 드래그 중 기준값(드래그 시작 시점의 좌표)을 담아둔다.
Offset? _dragStartGlobal;
TileRect? _dragStartRect;
// 🔑 [권한 판정] 2061은 role이 'student'로 저장돼 있지만 실질적으로 최고 권한을 가진다.
bool get _isDeveloper => widget.userId == '2061';
bool get _isAdmin => widget.role == 'admin' || _isDeveloper;
bool get _isTeacherOrAbove => widget.role == 'teacher' || _isAdmin;
bool get _isStudent => widget.role == 'student';
String get _displayId =>
widget.userId ?? (widget.role == 'admin' ? '관리자' : '간편인증');
String get _displayName =>
widget.userName ?? (widget.role == 'admin' ? '시스템 관리자' : '간편인증 선생');
@override
void initState() {
super.initState();
_layout = DashboardLayoutController(_displayId);
_layout.load(_tileSpecs().map((t) => t.id).toList());
}
@override
void dispose() {
_controller.dispose();
_layout.dispose();
super.dispose();
}
void _openPocketCheckIn(BuildContext context) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NfcPocketCheckInScreen(
studentId: _displayId,
studentName: _displayName,
),
),
);
}
Future<void> _deleteUser(String userId) async {
final (_, message) = await _controller.deleteUser(userId);
if (!mounted) return;
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text(message)));
}
void _showDeleteUserDialog(BuildContext context) {
final TextEditingController idController = TextEditingController();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
title: const Row(
children: [
Icon(Icons.warning_amber_rounded, color: Colors.redAccent),
SizedBox(width: 10),
Text(
'계정 강제 삭제',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
],
),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'학생의 학번 또는 교사의 교직원 번호를 입력하세요.\nDB에서 해당 계정과 토큰이 즉시 삭제됩니다.',
style: TextStyle(
color: Colors.black54,
fontSize: 13,
height: 1.4,
),
),
const SizedBox(height: 16),
TextField(
controller: idController,
decoration: InputDecoration(
labelText: '학번 또는 교직원 번호',
hintText: '예: 201101 또는 T1001',
labelStyle: TextStyle(color: Colors.red[400]),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(color: Colors.red[400]!, width: 2),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
),
prefixIcon: const Icon(Icons.person_remove_alt_1_rounded),
),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text(
'취소',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
),
ElevatedButton(
onPressed: () {
final inputId = idController.text.trim();
if (inputId.isNotEmpty) {
Navigator.pop(context);
_deleteUser(inputId);
}
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.redAccent,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
elevation: 0,
),
child: const Text(
'삭제 실행',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
],
);
},
);
}
Future<void> _logout(BuildContext context) async {
await SessionStore.clear();
if (!context.mounted) return;
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const LoginScreen()),
);
}
Future<void> _openSettings(BuildContext context) async {
final result = await Navigator.push<String>(
context,
MaterialPageRoute(builder: (context) => const DashboardSettingsPage()),
);
if (result == 'edit_ui') {
_layout.enterEditMode();
}
}
// 🎨 [역할별 테마] 배너 색상은 팔레트로 통일하고, 제목/문구/아이콘만 역할에 따라 다르게.
({String title, String subtitle, Color color, IconData icon}) _theme() {
if (_isDeveloper) {
return (
title: 'MASTER CONTROL',
subtitle: '최고 관리 권한 활성화됨',
color: AppPalette.ink,
icon: Icons.admin_panel_settings_rounded,
);
} else if (widget.role == 'admin') {
return (
title: 'ADMIN CONTROL',
subtitle: '시스템 관리자 권한 활성화됨',
color: AppPalette.ink,
icon: Icons.admin_panel_settings_rounded,
);
} else if (widget.role == 'teacher') {
return (
title: 'TEACHER PORTAL',
subtitle: '교직원 번호: $_displayId | 교사 권한 활성화됨',
color: AppPalette.ink,
icon: Icons.admin_panel_settings_rounded,
);
}
return (
title: 'STUDENT PORTAL',
subtitle: '학번: $_displayId | 인증 완료',
color: AppPalette.ink,
icon: Icons.school_rounded,
);
}
// 🧩 역할에 따라 보이는 타일 목록. id는 서버 레이아웃 저장의 키로 쓰이므로 절대 바뀌면 안 된다.
List<({String id, Widget child})> _tileSpecs() {
final List<({String id, Widget child})> tiles = [];
if (_isStudent) {
tiles.add((
id: 'nfc_tag',
child: _buildModernCard(
icon: widget.isDeviceMatched
? Icons.contactless_rounded
: Icons.lock_rounded,
title: 'NFC 태그',
subtitle: widget.isDeviceMatched ? '출석 및 폰 수거 완료' : '본인 인증 기기 전용',
color: widget.isDeviceMatched ? AppPalette.ink : AppPalette.sage,
onTap: widget.isDeviceMatched
? () => _openPocketCheckIn(context)
: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('대리 출석 방지를 위해 등록된 본인 스마트폰에서만 출석 가능합니다.'),
),
);
},
isActionButton: widget.isDeviceMatched,
isLoading: _controller.isLoading,
),
));
tiles.add((
id: 'school_status',
child: _buildModernCard(
icon: Icons.fastfood_rounded,
title: '실시간 학교 상황',
subtitle: '급식실 줄 & 매점 재고 확인',
color: AppPalette.ink,
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('실시간 학교 상황 페이지로 이동합니다.')),
);
},
),
));
tiles.add((
id: 'device_checkout_request',
child: _buildModernCard(
icon: Icons.tablet_mac_rounded,
title: '스마트기기 반출',
subtitle: '패드 사용 신청 (시간/목적)',
color: AppPalette.ink,
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DeviceCheckoutRequestScreen(
studentId: _displayId,
studentName: _displayName,
),
),
),
),
));
}
if (_isTeacherOrAbove) {
tiles.add((
id: 'attendance_check',
child: _buildModernCard(
icon: Icons.assignment_turned_in_rounded,
title: '실시간 출석 확인',
subtitle: '학생 제출 로그 모니터링',
color: AppPalette.ink,
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const TeacherAttendancePage(),
),
),
),
));
tiles.add((
id: 'student_management',
child: _buildModernCard(
icon: Icons.manage_accounts_rounded,
title: '학생 계정 관리',
subtitle: '계정 추가 및 강제 리셋',
color: AppPalette.ink,
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const TeacherStudentManagementPage(),
),
),
),
));
tiles.add((
id: 'device_checkout_ledger',
child: _buildModernCard(
icon: Icons.tablet_mac_rounded,
title: '스마트기기 반출 대장',
subtitle: '패드 반출 신청 승인/거절',
color: AppPalette.ink,
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DeviceCheckoutLedgerPage(
teacherId: widget.userId,
teacherName: widget.userName,
),
),
),
),
));
}
if (_isAdmin) {
tiles.add((
id: 'admin_db',
child: _buildModernCard(
icon: Icons.terminal_rounded,
title: '서버 DB 제어',
subtitle: '시스템 원격 초기화',
color: AppPalette.ink,
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => const AdminDashboard()),
),
),
));
tiles.add((
id: 'delete_account',
child: _buildModernCard(
icon: Icons.delete_sweep_rounded,
title: '계정 강제 삭제',
subtitle: '학생 및 교사 DB 삭제',
color: AppPalette.ink,
onTap: () => _showDeleteUserDialog(context),
),
));
tiles.add((
id: 'nfc_tag_writer',
child: _buildModernCard(
icon: Icons.edit_note_rounded,
title: 'NFC 태그 쓰기',
subtitle: '주머니 스티커 초기 설정',
color: AppPalette.ink,
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => const NfcTagWriterScreen()),
),
),
));
}
return tiles;
}
// ─────────────────────────────────────────────────────────
// 🖐️ 편집 모드: 드래그로 이동, 모서리 손잡이로 크기 조절 (1x1~4x4).
// ─────────────────────────────────────────────────────────
void _onMovePanStart(String id, DragStartDetails details) {
_dragStartGlobal = details.globalPosition;
_dragStartRect = _layout.positions[id];
}
void _onMovePanUpdate(String id, double cellSize, DragUpdateDetails details) {
if (_dragStartGlobal == null || _dragStartRect == null) return;
final delta = details.globalPosition - _dragStartGlobal!;
final dx = (delta.dx / cellSize).round();
final dy = (delta.dy / cellSize).round();
_layout.tryMove(id, _dragStartRect!.x + dx, _dragStartRect!.y + dy);
}
void _onMovePanEnd(DragEndDetails details) {
_dragStartGlobal = null;
_dragStartRect = null;
}
void _onResizePanStart(String id, DragStartDetails details) {
_dragStartGlobal = details.globalPosition;
_dragStartRect = _layout.positions[id];
}
void _onResizePanUpdate(
String id,
double cellSize,
DragUpdateDetails details,
) {
if (_dragStartGlobal == null || _dragStartRect == null) return;
final delta = details.globalPosition - _dragStartGlobal!;
final dw = (delta.dx / cellSize).round();
final dh = (delta.dy / cellSize).round();
_layout.tryResize(id, _dragStartRect!.w + dw, _dragStartRect!.h + dh);
}
Future<void> _saveAndExitEdit() async {
await _layout.save();
}
@override
Widget build(BuildContext context) {
return ListenableBuilder(
listenable: Listenable.merge([_controller, _layout]),
builder: (context, _) {
final theme = _theme();
final tiles = _tileSpecs();
final bool isEditing = _layout.isEditing;
return Scaffold(
backgroundColor: AppPalette.mist,
appBar: AppBar(
title: Text(
theme.title,
style: const TextStyle(
fontWeight: FontWeight.bold,
letterSpacing: 1.2,
),
),
centerTitle: true,
backgroundColor: theme.color,
foregroundColor: Colors.white,
elevation: 0,
actions: isEditing
? [
TextButton.icon(
onPressed: _layout.isSaving ? null : _saveAndExitEdit,
icon: _layout.isSaving
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: const Icon(
Icons.check_rounded,
color: Colors.white,
),
label: const Text(
'완료',
style: TextStyle(color: Colors.white),
),
),
]
: [
IconButton(
icon: const Icon(Icons.settings_outlined),
tooltip: '설정',
onPressed: () => _openSettings(context),
),
IconButton(
icon: const Icon(Icons.logout_rounded),
tooltip: '로그아웃',
onPressed: () => _logout(context),
),
],
),
body: SingleChildScrollView(
physics: isEditing
? const NeverScrollableScrollPhysics()
: const AlwaysScrollableScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 24,
vertical: 28,
),
decoration: BoxDecoration(
color: theme.color,
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(32),
bottomRight: Radius.circular(32),
),
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: CircleAvatar(
radius: 30,
backgroundColor: AppPalette.linen,
child: Icon(theme.icon, size: 32, color: theme.color),
),
),
const SizedBox(height: 14),
Text(
'$_displayName 님',
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 4),
Text(
theme.subtitle,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white.withValues(alpha: 0.8),
fontSize: 14,
),
),
],
),
),
const SizedBox(height: 32),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 4,
height: 18,
decoration: BoxDecoration(
color: theme.color,
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(width: 10),
const Text(
'스마트 관리 시스템 메뉴',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppPalette.ink,
),
),
],
),
),
if (isEditing)
const Padding(
padding: EdgeInsets.only(top: 8, left: 24, right: 24),
child: Text(
'타일을 드래그해서 옮기고, 오른쪽 아래 손잡이로 크기를 바꿔보세요.',
textAlign: TextAlign.center,
style: TextStyle(color: AppPalette.sage, fontSize: 12),
),
),
const SizedBox(height: 16),
_layout.isLoading
? const Padding(
padding: EdgeInsets.symmetric(vertical: 40),
child: Center(child: CircularProgressIndicator()),
)
: _buildGridCanvas(tiles, isEditing),
const SizedBox(height: 32),
],
),
),
);
},
);
}
Widget _buildGridCanvas(
List<({String id, Widget child})> tiles,
bool isEditing,
) {
const double gap = 10;
const double maxCanvasWidth = 720;
return LayoutBuilder(
builder: (context, constraints) {
final double canvasWidth = constraints.maxWidth < maxCanvasWidth
? constraints.maxWidth - 24
: maxCanvasWidth;
final double cellSize = canvasWidth / kGridCols;
final double canvasHeight = cellSize * kGridRows;
final List<Widget> positioned = [];
for (final tile in tiles) {
final rect = _layout.positions[tile.id];
if (rect == null) continue; // 캔버스가 꽉 차서 자리를 못 찾은 타일
final double left = rect.x * cellSize;
final double top = rect.y * cellSize;
final double w = rect.w * cellSize - gap;
final double h = rect.h * cellSize - gap;
positioned.add(
Positioned(
key: ValueKey(tile.id),
left: left,
top: top,
width: w,
height: h,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(
child: IgnorePointer(
ignoring: isEditing,
child: tile.child,
),
),
if (isEditing)
Positioned.fill(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onPanStart: (d) => _onMovePanStart(tile.id, d),
onPanUpdate: (d) =>
_onMovePanUpdate(tile.id, cellSize, d),
onPanEnd: _onMovePanEnd,
),
),
if (isEditing)
Positioned(
right: 2,
bottom: 2,
child: GestureDetector(
onPanStart: (d) => _onResizePanStart(tile.id, d),
onPanUpdate: (d) =>
_onResizePanUpdate(tile.id, cellSize, d),
onPanEnd: _onMovePanEnd,
child: Container(
width: 26,
height: 26,
decoration: BoxDecoration(
color: AppPalette.ink,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: AppPalette.paper,
width: 2,
),
),
child: const Icon(
Icons.open_in_full_rounded,
size: 14,
color: AppPalette.paper,
),
),
),
),
],
),
),
);
}
return Center(
child: SizedBox(
width: canvasWidth,
height: canvasHeight,
child: Stack(children: positioned),
),
);
},
);
}
// 💎 [카드 디자인 위젯] 타일 크기가 커지면 아이콘/글자도 비례해서 커진다.
Widget _buildModernCard({
required IconData icon,
required String title,
required String subtitle,
required Color color,
required VoidCallback onTap,
bool isActionButton = false,
bool isLoading = false,
}) {
return LayoutBuilder(
builder: (context, constraints) {
// 📏 타일의 실제 픽셀 크기를 기준으로 배율을 계산 (1x1 기준 ≈ 1.0).
final double scale = (constraints.maxWidth / 110).clamp(1.0, 3.4);
final double iconBoxPadding = 6 + 6 * (scale - 1);
final double iconSize = 16 + 10 * (scale - 1);
final double iconRadius = 10 + 6 * (scale - 1);
final double cardPadding = 8 + 8 * (scale - 1);
final double cardRadius = 16 + 6 * (scale - 1);
final double titleFontSize = (10 + 3 * (scale - 1)).clamp(10, 18);
final double subtitleFontSize = (8 + 2 * (scale - 1)).clamp(8, 14);
return InkWell(
onTap: isLoading ? null : onTap,
borderRadius: BorderRadius.circular(cardRadius),
child: Ink(
padding: EdgeInsets.all(cardPadding),
decoration: BoxDecoration(
color: AppPalette.paper,
borderRadius: BorderRadius.circular(cardRadius),
border: Border.all(color: AppPalette.sage, width: 1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(iconBoxPadding),
decoration: BoxDecoration(
color: AppPalette.linen,
borderRadius: BorderRadius.circular(iconRadius),
),
child: Icon(icon, color: color, size: iconSize),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: titleFontSize,
fontWeight: FontWeight.bold,
color: AppPalette.ink,
),
),
),
if (isLoading)
const SizedBox(
width: 14,
height: 14,
child: CircularProgressIndicator(strokeWidth: 2),
)
else if (isActionButton)
Icon(
Icons.touch_app_rounded,
size: 14,
color: color.withValues(alpha: 0.5),
),
],
),
SizedBox(height: 1 + 2 * (scale - 1)),
Text(
subtitle,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: subtitleFontSize,
color: AppPalette.ink.withValues(alpha: 0.55),
height: 1.15,
),
),
],
),
],
),
),
);
},
);
}
}