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

개요

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

컴포넌트 아키텍처

폴더 구조

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

스타일 패턴

dart
1// 1. 기본 스타일 사용
2MyComponent()
3
4// 2. 커스텀 스타일 사용
5MyComponent(
6  style: MyComponentStyle.defaultStyle.copyWith(
7    backgroundColor: Colors.blue,
8  ),
9)

컴포넌트 목록

네비게이션 & 레이아웃

필터 & 선택

입력 필드

다이얼로그 & 오버레이

동아리 관련

기타

테마 색상

새 컴포넌트 추가 가이드

1. 폴더 생성

bash
1mkdir lib/widgets/{new_component}

2. 스타일 파일 생성

dart
1// lib/widgets/{new_component}/{new_component}_styles.dart
2import 'package:flutter/material.dart';
3
4class NewComponentStyle {
5  final Color backgroundColor;
6
7  const NewComponentStyle({
8    this.backgroundColor = Colors.white,
9  });
10
11  static const NewComponentStyle defaultStyle = NewComponentStyle();
12
13  NewComponentStyle copyWith({Color? backgroundColor}) {
14    return NewComponentStyle(
15      backgroundColor: backgroundColor ?? this.backgroundColor,
16    );
17  }
18}

3. 컴포넌트 파일 생성

dart
1// lib/widgets/{new_component}/{new_component}.dart
2import 'package:flutter/material.dart';
3import '{new_component}_styles.dart';
4
5class NewComponent extends StatelessWidget {
6  final NewComponentStyle style;
7
8  const NewComponent({
9    super.key,
10    this.style = NewComponentStyle.defaultStyle,
11  });
12
13  @override
14  Widget build(BuildContext context) {
15    return Container(color: style.backgroundColor);
16  }
17}