@ceed/ads 1.13.4 → 1.15.0-next.2

package/dist/components/data-display/DataTable.md

@@ -0,0 +1,452 @@
+# DataTable
+
+DataTable은 구조화된 데이터를 효율적으로 표시하고 상호작용할 수 있는 고급 테이블 컴포넌트입니다. 정렬, 편집, 페이지네이션, 선택 등 다양한 기능을 제공합니다.
+
+## 기본 사용법
+
+```tsx
+<DataTable
+  onPaginationModelChange={fn()}
+  onSelectionModelChange={fn()}
+  onRowClick={fn()}
+  columns={[{
+  field: 'dessert',
+  headerName: 'Dessert (100g serving)',
+  width: '40%'
+}, {
+  field: 'calories',
+  headerName: 'Calories',
+  type: 'number'
+}, {
+  field: 'fat',
+  headerName: 'Fat (g)',
+  type: 'number'
+}, {
+  field: 'carbs',
+  headerName: 'Carbs (g)',
+  type: 'number'
+}, {
+  field: 'protein',
+  headerName: 'Protein (g)',
+  type: 'number'
+}]}
+  rows={rows}
+/>
+```
+
+| Field    | Description | Default |
+| -------- | ----------- | ------- |
+| editMode | —           | false   |
+
+```tsx
+import { DataTable } from '@ceed/ads';
+
+const columns = [
+  { field: 'dessert', headerName: 'Dessert (100g serving)', width: '40%' },
+  { field: 'calories', headerName: 'Calories', type: 'number' },
+  { field: 'fat', headerName: 'Fat (g)', type: 'number' },
+  { field: 'carbs', headerName: 'Carbs (g)', type: 'number' },
+  { field: 'protein', headerName: 'Protein (g)', type: 'number' },
+];
+
+const rows = [
+  { id: 1, dessert: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },
+  { id: 2, dessert: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 },
+  // ... more data
+];
+
+<DataTable columns={columns} rows={rows} />;
+```
+
+## 주요 기능
+
+### 행 상호작용
+
+#### 행 호버 효과
+
+```tsx
+<DataTable {...args} />
+```
+
+호버 효과를 통해 사용자가 현재 포커스하고 있는 행을 명확하게 표시할 수 있습니다.
+
+```tsx
+<DataTable columns={columns} rows={rows} hoverRow={true} />
+```
+
+#### 체크박스 선택
+
+```tsx
+<DataTable {...args} />
+```
+
+여러 행을 선택할 수 있는 체크박스 기능을 제공합니다.
+
+```tsx
+<DataTable
+  columns={columns}
+  rows={rows}
+  checkboxSelection={true}
+  selectionModel={selectedRows}
+  onSelectionModelChange={setSelectedRows}
+/>
+```
+
+### 백오피스 스타일 테이블
+
+```tsx
+<DataTable {...args} selectionModel={selectionModel} onSelectionModelChange={useCallback((v: any, ...params: any[]) => {
+  setSelectionModel(v);
+  args.onSelectionModelChange?.(v, ...params);
+}, [args.onSelectionModelChange])} />
+```
+
+관리 도구나 대시보드에서 사용하기 적합한 고급 스타일링과 기능을 제공합니다:
+
+- 고정 헤더 (stickyHeader)
+- 스트라이프 패턴 (stripe="even")
+- 텍스트 줄바꿈 방지 (noWrap)
+- 커스텀 툴바
+
+```tsx
+<DataTable
+  columns={columns}
+  rows={rows}
+  checkboxSelection
+  hoverRow
+  noWrap
+  stripe="even"
+  stickyHeader
+  slots={{
+    toolbar: () => (
+      <Stack direction="row" gap={1}>
+        <Button variant="plain" color="neutral" size="sm">
+          Action
+        </Button>
+        <Button variant="plain" color="danger" size="sm">
+          Delete
+        </Button>
+      </Stack>
+    ),
+  }}
+  slotProps={{
+    background: { style: { height: '300px' } },
+  }}
+/>
+```
+
+### 로딩 상태
+
+```tsx
+<DataTable {...args} />
+```
+
+데이터 로딩 중일 때의 상태를 표시합니다.
+
+```tsx
+<DataTable columns={columns} rows={rows} loading={true} />
+```
+
+### 페이지네이션
+
+```tsx
+<DataTable
+  onPaginationModelChange={fn()}
+  onSelectionModelChange={fn()}
+  onRowClick={fn()}
+  columns={[{
+  field: 'dessert',
+  headerName: 'Dessert (100g serving)',
+  width: '40%'
+}, {
+  field: 'calories',
+  headerName: 'Calories',
+  type: 'number'
+}, {
+  field: 'fat',
+  headerName: 'Fat (g)',
+  type: 'number'
+}, {
+  field: 'carbs',
+  headerName: 'Carbs (g)',
+  type: 'number'
+}, {
+  field: 'protein',
+  headerName: 'Protein (g)',
+  type: 'number'
+}]}
+  rows={[...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows, ...rows].map((row, index) => ({
+  ...row,
+  id: index
+}))}
+  pagination
+  noWrap
+  slotProps={{
+  background: {
+    style: {
+      height: '300px'
+    }
+  }
+}}
+/>
+```
+
+대량의 데이터를 페이지 단위로 나누어 표시할 수 있습니다.
+
+```tsx
+<DataTable
+  columns={columns}
+  rows={rows}
+  pagination={true}
+  paginationModel={{ page: 0, pageSize: 20 }}
+  onPaginationModelChange={setPaginationModel}
+/>
+```
+
+### 빈 데이터 상태
+
+```tsx
+<DataTable
+  onPaginationModelChange={fn()}
+  onSelectionModelChange={fn()}
+  onRowClick={fn()}
+  columns={[{
+  field: 'dessert',
+  headerName: 'Dessert (100g serving)',
+  width: '40%'
+}, {
+  field: 'calories',
+  headerName: 'Calories',
+  type: 'number'
+}, {
+  field: 'fat',
+  headerName: 'Fat (g)',
+  type: 'number'
+}, {
+  field: 'carbs',
+  headerName: 'Carbs (g)',
+  type: 'number'
+}, {
+  field: 'protein',
+  headerName: 'Protein (g)',
+  type: 'number'
+}]}
+  rows={[]}
+  pagination
+  noWrap
+  slotProps={{
+  background: {
+    style: {
+      height: '300px'
+    }
+  }
+}}
+/>
+```
+
+데이터가 없을 때의 상태를 적절하게 표시합니다.
+
+## 고급 기능
+
+### 커스텀 셀 렌더링
+
+```tsx
+<DataTable rows={useMemo(() => [...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3].map((row, i) => ({
+  ...row,
+  id: i + 1
+})), [])} columns={columns} checkboxSelection stickyHeader stripe="even" noWrap slotProps={{
+  background: {
+    style: {
+      height: '600px'
+    }
+  }
+}} />
+```
+
+각 셀의 내용을 커스터마이징할 수 있습니다:
+
+```tsx
+const columns = [
+  { field: 'id', headerName: 'ID' },
+  {
+    field: 'dessert',
+    renderCell: ({ value, row }) => <Link href={row.storeLink}>{value}</Link>,
+  },
+  {
+    field: 'location',
+    renderCell: ({ value }) => value.join(', '),
+  },
+  {
+    field: 'expectedSales',
+    renderCell: ({ value }) => (value ? `$${value.toFixed(2)}` : ''),
+  },
+];
+```
+
+### 편집 가능한 테이블
+
+```tsx
+<div>
+  <DataTable rows={rows3} columns={columns} checkboxSelection={false} noWrap editMode />
+  <Button onClick={() => {
+    console.log(editedRows);
+    setIsCellEditable(true);
+  }}>
+  Submit
+</Button>
+</div>
+```
+
+인라인 편집 기능을 제공하며, 다양한 입력 타입을 지원합니다:
+
+- **text**: 기본 텍스트 입력
+- **number/currency**: 숫자/통화 입력
+- **select**: 드롭다운 선택
+- **autocomplete**: 자동완성 입력
+- **date**: 날짜 선택
+- **longText**: 긴 텍스트 입력
+- **link**: 링크 렌더링
+
+```tsx
+const columns = [
+  {
+    field: 'dessert',
+    type: 'autocomplete',
+    componentProps: () => ({
+      options: ['Frozen yoghurt', 'Ice cream sandwich', 'Eclair'],
+    }),
+    required: true,
+    onCellEditStop: handleCellEdit,
+  },
+  {
+    field: 'status',
+    type: 'select',
+    componentProps: {
+      options: ['Opened', 'Preparing', 'Closed'],
+    },
+    onCellEditStop: handleCellEdit,
+  },
+  {
+    field: 'expectedSales',
+    type: 'currency',
+    onCellEditStop: handleCellEdit,
+  },
+];
+
+<DataTable rows={rows} columns={columns} editMode={true} />;
+```
+
+### 조건부 편집
+
+```tsx
+<div>
+  <Typography level="title-lg" textColor="text.secondary">
+    expectedSales 100초과만 수정 가능
+  </Typography>
+  <DataTable rows={rows} columns={columns} checkboxSelection={false} noWrap editMode />
+  <Button onClick={() => {
+    console.log(rows);
+  }}>
+  Submit
+</Button>
+</div>
+```
+
+특정 조건에 따라 셀의 편집 가능 여부를 결정할 수 있습니다:
+
+```tsx
+const columns = [
+  {
+    field: 'dessert',
+    type: 'autocomplete',
+    isCellEditable: ({ row }) => row.expectedSales > 100,
+    onCellEditStop: handleRowChange,
+  },
+  {
+    field: 'expectedSales',
+    type: 'currency',
+    isCellEditable: true, // 항상 편집 가능
+    onCellEditStop: handleRowChange,
+  },
+  {
+    field: 'note',
+    type: 'longText',
+    isCellEditable: ({ row }) => row.expectedSales > 100,
+  },
+];
+```
+
+## 정렬 기능
+
+### 기본 정렬
+
+```tsx
+<DataTable rows={rows4} columns={columns} />
+```
+
+열 헤더를 클릭하여 데이터를 정렬할 수 있습니다. 오름차순 → 내림차순 → 정렬 해제 순서로 동작합니다.
+
+```tsx
+const columns = [
+  { field: 'id', headerName: 'ID' },
+  { field: 'number', headerName: 'Number Sort', type: 'number' },
+  { field: 'string', headerName: 'String Sort' },
+  { field: 'date', headerName: 'Date Sort', renderCell: ({ value }) => value.toLocaleDateString() },
+  {
+    field: 'object',
+    headerName: 'Object Sort',
+    renderCell: ({ value }) => value.age,
+    type: 'number',
+    sortComparator: ({ rowA, rowB }) => rowA.object.age - rowB.object.age,
+  },
+];
+```
+
+### 커스텀 정렬 순서
+
+```tsx
+<DataTable rows={rows4} columns={columns} sortOrder={['desc', 'asc']} />
+```
+
+기본 정렬 순서를 변경할 수 있습니다:
+
+```tsx
+<DataTable
+  rows={rows}
+  columns={columns}
+  sortOrder={['desc', 'asc']} // 내림차순 먼저
+/>
+```
+
+### 정렬 비활성화
+
+```tsx
+<DataTable rows={rows4} columns={columns} />
+```
+
+특정 열의 정렬을 비활성화할 수 있습니다:
+
+```tsx
+const columns = [
+  { field: 'id', headerName: 'ID' },
+  { field: 'number', headerName: 'Number Sort', type: 'number', sortable: false },
+];
+```
+
+### 열별 정렬 순서
+
+```tsx
+<DataTable rows={rows4} columns={columns} />
+```
+
+각 열마다 다른 정렬 순서를 지정할 수 있습니다.
+
+## 실시간 데이터 업데이트
+
+```tsx
+<DataTable rows={editRows} columns={columns} checkboxSelection={false} noWrap />
+```
+
+테이블 데이터를 실시간으로 업데이트하고 변경 사항을 즉시 반영할 수 있습니다.
+
+DataTable은 현대적인 데이터 관리 애플리케이션에서 요구되는 모든 기능을 제공하는 강력한 컴포넌트입니다. 간단한 데이터 표시부터 복잡한 편집 가능한 테이블까지 다양한 용도로 활용할 수 있습니다.

package/dist/components/data-display/InfoSign.md

@@ -0,0 +1,160 @@
+# InfoSign
+
+## Introduction
+
+InfoSign 컴포넌트는 사용자에게 추가 정보를 제공하기 위한 툴팁 아이콘입니다. 물음표 아이콘을 클릭하거나 호버할 때 상세한 설명이나 도움말을 표시할 수 있습니다. 폼 필드, 설정 항목, 복잡한 기능에 대한 설명을 제공할 때 유용합니다.
+
+```tsx
+<InfoSign
+  message={"Sarah Davis, John Doe\nJohn Doe, John Doe, John Doe, John Doe, John Doe, John Doe, John Doe, John Doe, John Doe, John DoeJohn Doe, John Doe, John Doe, John Doe, John Doe"}
+  placement="top"
+/>
+```
+
+| Field     | Description | Default |
+| --------- | ----------- | ------- |
+| placement | —           | "top"   |
+
+## Usage
+
+```tsx
+import { InfoSign } from '@ceed/ads';
+
+function MyComponent() {
+  return (
+    <div>
+      <label>
+        복잡한 설정 항목
+        <InfoSign
+          message="이 설정은 시스템 전체 성능에 영향을 줄 수 있습니다. 변경하기 전에 관리자와 상의하세요."
+        />
+      </label>
+    </div>
+  );
+}
+```
+
+## Examples
+
+### Basic Usage
+
+가장 기본적인 InfoSign 사용법입니다.
+
+```tsx
+<InfoSign
+  message={"Sarah Davis, John Doe\nJohn Doe, John Doe, John Doe, John Doe, John Doe, John Doe, John Doe, John Doe, John Doe, John DoeJohn Doe, John Doe, John Doe, John Doe, John Doe"}
+  placement="top"
+/>
+```
+
+## Common Use Cases
+
+### Form Field Help
+
+```tsx
+<FormControl>
+  <FormLabel>
+    비밀번호 복잡도
+    <InfoSign
+      message="비밀번호는 최소 8자 이상이며, 대문자, 소문자, 숫자, 특수문자를 포함해야 합니다."
+      placement="top"
+    />
+  </FormLabel>
+  <Input type="password" />
+</FormControl>
+```
+
+### Settings Explanation
+
+```tsx
+<Stack spacing={2}>
+  <Box>
+    <Typography level="title-sm">
+      자동 저장
+      <InfoSign
+        message="이 기능을 활성화하면 5분마다 자동으로 작업 내용이 저장됩니다."
+        placement="right"
+      />
+    </Typography>
+    <Switch />
+  </Box>
+</Stack>
+```
+
+### Complex Data Explanation
+
+```tsx
+<Card>
+  <CardContent>
+    <Typography level="title-md">
+      처리량 지표
+      <InfoSign
+        message="처리량은 최근 24시간 동안의 평균 요청 수를 나타냅니다. 이 값이 높을수록 시스템이 더 많은 작업을 처리하고 있다는 의미입니다."
+        placement="bottom"
+      />
+    </Typography>
+    <Typography level="h2">1,234 req/min</Typography>
+  </CardContent>
+</Card>
+```
+
+### Table Header Help
+
+```tsx
+<Table>
+  <thead>
+    <tr>
+      <th>
+        사용자 ID
+        <InfoSign message="시스템에서 자동 생성된 고유 식별자입니다." />
+      </th>
+      <th>
+        마지막 활동
+        <InfoSign message="사용자가 마지막으로 로그인하거나 활동한 시간입니다." />
+      </th>
+      <th>상태</th>
+    </tr>
+  </thead>
+</Table>
+```
+
+## Props
+
+### placement
+
+툴팁이 나타나는 위치를 설정할 수 있습니다.
+
+```tsx
+<InfoSign placement="top" message="위쪽에 표시" />
+<InfoSign placement="bottom" message="아래쪽에 표시" />
+<InfoSign placement="left" message="왼쪽에 표시" />
+<InfoSign placement="right" message="오른쪽에 표시" />
+```
+
+### message
+
+표시할 메시지 내용입니다. 긴 텍스트도 지원합니다.
+
+```tsx
+<InfoSign
+  message="여러 줄로 된 긴 설명문도 표시할 수 있습니다.\n줄바꿈도 지원되므로 상세한 설명을 제공할 수 있습니다."
+/>
+```
+
+## Best Practices
+
+1. **간결한 메시지**: 핵심 정보만 포함하여 사용자가 빠르게 이해할 수 있도록 합니다.
+
+2. **적절한 배치**: 설명하려는 요소 바로 옆에 배치하여 연관성을 명확히 합니다.
+
+3. **일관된 사용**: 비슷한 성격의 정보에는 일관되게 InfoSign을 사용합니다.
+
+4. **과도한 사용 금지**: 모든 요소에 InfoSign을 붙이면 인터페이스가 복잡해집니다.
+
+## Accessibility
+
+- InfoSign은 키보드 탐색이 가능합니다
+- 스크린 리더가 메시지 내용을 읽을 수 있습니다
+- ARIA 라벨이 자동으로 적용됩니다
+
+InfoSign은 사용자에게 필요한 추가 정보를 제공하면서도 인터페이스를 깔끔하게 유지하는 데 도움이 되는 유용한 컴포넌트입니다.

package/dist/components/data-display/Markdown.md

@@ -0,0 +1,17 @@
+# Markdown
+
+## Introduction
+
+```tsx
+<Markdown
+  content="This is markdown with **bold text** and *italic text* and ||accent color||"
+/>
+```
+
+| Field             | Description | Default |
+| ----------------- | ----------- | ------- |
+| content           | —           | —       |
+| defaultLevel      | —           | —       |
+| defaultLinkAction | —           | —       |
+| accentColor       | —           | —       |
+| textAlign         | —           | —       |