Component Usage

name: component-usage description: 동구라미 앱 컴포넌트 라이브러리 사용 가이드. UI 컴포넌트 구현, 스타일 커스터마이징, 위젯 활용법 안내. Keywords: component, widget, ui, style, button, dialog, text field, chip, app bar, drawer

동구라미 컴포넌트 라이브러리

개요

동구라미 앱의 재사용 가능한 UI 컴포넌트 라이브러리입니다. 모든 컴포넌트는 lib/widgets/{component_name}/ 폴더에 위치하며, 스타일 분리 패턴을 따릅니다.

컴포넌트 아키텍처

폴더 구조

lib/widgets/
├── {component_name}/
│   ├── {component_name}.dart        # 컴포넌트 구현
│   └── {component_name}_styles.dart # 스타일 클래스

스타일 패턴

// 1. 기본 스타일 사용
MyComponent()

// 2. 커스텀 스타일 사용
MyComponent(
  style: MyComponentStyle.defaultStyle.copyWith(
    backgroundColor: Colors.blue,
  ),
)

컴포넌트 목록

네비게이션 & 레이아웃

필터 & 선택

입력 필드

다이얼로그 & 오버레이

동아리 관련

기타

테마 색상

새 컴포넌트 추가 가이드

1. 폴더 생성

mkdir lib/widgets/{new_component}

2. 스타일 파일 생성

// 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. 컴포넌트 파일 생성

// 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);
  }
}