@ehfuse/photo-editor-ui

@ehfuse/photo-editor 의 기본 제공 UI 키트. 뷰티바, 도구 피커, 컬러 피커, 슬라이더, 아이콘, 편집기 컨트롤러를 담는다.

기본 사용법은 docs/ko/getting-started.md, AI 편집 연동은 docs/ko/ai-edit.md 를 참고한다.

설치

npm install @ehfuse/photo-editor-ui @ehfuse/photo-editor

peerDependencies: @ehfuse/photo-editor, @ehfuse/forma, @mui/material, @emotion/react, @emotion/styled, react, react-dom.

사용

import { BeautyBar, ToolButtons, useEditorController } from "@ehfuse/photo-editor-ui";

주요 export

• BeautyBar — 탭별 보정 기능 바(예쁜 얼굴/몸매/메이크업/AI 편집 등)
• EditorCanvas — 사진 영역(캔버스 + 원본 비교 + AI 오버레이). onAiEdit 으로 AI 편집 어댑터를 주입한다.
• ToolButtons — 도구 탭(자르기/회전/원근/밝기/대비/필터 등)
• BeautySlider / BrushBar / CropBar — 하단 조작 바
• FilterPicker / ColorPicker / BackgroundPicker — 피커류
• useEditorController — 편집기 상태·폼 컨트롤러

AI 편집

AI 편집(표정/의상/배경)은 라이브러리가 AI 서버를 직접 호출하지 않는다. API 키·엔드포인트를 모르는 대신, 소비처가 AiEditFn 어댑터를 만들어 <EditorCanvas onAiEdit={...} /> 로 주입한다.

import { EditorCanvas, useEditorController } from "@ehfuse/photo-editor-ui";
import type { AiEditFn } from "@ehfuse/photo-editor";

// 백엔드 프록시(예: /v1/ai-image/edit)를 호출하는 어댑터. 키는 서버가 보관한다.
const aiEdit: AiEditFn = async (req) => {
    const res = await fetch("/v1/ai-image/edit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(req), // { image, prompt, mode, option? }
    });
    const json = await res.json();
    if (!res.ok || !json.ok) throw new Error(json?.error ?? "AI 편집 실패");
    return { image: json.data.image };
};

function App() {
    const controller = useEditorController();
    return <EditorCanvas controller={controller} editorRef={ref} onAiEdit={aiEdit} />;
}

• onAiEdit 을 넘기지 않으면 AI 탭은 보이되 "시작" 을 눌러도 실행되지 않는다.
• 사용자가 표정/의상/배경을 고르고 시작 → 프롬프트 확인 다이얼로그(편집 가능) → 확인 시 onAiEdit 1회 호출.
• 응답 동안 사진 위에 스피너가 돌고, 결과 이미지로 교체(되돌리기 가능)된다.

자세한 설정·백엔드 프록시 예제는 docs/ko/ai-edit.md 참고.

라이선스

UNLICENSED (비공개 패키지)