시작하기 | CoUI
LogoCoUI

시작하기

CoUI 설치 및 설정 가이드

시작하기#

사전 준비#

  • Flutter: 3.47.0 이상
  • Dart: 3.11.0 이상
  • Jaspr (Web): 0.23.2 이상

설치#

저장소 접근 안내

CoUI 저장소는 공개 준비 중이며 현재는 비공개입니다. 아래 설치 방법은 공개 이후 그대로 동작하며, 그전까지는 저장소 접근 권한이 필요합니다.

  • 계약 고객에게는 프로젝트에 사용한 버전의 소스 사본을 프로젝트 저장소에 함께 인도합니다.
  • 그 외 접근이 필요하시면 cody@cocode.im 으로 연락 주세요.

컴포넌트 카탈로그와 문서는 이 사이트에서 계정 없이 그대로 보실 수 있습니다.

CoUI는 아직 pub.dev에 배포되지 않았습니다(packages/coui_flutter · packages/coui_web 모두 publish_to: none) — git 태그를 참조해 설치합니다.

Flutter 프로젝트#

pubspec.yaml에 추가:

dependencies:
  coui_flutter:
    git:
      url: https://github.com/coco-de/coui.git
      path: packages/coui_flutter

Jaspr Web 프로젝트#

pubspec.yaml에 추가:

dependencies:
  coui_web:
    git:
      url: https://github.com/coco-de/coui.git
      path: packages/coui_web

기본 설정#

Flutter#

import 'package:coui_flutter/coui_flutter.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CoUIApp(
      theme: ThemeData.fromCore(CoreThemePresets.light),
      darkTheme: ThemeData.fromCore(CoreThemePresets.dark),
      home: MyHomePage(),
    );
  }
}

단일 import 규칙 — UI 파일에서는 package:coui_flutter/coui_flutter.dart 하나만 import 하세요. CoUI 위젯 이름은 접두사 없는 bare 이름(Button, Icon, Card …)이라, package:flutter/material.dart(또는 widgets.dart)를 따로 import 하면 같은 이름이 충돌(ambiguous)합니다. MaterialApp·ThemeData 등 필요한 Flutter 타입은 coui 배럴이 다시 export 하므로 별도 import 가 필요 없습니다 (CoUI 가 Material 을 대체합니다).

Jaspr Web#

Flutter의 CoUIApp에 대응하는 앱 루트는 CoUIWeb입니다. 컴포넌트를 쓰기 전에 트리 최상단을 이걸로 감싸세요. 

import 'package:coui_web/coui_web.dart';

class MyApp extends StatelessComponent {
  const MyApp({super.key});

  @override
  Component build(BuildContext context) {
    return CoUIWeb(
      theme: ThemeData.coui,
      child: MyHomePage(),
    );
  }
}

감싸지 않으면 렌더되지 않습니다 — 컴포넌트를 CoUIWeb 없이 쓰면 테마를 읽는 첫 컴포넌트에서 No Theme found in context로 즉시 실패합니다. 스타일이 조금 빠지는 게 아니라 예외로 죽습니다. CoUIWeb은 테마 외에도 오버레이 호스트(Dialog·Popover·Toast가 조상의 overflow에 잘리지 않게 하는 포털), 아이콘 기본 크기, 루트 타이포그래피·색 캐스케이드를 함께 설치합니다.

theme:은 색 팔레트를 고르는 스위치가 아닙니다 — Web은 토큰 이름만 내보내고 실제 값은 브라우저가 --coui-* CSS 변수로 해석합니다. 그래서 <head>에 ThemeConfig의 Tailwind 설정과 CSS 변수를 함께 주입해야 색·여백· 반경이 살아나고, 라이트/다크 전환도 theme:이 아니라 <html data-theme> 속성이 뒤집습니다. 두 단계 모두 테마 가이드에 있습니다.

단일 import 규칙 — package:coui_web/coui_web.dart 하나만 import 하세요. jaspr 의 Component/Styles/dom helper 는 배럴이 다시 export 합니다. package:jaspr/jaspr.dart(또는 dom.dart)를 따로 import 하면 bare 이름 (Gap, Position …)이 충돌(ambiguous)합니다.

첫 번째 컴포넌트#

두 플랫폼의 컴포넌트 코드는 같습니다 — 다른 것은 import 줄뿐입니다.

Button#

import 'package:coui_flutter/coui_flutter.dart';

Button(
  variant: CoreButtonVariant.primary,
  size: CoreComponentSize.md,
  onPressed: () => print('Pressed'),
  child: Text('Primary Button'),
)

import 'package:coui_web/coui_web.dart';

Button(
  variant: CoreButtonVariant.primary,
  size: CoreComponentSize.md,
  onPressed: () => print('Pressed'),
  child: Text('Primary Button'),
)

TextField#

import 'package:coui_flutter/coui_flutter.dart';

TextField(
  placeholder: Text('Enter text...'),
  onChanged: (value) => print(value),
)

import 'package:coui_web/coui_web.dart';

TextField(
  placeholder: Text('Enter text...'),
  onChanged: (value) => print(value),
)

다음 단계#