hanghae-plus · tooth-is-silver · Jul 28, 2025 · Jul 29, 2025 · Jul 29, 2025 · Jul 29, 2025
diff --git a/index.advanced.html b/index.advanced.html
@@ -1,32 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Hanghae Shopping Cart</title>
-  <!-- Note: Tailwind CDN is for development only. For production, use PostCSS or Tailwind CLI -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-  tailwind.config = {
-    theme: {
-      extend: {
-        fontFamily: {'sans': ['-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Arial', 'sans-serif']},
-        letterSpacing: {
-          'extra-wide': '0.3em',
-          'super-wide': '0.25em',
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hanghae Shopping Cart</title>
+    <!-- Note: Tailwind CDN is for development only. For production, use PostCSS or Tailwind CLI -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: [
+                "-apple-system",
+                "BlinkMacSystemFont",
+                "Helvetica Neue",
+                "Arial",
+                "sans-serif",
+              ],
+            },
+            letterSpacing: {
+              "extra-wide": "0.3em",
+              "super-wide": "0.25em",
+            },
+            fontSize: { "2xs": "0.625rem" },
+            maxHeight: { 800: "800px" },
+            backgroundImage: {
+              "gradient-black": "linear-gradient(135deg, #000 0%, #333 100%)",
+            },
+          },
         },
-        fontSize: {'2xs': '0.625rem'},
-        maxHeight: {'800': '800px'},
-        backgroundImage: {'gradient-black': 'linear-gradient(135deg, #000 0%, #333 100%)',}
-      }
-    }
-  }
-  </script>
-</head>
-<body class="bg-gray-50 text-black antialiased overflow-hidden h-screen text-sm">
-<div id="app" class="max-w-screen-xl h-screen max-h-800 mx-auto p-8 flex flex-col">
-  <!-- Content will be dynamically generated here -->
-</div>
-<script type="module" src="./src/advanced/main.advanced.js"></script>
-</body>
-</html>
+      };
+    </script>
+  </head>
+  <body
+    class="bg-gray-50 text-black antialiased overflow-hidden h-screen text-sm"
+  >
+    <div
+      id="app"
+      class="max-w-screen-xl h-screen max-h-1000 mx-auto p-8 flex flex-col"
+    >
+      <!-- Content will be dynamically generated here -->
+    </div>
+    <script type="module" src="./src/advanced/main.advanced.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -14,11 +14,19 @@
     "test:advanced": "vitest advanced.test.js",
     "test:ui": "vitest --ui"
   },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
     "@vitest/ui": "^3.2.4",
     "jsdom": "^26.1.0",
+    "typescript": "^5.7.2",
     "vite": "^7.0.5",
     "vitest": "^3.2.4"
   }