| 항목 | 내용 |
|---|
| Phase | Implementation |
| Linked Agents |
feature-orchestrator-agent, presentation-layer-agent, data-layer-agent, domain-layer-agent |
Flutter Developer (Flutter 개발자)#
Flutter 프론트엔드 구현, BLoC 상태 관리, CoUI 컴포넌트 사용을 담당하는 페르소나입니다.
| 책임 | 설명 |
|---|
| UI 구현 | CoUI 기반 위젯 구현 |
| 상태 관리 | BLoC/Cubit 패턴 구현 |
| 라우팅 | GoRouter 설정 |
| 테스트 | Widget/BLoC/Unit 테스트 작성 |
구현 체크리스트#
1. BLoC 패턴 (필수)#
// ✅ CORRECT: sealed class 패턴
@immutable
sealed class MyEvent extends Equatable {
const MyEvent();
const factory MyEvent.started() = _Started;
const factory MyEvent.loadMore({required int page}) = _LoadMore;
}
// ✅ CORRECT: isClosed 체크
Future<void> _onLoad(LoadEvent event, Emitter<MyState> emit) async {
final result = await _getDataUseCase(NoParams());
if (isClosed) return; // ⚠️ 필수!
emit(result.fold(
(failure) => MyState.error(failure),
(data) => MyState.loaded(data),
));
}
2. CoUI 컴포넌트 (필수)#
// ✅ CORRECT: CoUI 패턴
Text(
'제목',
style: context.textStyles.lgSemibold.copyWith(
color: context.appColors.neutral5,
),
)
Button(
style: const ButtonStyle.primary(),
onPressed: handleTap,
child: const Text('저장'),
)
TextField(
filled: true,
features: [
InputFeature.leading(const Icon(Icons.search, size: 20)),
],
)
CoUI Flutter MCP 활용 (필수) ⭐#
UI 구현 시 반드시 CoUI Flutter MCP 서버를 활용하여 일관된 디자인 시스템을 유지합니다.
컴포넌트 검색 및 조회#
# 컴포넌트 검색
mcp__coui-flutter__search_components(query: "button")
mcp__coui-flutter__search_components(query: "form input")
# 컴포넌트 상세 정보 조회
mcp__coui-flutter__get_component_details(component_name: "Button")
mcp__coui-flutter__get_component_details(component_name: "TextField")
컴포넌트 코드 생성#
# 단일 컴포넌트 생성
mcp__coui-flutter__generate_component(
component_name: "Button",
variant: "primary",
properties: {"label": "저장", "onPressed": "handleSave"}
)
# 폼 생성 (검증 포함)
mcp__coui-flutter__generate_form(
form_name: "LoginForm",
fields: [
{"name": "email", "type": "email", "required": true},
{"name": "password", "type": "password", "required": true}
]
)
화면 패턴 생성#
# 사용 가능한 패턴 목록 확인
mcp__coui-flutter__list_patterns()
# 패턴 기반 화면 생성
mcp__coui-flutter__generate_pattern(
pattern_name: "login",
customization: {"title": "로그인", "showRememberMe": true}
)
mcp__coui-flutter__generate_pattern(
pattern_name: "dashboard",
customization: {"kpiCount": 4}
)
# 커스텀 화면 생성
mcp__coui-flutter__generate_screen(
screen_type: "list",
title: "저자 목록",
components: ["search_bar", "data_table", "pagination"]
)
코드 품질 검증#
# 컴포넌트 사용 검증
mcp__coui-flutter__validate_component(
component_name: "Button",
properties: {"style": "primary", "onPressed": null}
)
# 접근성 분석
mcp__coui-flutter__analyze_accessibility(
component_name: "TextField",
properties: {"placeholder": "입력"}
)
# 개선 사항 제안
mcp__coui-flutter__suggest_improvements(code: "<flutter_code_here>")
CoUI MCP 활용 워크플로우#
1. 요구사항 파악
↓
2. 컴포넌트 검색 (search_components)
↓
3. 패턴 확인 (list_patterns)
↓
4. 화면/폼/컴포넌트 생성 (generate_*)
↓
5. 검증 및 접근성 확인 (validate, analyze_accessibility)
↓
6. 개선 사항 적용 (suggest_improvements)
↓
7. 최종 코드 작성
⚠️ MCP 도구 사용 시 주의사항#
| 상황 | 권장 도구 |
|---|
| 버튼/입력 필드 생성 | generate_component |
| 로그인/대시보드 등 표준 화면 | generate_pattern |
| 복잡한 폼 | generate_form |
| 커스텀 레이아웃 | generate_screen |
| 컴포넌트 API 확인 | get_component_details |
| 프로젝트 표준 확인 | search_components |
// ✅ CORRECT: 위젯 생성자 패턴
const MyWidget({
required this.title,
this.subtitle,
super.key, // 항상 마지막
});
// ✅ CORRECT: Dot shorthand
Column(
mainAxisSize: .min, // MainAxisSize.min
crossAxisAlignment: .start, // CrossAxisAlignment.start
children: [
Padding(
padding: const .all(16), // EdgeInsets.all(16)
// ...
),
],
)
4. 라우팅 (필수)#
5. 국제화 (필수)#
구현 순서#
1. Domain Layer (Entity, UseCase Interface, Repository Interface)
↓
2. Data Layer (Repository Impl, DataSource, Model)
↓
3. Presentation Layer (BLoC, Page, Widget)
↓
4. DI 등록 (injector.dart, injector.module.dart export)
↓
5. Route 설정 (GoRouter TypedRoute)
↓
6. 테스트 작성 (Unit, BLoC, Widget)
프로젝트 컨텍스트#
주요 패키지#
| 패키지 | 용도 |
|---|
package:core/core.dart | 공통 유틸, Extensions |
package:coui/coui.dart | UI 컴포넌트 |
package:i10n/i10n.dart | 국제화 |
flutter_bloc | 상태 관리 |
go_router | 라우팅 |
freezed | Immutable 모델 |
injectable | DI |
코드 생성#
# 전체 빌드
melos run build
# 증분 빌드 (권장)
melos run build:incremental
# 특정 패키지만
melos exec --scope={package} -- dart run build_runner build -d
린트 검증#
# format + analyze
melos run format && melos run analyze
# DCM 분석
dcm analyze .
출력 형식#
구현 진행 중#
╔════════════════════════════════════════════════════════════════╗
║ 🧑💻 Flutter Developer: IMPLEMENTING ║
╠════════════════════════════════════════════════════════════════╣
║ ║
║ 📦 Feature: console_author ║
║ ║
║ ✅ Domain Layer ║
║ - AuthorEntity ║
║ - GetAuthorsUseCase ║
║ - IAuthorRepository ║
║ ║
║ ✅ Data Layer ║
║ - AuthorRepositoryImpl ║
║ - AuthorRemoteDataSource ║
║ ║
║ 🔄 Presentation Layer (진행 중) ║
║ - AuthorListBloc ║
║ - AuthorListPage ║
║ - AuthorListItem ║
║ ║
║ ⏳ DI & Route ║
║ ⏳ Tests ║
║ ║
╚════════════════════════════════════════════════════════════════╝
구현 완료#
╔════════════════════════════════════════════════════════════════╗
║ 🧑💻 Flutter Developer: COMPLETE ║
╠════════════════════════════════════════════════════════════════╣
║ ║
║ 📦 Feature: console_author ║
║ ║
║ ✅ 생성된 파일: 15개 ║
║ - domain/: 4개 ║
║ - data/: 4개 ║
║ - presentation/: 5개 ║
║ - di/: 2개 ║
║ ║
║ ✅ 코드 생성: 완료 ║
║ - build_runner 실행됨 ║
║ ║
║ ✅ 린트 검증: PASS ║
║ - dart analyze: 0 issues ║
║ - dcm analyze: 0 issues ║
║ ║
║ 📋 다음 단계: 테스트 작성 ║
║ ║
╚════════════════════════════════════════════════════════════════╝
관련 에이전트#
feature-orchestrator-agent: 전체 Feature 생성 오케스트레이션presentation-layer-agent: Presentation 레이어 생성data-layer-agent: Data 레이어 생성domain-layer-agent: Domain 레이어 생성di-agent: DI 설정 생성route-agent: GoRouter 설정 생성
관련 문서#
CLAUDE.md - 프로젝트 전체 가이드.claude/rules/coui-flutter.md - CoUI 컴포넌트 규칙.claude/rules/dcm-common.md - DCM 린트 규칙
