sihooandClaude Sonnet 5
86a8f7b9d1
제목을 AppBar 대신 본문 상단 알약(TitlePill)으로 옮기고, 필 모양 통계/선택 버튼과 그림자 있는 둥근 타일(원형 아이콘 배지 + 코너 배지) 스타일을 출석 화면에서 그대로 가져왔다. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
490 lines
17 KiB
Dart
490 lines
17 KiB
Dart
// 📍 선생님 호출 화면(학생용) (UI 전용). "실시간 출석 현황" 화면과 같은 패밀리룩
|
|
// (제목 알약 + 필 모양 통계/필터 + 그림자 있는 둥근 타일)을 따른다.
|
|
// 서버 통신/상태는 lib/function/teacher_call_controller.dart가 담당한다.
|
|
import 'package:flutter/material.dart';
|
|
import '../data/teacher_call_schedule.dart';
|
|
import '../function/teacher_call_controller.dart';
|
|
import '../theme/app_palette.dart';
|
|
import 'app_notice.dart';
|
|
import 'title_pill.dart';
|
|
|
|
class TeacherCallScreen extends StatefulWidget {
|
|
final String studentId;
|
|
final String studentName;
|
|
|
|
const TeacherCallScreen({
|
|
super.key,
|
|
required this.studentId,
|
|
required this.studentName,
|
|
});
|
|
|
|
@override
|
|
State<TeacherCallScreen> createState() => _TeacherCallScreenState();
|
|
}
|
|
|
|
class _TeacherCallScreenState extends State<TeacherCallScreen> {
|
|
late final TeacherCallController _controller;
|
|
String? _selectedTeacherId;
|
|
String? _selectedTeacherName;
|
|
String _selectedPurpose = kCallPurposes.first;
|
|
final _customPurposeController = TextEditingController();
|
|
bool _useCustomPurpose = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = TeacherCallController(
|
|
studentId: widget.studentId,
|
|
studentName: widget.studentName,
|
|
);
|
|
_controller.init();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
_customPurposeController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _call() async {
|
|
if (_selectedTeacherId == null) {
|
|
AppNotice.show(context, '선생님을 선택해 주세요.');
|
|
return;
|
|
}
|
|
final purpose = _useCustomPurpose
|
|
? _customPurposeController.text.trim()
|
|
: _selectedPurpose;
|
|
if (purpose.isEmpty) {
|
|
AppNotice.show(context, '방문 목적을 입력해 주세요.');
|
|
return;
|
|
}
|
|
final (success, message) = await _controller.callTeacher(
|
|
teacherId: _selectedTeacherId!,
|
|
purpose: purpose,
|
|
);
|
|
if (!mounted) return;
|
|
AppNotice.show(
|
|
context,
|
|
message,
|
|
icon: success ? Icons.check_circle_rounded : Icons.error_outline_rounded,
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return ListenableBuilder(
|
|
listenable: _controller,
|
|
builder: (context, _) {
|
|
final teachers = _controller.teachers;
|
|
final inClassCount = teachers
|
|
.where((t) => _controller.isInClassNow(t['name'] ?? ''))
|
|
.length;
|
|
|
|
return Scaffold(
|
|
backgroundColor: AppPalette.mist,
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.transparent,
|
|
foregroundColor: AppPalette.ink,
|
|
elevation: 0,
|
|
),
|
|
body: _controller.isLoading
|
|
? const Center(child: CircularProgressIndicator())
|
|
: RefreshIndicator(
|
|
onRefresh: _controller.refresh,
|
|
child: ListView(
|
|
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
|
|
children: [
|
|
const Center(child: TitlePill('선생님 호출')),
|
|
const SizedBox(height: 16),
|
|
Row(
|
|
children: [
|
|
Expanded(child: _statPill('전체 선생님', teachers.length)),
|
|
const SizedBox(width: 8),
|
|
Expanded(child: _statPill('지금 수업 중', inClassCount)),
|
|
],
|
|
),
|
|
if (_controller.ranking.isNotEmpty) ...[
|
|
const SizedBox(height: 12),
|
|
_buildRanking(),
|
|
],
|
|
const SizedBox(height: 20),
|
|
_sectionHeader('방문 목적'),
|
|
const SizedBox(height: 10),
|
|
_buildPurposeChips(),
|
|
if (_useCustomPurpose) ...[
|
|
const SizedBox(height: 10),
|
|
TextField(
|
|
controller: _customPurposeController,
|
|
maxLength: 40,
|
|
decoration: InputDecoration(
|
|
hintText: '용무를 입력하세요',
|
|
filled: true,
|
|
fillColor: AppPalette.paper,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(16),
|
|
borderSide: BorderSide(color: AppPalette.sage),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
const SizedBox(height: 20),
|
|
_sectionHeader('선생님 목록', count: teachers.length),
|
|
const SizedBox(height: 10),
|
|
_buildTeacherGrid(),
|
|
const SizedBox(height: 20),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: _selectedTeacherId == null
|
|
? Colors.grey
|
|
: AppPalette.ink,
|
|
foregroundColor: AppPalette.paper,
|
|
padding: const EdgeInsets.symmetric(vertical: 16),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(28),
|
|
),
|
|
),
|
|
onPressed: _controller.isCalling ? null : _call,
|
|
child: _controller.isCalling
|
|
? const SizedBox(
|
|
width: 20,
|
|
height: 20,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
color: Colors.white,
|
|
),
|
|
)
|
|
: Text(
|
|
_selectedTeacherName == null
|
|
? '선생님을 선택해 주세요'
|
|
: '$_selectedTeacherName 선생님 호출하기',
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
_sectionHeader(
|
|
'내 호출 기록',
|
|
count: _controller.myCalls.length,
|
|
),
|
|
const SizedBox(height: 10),
|
|
_buildMyCalls(),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
/// 🪶 "실시간 출석 현황"의 _sidebarStatPill과 같은 필 모양 통계 표시(선택 불가, 숫자 강조용).
|
|
Widget _statPill(String label, int count) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
|
decoration: BoxDecoration(
|
|
color: AppPalette.paper,
|
|
borderRadius: BorderRadius.circular(28),
|
|
border: Border.all(color: AppPalette.sage),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Text(label, style: TextStyle(fontSize: 12, color: Colors.grey[600])),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
'$count명',
|
|
style: const TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: AppPalette.ink,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 🏷️ "학년 그룹" 헤더처럼 작은 강조 바 + 굵은 제목 + (선택) 개수를 붙인 섹션 제목.
|
|
Widget _sectionHeader(String title, {int? count}) {
|
|
return Row(
|
|
children: [
|
|
Container(
|
|
width: 4,
|
|
height: 16,
|
|
decoration: BoxDecoration(
|
|
color: AppPalette.ink,
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
title,
|
|
style: const TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: AppPalette.ink,
|
|
),
|
|
),
|
|
if (count != null) ...[
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
'$count명',
|
|
style: TextStyle(fontSize: 13, color: Colors.grey[500]),
|
|
),
|
|
],
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildRanking() {
|
|
final medals = ['🥇', '🥈', '🥉'];
|
|
return Container(
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: BoxDecoration(
|
|
color: AppPalette.paper,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(color: AppPalette.sage),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withValues(alpha: 0.03),
|
|
blurRadius: 12,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'오늘 인기 선생님',
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.grey[600],
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
for (var i = 0; i < _controller.ranking.length; i++)
|
|
Column(
|
|
children: [
|
|
Text(medals[i], style: const TextStyle(fontSize: 22)),
|
|
Text(
|
|
_controller.ranking[i]['teacherName'] ?? '',
|
|
style: const TextStyle(fontWeight: FontWeight.bold),
|
|
),
|
|
Text(
|
|
'${_controller.ranking[i]['count']}회',
|
|
style: TextStyle(color: Colors.grey[500], fontSize: 12),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 🍬 필 모양 선택 버튼(스탯 필과 같은 톤: 선택=ink 배경, 미선택=paper+sage 테두리).
|
|
Widget _pillChoice(String label, bool selected, VoidCallback onTap) {
|
|
return InkWell(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(28),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
|
|
decoration: BoxDecoration(
|
|
color: selected ? AppPalette.ink : AppPalette.paper,
|
|
borderRadius: BorderRadius.circular(28),
|
|
border: Border.all(
|
|
color: selected ? AppPalette.ink : AppPalette.sage,
|
|
),
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: selected ? Colors.white : AppPalette.ink,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPurposeChips() {
|
|
return Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
children: [
|
|
for (final p in kCallPurposes)
|
|
_pillChoice(
|
|
p,
|
|
!_useCustomPurpose && _selectedPurpose == p,
|
|
() => setState(() {
|
|
_useCustomPurpose = false;
|
|
_selectedPurpose = p;
|
|
}),
|
|
),
|
|
_pillChoice(
|
|
'직접 입력',
|
|
_useCustomPurpose,
|
|
() => setState(() => _useCustomPurpose = true),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildTeacherGrid() {
|
|
final teachers = _controller.teachers;
|
|
return GridView.builder(
|
|
shrinkWrap: true,
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
|
|
maxCrossAxisExtent: 160,
|
|
mainAxisSpacing: 12,
|
|
crossAxisSpacing: 12,
|
|
mainAxisExtent: 110,
|
|
),
|
|
itemCount: teachers.length,
|
|
itemBuilder: (context, index) {
|
|
final t = teachers[index];
|
|
final name = t['name'] ?? '';
|
|
final location = t['location'] ?? '교무실';
|
|
final isSelected = _selectedTeacherId == t['teacherId'];
|
|
final inClass = _controller.isInClassNow(name);
|
|
final statusColor = inClass ? Colors.orange : AppPalette.ink;
|
|
|
|
return GestureDetector(
|
|
onTap: () => setState(() {
|
|
_selectedTeacherId = t['teacherId'];
|
|
_selectedTeacherName = name;
|
|
}),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: isSelected ? AppPalette.ink : AppPalette.paper,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: isSelected ? AppPalette.ink : AppPalette.sage,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withValues(alpha: 0.03),
|
|
blurRadius: 12,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(6),
|
|
decoration: BoxDecoration(
|
|
color: isSelected
|
|
? Colors.white.withValues(alpha: 0.15)
|
|
: statusColor.withValues(alpha: 0.1),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
inClass ? Icons.school_rounded : Icons.person_rounded,
|
|
color: isSelected ? Colors.white : statusColor,
|
|
size: 16,
|
|
),
|
|
),
|
|
const Spacer(),
|
|
if (inClass)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 6,
|
|
vertical: 2,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: isSelected
|
|
? Colors.white.withValues(alpha: 0.15)
|
|
: Colors.orange[50],
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: isSelected ? Colors.white54 : Colors.orange,
|
|
),
|
|
),
|
|
child: Text(
|
|
'수업중',
|
|
style: TextStyle(
|
|
fontSize: 9,
|
|
color: isSelected ? Colors.white : Colors.orange,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const Spacer(),
|
|
Text(
|
|
name,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 15,
|
|
color: isSelected ? Colors.white : AppPalette.ink,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
'${kLocationIcons[location] ?? '📍'} $location',
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
color: isSelected ? Colors.white70 : Colors.grey[500],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildMyCalls() {
|
|
if (_controller.myCalls.isEmpty) {
|
|
return const Padding(
|
|
padding: EdgeInsets.symmetric(vertical: 12),
|
|
child: Text('아직 호출 기록이 없어요.', style: TextStyle(color: Colors.grey)),
|
|
);
|
|
}
|
|
return Column(
|
|
children: [
|
|
for (final c in _controller.myCalls)
|
|
Container(
|
|
margin: const EdgeInsets.only(bottom: 8),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
decoration: BoxDecoration(
|
|
color: AppPalette.paper,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: AppPalette.sage),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Text('${c['teacherName']} 선생님 · ${c['purpose']}'),
|
|
),
|
|
Text(
|
|
'${c['createdAt'] ?? ''}'.split(' ').last,
|
|
style: TextStyle(color: Colors.grey[500], fontSize: 12),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|