# 핵심 기능 - Human documentation: [https://docs.univer.ai/ko-KR/guides/sheets/features/core](https://docs.univer.ai/ko-KR/guides/sheets/features/core) - Agent Markdown: [https://docs.univer.ai/ko-KR/guides/sheets/features/core.md](https://docs.univer.ai/ko-KR/guides/sheets/features/core.md) - Requested language: `ko-KR` - Content language: `ko-KR` - Documentation version: `1.0.4` - Source: [sheets/features/core/index.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/core/index.ko-KR.mdx) --- #### Package metadata ```json { "mobile": true, "preset": [ { "client": "@univerjs/preset-sheets-core", "locale": "@univerjs/preset-sheets-core/locales/en-US", "style": "@univerjs/preset-sheets-core/lib/index.css" } ], "plugins": [ { "client": "@univerjs/core" }, { "client": "@univerjs/engine-formula" }, { "client": "@univerjs/engine-render" }, { "client": "@univerjs/design", "locale": "@univerjs/design/locale/en-US", "style": "@univerjs/design/lib/index.css" }, { "client": "@univerjs/ui", "locale": "@univerjs/ui/locale/en-US", "style": "@univerjs/ui/lib/index.css" }, { "client": "@univerjs/docs" }, { "client": "@univerjs/docs-ui", "locale": "@univerjs/docs-ui/locale/en-US", "style": "@univerjs/docs-ui/lib/index.css", "facade": "@univerjs/docs-ui/facade" }, { "client": "@univerjs/sheets", "locale": "@univerjs/sheets/locale/en-US", "facade": "@univerjs/sheets/facade" }, { "client": "@univerjs/sheets-ui", "locale": "@univerjs/sheets-ui/locale/en-US", "style": "@univerjs/sheets-ui/lib/index.css", "facade": "@univerjs/sheets-ui/facade" }, { "client": "@univerjs/sheets-formula", "facade": "@univerjs/sheets-formula/facade" }, { "client": "@univerjs/sheets-formula-ui", "locale": "@univerjs/sheets-formula-ui/locale/en-US", "style": "@univerjs/sheets-formula-ui/lib/index.css" }, { "client": "@univerjs/sheets-numfmt", "facade": "@univerjs/sheets-numfmt/facade" }, { "client": "@univerjs/sheets-numfmt-ui", "locale": "@univerjs/sheets-numfmt-ui/locale/en-US", "style": "@univerjs/sheets-numfmt-ui/lib/index.css" } ], "server": false } ``` Univer Sheets의 핵심 기능에는 스프레드시트 편집기, 수식 엔진, 렌더링 엔진, 숫자 서식 엔진, 디자인 시스템, UI 컴포넌트 라이브러리가 포함됩니다. 이 기능들은 다양한 형식과 복잡한 작업을 지원하는 강력한 스프레드시트 처리 플랫폼을 구성합니다. ## 기능 Univer Sheets의 핵심 기능은 다음과 같습니다. * **스프레드시트 렌더링**: 커서와 선택 영역 표시를 포함하여 Univer Sheets 렌더링을 지원합니다. * **셀 스타일**: 글꼴, 색상, 테두리, 맞춤 등 스프레드시트 셀의 스타일을 지정할 수 있습니다. * **수식 계산**: 수학, 통계, 텍스트, 날짜 함수를 비롯한 거의 모든 Excel 함수를 추가하고 계산할 수 있습니다. * **숫자 서식**: 통화, 백분율, 날짜 등 스프레드시트의 숫자 서식을 지정할 수 있습니다. * **눈금선 및 틀 고정**: 눈금선 표시와 틀 고정을 지원하여 대규모 데이터도 쉽게 보고 편집할 수 있습니다. * **기본 스타일**: 기본 글꼴, 크기, 색상 등 스프레드시트의 기본 스타일을 설정할 수 있습니다. * **플러그인 시스템**: 수식, 이미지, 차트 등의 사용자 지정 플러그인을 지원합니다. 이는 Univer 핵심 아키텍처의 주요 기능이기도 합니다. ## 플러그인 모드 ### 설치 #### npm ```bash npm install @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui ``` #### pnpm ```bash pnpm add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui ``` #### yarn ```bash yarn add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui ``` #### bun ```bash bun add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui ``` ### 사용법 ```typescript import { LocaleType, mergeLocales, Univer } from '@univerjs/core' import DesignEnUS from '@univerjs/design/locale/en-US' import { UniverDocsPlugin } from '@univerjs/docs' import { UniverDocsUIPlugin } from '@univerjs/docs-ui' import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US' import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula' import { UniverRenderEnginePlugin } from '@univerjs/engine-render' import { UniverSheetsPlugin } from '@univerjs/sheets' import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula' import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui' import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US' import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt' import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui' import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US' import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui' import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US' import SheetsEnUS from '@univerjs/sheets/locale/en-US' import { UniverUIPlugin } from '@univerjs/ui' import UIEnUS from '@univerjs/ui/locale/en-US' import '@univerjs/design/lib/index.css' import '@univerjs/ui/lib/index.css' import '@univerjs/docs-ui/lib/index.css' import '@univerjs/sheets-ui/lib/index.css' import '@univerjs/sheets-formula-ui/lib/index.css' import '@univerjs/sheets-numfmt-ui/lib/index.css' import '@univerjs/engine-formula/facade' import '@univerjs/ui/facade' import '@univerjs/docs-ui/facade' import '@univerjs/sheets/facade' import '@univerjs/sheets-ui/facade' import '@univerjs/sheets-formula/facade' import '@univerjs/sheets-numfmt/facade' const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DesignEnUS, UIEnUS, DocsUIEnUS, SheetsEnUS, SheetsUIEnUS, SheetsFormulaUIEnUS, SheetsNumfmtUIEnUS, ), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverFormulaEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: 'app', }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) univer.registerPlugin(UniverSheetsPlugin) univer.registerPlugin(UniverSheetsUIPlugin) univer.registerPlugin(UniverSheetsFormulaPlugin) univer.registerPlugin(UniverSheetsFormulaUIPlugin) univer.registerPlugin(UniverSheetsNumfmtPlugin) univer.registerPlugin(UniverSheetsNumfmtUIPlugin) ``` ### 플러그인 및 구성 #### @univerjs/core 이 플러그인은 Univer의 핵심 라이브러리로, Univer 인스턴스 생성, 테마, 언어 등의 기본 기능을 제공합니다. ```typescript interface UniverParameter { // Univer instance theme, default is `defaultTheme` theme: IStyleSheet // Whether to use dark mode, default is false darkMode?: boolean // The locale of the Univer instance locale: LocaleType // The locale objects to use, with keys as locale types and values as corresponding locale objects locales: ILocales // The log level of the Univer instance logLevel?: LogLevel } ``` 참고: [`Univer`](https://docs.univer.ai/ko-KR/reference/classes/univer.md) #### @univerjs/engine-render 이 플러그인은 Univer의 렌더링 엔진으로, 렌더링, 스크롤바, 커서 및 선택 영역 렌더링을 담당하며 `UniverRenderEnginePlugin`을 제공합니다. 참고: [@univerjs/engine-render](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/engine-render.md) #### @univerjs/engine-formula 이 플러그인은 Univer의 수식 엔진으로, 수식 계산과 처리를 담당하며 `UniverFormulaEnginePlugin`을 제공합니다. 참고: [@univerjs/engine-formula](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/engine-formula.md) #### @univerjs/design 이 플러그인은 Univer의 디자인 시스템으로, 모든 기본 컴포넌트와 스타일을 제공합니다. 참고: [UI 장](https://docs.univer.ai/ko-KR/guides/docs/ui/overview.md) #### @univerjs/ui 이 플러그인은 Univer의 UI 기반이며 `UniverUIPlugin`을 제공합니다. `UniverUIPlugin`은 기본 레이아웃을 구성하는 데 사용할 수 있는 여러 옵션을 제공합니다. ```typescript interface IUniverUIConfig { // Container element, can be a string or a DOM element container?: string | HTMLElement // Whether to show the header header?: boolean // Whether to show the header toolbar toolbar?: boolean // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode ribbonType?: RibbonType // Whether to show the context menu contextMenu?: boolean // Whether to disable auto focus disableAutoFocus?: true // Dependency injection override configuration override?: DependencyOverride // Menu configuration menu?: MenuConfig } ``` `menu` 구성 옵션을 사용하면 특정 메뉴 항목의 표시 또는 숨김 상태를 간단히 설정할 수 있습니다. ```typescript univer.registerPlugin(UniverSheetsUIPlugin, { menu: { 'sheet.command.set-range-bold': { hidden: true, }, 'sheet.command.set-range-italic': { hidden: true, disabled: true, }, }, }) ``` 여기서 `'sheet.command.set-range-bold'`와 `'sheet.command.set-range-italic'`은 해당 메뉴 항목을 나타내는 명령 이름입니다. 아래의 [메뉴 항목 ID 목록](#menu-item-id-list)을 참고하세요. 참고: [@univerjs/ui](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/ui.md) #### @univerjs/docs 이 플러그인은 Univer Docs의 핵심 플러그인이며 `UniverDocsPlugin`을 제공합니다. 참고: [@univerjs/docs](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs.md) #### @univerjs/docs-ui 이 플러그인은 문서 편집기의 UI 컴포넌트와 상호작용을 포함하는 Univer Docs UI 플러그인이며 `UniverDocsUIPlugin`을 제공합니다. 참고: [@univerjs/docs-ui](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs-ui.md) #### @univerjs/sheets 이 플러그인은 스프레드시트 편집기의 핵심 기능을 제공하는 Univer Sheets 핵심 플러그인이며 `UniverSheetsPlugin`을 제공합니다. `UniverSheetsPlugin`은 스프레드시트 편집기 구성에 사용할 수 있는 여러 옵션을 제공합니다. ```typescript interface IUniverSheetsConfig { // If both row style and column style are set, whether row style precedes column style isRowStylePrecedeColumnStyle?: boolean // Whether auto height applies to merged cells autoHeightForMergedCells?: boolean /** * Whether synchronize the frozen state to other users in real-time collaboration. * @default true */ freezeSync?: boolean } ``` 참고: [@univerjs/sheets](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/sheets.md) #### @univerjs/sheets-ui 이 플러그인은 스프레드시트 편집기의 UI 컴포넌트와 상호작용을 포함하는 Univer Sheets UI 플러그인이며 `UniverSheetsUIPlugin`을 제공합니다. `UniverSheetsUIPlugin`은 스프레드시트 편집기 UI 구성에 사용할 수 있는 여러 옵션을 제공합니다. ```typescript interface IUniverSheetsUIConfig { // Whether to show the footer. footer?: | false | { // The sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets. sheetBar?: boolean // The statistic bar includes statistics of the current selection, such as count, sum, average, etc. statisticBar?: boolean // The bottom menu includes options like highlight, gridlines, etc. menus?: boolean // The zoom slider at the bottom. zoomSlider?: boolean /** * The config of the add sheet button in the sheet bar. */ addSheetButtonConfig?: { /** * Whether to show the add sheet button in the sheet bar. * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered. * @default true */ show?: boolean /** * The default row count of the new sheet created by the add sheet button. * @default 1000 */ defaultRowCount?: number /** * The default column count of the new sheet created by the add sheet button. * @default 20 */ defaultColumnCount?: number } } // Whether to show the formula bar formulaBar?: boolean clipboardConfig?: { // Whether to show the paste options button after paste operation hidePasteOptions?: boolean } // The configuration for the scroll bar scrollConfig?: IScrollBarProps /** * Strategy for showing the protected range shadow. * - true or 'always': Show shadow for all protected ranges (default behavior) * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false) * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false) * - false or 'none': Never show shadow for protected ranges * @default true */ protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none' // Whether to disable the force string alert. disableForceStringAlert?: boolean // Whether to disable the force string mark. disableForceStringMark?: boolean } ``` 참고: [@univerjs/sheets-ui](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/sheets-ui.md) ## 모바일 지원 먼저 [모바일 에디터](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation.md#mobile-support)를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 **문서를 열기 전에** 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요. | 패키지 | 데스크톱 등록 | 모바일 등록 | | ----------------------------- | ----------------------------- | ----------------------------------- | | `@univerjs/sheets-formula-ui` | `UniverSheetsFormulaUIPlugin` | `UniverSheetsFormulaMobileUIPlugin` | | `@univerjs/sheets-numfmt-ui` | `UniverSheetsNumfmtUIPlugin` | `UniverSheetsNumfmtMobileUIPlugin` | ## 프리셋 모드 ### 설치 #### npm ```bash npm install @univerjs/presets @univerjs/preset-sheets-core ``` #### pnpm ```bash pnpm add @univerjs/presets @univerjs/preset-sheets-core ``` #### yarn ```bash yarn add @univerjs/presets @univerjs/preset-sheets-core ``` #### bun ```bash bun add @univerjs/presets @univerjs/preset-sheets-core ``` ### 사용법 ```typescript import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core' import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US' import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets' import '@univerjs/preset-sheets-core/lib/index.css' const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS), }, presets: [UniverSheetsCorePreset()], }) univerAPI.createWorkbook({}) ``` ### 프리셋 및 구성 #### @univerjs/presets 이 프리셋은 Univer 애플리케이션을 만드는 `createUniver` 메서드를 제공하고, **@univerjs/core**와 **@univerjs/design**의 모든 메서드와 객체를 노출합니다. `createUniver` 메서드는 테마, 언어, 프리셋 등의 옵션이 포함된 구성 객체를 받습니다. Facade API 호출에 사용할 `Univer` 인스턴스 `univer`와 `FUniver` 인스턴스 `univerAPI`를 반환합니다. ```typescript interface CreateUniverParameter { // Univer instance theme, default is `defaultTheme` theme: IStyleSheet // Whether to use dark mode, default is false darkMode?: boolean // The locale of the Univer instance locale: LocaleType region?: LocaleType // The locale objects to use, with keys as locale types and values as corresponding locale objects locales: ILocales // The log level of the Univer instance logLevel?: LogLevel // The list of presets to use. presets: IPresets[] // The list of plugins to use. plugins: IPlugins[] } ``` 참고: [`createUniver`](https://docs.univer.ai/ko-KR/reference/methods/create-univer.md) #### @univerjs/preset-sheets-core 이 프리셋은 Univer Sheets의 핵심 프리셋으로, 문서 편집기, 수식 엔진, 렌더링 엔진 등 문서 편집에 필요한 핵심 기능을 포함합니다. ```typescript interface IUniverSheetsCorePresetConfig { // Container element, can be a string or a DOM element container?: string | HTMLElement // Whether to show the header header?: boolean // Whether to show the header toolbar toolbar?: boolean // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode ribbonType?: RibbonType // Whether to show the footer footer?: | false | { // Sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets. sheetBar?: boolean // Statistic bar includes statistics of the current selection, such as count, sum, average, etc. statisticBar?: boolean // The bottom menu includes options like highlight, gridlines, etc. menus?: boolean // The zoom slider at the bottom. zoomSlider?: boolean /** * The config of the add sheet button in the sheet bar. */ addSheetButtonConfig?: { /** * Whether to show the add sheet button in the sheet bar. * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered. * @default true */ show?: boolean /** * The default row count of the new sheet created by the add sheet button. * @default 1000 */ defaultRowCount?: number /** * The default column count of the new sheet created by the add sheet button. * @default 20 */ defaultColumnCount?: number } } // Whether to show the context menu contextMenu?: boolean // Whether to disable auto focus disableAutoFocus?: true // Menu configuration menu?: MenuConfig sheets?: { // If both row style and column style are set, whether row style precedes column style isRowStylePrecedeColumnStyle?: boolean // Whether auto height applies to merged cells autoHeightForMergedCells?: boolean /** * Whether synchronize the frozen state to other users in real-time collaboration. * @default true */ freezeSync?: boolean clipboardConfig?: { // Whether to show the paste options button after paste operation hidePasteOptions?: boolean } // The configuration for the scroll bar scrollConfig?: IScrollBarProps /** * Strategy for showing the protected range shadow. * - true or 'always': Show shadow for all protected ranges (default behavior) * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false) * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false) * - false or 'none': Never show shadow for protected ranges * @default true */ protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none' // Whether to disable the force string alert. disableForceStringAlert?: boolean // Whether to disable the force string mark. disableForceStringMark?: boolean } // ... More configuration options } ``` `menu` 구성 옵션을 사용하면 특정 메뉴 항목의 표시 또는 숨김 상태를 간단히 설정할 수 있습니다. ```typescript UniverSheetsCorePreset({ menu: { 'sheet.command.set-range-bold': { hidden: true, }, 'sheet.command.set-range-italic': { hidden: true, disabled: true, }, }, }) ``` 여기서 `'sheet.command.set-range-bold'`와 `'sheet.command.set-range-italic'`은 해당 메뉴 항목을 나타내는 명령 이름입니다. 아래의 [메뉴 항목 ID 목록](#menu-item-id-list)을 참고하세요. 참고: [@univerjs/preset-sheets-core](https://docs.univer.ai/ko-KR/reference/packages/presets/univerjs/preset-sheets-core.md) ## 도구 모음 레이아웃과 `RibbonType` `IUniverSheetsCorePresetConfig` 또는 `IUniverUIConfig`의 `ribbonType` 속성을 구성하여 도구 모음 레이아웃을 설정할 수 있습니다. `ribbonType`은 다음 네 가지 모드를 지원합니다. * `classic`: 기본 클래식 모드입니다. 그룹은 위쪽에, 도구 모음은 아래쪽에 배치되며 기존 레이아웃에 익숙한 사용자에게 적합합니다. * `grid`: 그리드 모드입니다. 위쪽 탭을 유지하고 아래쪽의 각 도구 그룹을 2행 그리드로 배치하며, 더 많은 도구를 한 번에 표시해야 하는 데스크톱 레이아웃에 적합합니다. * `collapsed`: 컴팩트 모드입니다. 그룹과 도구 모음이 같은 행에 배치되며 세로 공간이 제한된 환경에 적합합니다. * `simple`: 그룹 없는 모드입니다. 모든 도구가 평면 목록으로 배치되며 도구 모음 기능에 익숙한 사용자에게 적합합니다. ## 메뉴 순서와 그리드 배치 초기 설정과 런타임 [`univerAPI.updateMenuConfig()`](https://docs.univer.ai/ko-KR/reference/facade/univer.md#updatemenuconfig)는 같은 `menu` 구조를 사용합니다. 키는 Ribbon 탭 키(예: `ribbon.insert`), 그룹 키(예: `ribbon.start.format`) 또는 메뉴 항목 ID입니다. `order`는 같은 수준의 항목을 오름차순으로 정렬합니다. 탭, 탭 안의 그룹, 그룹이나 하위 메뉴 안의 항목에 적용되며 다른 그룹으로 이동시키지는 않습니다. 탭과 그룹 키에는 `@univerjs/ui`에서 내보내는 `RibbonPosition`과 그룹 열거형도 사용할 수 있습니다. ### 초기 설정 사용 중인 모드를 선택하고 기존 초기화 설정에 아래 옵션을 병합하세요. 다른 플러그인, 언어, 테마 및 컨테이너 설정은 유지하고 같은 플러그인을 중복 등록하지 마세요. ```ts import type { MenuConfig } from '@univerjs/ui' const menu: MenuConfig = { 'ribbon.insert': { order: -1 }, 'ribbon.start.format': { order: -1 }, 'sheet.command.set-range-font-family': { order: 0, gridLayout: { row: 1, column: 1, width: 160 }, }, } ``` #### 플러그인 모드 ```typescript import { UniverUIPlugin } from '@univerjs/ui' univer.registerPlugin(UniverUIPlugin, { ribbonType: 'grid', menu, }) ``` #### 프리셋 모드 ```typescript import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core' import { createUniver } from '@univerjs/presets' const { univerAPI } = createUniver({ presets: [ UniverSheetsCorePreset({ ribbonType: 'grid', menu, }), ], }) ``` ### 런타임 업데이트 공개 Facade는 변경 사항을 병합하고 UI를 즉시 갱신합니다. 지정하지 않은 속성은 기존 설정이나 Schema 기본값을 유지하며, 나중에 등록되는 메뉴에도 설정이 적용됩니다. 플러그인 모드에서는 먼저 `@univerjs/ui/facade`를 가져와야 합니다. ```ts import '@univerjs/ui/facade' univerAPI.updateMenuConfig({ 'sheet.command.set-range-bold': { order: 0, gridLayout: { row: 2, column: 2 }, }, 'sheet.command.set-range-italic': { gridLayout: { row: 2, column: 1 }, }, }) ``` `gridLayout`은 `ribbonType: 'grid'`일 때만 적용됩니다. 각 그룹은 두 행이며 `row`와 `column`은 1부터 시작합니다. 명시한 좌표가 위치를 결정하므로 `order`만 바꿔서는 좌표가 지정된 버튼을 이동할 수 없습니다. 위치를 교환할 때는 겹치지 않도록 두 버튼을 함께 업데이트하세요. 선택적 필드는 `rowSpan`, `columnSpan`, `showLabel`, `width`, `iconSize`이며 크기의 단위는 픽셀입니다. 제약 조건과 기본값은 [`IRibbonGridLayout`](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/ui.md#iribbongridlayout)을 참고하세요. ### 사용자 정의 메뉴 배치 `createMenu()`와 `createSubmenu()`도 `order`와 `gridLayout`을 지원합니다. 하위 메뉴에서는 Ribbon 트리거의 위치를 지정하며 팝업 내부 배치는 바꾸지 않습니다. 다음 예제는 기록 그룹의 세 번째 열에 버튼을 추가합니다. ```ts univerAPI .createMenu({ id: 'custom-action', title: 'Custom action', action: () => console.log('Custom action clicked'), order: 4, gridLayout: { row: 1, column: 3, showLabel: true, width: 96 }, }) .appendTo('ribbon.start.history') ``` ## 메뉴 항목 ID 목록 > [!NOTE] > 메뉴 항목 DOM 요소의 > > `data-u-command` > > 속성에서 메뉴 항목 ID를 확인할 수 있습니다. ### 도구 모음 메뉴 항목 | 메뉴 항목 ID | 메뉴 항목 이름 | | ----------------------------------------------------- | ---------------------------------- | | univer.command.undo | 실행 취소 | | univer.command.redo | 다시 실행 | | sheet.command.set-once-format-painter | 서식 복사 | | sheet.command.set-range-bold | 굵게 | | sheet.command.set-range-italic | 기울임꼴 | | sheet.command.set-range-underline | 밑줄 | | sheet.command.set-range-stroke | 취소선 | | sheet.command.set-range-font-family | 글꼴 | | sheet.command.set-range-fontsize | 글꼴 size | | sheet.command.set-range-text-color | 텍스트 색 | | sheet.command.set-background-color | 채우기 색 | | sheet.command.set-border-basic | 테두리 | | sheet.command.set-horizontal-text-align | 가로 맞춤 | | sheet.command.set-vertical-text-align | 세로 맞춤 | | sheet.command.set-text-wrap | 텍스트 줄 바꿈 | | sheet.command.set-text-rotation | 텍스트 회전 | | sheet.command.add-worksheet-merge | 셀 병합 | | sheet.command.add-worksheet-merge-all | 셀 병합 - 모두 병합 | | sheet.command.add-worksheet-merge-vertical | 셀 병합 - 세로 병합 | | sheet.command.add-worksheet-merge-horizontal | 셀 병합 - 가로 병합 | | sheet.command.remove-worksheet-merge | 셀 병합 - 병합 취소 | | sheet.operation.open.conditional.formatting.panel | 조건부 서식 | | formula-ui.operation.insert-function | 함수 | | formula-ui.operation.more-functions | 함수 - More 함수 | | sheet.menu.sheets-sort | 정렬 | | sheet.command.sort-range-asc | 정렬 - Ascending | | sheet.command.sort-range-asc-ext | 정렬 - 오름차순 범위 확장 | | sheet.command.sort-range-desc | 정렬 - Descending | | sheet.command.sort-range-desc-ext | 정렬 - 내림차순 범위 확장 | | sheet.command.sort-range-custom | 정렬 - Custom 정렬 | | sheet.menu.image | 이미지 | | sheet.command.insert-float-image | 이미지 - Float 이미지 | | sheet.command.insert-cell-image | 이미지 - Cell 이미지 | | sheet.command.numfmt.set.currency | 통화 | | sheet.command.numfmt.add.decimal.command | 소수 자릿수 늘리기 | | sheet.command.numfmt.subtract.decimal.command | 소수 자릿수 줄이기 | | sheet.command.numfmt.set.percent | 백분율 | | sheet.operation.open.numfmt.panel | 숫자 서식 | | sheet.menu.data-validation | 데이터 유효성 검사 | | data-validation.operation.open-validation-panel | 데이터 유효성 검사 - 데이터 유효성 검사 management | | data-validation.command.addRuleAndOpen | 데이터 유효성 검사 - 규칙 추가 | | sheet.command.smart-toggle-filter | 필터 전환 | | sheet.command.clear-filter-criteria | 필터 전환 - 필터 조건 지우기 | | sheet.command.re-calc-filter | 필터 전환 - 필터 조건 다시 계산 | | sheet.operation.open-pivot-table-range-selector-panel | 피벗 테이블 | | sheet.menu.print | 인쇄 | | sheet.operation.print-open | 인쇄 - 인쇄 | | sheet.operation.open-print-grid-sidebar | 인쇄 - 인쇄 Layout | | data-connector.operation.sidebar | 데이터 커넥터 | | sheets-exchange-client.operation.exchange | 파일 | | exchange-client.operation.import-xlsx | 파일 - Open(파일) | | exchange-client.operation.export-xlsx | 파일 - Save As | | sheet.command.menu-insert-chart | 차트 삽입 | | sheet.command.add-range-protection-from-toolbar | 보호 | | univer.operation.toggle-edit-history | 편집 기록 | | sheet.operation.open-sparkline-selector | Sparkline | | sheet.operation.toggle-comment-panel | 댓글 관리 | | sheet.operation.insert-hyper-link-toolbar | 링크 삽입 | | ui.operation.open-find-dialog | 찾기 및 바꾸기 | | base-ui.operation.toggle-shortcut-panel | 단축키 패널 전환 | | sheet.toolbar.text-to-number | Text to Number | ### 컨텍스트 메뉴 항목 | 메뉴 항목 ID | 메뉴 항목 이름 | | ------------------------------------------------------- | -------------------------------------- | | sheet.command.copy | 복사 | | sheet.command.cut | 잘라내기 | | sheet.command.paste | 붙여넣기 | | sheet.menu.copy-special | 복사 Special | | sheet.command.copy-formula-only | 선택하여 복사 - 수식만 복사 | | sheet.menu.paste-special | 붙여넣기 Special | | sheet.command.paste-values | 붙여넣기 Special - 붙여넣기 Value | | sheet.command.paste-format | 붙여넣기 Special - 붙여넣기 Format | | sheet.command.paste-col-width | 붙여넣기 Special - 붙여넣기 열 너비 | | sheet.command.paste-besides-border | 붙여넣기 Special - 붙여넣기 Besides 테두리 Styles | | sheet.command.paste-formula | 붙여넣기 Special - 붙여넣기 Formula | | sheet.menu.clear-selection | 지우기 | | sheet.command.clear-selection-content | 지우기 - 지우기 Contents | | sheet.command.clear-selection-format | 지우기 - 지우기 Formats | | sheet.command.clear-selection-all | 지우기 - 지우기 All | | sheet.contextMenu.text-to-number | Text to Number | | sheet.menu.cell-insert | 삽입 | | sheet.command.insert-row-before | 삽입 - 앞에 행 삽입 | | sheet.command.insert-col-before | 삽입 - 앞에 열 삽입 | | sheet.command.insert-range-move-right-confirm | 삽입 - 오른쪽으로 이동 | | sheet.command.insert-range-move-down-confirm | 삽입 - 아래로 이동 | | sheet.menu.delete | 삭제 | | sheet.command.remove-row-confirm | 선택한 행 삭제 | | sheet.command.remove-col-confirm | 선택한 열 삭제 | | sheet.command.delete-range-move-left-confirm | 삭제 - 왼쪽으로 이동 | | sheet.command.delete-range-move-up-confirm | 삭제 - Move Up | | sheet.menu.sheet-frozen | 고정 | | sheet.header-menu.sheet-frozen | 고정(행 및 열 머리글 오른쪽 클릭 메뉴 항목) | | sheet.command.set-selection-frozen | 고정 - 고정 | | sheet.command.set-row-frozen | 고정 - 이 행까지 고정 | | sheet.command.set-col-frozen | 고정 - 이 열까지 고정 | | sheet.command.cancel-frozen | 고정 - 고정 취소 | | sheet.contextMenu.permission | 행과 열 보호 | | sheet.command.add-range-protection-from-context-menu | 행과 열 보호 - 보호 범위 추가 | | sheet.command.set-range-protection-from-context-menu | 행과 열 보호 - 보호 범위 설정 | | sheet.command.delete-range-protection-from-context-menu | 행과 열 보호 - 보호 범위 제거 | | sheet.command.view-sheet-permission-from-context-menu | 행과 열 보호 - 모든 보호 범위 보기 | | sheet.menu.sheets-sort-ctx | 정렬 | | sheet.command.sort-range-asc-ctx | 정렬 - Ascending | | sheet.command.sort-range-asc-ext-ctx | 정렬 - 오름차순 범위 확장 | | sheet.command.sort-range-desc-ctx | 정렬 - Descending | | sheet.command.sort-range-desc-ext-ctx | 정렬 - 내림차순 범위 확장 | | sheet.command.sort-range-custom-ctx | 정렬 - Custom 정렬 | | sheet.operation.show-comment-modal | 댓글 추가 | | sheet.operation.insert-hyper-link | 링크 삽입 | | sheet.operation.screenshot | 복사 as picture | ### 컨텍스트 메뉴 항목 - 행 머리글 | 메뉴 항목 ID | 메뉴 항목 이름 | | --------------------------------------- | --------- | | sheet.command.insert-multi-rows-above | 앞에 행 삽입 | | sheet.command.insert-multi-rows-after | 뒤에 행 삽입 | | sheet.command.hide-row-confirm | 선택한 행 숨기기 | | sheet.command.set-selected-rows-visible | 숨긴 행 표시 | | sheet.command.set-row-height | 행 높이 | | sheet.command.set-row-is-auto-height | 데이터에 맞춤 | ### 컨텍스트 메뉴 항목 - 열 머리글 | 메뉴 항목 ID | 메뉴 항목 이름 | | --------------------------------------- | --------- | | sheet.command.insert-multi-cols-before | 앞에 열 삽입 | | sheet.command.insert-multi-cols-right | 뒤에 열 삽입 | | sheet.command.hide-col-confirm | 선택한 열 숨기기 | | sheet.command.set-selected-cols-visible | 숨긴 열 표시 | | sheet.command.set-worksheet-col-width | 열 너비 | | sheet.command.set-col-auto-width | 데이터에 맞춤 |