이미지 에디터

@inkio/image-editor는 자르기, 회전, 크기 조절, 그리기, 도형, 텍스트 주석 기능을 갖춘 독립 이미지 편집기입니다. 에디터의 이미지 블록에 연결하거나 단독 컴포넌트로 사용할 수 있습니다.

설치와 CSS

이미지 에디터는 자체 스타일시트가 필요합니다. 앱 진입점에서 한 번 import 하세요.

import '@inkio/image-editor/style.css';

에디터에 연결하기

@inkio/editor(또는 @inkio/simple)의 imageBlock.imageEditor 옵션에 ImageEditorModal을 전달하면 이미지 툴바에 편집 버튼이 나타납니다. 버튼을 누르면 모달이 열리고, 저장 시 편집 결과가 해당 이미지 블록에 반영됩니다.

import { Editor } from '@inkio/editor';
import { ImageEditorModal } from '@inkio/image-editor';
import '@inkio/editor/style.css';
import '@inkio/image-editor/style.css';
 
export function Page() {
  return (
    <Editor
      onImageUpload={async (file) => URL.createObjectURL(file)}
      imageBlock={{ imageEditor: ImageEditorModal }}
    />
  );
}

imageEditor에는 { isOpen, imageSrc, onSave, onClose } 인터페이스를 만족하는 컴포넌트라면 무엇이든 전달할 수 있으며, ImageEditorModal이 기본 구현입니다.

ImageEditorModal props

단독 컴포넌트 사용

모달 없이 인라인 편집 화면을 직접 배치하려면 ImageEditor를 사용합니다.

import { ImageEditor } from '@inkio/image-editor';
import '@inkio/image-editor/style.css';
 
export function StandaloneEditor({ src }: { src: string }) {
  return (
    <ImageEditor
      src={src}
      onSave={(dataUrl) => console.log('saved', dataUrl)}
      onCancel={() => console.log('cancelled')}
    />
  );
}

ImageEditor props

레이아웃

데스크톱 UI는 세 부분으로 구성됩니다.

• 상단바 — 닫기, 실행 취소/다시 실행, 저장
• 하단 도구 레일 — 활성화된 도구 한 줄 표시
• Util 패널 — 활성 도구의 옵션 인스펙터 (도구당 1개)

화면 너비에 따라 Util 패널 위치가 바뀝니다.

도구와 주석

ToolType은 다음 도구를 정의합니다.

type ToolType = 'crop' | 'rotate' | 'resize' | 'draw' | 'shape' | 'text' | 'filter' | 'redact' | 'sticker';

• crop — 자르기 영역 지정 (resize 패널의 비율 segmented 컨트롤에서 선택)
• rotate — 회전 및 좌우/상하 반전
• resize — 출력 크기 조절
• draw — 자유 그리기 (브러시)
• shape — 사각형, 타원, 화살표, 선 도형
• text — 텍스트 주석
• filter — 프리셋 필터 9종 + 밝기·대비·채도·선명도 미세 조정 (썸네일 미리보기)
• redact — 모자이크/블러 영역 지정
• sticker — 이모지 스티커 배치

tools를 지정하지 않으면 기본 목록(['resize', 'draw', 'shape', 'text', 'filter', 'redact', 'sticker', 'rotate'])이 사용됩니다.

<ImageEditor src={src} tools={['draw', 'text']} onSave={save} onCancel={cancel} />

그리기·도형·텍스트·모자이크·스티커로 추가한 항목은 주석(annotation)으로 관리됩니다. 모든 주석 타입은 Annotation 유니온으로 export됩니다.

이 외에 CropRect, Transform, DrawOptions, ShapeOptions, TextOptions, ImageEditorState 등의 보조 타입도 함께 export됩니다.

i18n

이미지 에디터는 @inkio/core와 동일한 메시지 체계를 따릅니다. 도구 라벨 등 UI 텍스트는 다음 헬퍼로 조회·오버라이드합니다.

import {
  enImageEditorMessages,
  resolveImageEditorMessages,
  mergeImageEditorMessages,
  toImageEditorMessageOverrides,
} from '@inkio/image-editor';

간단히 라벨만 바꾸려면 ImageEditorModal/ImageEditor의 locale prop에 Partial<ImageEditorLocale> 객체를 직접 전달해도 됩니다.

<ImageEditorModal
  isOpen={isOpen}
  imageSrc={src}
  onSave={onSave}
  onClose={onClose}
  locale={{ save: '저장', cancel: '취소' }}
/>