import { useState, useCallback } from 'react'; import { DistortionArea, Point } from '../../types/area'; import { EditorState } from '../types'; export const useDistortionEditor = (initialAreas: DistortionArea[] = []) => { const [state, setState] = useState({ selectedAreaId: initialAreas[0]?.id || null, areas: initialAreas, editMode: 'normal', draggingPointIndex: null, }); /** 영역 선택 */ const selectArea = useCallback((areaId: string | null) => { setState((prev) => ({ ...prev, selectedAreaId: areaId })); }, []); /** 영역 추가 */ const addArea = useCallback((area: DistortionArea) => { setState((prev) => ({ ...prev, areas: [...prev.areas, area], selectedAreaId: area.id, })); }, []); /** 영역 삭제 */ const removeArea = useCallback((areaId: string) => { setState((prev) => { const newAreas = prev.areas.filter((a) => a.id !== areaId); return { ...prev, areas: newAreas, selectedAreaId: prev.selectedAreaId === areaId ? newAreas[0]?.id || null : prev.selectedAreaId, }; }); }, []); /** 영역 업데이트 */ const updateArea = useCallback((areaId: string, updates: Partial) => { setState((prev) => ({ ...prev, areas: prev.areas.map((area) => (area.id === areaId ? { ...area, ...updates } : area)), })); }, []); /** 포인트 업데이트 */ const updatePoint = useCallback((areaId: string, pointIndex: number, point: Point) => { setState((prev) => ({ ...prev, areas: prev.areas.map((area) => { if (area.id === areaId) { const newPoints = [...area.basePoints] as [Point, Point, Point, Point]; newPoints[pointIndex] = point; return { ...area, basePoints: newPoints }; } return area; }), })); }, []); /** 드래그 시작 */ const startDragging = useCallback((pointIndex: number) => { setState((prev) => ({ ...prev, draggingPointIndex: pointIndex })); }, []); /** 드래그 종료 */ const stopDragging = useCallback(() => { setState((prev) => ({ ...prev, draggingPointIndex: null })); }, []); /** 편집 모드 변경 */ const setEditMode = useCallback((mode: EditorState['editMode']) => { setState((prev) => ({ ...prev, editMode: mode })); }, []); /** 선택된 영역 가져오기 */ const getSelectedArea = useCallback(() => { return state.areas.find((a) => a.id === state.selectedAreaId) || null; }, [state.areas, state.selectedAreaId]); return { state, selectArea, addArea, removeArea, updateArea, updatePoint, startDragging, stopDragging, setEditMode, getSelectedArea, }; };