63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
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 (
|
|
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
|
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
|
|
<Link
|
|
href="/"
|
|
className="bg-blue-500 p-2 rounded-md text-white cursor-pointer"
|
|
>
|
|
Home
|
|
</Link>
|
|
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
|
|
<a
|
|
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
|
|
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
By{" "}
|
|
<Image
|
|
src="/vercel.svg"
|
|
alt="Vercel Logo"
|
|
className="dark:invert"
|
|
width={100}
|
|
height={24}
|
|
priority
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className={`w-5/6 m-auto mt-10 h-[700px]`}>
|
|
<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 w-fit font-bold text-xl mt-10">미리보기</div>
|
|
{imgData && (
|
|
<img
|
|
className="m-auto mt-5 pb-10 bg-white p-5 border-2 rounded-lg"
|
|
src={imgData}
|
|
alt=""
|
|
/>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|