Agent skill
component-usage
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/component-usage
SKILL.md
동구라미 컴포넌트 라이브러리
개요
동구라미 앱의 재사용 가능한 UI 컴포넌트 라이브러리입니다.
모든 컴포넌트는 lib/widgets/{component_name}/ 폴더에 위치하며, 스타일 분리 패턴을 따릅니다.
컴포넌트 아키텍처
폴더 구조
lib/widgets/
├── {component_name}/
│ ├── {component_name}.dart # 컴포넌트 구현
│ └── {component_name}_styles.dart # 스타일 클래스
스타일 패턴
dart
// 1. 기본 스타일 사용
MyComponent()
// 2. 커스텀 스타일 사용
MyComponent(
style: MyComponentStyle.defaultStyle.copyWith(
backgroundColor: Colors.blue,
),
)
컴포넌트 목록
네비게이션 & 레이아웃
| 컴포넌트 | 설명 | 문서 |
|---|---|---|
| AppBar | 메인 화면용 커스텀 앱바 | app-bar.md |
| DetailAppBar | 상세 화면용 앱바 (뒤로가기 + 제목) | detail-app-bar.md |
| DrawerMenu | 드로어 메뉴 (로그인/비로그인 통합) | drawer-menu.md |
| DrawerItem | 드로어 메뉴 아이템 | drawer-item.md |
| DrawerEventItem | 드로어 이벤트 아이템 | drawer-event-item.md |
필터 & 선택
| 컴포넌트 | 설명 | 문서 |
|---|---|---|
| FilterTabBar | 전체/모집중 필터 탭 | filter-tab-bar.md |
| CategoryFilterButton | 카테고리 필터 버튼 | category-filter-button.md |
| CategoryPicker | 카테고리 선택 다이얼로그 | category-picker.md |
| RemovableChip | 삭제 가능한 칩 | removable-chip.md |
| SelectedCategoryChipList | 선택된 카테고리 칩 목록 | selected-category-chip-list.md |
입력 필드
| 컴포넌트 | 설명 | 문서 |
|---|---|---|
| RoundedTextField | 둥근 텍스트 필드 | rounded-text-field.md |
| RoundedEmailField | 둥근 이메일 필드 | rounded-email-field.md |
| EmailTextField | 이메일 텍스트 필드 | email-text-field.md |
| EmailTextFieldWithButton | 버튼 포함 이메일 필드 | email-text-field-with-button.md |
| RoundedDropdown | 둥근 드롭다운 | rounded-dropdown.md |
다이얼로그 & 오버레이
| 컴포넌트 | 설명 | 문서 |
|---|---|---|
| AlertTextDialog | 알림 다이얼로그 | alert-text-dialog.md |
| CircleCertificateDialog | 인증 코드 다이얼로그 | circle-certificate-dialog.md |
| MajorPickerDialog | 학과 선택 다이얼로그 | major-picker-dialog.md |
| PolicyDialog | 약관 다이얼로그 | policy-dialog.md |
| NotificationOverlay | 알림 오버레이 | notification-overlay.md |
| CircleDetailOverlay | 동아리 상세 오버레이 | circle-detail-overlay.md |
동아리 관련
| 컴포넌트 | 설명 | 문서 |
|---|---|---|
| CircleList | 동아리 목록 | circle-list.md |
| CircleItem | 동아리 아이템 | circle-item.md |
| CircleGroup | 동아리 그룹 | circle-group.md |
| CircleDetailItem | 동아리 상세 아이템 | circle-detail-item.md |
기타
| 컴포넌트 | 설명 | 문서 |
|---|---|---|
| TextFontWidget | 텍스트 폰트 헬퍼 | text-font-widget.md |
| NoticeList | 공지사항 목록 | notice-list.md |
| CloudMessaging | FCM 메시징 위젯 | cloud-messaging.md |
테마 색상
| 용도 | 색상 코드 | 설명 |
|---|---|---|
| Primary | #FFB052 |
브랜드 주 색상 (오렌지) |
| Primary Dark | #FF9A21 |
브랜드 진한 색상 |
| Background | #F0F2F5 |
배경 회색 |
| Text Primary | #000000 |
주 텍스트 색상 |
| Text Secondary | #767676 |
보조 텍스트 색상 |
| Text Tertiary | #A8A8A8 |
연한 텍스트 색상 |
| Border | #DBDBDB |
기본 테두리 색상 |
| Divider | #CECECE |
구분선 색상 |
새 컴포넌트 추가 가이드
1. 폴더 생성
bash
mkdir lib/widgets/{new_component}
2. 스타일 파일 생성
dart
// lib/widgets/{new_component}/{new_component}_styles.dart
import 'package:flutter/material.dart';
class NewComponentStyle {
final Color backgroundColor;
const NewComponentStyle({
this.backgroundColor = Colors.white,
});
static const NewComponentStyle defaultStyle = NewComponentStyle();
NewComponentStyle copyWith({Color? backgroundColor}) {
return NewComponentStyle(
backgroundColor: backgroundColor ?? this.backgroundColor,
);
}
}
3. 컴포넌트 파일 생성
dart
// lib/widgets/{new_component}/{new_component}.dart
import 'package:flutter/material.dart';
import '{new_component}_styles.dart';
class NewComponent extends StatelessWidget {
final NewComponentStyle style;
const NewComponent({
super.key,
this.style = NewComponentStyle.defaultStyle,
});
@override
Widget build(BuildContext context) {
return Container(color: style.backgroundColor);
}
}
Didn't find tool you were looking for?