@operato/data-grist 9.0.5 → 9.0.7

package/docs/USER_GUIDE.md

@@ -0,0 +1,144 @@
+# Data-Grist 사용자 실전 가이드
+
+이 문서는 data-grist를 실제 프로젝트에 적용하는 모든 사용자(개발자, 기획자, 디자이너 등)를 위한 **실전형 매뉴얼**입니다.
+
+---
+
+## 1. Quick Start (최소 예제)
+
+```html
+<data-grist id="grist"></data-grist>
+```
+
+```js
+const columns = [
+  {
+    type: 'string',
+    name: 'name',
+    header: { renderer: () => '이름' },
+    record: { renderer: v => v, options: {} },
+    handlers: {},
+    label: '이름'
+  },
+  {
+    type: 'number',
+    name: 'age',
+    header: { renderer: () => '나이' },
+    record: { renderer: v => v, options: {} },
+    handlers: {},
+    label: '나이'
+  }
+]
+const data = {
+  records: [
+    { name: '홍길동', age: 30 },
+    { name: '김철수', age: 25 }
+  ]
+}
+const config = {
+  columns,
+  rows: {
+    appendable: true,
+    insertable: true,
+    editable: true,
+    groups: [],
+    totals: [],
+    classifier: () => {},
+    handlers: {}
+  },
+  list: { fields: ['name'], details: [] },
+  tree: {}
+}
+
+document.getElementById('grist').config = config
+document.getElementById('grist').data = data
+```
+
+---
+
+## 2. 실전 config 예시/패턴
+
+- **행 선택/다중 선택**
+  ```js
+  config.rows.selectable = { multiple: true }
+  ```
+- **컬럼별 커스텀 editor/renderer**
+  ```js
+  columns.push({
+    type: 'value-map',
+    name: 'meta',
+    header: { renderer: () => '메타' },
+    record: { renderer: v => v, editor: 'value-map', options: {} },
+    handlers: {},
+    label: '메타'
+  })
+  ```
+- **정렬/필터/페이징**
+  ```js
+  config.sorters = [{ name: 'age', desc: true }]
+  config.filters = { header: true }
+  config.pagination = { page: 1, limit: 20 }
+  ```
+
+---
+
+## 3. 컬럼/옵션/이벤트/에디터별 실무 FAQ
+
+- **Q. 컬럼 editor/renderer 확장은 어떻게?**
+  - grist-editor에서 커스텀 editor/renderer를 등록하고, 컬럼의 `record.editor`에 타입 지정
+- **Q. 행 선택이 안 될 때?**
+  - config.rows.selectable 옵션 확인, data.records의 **selected** 필드 활용
+- **Q. 필터/정렬이 안 먹힐 때?**
+  - config.filters, config.sorters 구조와 컬럼 name 일치 여부 확인
+- **Q. 값 검증/필수 입력은?**
+  - 컬럼의 record.validation, record.mandatory 활용
+- **Q. 집계(합계/평균 등)는?**
+  - 컬럼의 accumulator: 'sum'|'avg'|'count' 등 지정
+
+---
+
+## 4. 트러블슈팅/실전 문제 해결
+
+- **컬럼 렌더링이 깨질 때**: columns 배열 구조, 필수 필드(type, name, header, record 등) 누락 여부 확인
+- **행 추가/삭제가 안 될 때**: config.rows.appendable/insertable 옵션 확인
+- **이벤트가 동작하지 않을 때**: handlers/click 등 이벤트 핸들러 등록 위치와 함수 시그니처 확인
+- **데이터 바인딩이 안 될 때**: data.records 구조, config.columns.name과 데이터 키 일치 여부 확인
+
+---
+
+## 5. 실전 팁/패턴
+
+- 컬럼/행/그리드별로 스타일은 CSS 변수로 커스터마이즈
+- 다국어(i18n)는 setLocale, label에 번역키 사용
+- Storybook, demo 폴더에서 다양한 실전 예시 확인
+- 커스텀 editor/renderer는 grist-editor 확장 구조 참고
+
+---
+
+## 6. 문서/데모/스토리북 링크
+
+- [컬럼/에디터/옵션 상세](./configuration/README.md)
+- [스토리북 예제](../../stories/)
+- [데모 코드](../../demo/)
+
+---
+
+## 7. 자주 묻는 질문(FAQ)
+
+- **Q. data-grist는 어떤 프로젝트에 적합한가?**
+  - 대규모 데이터 테이블, 복잡한 편집/정렬/필터/선택/확장 기능이 필요한 엔터프라이즈 웹앱
+- **Q. 커스텀 editor/renderer는 어떻게 추가?**
+  - grist-editor에서 커스텀 엘리먼트 등록 후, 컬럼 record.editor에 타입 지정
+- **Q. 대용량 데이터/성능 최적화는?**
+  - pagination, limit, 서버사이드 fetchHandler 적극 활용
+
+---
+
+## 8. 실전 적용 사례/패턴
+
+- 복합 폼, 마스터-디테일, 트리/그룹핑, 요약행, 대용량 데이터 관리 등 다양한 실전 패턴은 demo/스토리북에서 확인
+
+---
+
+**이 문서는 실제 사용자(개발자/기획자/디자이너)가 바로 적용할 수 있도록, 실전 예시/FAQ/문제해결/팁 중심으로 작성되었습니다.**
+추가로 궁금한 점/실전 패턴/문제 상황이 있다면 언제든 문의하세요!

package/docs/configuration/README.md

@@ -0,0 +1,68 @@
+# Data-Grist & Grist-Editor Configuration Manual
+
+**data-grist**는 Lit 기반의 웹 컴포넌트 데이터 그리드입니다. **grist-editor**는 data-grist 컬럼의 editor/renderer 확장(커스텀 엘리먼트) 구현체를 제공합니다.
+
+---
+
+## 1. 주요 속성 및 구조 (코드 근거)
+
+- `.data`: 배열. 각 객체가 한 행(row)에 해당합니다.
+- `.columns`: 배열. 각 객체가 한 컬럼(column)에 해당합니다.
+  - 컬럼 객체의 주요 속성:
+    - `type`: string, number, boolean, select, date, text, object 등
+    - `name`: 데이터 키
+    - `header`: 컬럼 헤더명
+    - `editor`: editor 타입(예: 'input', 'value-map', 'parameters' 등)
+    - `renderer`: renderer 타입(예: 'text', 'custom' 등)
+    - `sortable`, `filterable`, `resizable`, `frozen`, `hidden`, `options`, `align`, `tooltip` 등
+- `.options`: 객체. 그리드 전체 동작/스타일/기능 제어
+  - 지원 옵션(코드/문서 근거):
+    - `sortable`, `filterable`, `selectable`, `pageable`, `pageSize`, `rowHeight`, `headerHeight`, `theme`, `loading`, `emptyMessage`, `virtualScroll`, `groupable`, `summary`, `exportable`, `importable`, `contextMenu`, `keyboard`, `autoFit`, `rowSpan`, `colSpan` 등
+
+---
+
+## 2. 이벤트 (코드 근거)
+
+- addEventListener 또는 @event로 등록 가능
+- 주요 이벤트:
+  - `cell-click`, `row-selected`, `edit-start`, `edit-end`, `field-change`, `data-changed`, `sort-changed`, `filter-changed`, `page-changed` 등
+- 이벤트 detail 구조는 `{ row, column, value }`, `{ before, after, record, column, row }` 등
+
+---
+
+## 3. 스타일/테마/다국어 (코드 근거)
+
+- CSS 변수(`--grist-row-height`, `--grist-header-bg` 등)와 `theme` 옵션 지원
+- 다국어(i18n)는 JSON 번역 파일, setLocale, i18n-label 컬럼 등으로 지원
+
+---
+
+## 4. 실제 코드 예시
+
+```js
+const columns = [
+  { type: 'string', name: 'name', header: '이름', sortable: true },
+  { type: 'value-map', name: 'meta', header: '메타정보', editor: 'value-map' }
+]
+const data = [{ name: '홍길동', meta: { key: 'value' } }]
+const options = { sortable: true, theme: 'dark' }
+```
+
+```html
+<data-grist .data="${data}" .columns="${columns}" .options="${options}"></data-grist>
+```
+
+---
+
+## 5. 문서별 실제 역할
+
+- [columns.md] 컬럼 타입, editor/renderer, 컬럼별 옵션, 예시
+- [editors.md] grist-editor에서 구현된 editor별 옵션, 팝업 동작, 사용법
+- [options.md] 실제 지원 옵션 목록, 타입, 예시
+- [events.md] 코드에서 발생하는 이벤트, detail 구조, 등록/활용법
+- [theme.md] CSS 변수, theme 옵션, 스타일 적용법
+- [i18n.md] 번역 파일 구조, setLocale, i18n-label 컬럼
+
+---
+
+**위 내용은 실제 구현 코드와 공식 문서에 근거한 사실만을 정리한 것입니다.**

package/docs/configuration/columns.md

@@ -0,0 +1,391 @@
+# 컬럼 타입 및 컬럼 설정 (실전 상세)
+
+data-grist는 다양한 컬럼 타입을 지원하며, grist-editor를 통해 고급 에디터를 사용할 수 있습니다. 아래는 실제 코드/스토리북/현업 패턴을 바탕으로 한 상세 매뉴얼입니다.
+
+---
+
+## 1. 컬럼 속성 표 (공통)
+
+| 속성명      | 타입/예시                  | 설명/용도                                      |
+| ----------- | -------------------------- | ---------------------------------------------- |
+| type        | 'string'                   | 컬럼 데이터 타입 (필수)                        |
+| name        | 'name'                     | 데이터 키 (필수, data.records의 필드명과 일치) |
+| header      | '이름' 또는 {renderer: fn} | 컬럼 헤더명 또는 커스텀 렌더러                 |
+| editor      | 'input', 'value-map' 등    | 셀 편집기 타입 (grist-editor 확장 포함)        |
+| renderer    | fn 또는 'text' 등          | 셀 표시 방식 커스텀 함수/타입                  |
+| sortable    | true/false                 | 정렬 가능 여부                                 |
+| filter      | true/false/객체            | 필터링 지원/설정                               |
+| validation  | fn                         | 값 검증 함수 (after, before, record, column)   |
+| options     | 객체                       | editor/renderer에 전달할 추가 옵션             |
+| hidden      | true/false                 | 컬럼 숨김 여부                                 |
+| resizable   | true/false                 | 컬럼 너비 조절 가능 여부                       |
+| width       | 120, '20%' 등              | 컬럼 너비(px, %, 함수)                         |
+| align       | 'left'/'right'/'center'    | 셀 정렬                                        |
+| accumulator | 'sum', 'avg' 등            | 집계 함수(합계/평균/카운트 등)                 |
+| imex        | true/false/객체            | import/export 지원/설정                        |
+| multiple    | true/false                 | 다중 선택 지원(예: select 타입)                |
+| rowCount    | true/false                 | 행 번호 표시 여부                              |
+| handlers    | { click, ... }             | 셀/컬럼 이벤트 핸들러                          |
+
+---
+
+## 2. 컬럼 타입별 상세 (editor/renderer/옵션/예시/확장)
+
+### string
+
+- **기본 editor**: input
+- **기본 renderer**: text
+- **추가 옵션**: maxLength, placeholder, defaultValue
+- **예시**
+  ```js
+  { type: 'string', name: 'title', editor: 'input', options: { maxLength: 50, placeholder: '제목 입력' } }
+  ```
+- **custom editor/renderer**
+  ```js
+  { type: 'string', name: 'custom', editor: 'my-editor', renderer: v => v.toUpperCase() }
+  // my-editor는 grist-editor에서 등록 필요
+  ```
+- **실수/문제/해결법**: editor 오타, options 구조 오류 주의
+
+---
+
+### number
+
+- **기본 editor**: input[type=number]
+- **기본 renderer**: text
+- **추가 옵션**: min, max, step, defaultValue
+- **예시**
+  ```js
+  { type: 'number', name: 'price', editor: 'input', options: { min: 0, max: 10000, step: 100 } }
+  ```
+- **custom editor/renderer**
+  ```js
+  { type: 'number', name: 'custom', editor: 'my-number-editor', renderer: v => v.toLocaleString() }
+  ```
+- **실수/문제/해결법**: min/max/step 누락 시 입력 제약 없음
+
+---
+
+### boolean
+
+- **기본 editor**: checkbox
+- **기본 renderer**: 체크박스/아이콘
+- **예시**
+  ```js
+  { type: 'boolean', name: 'active', editor: 'checkbox' }
+  ```
+- **custom renderer**
+  ```js
+  { type: 'boolean', name: 'active', renderer: v => v ? '✅' : '❌' }
+  ```
+
+---
+
+### select (실전 완전 정리)
+
+- **기본 editor**: select
+- **기본 renderer**: text/label
+- **필수 옵션**: options (아래 다양한 방식 지원)
+- **다중 선택**: multiple: true
+
+#### 1. 문자열 배열
+
+```js
+{
+  type: 'select',
+  name: 'status',
+  options: { options: ['진행중', '완료', '보류'] }
+}
+// label, value 모두 '진행중', '완료', '보류'
+```
+
+#### 2. 객체 배열
+
+```js
+{
+  type: 'select',
+  name: 'priority',
+  options: {
+    options: [
+      { name: '긴급', value: 1 },
+      { display: '보통', value: 2 },
+      { name: '낮음', value: 3 }
+    ]
+  }
+}
+// label: name 또는 display, value: value
+```
+
+#### 3. 함수 반환 (동적 옵션)
+
+```js
+{
+  type: 'select',
+  name: 'category',
+  options: {
+    options: (value, column, record, rowIndex, field) => {
+      // 예: record에 따라 옵션 다르게
+      return record.type === 'A' ? ['X', 'Y'] : ['Z']
+    }
+  }
+}
+```
+
+#### 4. Promise 반환 (비동기 옵션)
+
+```js
+{
+  type: 'select',
+  name: 'dynamic',
+  options: {
+    options: async () => {
+      const result = await fetch('/api/options').then(res => res.json())
+      return result // ['A', 'B'] 또는 [{name, value}]
+    }
+  }
+}
+```
+
+#### 5. rowOptionField (행별 옵션)
+
+```js
+{
+  type: 'select',
+  name: 'category',
+  editor: 'select',
+  options: { options: ['A', 'B', 'C'] },
+  rowOptionField: 'categoryOptions'
+}
+// → record.categoryOptions에서 옵션을 가져옴
+```
+
+#### 6. 다중 선택
+
+```js
+{
+  type: 'select',
+  name: 'tags',
+  options: { options: ['A', 'B', 'C'] },
+  multiple: true
+}
+// value는 배열로 전달됨
+```
+
+#### 7. custom renderer (label/value 매핑, 이모지 등)
+
+```js
+{
+  type: 'select',
+  name: 'priority',
+  options: { options: [ { name: '긴급', value: 1 }, { name: '보통', value: 2 } ] },
+  renderer: v => v === 1 ? '🔥 긴급' : v === 2 ? '⚡ 보통' : v
+}
+```
+
+#### 8. 실전 팁/문제/해결법
+
+- options는 **문자열 배열/객체 배열/함수/Promise** 모두 지원
+- label은 name 또는 display, value는 value
+- 동적/비동기 옵션 완벽 지원
+- rowOptionField로 행별 옵션도 가능
+- multiple 사용 시 value는 배열
+- options 구조가 잘못되면 드롭다운이 비거나 렌더링 오류
+- value와 label이 다르면 renderer로 표시값 커스텀 권장
+- filter/sortable 옵션도 함께 사용 가능
+
+#### 9. 예시 모음
+
+```js
+// 단일 선택, label/value 다름
+{
+  type: 'select',
+  name: 'role',
+  options: {
+    options: [
+      { name: '관리자', value: 'admin' },
+      { name: '사용자', value: 'user' }
+    ]
+  },
+  renderer: v => v === 'admin' ? '👑 관리자' : '👤 사용자'
+}
+
+// 다중 선택
+{
+  type: 'select',
+  name: 'tags',
+  options: { options: ['A', 'B', 'C'] },
+  multiple: true
+}
+
+// 동적 옵션
+{
+  type: 'select',
+  name: 'dynamic',
+  options: { options: (v, c, r) => r.type === 'A' ? ['X', 'Y'] : ['Z'] }
+}
+
+// 비동기 옵션
+{
+  type: 'select',
+  name: 'async',
+  options: { options: async () => await fetch('/api/options').then(r => r.json()) }
+}
+```
+
+---
+
+### date
+
+- **기본 editor**: date-picker
+- **기본 renderer**: yyyy-MM-dd
+- **추가 옵션**: min, max, format
+- **예시**
+  ```js
+  { type: 'date', name: 'due', editor: 'date-picker', options: { min: '2023-01-01', max: '2024-12-31' } }
+  ```
+
+---
+
+### text
+
+- **기본 editor**: textarea
+- **기본 renderer**: text
+- **추가 옵션**: maxLength, rows, placeholder
+- **예시**
+  ```js
+  { type: 'text', name: 'desc', editor: 'textarea', options: { rows: 3, maxLength: 200 } }
+  ```
+
+---
+
+### object
+
+- **기본 editor**: json-editor
+- **기본 renderer**: JSON.stringify
+- **예시**
+  ```js
+  { type: 'object', name: 'meta', editor: 'json-editor' }
+  ```
+
+---
+
+### value-map (grist-editor 확장)
+
+- **editor**: value-map
+- **필수 옵션**: valuetype, defaultValue
+- **예시**
+  ```js
+  { type: 'value-map', name: 'meta', editor: 'value-map', options: { valuetype: 'number', defaultValue: 0 } }
+  ```
+- **custom renderer**
+  ```js
+  { type: 'value-map', name: 'meta', renderer: v => Object.keys(v).length + '개' }
+  ```
+
+---
+
+### parameters (grist-editor 확장)
+
+- **editor**: parameters
+- **필수 옵션**: spec, context
+- **예시**
+  ```js
+  { type: 'parameters', name: 'params', editor: 'parameters', options: { spec: {...}, context: {...} } }
+  ```
+
+---
+
+### i18n-label (grist-editor 확장)
+
+- **editor**: i18n-label
+- **필수 옵션**: languages
+- **예시**
+  ```js
+  { type: 'i18n-label', name: 'label', editor: 'i18n-label', options: { languages: ['ko', 'en'] } }
+  ```
+
+---
+
+### 기타(grist-editor 확장)
+
+- **hashtags**: editor: hashtags, options: 없음/필수 없음
+- **crontab**: editor: crontab, options: 없음/필수 없음
+- **duration**: editor: duration, options: 없음/필수 없음
+- **quantifier**: editor: quantifier, options: 없음/필수 없음
+- **signature**: editor: signature, options: 없음/필수 없음
+- **data**: editor: data, options: 없음/필수 없음
+
+---
+
+## 3. editor/renderer custom 등록/사용법
+
+- **함수형 renderer**
+  ```js
+  { type: 'string', name: 'desc', renderer: v => v && v.length > 10 ? v.slice(0, 10) + '...' : v }
+  ```
+- **문자열 editor/renderer**
+  ```js
+  { type: 'string', name: 'desc', editor: 'input', renderer: 'text' }
+  ```
+- **커스텀 editor/renderer**
+  ```js
+  // grist-editor에서 'my-editor' 등록 후 사용
+  { type: 'string', name: 'custom', editor: 'my-editor', renderer: 'my-renderer' }
+  ```
+- **등록 방법**
+  - grist-editor 패키지에서 custom editor/renderer를 등록 후, 컬럼 editor/renderer에 타입명 지정
+  - 예: `customElements.define('my-editor', class extends HTMLElement { ... })`
+
+---
+
+## 4. 실전 팁/문제/해결법
+
+- editor/renderer 등록 시 타입 오타 주의
+- 필수 옵션 누락 시 동작 오류(특히 select, value-map, parameters, i18n-label)
+- options 구조는 editor마다 다르므로 반드시 공식 소스/스토리북 참고
+- 커스텀 editor/renderer는 grist-editor에서 등록 후 사용
+- data.records의 키와 columns의 name이 반드시 일치해야 함
+- 컬럼 name/type/header/record/handlers 등 필수 속성 누락 주의
+
+---
+
+## 5. 참고/스토리북/데모
+
+- 각 editor/renderer별 옵션/동작은 grist-editor 소스/스토리북에서 확인
+- demo/스토리북에서 실전 config/패턴/문제 상황 예시 다수 제공
+
+```js
+const columns = [
+  {
+    type: 'string',
+    name: 'name',
+    header: '이름',
+    sortable: true,
+    filter: true,
+    editor: 'input',
+    renderer: v => v,
+    width: 120,
+    align: 'left',
+    validation: (after, before) => !!after,
+    options: {},
+    handlers: { click: (columns, data, column, record) => console.log(record) }
+  },
+  {
+    type: 'value-map',
+    name: 'meta',
+    header: '메타정보',
+    editor: 'value-map',
+    options: { valuetype: 'number', defaultValue: 0 }
+  },
+  {
+    type: 'i18n-label',
+    name: 'label',
+    header: '다국어',
+    editor: 'i18n-label'
+  }
+]
+```
+
+```html
+<data-grist .columns="${columns}"></data-grist>
+```

package/docs/configuration/editors.md

@@ -0,0 +1,53 @@
+# 컬럼 에디터 상세
+
+grist-editor에서 제공하는 주요 에디터와 옵션 설명입니다.
+
+## value-map
+
+- Key-Value 형태의 데이터를 입력/수정할 수 있는 팝업 에디터
+- 옵션:
+  - `valuetype`: 값의 타입 (string, number 등)
+  - `defaultValue`: 기본값
+
+## value-ranges
+
+- 값의 범위를 여러 구간으로 설정할 수 있는 에디터
+- 옵션:
+  - `valuetype`: 값의 타입
+  - `defaultValue`: 기본값
+
+## parameters
+
+- 복합 파라미터(여러 속성)를 한 번에 입력할 수 있는 빌더형 에디터
+- 옵션:
+  - `spec`: 파라미터 스펙(필드 정의)
+  - `context`: 컨텍스트 객체
+
+## partition-keys
+
+- 파티션 키 목록을 입력하는 에디터
+
+## i18n-label
+
+- 다국어 라벨을 입력/수정하는 에디터
+- 옵션:
+  - `languages`: 지원 언어 목록
+
+## crontab
+
+- cron 스케줄 문자열을 입력하는 에디터
+
+## duration
+
+- 기간/시간을 입력하는 에디터
+
+## 기타
+
+- quantifier, signature, hashtags 등 특수 목적 에디터도 지원
+
+---
+
+## 에디터 공통 사용법
+
+- 각 에디터는 팝업 형태로 동작하며, 값 변경 시 `field-change` 이벤트를 발생시킵니다.
+- editor/renderer를 직접 확장하려면 grist-editor의 커스텀 엘리먼트 구조를 참고하세요.

package/docs/configuration/events.md

@@ -0,0 +1,44 @@
+# 이벤트(Event)
+
+data-grist는 다양한 커스텀 이벤트를 지원하여, 그리드의 동작을 외부에서 제어하거나 반응할 수 있습니다.
+
+## 1. 주요 지원 이벤트
+
+| 이벤트명       | 설명                   | detail 구조 예시                         |
+| -------------- | ---------------------- | ---------------------------------------- |
+| cell-click     | 셀 클릭 시 발생        | `{ row, column, value }`                 |
+| row-selected   | 행 선택 시 발생        | `{ row, selectedRows }`                  |
+| edit-start     | 셀 편집 시작 시 발생   | `{ row, column, value }`                 |
+| edit-end       | 셀 편집 종료 시 발생   | `{ row, column, value, oldValue }`       |
+| field-change   | 에디터 값 변경 시 발생 | `{ before, after, record, column, row }` |
+| data-changed   | 데이터 전체 변경 시    | `{ data }`                               |
+| sort-changed   | 정렬 상태 변경 시      | `{ sorters }`                            |
+| filter-changed | 필터 상태 변경 시      | `{ filters }`                            |
+| page-changed   | 페이지 이동 시         | `{ page, pageSize }`                     |
+
+## 2. 이벤트 핸들러 등록법
+
+### addEventListener 방식
+
+```js
+grist.addEventListener('cell-click', e => {
+  console.log('Clicked cell:', e.detail)
+})
+```
+
+### 속성 바인딩 방식 (Lit 등)
+
+```html
+<data-grist @cell-click="${onCellClick}"></data-grist>
+```
+
+## 3. 커스텀 이벤트 활용 팁
+
+- `field-change` 이벤트는 에디터 팝업에서 값이 바뀔 때 발생하며, undo/redo 구현에도 활용 가능
+- `row-selected` 이벤트로 선택된 행의 데이터 추출 가능
+- `edit-start`/`edit-end`로 편집 상태 UI 제어 가능
+
+## 4. 참고
+
+- 이벤트 detail 구조는 상황에 따라 확장될 수 있으니, 실제 e.detail을 콘솔로 확인하는 것이 좋습니다.
+- Storybook, demo 폴더에서 다양한 이벤트 활용 예시를 참고하세요.