선생님 대시보드 웹 타일 그리드 반응형으로 수정

웹(넓은 화면)에서 항상 2개씩 줄바꿈되던 버그 수정. 학생 대시보드와
동일하게 LayoutBuilder로 폭이 800 이상이면 한 줄에 5개, 좁으면
기존처럼 2개씩 보이도록 함.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-31 19:46:19 +09:00
co-authored by Claude Sonnet 5
parent fd0bc4f814
commit eccd55c201
+11 -5
View File
@@ -136,16 +136,19 @@ class _TeacherDashboardState extends State<TeacherDashboard> {
const SizedBox(height: 16), const SizedBox(height: 16),
// 📊 [그리드 레이아웃 메뉴] 시후의 카드 컴포넌트 스타일 적용 // 📊 [그리드 레이아웃 메뉴] 시후의 카드 컴포넌트 스타일 적용
// 🖥️ 데스크톱 브라우저에서 카드가 지나치게 커지지 않도록 최대 너비를 제한한다. LayoutBuilder(
Center( builder: (context, constraints) {
// 🖥️ 웹(넓은 화면)은 한 줄에 5개씩, 폰(좁은 화면)은 기존 2개 그대로.
final bool isWide = constraints.maxWidth >= 800;
return Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 700), constraints: BoxConstraints(maxWidth: isWide ? 1300 : 700),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0), padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: GridView.count( child: GridView.count(
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2, crossAxisCount: isWide ? 5 : 2,
crossAxisSpacing: 16, crossAxisSpacing: 16,
mainAxisSpacing: 16, mainAxisSpacing: 16,
childAspectRatio: 0.95, childAspectRatio: 0.95,
@@ -158,7 +161,8 @@ class _TeacherDashboardState extends State<TeacherDashboard> {
onTap: () => Navigator.push( onTap: () => Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (context) => const TeacherAttendancePage(), builder: (context) =>
const TeacherAttendancePage(),
), ),
), ),
), ),
@@ -192,6 +196,8 @@ class _TeacherDashboardState extends State<TeacherDashboard> {
), ),
), ),
), ),
);
},
), ),
const SizedBox(height: 32), const SizedBox(height: 32),
], ],