SunUI 컴포넌트 라이브러리

SunUI는 Doggy가 자체 개발한 프론트엔드 UI 컴포넌트 라이브러리로, Twig 매크로 기반이며 25+ 컴포넌트를 제공합니다.

개요

SunUI는 Bootstrap 등 서드파티 UI 프레임워크에 의존하지 않으며 컴포넌트 템플릿은 templates/ui/에 있습니다:

templates/ui/
├── elements.html.twig          # 요소 표시
├── table.html.twig             # 테이블 컴포넌트
├── buttons/
│   ├── button.html.twig        # 버튼
│   ├── button_group.html.twig  # 버튼 그룹
│   └── icon_button.html.twig   # 아이콘 버튼
├── drawer/
│   ├── drawer.html.twig        # 드로어
│   ├── addField.html.twig
│   └── confirmButton.html.twig
├── form/
│   └── singleField.html.twig   # 단일 필드 폼
├── template/
│   ├── icons.html.twig         # 아이콘 템플릿
│   └── ui.html.twig            # UI 템플릿
└── example/
    └── button.html.twig        # 버튼 예시

공용 컴포넌트도 있습니다:

templates/components/
├── breadcrumb.html.twig    # 브레드크럼
├── datagrid.html.twig      # 데이터 테이블
└── tree.html.twig          # 트리 컴포넌트

핵심 컴포넌트

데이터 표시

컴포넌트	템플릿	설명
DataGrid	components/datagrid.html.twig	고급 데이터 테이블
Tree	components/tree.html.twig	트리 구조
Table	ui/table.html.twig	기본 테이블

폼

컴포넌트	템플릿 설명	유형
Input	텍스트 입력	테스트 템플릿 test/input.html.twig 참조
Select	드롭다운 선택(검색, 다중 선택 지원)	test/select.html.twig
DatePicker	날짜 선택기	test/date.html.twig
Switch	토글 스위치	test/switch.html.twig
Checkbox	체크박스	test/checkbox.html.twig
Upload	파일 업로드	test/file.html.twig
Radio	라디오 버튼	test/radio.html.twig

피드백

컴포넌트	템플릿	설명
Modal	test/modal.html.twig	모달 창
Drawer	ui/drawer/drawer.html.twig	드로어
Toast	test/alert.html.twig	메시지 알림

내비게이션

컴포넌트	설명
Tabs	탭 페이지(test/tabs.html.twig)
Breadcrumb	브레드크럼(components/breadcrumb.html.twig)
Menu	메뉴(admin/dynamic/menu.html.twig)

폼 테마

폼 렌더링은 커스텀 Twig 테마 기반:

templates/form/
├── ef_ui_form_theme.html.twig              # 기본 폼 테마
└── ef_ui_form_theme_department.html.twig   # 부서 선택기 테마

테스트 페이지

완전한 컴포넌트 예시와 테스트 페이지는 templates/test/에 있습니다(45+ 테스트 템플릿):

• 모든 폼 필드 유형(input, select, date, file, color, password, money, percent 등)
• 레이아웃 컴포넌트(grid, table, tabs, drawer, modal)
• 비즈니스 컴포넌트(employee, department, company 예시)
• 기능 테스트(form_dates_check, choice_fields 등)