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,
"tabWidth": 2,
"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);
return (
<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
ref={drawioRef}
onExport={(data) => {
@ -21,10 +21,10 @@ export default function Home() {
}}
/>
</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 ? (
<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}
alt=""
/>

8
app/layout.tsx
View File

@ -23,14 +23,14 @@ export default function RootLayout({
<html lang="en">
<body className={inter.className}>
<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
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
</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
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"
@ -50,7 +50,7 @@ export default function RootLayout({
</div>
</div>
{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) => (
<a
href={linkItem.href}

4
app/page.tsx
View File

@ -6,13 +6,13 @@ export default function Home() {
<div className="flex">
<Link
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
</Link>
<Link
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
</Link>

26
app/unity/page.tsx
View File

@ -1,3 +1,27 @@
import { Unity, useUnityContext } from "react-unity-webgl";
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",
"react": "^18",
"react-dom": "^18",
"react-drawio": "^0.1.2"
"react-drawio": "^0.1.2",
"react-unity-webgl": "^9.5.0"
},
"devDependencies": {
"@types/node": "^20",
@ -25,6 +26,7 @@
"eslint-config-next": "14.1.0",
"postcss": "^8",
"prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.5.11",
"tailwindcss": "^3.3.0",
"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"
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:
version "3.2.5"
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"
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:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"