**ReactSketchCanvasProps
**는 ReactSketchCanvas
컴포넌트를 구성하는 다양한 속성들을 정의한 TypeScript 인터페이스입니다. 각 속성의 설명은 다음과 같습니다:
id
(선택적): 컴포넌트의 고유 ID 문자열을 나타냅니다. 이 ID를 사용하여 컴포넌트를 식별할 수 있습니다.width
(선택적): 캔버스의 너비를 나타내는 문자열입니다. 예를 들어, **"800px"
**와 같이 사용자 지정 너비를 설정할 수 있습니다.height
(선택적): 캔버스의 높이를 나타내는 문자열입니다. 예를 들어, **"600px"
**와 같이 사용자 지정 높이를 설정할 수 있습니다.className
(선택적): 컴포넌트의 CSS 클래스 이름을 지정합니다. 이 클래스 이름을 사용하여 컴포넌트에 스타일을 적용할 수 있습니다.strokeColor
(선택적): 그리기 도구로 사용되는 선의 색상을 지정하는 문자열입니다. 예를 들어, **"blue"
**와 같이 선의 색상을 설정할 수 있습니다.canvasColor
(선택적): 캔버스의 배경 색상을 나타내는 문자열입니다. 이 배경 색상은 캔버스의 뒷배경 색상을 지정합니다.backgroundImage
(선택적): 캔버스의 배경 이미지를 나타내는 문자열입니다. 이미지 파일의 경로 또는 URL을 지정하여 배경 이미지를 설정할 수 있습니다.exportWithBackgroundImage
(선택적): 배경 이미지를 그림과 함께 내보내려면 **true
**로 설정합니다.preserveBackgroundImageAspectRatio
(선택적): 배경 이미지의 가로세로 비율을 유지할지 여부를 나타내는 문자열입니다. "none"
(기본값)는 비율을 유지하지 않음을 의미하며, "width"
및 **"height"
**는 각각 가로 또는 세로 비율을 유지함을 나타냅니다.strokeWidth
(선택적): 그리기 선의 너비를 나타내는 숫자입니다. 선의 굵기를 지정합니다.eraserWidth
(선택적): 지우개 도구의 너비를 나타내는 숫자입니다. 지우개의 굵기를 지정합니다.allowOnlyPointerType
(선택적): 허용되는 포인터 유형을 지정하는 문자열입니다. "all"
(기본값)은 모든 포인터 유형을 허용합니다.onChange
(선택적): 캔버스 내부 경로가 업데이트될 때 호출되는 콜백 함수를 지정합니다. 업데이트된 경로를 인수로 받습니다.onStroke
(선택적): 선이 그려질 때 호출되는 콜백 함수를 지정합니다. 그려진 선의 정보와 지우개 도구 여부를 인수로 받습니다.style
(선택적): 캔버스 요소의 스타일을 나타내는 React CSS 속성 객체입니다.svgStyle
(선택적): SVG 요소의 스타일을 나타내는 React CSS 속성 객체입니다.withTimestamp
(선택적): 선의 타임스탬프 정보를 포함할지 여부를 나타내는 불리언 값입니다.