5f6e780b40
- 영역 목록과 파라미터 편집 패널을 추가하여 왜곡 영역 관리를 개선했습니다. - 각 영역의 강도, 애니메이션 지속 시간, 이징 함수 등을 조절할 수 있습니다. - 새 영역 추가 및 기존 영역 삭제 기능을 제공합니다.
63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import React from 'react';
|
||
import { DistortionArea } from '../../types/area';
|
||
|
||
export interface AreaListProps {
|
||
areas: DistortionArea[];
|
||
selectedAreaId: string | null;
|
||
onSelectArea: (areaId: string) => void;
|
||
onRemoveArea: (areaId: string) => void;
|
||
onAddArea: () => void;
|
||
}
|
||
|
||
export const AreaList: React.FC<AreaListProps> = ({
|
||
areas,
|
||
selectedAreaId,
|
||
onSelectArea,
|
||
onRemoveArea,
|
||
onAddArea,
|
||
}) => {
|
||
return (
|
||
<div className="area-list">
|
||
<div className="area-list-header">
|
||
<h3>왜곡 영역</h3>
|
||
<button
|
||
onClick={onAddArea}
|
||
disabled={areas.length >= 8}
|
||
className="btn-add"
|
||
title={areas.length >= 8 ? '최대 8개 영역까지 지원' : '새 영역 추가'}
|
||
>
|
||
+ 추가
|
||
</button>
|
||
</div>
|
||
<div className="area-list-items">
|
||
{areas.length === 0 ? (
|
||
<div className="area-list-empty">영역이 없습니다. + 추가 버튼을 눌러주세요.</div>
|
||
) : (
|
||
areas.map((area, index) => (
|
||
<div
|
||
key={area.id}
|
||
className={`area-item ${selectedAreaId === area.id ? 'selected' : ''}`}
|
||
onClick={() => onSelectArea(area.id)}
|
||
>
|
||
<div className="area-item-info">
|
||
<span className="area-item-name">영역 {index + 1}</span>
|
||
<span className="area-item-strength">강도: {(area.distortionStrength * 100).toFixed(0)}%</span>
|
||
</div>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onRemoveArea(area.id);
|
||
}}
|
||
className="btn-remove"
|
||
title="영역 삭제"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|