feat: fisrt react migration

Author: annkimm

index.advanced.html

@@ -27,6 +27,6 @@
 <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>
+<script type="module" src="./src/advanced/index.tsx"></script>
 </body>
 </html>

package-lock.json

@@ -11,12 +11,14 @@
     "start:advanced": "vite serve --open ./index.advanced.html",
     "test": "vitest",
     "test:basic": "vitest basic.test.js",
-    "test:advanced": "vitest advanced.test.js",
+    "test:advanced": "vitest advanced.test.ts",
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@vitest/ui": "^3.2.4",
     "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.8",
@@ -27,5 +29,8 @@
     "prettier": "^3.6.2",
     "vite": "^7.0.5",
     "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@testing-library/react": "^16.3.0"
   }
 }

package.json

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react'
+import { ShoppingCartProvider, useShoppingCart } from './providers/ShoppingCartProvider'
+import { setupSaleTimers } from './controllers/saleTimers'
+import { Header } from './components/Header'
+import { LeftColumn } from './components/LeftColumn'
+import { OrderSummary } from './components/OrderSummary'
+import { HelpModal } from './components/HelpModal'
+
+function AppContent() {
+  const { updateProductOptions, updateCart } = useShoppingCart()
+
+  // 초기화 로직 - 이 부분이 필요해요!
+  useEffect(() => {
+    updateProductOptions()
+    updateCart()
+    setupSaleTimers()
+  }, [updateProductOptions, updateCart])
+
+  return (
+    <div className="max-w-screen-xl h-screen max-h-800 mx-auto p-8 flex flex-col">
+      <Header />
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-6 flex-1 overflow-hidden">
+        <LeftColumn />
+        <OrderSummary />
+      </div>
+      <HelpModal />
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <ShoppingCartProvider>
+      <AppContent />
+    </ShoppingCartProvider>
+  )
+}
+
+export default App

src/advanced/App.tsx

@@ -38,7 +38,7 @@ describe('advanced 테스트', () => {
 
   describe.each([
     { type: 'origin', loadFile: (): Promise<any> => import('../../main.original.js') },
-    { type: 'react', loadFile: (): Promise<any> => import('../main.advanced.ts') },
+    { type: 'react', loadFile: (): Promise<any> => import("../../advanced/") },
   ])('$type 장바구니 상세 기능 테스트', ({ loadFile }) => {
     let sel: HTMLSelectElement
     let addBtn: HTMLButtonElement