sjwie
/
nextjs-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier tailwind extension for sorting classes && add react-unity-webgl

This commit is contained in:
sjwie 2024-02-16 16:08:02 +09:00
parent fa7781baf6
commit 7495333b7d
7 changed files with 49 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc
View File

@ -5,5 +5,6 @@
"useTabs": false, "useTabs": false,
"tabWidth": 2, "tabWidth": 2,
"printWidth": 80, "printWidth": 80,
"arrowParens": "always" "arrowParens": "always",
"plugins": ["prettier-plugin-tailwindcss"]
} }

6
app/draw-io/page.tsx
View File

@ -7,7 +7,7 @@ export default function Home() {
const drawioRef = useRef<DrawIoEmbedRef>(null); const drawioRef = useRef<DrawIoEmbedRef>(null);
return ( return (
<div className="mb-10 w-full"> <div className="mb-10 w-full">
<div className={`w-5/6 m-auto mt-10 h-[700px]`}> <div className={`m-auto mt-10 h-[700px] w-5/6`}>
<DrawIoEmbed <DrawIoEmbed
ref={drawioRef} ref={drawioRef}
onExport={(data) => { onExport={(data) => {
@ -21,10 +21,10 @@ export default function Home() {
}} }}
/> />
</div> </div>
<div className="m-auto w-fit font-bold text-xl mt-10">미리보기</div> <div className="m-auto mt-10 w-fit text-xl font-bold">미리보기</div>
{imgData ? ( {imgData ? (
<img <img
className="m-auto mt-5 pb-10 bg-white p-5 border-2 rounded-lg" className="m-auto mt-5 rounded-lg border-2 bg-white p-5 pb-10"
src={imgData} src={imgData}
alt="" alt=""
/> />

8
app/layout.tsx
View File

@ -23,14 +23,14 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<main className="flex min-h-screen flex-col items-center justify-between p-24"> <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"> <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
<Link <Link
href="/" href="/"
className="bg-blue-500 p-2 rounded-md text-white cursor-pointer" className="cursor-pointer rounded-md bg-blue-500 p-2 text-white"
> >
Home Home
</Link> </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"> <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white lg:static lg:h-auto lg:w-auto lg:bg-none dark:from-black dark:via-black">
<a <a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0" 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" href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
@ -50,7 +50,7 @@ export default function RootLayout({
</div> </div>
</div> </div>
{children} {children}
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left"> <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
{linkItemProp.map((linkItem, i) => ( {linkItemProp.map((linkItem, i) => (
<a <a
href={linkItem.href} href={linkItem.href}

4
app/page.tsx
View File

@ -6,13 +6,13 @@ export default function Home() {
<div className="flex"> <div className="flex">
<Link <Link
href="/draw-io" href="/draw-io"
className="bg-blue-500 p-2 rounded-md text-white cursor-pointer m-4" className="m-4 cursor-pointer rounded-md bg-blue-500 p-2 text-white"
> >
Draw.io Draw.io
</Link> </Link>
<Link <Link
href="/unity" href="/unity"
className="bg-blue-500 p-2 rounded-md text-white cursor-pointer m-4" className="m-4 cursor-pointer rounded-md bg-blue-500 p-2 text-white"
> >
Unity Unity
</Link> </Link>

26
app/unity/page.tsx
View File

@ -1,3 +1,27 @@
import { Unity, useUnityContext } from "react-unity-webgl";
export default function Home() { export default function Home() {
return <></>; const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
loaderUrl: "build/myunityapp.loader.js",
dataUrl: "build/myunityapp.data",
frameworkUrl: "build/myunityapp.framework.js",
codeUrl: "build/myunityapp.wasm",
});
// We'll round the loading progression to a whole number to represent the
// percentage of the Unity Application that has loaded.
const loadingPercentage = Math.round(loadingProgression * 100);
return (
<div className="relative h-[600px] w-[800px]">
{isLoaded === false && (
// We'll conditionally render the loading overlay if the Unity
// Application is not loaded.
<div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-gray-500">
<p>Loading... ({loadingPercentage}%)</p>
</div>
)}
<Unity className="unity" unityProvider={unityProvider} />
</div>
);
} }

4
package.json
View File

@ -14,7 +14,8 @@
"next": "14.1.0", "next": "14.1.0",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"react-drawio": "^0.1.2" "react-drawio": "^0.1.2",
"react-unity-webgl": "^9.5.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",
@ -25,6 +26,7 @@
"eslint-config-next": "14.1.0", "eslint-config-next": "14.1.0",
"postcss": "^8", "postcss": "^8",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.5.11",
"tailwindcss": "^3.3.0", "tailwindcss": "^3.3.0",
"typescript": "^5" "typescript": "^5"
} }

10
yarn.lock
View File

@ -2053,6 +2053,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier-plugin-tailwindcss@^0.5.11:
version "0.5.11"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz#1aa9308c3285b3cb7942aaeaec8d0e0775ac54d0"
integrity sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==
prettier@^3.2.5: prettier@^3.2.5:
version "3.2.5" version "3.2.5"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
@ -2095,6 +2100,11 @@ react-is@^16.13.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-unity-webgl@^9.5.0:
version "9.5.0"
resolved "https://registry.yarnpkg.com/react-unity-webgl/-/react-unity-webgl-9.5.0.tgz#08277bf80d0678dbd26131d2c7ea4eb05233862e"
integrity sha512-zmTffL2S7QL1g2DQem0/HzxhJaEQ3L4aEV4VUlQOkZc4JzMjScrqGVvHc4AnyMz94vVQqlbHwNfq4YhJEEGzQg==
react@^18: react@^18:
version "18.2.0" version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"