웹에서 타일이 너무 작아 보이는 문제 수정 - 1x1 크기를 프로필 카드에 맞춤

임의로 20% 축소하던 방식 대신, 1x1 타일 목표 크기(184px, 계정 프로필
카드와 비슷한 크기)를 기준으로 그리드 폭을 계산하도록 변경. 화면이
목표 크기보다 넓으면 가운데로 모아 여백을 주고, 좁으면(폰) 화면 폭에
그대로 맞춘다.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-08 00:08:20 +09:00
co-authored by Claude Sonnet 5
parent 73542fa11c
commit 75b906c648
+10 -8
View File
@@ -635,21 +635,23 @@ class _MainDashboardState extends State<MainDashboard> {
: width < 700 : width < 700
? 3 ? 3
: 4; : 4;
// 📏 캔버스 자체를 700px에서 더 넓어지지 않게 막고, 타일 크기를 전체적으로 // 📏 1칸(1x1) 크기가 대략 계정 프로필 카드만 해지도록 목표 크기를 잡고,
// 20% 줄여서 화면이 꽉 차 보이지 않고 여백이 생기게 한다. // 화면이 그보다 넓으면 가운데로 모아서 여백을 준다(좁으면 화면 폭에 맞춤).
const double maxGridWidth = 700; const double targetCellSize = 184;
final double cappedWidth = width < maxGridWidth const double gap = 12;
final double idealGridWidth =
crossAxisCount * targetCellSize + (crossAxisCount - 1) * gap;
final double gridWidth = width < idealGridWidth
? width ? width
: maxGridWidth; : idealGridWidth;
final double gridWidth = cappedWidth * 0.8;
return Center( return Center(
child: SizedBox( child: SizedBox(
width: gridWidth, width: gridWidth,
child: StaggeredGrid.count( child: StaggeredGrid.count(
crossAxisCount: crossAxisCount, crossAxisCount: crossAxisCount,
mainAxisSpacing: 12, mainAxisSpacing: gap,
crossAxisSpacing: 12, crossAxisSpacing: gap,
children: [ children: [
for (final tile in tiles) for (final tile in tiles)
StaggeredGridTile.count( StaggeredGridTile.count(