37 lines
1021 B
TypeScript
37 lines
1021 B
TypeScript
"use client";
|
|
import { useRef, useState } from "react";
|
|
import { DrawIoEmbed, DrawIoEmbedRef } from "react-drawio";
|
|
|
|
export default function Home() {
|
|
const [imgData, setImgData] = useState("");
|
|
const drawioRef = useRef<DrawIoEmbedRef>(null);
|
|
return (
|
|
<div className="mb-10 w-full">
|
|
<div className={`m-auto mt-10 h-[700px] w-5/6`}>
|
|
<DrawIoEmbed
|
|
ref={drawioRef}
|
|
onExport={(data) => {
|
|
console.log(`onExport executed:
|
|
${JSON.stringify(data, null, 2)}`);
|
|
setImgData(data.data);
|
|
}}
|
|
onClose={(data) => {
|
|
console.log(`onClose executed:
|
|
${JSON.stringify(data, null, 2)}`);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="m-auto mt-10 w-fit text-xl font-bold">미리보기</div>
|
|
{imgData ? (
|
|
<img
|
|
className="m-auto mt-5 rounded-lg border-2 bg-white p-5 pb-10"
|
|
src={imgData}
|
|
alt=""
|
|
/>
|
|
) : (
|
|
<div className="h-20" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|