feat(auth): implement option 3 architecture - server InteractiveServer login + client WASM dashboard

- Add Server.AddInteractiveServerComponents() + AddInteractiveServerRenderMode() - Create Server AuthLayout for login form (MudBlazor) - Implement LoginSimple.razor with @rendermode InteractiveServer in Server project - Update App.razor: CascadingAuthenticationState + Router with AppAssembly=Server - Fix Client MudBlazor Providers in MainLayout + AuthLayout - Update Playwright tests: use dynamic selectors for MudTextField (auto-generated IDs) - Build: 0 errors, 0 warnings - API: /api/auth/login fully operational (200 OK confirmed) - Playwright E2E test: 1 passed Architecture: /login → Server InteractiveServer (MudBlazor form) / → Client WebAssembly (Dashboard) /api/* → Server Endpoints Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-05 23:10:54 +09:00
parent 98501c0d2f
commit 53db2f63e3
27 changed files with 1012 additions and 296 deletions
@@ -0,0 +1,76 @@
+import { test } from '@playwright/test';
+
+test('Blazor WASM Interactivity Test', async ({ page }) => {
+  console.log('\n╔════════════════════════════════════════════════════╗');
+  console.log('║        Blazor WASM 상호작용 테스트                ║');
+  console.log('╚════════════════════════════════════════════════════╝\n');
+
+  console.log('1️⃣ /wasm-test 페이지 접근...');
+  await page.goto('http://localhost:5265/wasm-test');
+  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(2000);
+
+  console.log('   ✓ 페이지 로드 완료\n');
+
+  console.log('2️⃣ "Click Me" 버튼 클릭...');
+  const clickButton = page.locator('button:has-text("Click Me")');
+
+  // 페이지 HTML 확인 (디버깅)
+  const pageHtml = await page.locator('body').innerHTML();
+  console.log('   페이지 로드됨, HTML 길이:', pageHtml.length);
+
+  // 모든 strong 태그 찾기
+  const strongCount = await page.locator('strong').count();
+  console.log(`   찾은 <strong> 태그: ${strongCount}개`);
+
+  if (strongCount < 2) {
+    console.log('   ❌ 페이지 렌더링 실패 - strong 태그 부족');
+    await page.screenshot({ path: 'test-results/wasm-test-fail.png', fullPage: true });
+    return;
+  }
+
+  // 초기 클릭 수 확인
+  let countText = await page.locator('strong').nth(0).textContent();
+  console.log(`   초기 값: ${countText}`);
+
+  // 5번 클릭
+  for (let i = 0; i < 5; i++) {
+    await clickButton.click();
+    await page.waitForTimeout(200);
+  }
+
+  // 최종 클릭 수 확인
+  countText = await page.locator('strong').nth(0).textContent();
+  console.log(`   클릭 5회 후 값: ${countText}\n`);
+
+  if (countText === '5') {
+    console.log('✅ WASM 상호작용 정상 작동!');
+    console.log('   결론: Blazor Interactive WebAssembly가 제대로 작동합니다.');
+    console.log('   → 로그인 페이지의 문제는 Auth/Layout 특화 이슈입니다.\n');
+  } else {
+    console.log('❌ WASM 상호작용 실패!');
+    console.log('   결론: Blazor Interactive WebAssembly가 전역적으로 작동하지 않습니다.');
+    console.log('   → SDK/버전 레이어 문제를 확인해야 합니다.\n');
+  }
+
+  console.log('3️⃣ 텍스트 입력 필드 테스트...');
+  const textField = page.locator('input[type="text"]').first();
+  await textField.fill('Hello WASM');
+
+  const typedText = await page.locator('strong').nth(1).textContent();
+  console.log(`   입력 후 텍스트: ${typedText}\n`);
+
+  if (typedText === 'Hello WASM') {
+    console.log('✅ 텍스트 입력/바인딩 정상 작동!');
+  } else {
+    console.log('❌ 텍스트 입력/바인딩 실패!');
+  }
+
+  console.log('\n╔════════════════════════════════════════════════════╗');
+  if (countText === '5' && typedText === 'Hello WASM') {
+    console.log('║            ✅ WASM 완전 정상                      ║');
+  } else {
+    console.log('║            ❌ WASM 문제 있음                      ║');
+  }
+  console.log('╚════════════════════════════════════════════════════╝\n');
+});