Archive Page Markup

.eslintignore

@@ -3,4 +3,8 @@
 .prettierrc.cjs
 
 *.config.js
-*.config.ts
+*.config.ts
+
+
+# lib/RenderExtension file
+src/**/*.js

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "cSpell.words": ["clsx", "svgr"]
 }

package.json

@@ -14,9 +14,12 @@
   "dependencies": {
     "axios": "^1.6.2",
     "clsx": "^2.0.0",
+    "lodash": "^4.17.21",
+    "matter-js": "^0.19.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.19.0"
+    "react-router-dom": "^6.19.0",
+    "swiper": "^11.0.5"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.5.3",
@@ -27,6 +30,8 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
+    "@types/lodash": "^4.14.202",
+    "@types/matter-js": "^0.19.5",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.11.0",

src/app/archive/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+import { MarbleCanvas } from "./marble-canvas";
+import { MarbleGrid } from "./marble-grid";
+import { Preview } from "./preview";
+
+import { ConfirmDialog } from "@/components/common/confirm/confirm-dialog";
+import tempData from "@/data/archive-temp-data.json";
+import { TMarble } from "@/types/archive";
+
+export const Archive = () => {
+  const [marbleList, setMarbleList] = useState<TMarble[]>();
+
+  useEffect(() => {
+    // TODO: server Data
+    if (!tempData.data.length) return;
+
+    setMarbleList(tempData.data);
+  }, []);
+
+  if (!marbleList) return null;
+  return (
+    <ConfirmDialog>
+      {/* <Preview /> */}
+      <MarbleCanvas marbleList={marbleList} />
+      {/* <MarbleGrid marbleList={marbleList} /> */}
+    </ConfirmDialog>
+  );
+};