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?

Be as detailed as possible for better results