- 메인 페이지에서 배경, 말, 주사위면을 커스텀하게 지정하도록 변경.

- 모든 데이터를 로컬에 저장하고, 가져오기 및 내보내기를 할 수 있도록 수정.

app/game/page.tsx

@@ -1,12 +1,43 @@
 'use client';
 
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import DicePlane from './diceplane';
-import Dice from './dice';
+import { DEFAULT_ASSETS, getAssets } from './asset-storage';
 
 export default function GamePage() {
+  const [backgroundSrc, setBackgroundSrc] = useState(DEFAULT_ASSETS.background);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    setBackgroundSrc(getAssets().background);
+    setReady(true);
+  }, []);
+
   return (
     <div className="relative h-screen w-screen overflow-hidden">
-      <DicePlane />
+      {ready && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={backgroundSrc}
+          alt=""
+          aria-hidden
+          draggable={false}
+          className="pointer-events-none absolute inset-0 z-0 h-full w-full object-cover"
+        />
+      )}
+      <div className="absolute inset-0 z-0 bg-black/25" aria-hidden />
+
+      <Link
+        href="/"
+        className="absolute top-3 left-3 z-40 rounded bg-black/70 px-3 py-1.5 text-sm text-white hover:bg-black/85"
+      >
+        설정으로
+      </Link>
+
+      <div className="relative z-10 h-full w-full">
+        <DicePlane />
+      </div>
     </div>
   );
 }