환경 초기화 및 벤더 리포지토리 스켈레톤 도입
This commit is contained in:
JiWoong Sul
206
lib/widgets/app_shell.dart
Normal file
206
lib/widgets/app_shell.dart
Normal file
@@ -0,0 +1,206 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
|
||||
import '../core/constants/app_sections.dart';
|
||||
|
||||
class AppShell extends StatelessWidget {
|
||||
const AppShell({
|
||||
super.key,
|
||||
required this.child,
|
||||
required this.currentLocation,
|
||||
});
|
||||
|
||||
final Widget child;
|
||||
final String currentLocation;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final isWide = constraints.maxWidth >= 960;
|
||||
if (isWide) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Superport v2'),
|
||||
actions: [
|
||||
IconButton(
|
||||
tooltip: '로그아웃',
|
||||
icon: const Icon(LucideIcons.logOut),
|
||||
onPressed: () => context.go(loginRoutePath),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: Row(
|
||||
children: [
|
||||
_NavigationRail(currentLocation: currentLocation),
|
||||
const VerticalDivider(width: 1),
|
||||
Expanded(child: child),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Superport v2'),
|
||||
actions: [
|
||||
IconButton(
|
||||
tooltip: '로그아웃',
|
||||
icon: const Icon(LucideIcons.logOut),
|
||||
onPressed: () => context.go(loginRoutePath),
|
||||
),
|
||||
],
|
||||
),
|
||||
drawer: Drawer(
|
||||
child: SafeArea(
|
||||
child: _NavigationList(
|
||||
currentLocation: currentLocation,
|
||||
onTap: (path) {
|
||||
Navigator.of(context).pop();
|
||||
context.go(path);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
body: child,
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _NavigationRail extends StatelessWidget {
|
||||
const _NavigationRail({required this.currentLocation});
|
||||
|
||||
final String currentLocation;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final pages = allAppPages;
|
||||
final selectedIndex = _selectedIndex(currentLocation, pages);
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
return Container(
|
||||
width: 104,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(right: BorderSide(color: colorScheme.outlineVariant)),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 24),
|
||||
const FlutterLogo(size: 48),
|
||||
const SizedBox(height: 24),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
itemCount: pages.length,
|
||||
itemBuilder: (context, index) {
|
||||
final page = pages[index];
|
||||
final isSelected = index == selectedIndex;
|
||||
final textStyle = theme.textTheme.labelSmall?.copyWith(
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant,
|
||||
);
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Material(
|
||||
color: isSelected
|
||||
? colorScheme.primary.withValues(alpha: 0.12)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
onTap: () {
|
||||
if (page.path != currentLocation) {
|
||||
context.go(page.path);
|
||||
}
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 12,
|
||||
horizontal: 8,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
page.icon,
|
||||
size: 22,
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
page.label,
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: textStyle,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _NavigationList extends StatelessWidget {
|
||||
const _NavigationList({required this.currentLocation, required this.onTap});
|
||||
|
||||
final String currentLocation;
|
||||
final ValueChanged<String> onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final pages = allAppPages;
|
||||
final selectedIndex = _selectedIndex(currentLocation, pages);
|
||||
|
||||
return ListView.builder(
|
||||
itemCount: pages.length,
|
||||
itemBuilder: (context, index) {
|
||||
final page = pages[index];
|
||||
final selected = index == selectedIndex;
|
||||
return ListTile(
|
||||
leading: Icon(page.icon),
|
||||
title: Text(page.label),
|
||||
subtitle: Text(
|
||||
page.summary,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
selected: selected,
|
||||
selectedColor: Theme.of(context).colorScheme.primary,
|
||||
onTap: () => onTap(page.path),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
int _selectedIndex(String location, List<AppPageDescriptor> pages) {
|
||||
final normalized = location.toLowerCase();
|
||||
final exact = pages.indexWhere(
|
||||
(page) => normalized == page.path.toLowerCase(),
|
||||
);
|
||||
if (exact != -1) {
|
||||
return exact;
|
||||
}
|
||||
|
||||
final prefix = pages.indexWhere(
|
||||
(page) => normalized.startsWith(page.path.toLowerCase()),
|
||||
);
|
||||
return prefix == -1 ? 0 : prefix;
|
||||
}
|
||||
174
lib/widgets/spec_page.dart
Normal file
174
lib/widgets/spec_page.dart
Normal file
@@ -0,0 +1,174 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
|
||||
class SpecTable {
|
||||
const SpecTable({
|
||||
required this.columns,
|
||||
required this.rows,
|
||||
this.columnWidth,
|
||||
});
|
||||
|
||||
final List<String> columns;
|
||||
final List<List<String>> rows;
|
||||
final double? columnWidth;
|
||||
}
|
||||
|
||||
class SpecSection {
|
||||
const SpecSection({
|
||||
required this.title,
|
||||
this.items = const <String>[],
|
||||
this.description,
|
||||
this.table,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final List<String> items;
|
||||
final String? description;
|
||||
final SpecTable? table;
|
||||
}
|
||||
|
||||
class SpecPage extends StatelessWidget {
|
||||
const SpecPage({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.summary,
|
||||
required this.sections,
|
||||
this.trailing,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String summary;
|
||||
final List<SpecSection> sections;
|
||||
final Widget? trailing;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = ShadTheme.of(context);
|
||||
|
||||
return SelectionArea(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 1200),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(title, style: theme.textTheme.h2),
|
||||
const SizedBox(height: 12),
|
||||
Text(summary, style: theme.textTheme.lead),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (trailing != null) ...[
|
||||
const SizedBox(width: 24),
|
||||
trailing!,
|
||||
],
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
...sections.map(
|
||||
(section) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 24),
|
||||
child: ShadCard(
|
||||
title: Text(
|
||||
section.title,
|
||||
style: theme.textTheme.h3.copyWith(
|
||||
color: theme.colorScheme.foreground,
|
||||
),
|
||||
),
|
||||
description: section.description == null
|
||||
? null
|
||||
: Text(
|
||||
section.description!,
|
||||
style: theme.textTheme.muted,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (section.items.isNotEmpty) ...[
|
||||
for (final item in section.items)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 6),
|
||||
child: Icon(
|
||||
LucideIcons.dot,
|
||||
size: 10,
|
||||
color:
|
||||
theme.colorScheme.mutedForeground,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item,
|
||||
style: theme.textTheme.p,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
if (section.table != null) ...[
|
||||
if (section.items.isNotEmpty)
|
||||
const SizedBox(height: 16),
|
||||
_SpecTableView(table: section.table!),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SpecTableView extends StatelessWidget {
|
||||
const _SpecTableView({required this.table});
|
||||
|
||||
final SpecTable table;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final headerCells = table.columns
|
||||
.map((column) => ShadTableCell.header(child: Text(column)))
|
||||
.toList(growable: false);
|
||||
final rowCells = table.rows
|
||||
.map(
|
||||
(row) => row
|
||||
.map((cell) => ShadTableCell(child: Text(cell)))
|
||||
.toList(growable: false),
|
||||
)
|
||||
.toList(growable: false);
|
||||
|
||||
final rowCount = table.rows.length;
|
||||
final baseHeight = 56.0; // default row height with some breathing room
|
||||
final height = (rowCount + 1) * baseHeight;
|
||||
|
||||
return SizedBox(
|
||||
height: height,
|
||||
child: ShadTable.list(
|
||||
header: headerCells,
|
||||
children: rowCells,
|
||||
columnSpanExtent: (index) =>
|
||||
FixedTableSpanExtent(table.columnWidth ?? 160),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user