feat: Add external control for editor visibility

- 에디터 표시 여부를 외부에서 제어할 수 있도록 `showEditor` prop 추가
- `DistortionEditor` 컴포넌트에서 내부 `showEditor` 상태 제거
- `package.json` 버전 1.0.2에서 1.0.3으로 업데이트
This commit is contained in:
BaekRyang 2025-11-24 14:46:29 +09:00
parent 0af2287a50
commit 6babf68c71
3 changed files with 5 additions and 16 deletions

View File

@ -1,6 +1,6 @@
{
"name": "@baekryang/responsive-image-canvas",
"version": "1.0.2",
"version": "1.0.3",
"publishConfig": {
"registry": "https://git.bnovalab.com/api/packages/baekryang/npm/"
},

View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect } from 'react';
import { DistortionArea } from '../types/area';
import { DistortionEditorProps } from './types';
import { useDistortionEditor } from './hooks/useDistortionEditor';
@ -15,6 +15,7 @@ export const DistortionEditor: React.FC<DistortionEditorProps> = ({
width = 800,
height = 600,
canvasStyle,
showEditor = true,
}) => {
const {
state,
@ -28,9 +29,6 @@ export const DistortionEditor: React.FC<DistortionEditorProps> = ({
getSelectedArea,
} = useDistortionEditor(initialAreas);
// 에디터 모드 토글 상태
const [showEditor, setShowEditor] = useState(true);
// 영역 변경 시 콜백 호출
useEffect(() => {
onAreasChange?.(state.areas);
@ -75,17 +73,6 @@ export const DistortionEditor: React.FC<DistortionEditorProps> = ({
return (
<div className="distortion-editor">
{/* 에디터 모드 토글 버튼 */}
<div className="editor-toolbar">
<button
className={`editor-toggle-btn ${showEditor ? 'active' : ''}`}
onClick={() => setShowEditor(!showEditor)}
title={showEditor ? '에디터 숨기기 (왜곡 효과만 보기)' : '에디터 표시'}
>
{showEditor ? '👁️ 에디터 숨기기' : '✏️ 에디터 표시'}
</button>
</div>
<div className="editor-main">
{/* 왼쪽: 캔버스 */}
<div className="editor-canvas-container">

View File

@ -134,4 +134,6 @@ export interface DistortionEditorProps {
height?: number;
/** 에디터 캔버스 스타일 커스터마이징 */
canvasStyle?: EditorCanvasStyle;
/** 에디터 표시 여부 (외부에서 제어) */
showEditor?: boolean;
}