Fase 3: Inicio de Publicación y Web Pública - Wizard de Publicación (WizardApp + Frontend Setup + CORS)

frontend/publish-wizard/src/App.tsx

@@ -0,0 +1,40 @@
+import { useWizardStore } from './store/wizardStore';
+import CategorySelection from './pages/Steps/CategorySelection';
+import OperationSelection from './pages/Steps/OperationSelection';
+import AttributeForm from './pages/Steps/AttributeForm';
+
+function App() {
+  const step = useWizardStore((state) => state.step);
+
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
+      <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
+        <div className="max-w-3xl mx-auto px-4 h-16 flex items-center justify-between">
+          <div className="font-bold text-xl tracking-tight text-brand-600">
+            SIG-CM <span className="text-slate-400 font-normal text-sm ml-2">Wizard de Publicación</span>
+          </div>
+          <div className="text-sm font-medium text-slate-500">
+            Paso {step} de 5
+          </div>
+        </div>
+        {/* Progress Bar */}
+        <div className="h-1 bg-slate-100 w-full">
+          <div
+            className="h-full bg-brand-500 transition-all duration-500 ease-out"
+            style={{ width: `${(step / 5) * 100}%` }}
+          />
+        </div>
+      </header>
+
+      <main className="max-w-3xl mx-auto p-4 py-8">
+        {step === 1 && <CategorySelection />}
+        {step === 2 && <OperationSelection />}
+        {step === 3 && <AttributeForm />}
+        {step === 4 && <div className="text-center py-20">Paso 4: Fotos (Coming Soon)</div>}
+        {step === 5 && <div className="text-center py-20">Paso 5: Resumen y Pago (Coming Soon)</div>}
+      </main>
+    </div>
+  );
+}
+
+export default App;