From e44f57abb1a166a7ea64f75daa93026aca0bc7e0 Mon Sep 17 00:00:00 2001 From: sjwie Date: Wed, 7 Feb 2024 18:45:15 +0900 Subject: [PATCH] add prettier setting && /draw-io page --- .prettierrc | 9 +++++++ app/draw-io/page.tsx | 62 ++++++++++++++++++++++++++++++++++++++++++++ app/page.tsx | 23 +++++++++++----- package.json | 12 +++++---- yarn.lock | 12 +++++++++ 5 files changed, 106 insertions(+), 12 deletions(-) create mode 100644 .prettierrc create mode 100644 app/draw-io/page.tsx diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..bc4bbb2 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "semi": false, + "singleQuote": false, + "trailingComma": "all", + "useTabs": false, + "tabWidth": 2, + "printWidth": 80, + "arrowParens": "always" +} diff --git a/app/draw-io/page.tsx b/app/draw-io/page.tsx new file mode 100644 index 0000000..52b519b --- /dev/null +++ b/app/draw-io/page.tsx @@ -0,0 +1,62 @@ +"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(null) + return ( +
+
+ + Home + +
+ + By{" "} + Vercel Logo + +
+
+
+ { + console.log(`onExport executed: + ${JSON.stringify(data, null, 2)}`) + setImgData(data.data) + }} + onClose={(data) => { + console.log(`onClose executed: + ${JSON.stringify(data, null, 2)}`) + }} + /> +
+
미리보기
+ {imgData && ( + + )} +
+ ) +} diff --git a/app/page.tsx b/app/page.tsx index dc191aa..d3fda2b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,13 +1,16 @@ -import Image from "next/image"; +import Image from "next/image" +import Link from "next/link" export default function Home() { return (
-

- Get started by editing  - app/page.tsx -

+ + Home +
- + + Draw.io +
+

Next.js 및 tailwind css 사용해보기

- ); + ) } diff --git a/package.json b/package.json index a574ddb..8cd0ef5 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,21 @@ "lint": "next lint" }, "dependencies": { + "next": "14.1.0", "react": "^18", "react-dom": "^18", - "next": "14.1.0" + "react-drawio": "^0.1.2" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", - "postcss": "^8", - "tailwindcss": "^3.3.0", "eslint": "^8", - "eslint-config-next": "14.1.0" + "eslint-config-next": "14.1.0", + "postcss": "^8", + "prettier": "^3.2.5", + "tailwindcss": "^3.3.0", + "typescript": "^5" } } diff --git a/yarn.lock b/yarn.lock index 2464d26..85fa347 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2041,6 +2041,11 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== +prettier@^3.2.5: + version "3.2.5" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" + integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A== + prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" @@ -2068,6 +2073,11 @@ react-dom@^18: loose-envify "^1.1.0" scheduler "^0.23.0" +react-drawio@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/react-drawio/-/react-drawio-0.1.2.tgz#cba707e160ec6d37676f7f6e2abecb498cb3552d" + integrity sha512-I913iJYp/+eIaTWWBHCyQDEJnbWk31z/S9JVw0XtAh6XU8pJqktedTox2o+KsV+M+9+2EX4ZdWublzDkV7j61A== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -2270,6 +2280,7 @@ streamsearch@^1.1.0: integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg== "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: + name string-width-cjs version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -2330,6 +2341,7 @@ string.prototype.trimstart@^1.0.7: es-abstract "^1.22.1" "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: + name strip-ansi-cjs version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==