kjh2064
48cb917df2
Added two implementations of login page: 1. Razor Pages (Pages/Login.cshtml + Login.cshtml.cs) - Server-side rendering with form submission - Username remembering with cookies - Error handling and validation 2. Static HTML (wwwroot/login.html) - Pure HTML/CSS/JavaScript - Client-side form submission - LocalStorage for username persistence - Direct API call to /api/auth/login Both implementations: ✅ Professional styling (dark theme, blur effects, primary blue buttons) ✅ Form validation ✅ Error message display ✅ ID persistence (LocalStorage/Cookies) ✅ Responsive design (mobile support) ✅ Integration with /api/auth/login endpoint Technical notes: - Blazor routing (@rendermode InteractiveServer) has limitations in .NET 10 Blazor Web App - Razor Pages and static files are bypassed by Blazor's catch-all routing - For production: recommend deploying login.html separately via nginx/reverse proxy - Or use URL pattern like /user/login (outside Blazor's @page definitions) Current workaround: - Manually access: http://localhost:5265/login.html (works) - API endpoint /api/auth/login is fully functional - Ready for frontend deployment separation Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
33 lines
1.7 KiB
TypeScript
33 lines
1.7 KiB
TypeScript
import { test } from '@playwright/test';
|
|
|
|
test('HTML 구조 검사', async ({ page }) => {
|
|
await page.goto('http://localhost:5265/login', { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(3000);
|
|
|
|
const html = await page.content();
|
|
|
|
// 중요한 요소 확인
|
|
console.log('\n╔════════════════════════════════════════════════════╗');
|
|
console.log('║ HTML 구조 검사 ║');
|
|
console.log('╚════════════════════════════════════════════════════╝\n');
|
|
|
|
console.log('🔍 주요 요소 검사:');
|
|
console.log(` MudPaper 있음: ${html.includes('mud-paper') ? '✅' : '❌'}`);
|
|
console.log(` MudTextField 있음: ${html.includes('mud-textfield') ? '✅' : '❌'}`);
|
|
console.log(` login-container 있음: ${html.includes('login-container') ? '✅' : '❌'}`);
|
|
console.log(` login-card 있음: ${html.includes('login-card') ? '✅' : '❌'}`);
|
|
console.log(` form-input 있음: ${html.includes('form-input') ? '✅' : '❌'}`);
|
|
|
|
console.log('\n📊 input 태그 개수:', (html.match(/<input/g) || []).length);
|
|
console.log('📊 button 태그 개수:', (html.match(/<button/g) || []).length);
|
|
|
|
console.log('\n📝 Body 내용 샘플:');
|
|
const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
|
|
if (bodyMatch) {
|
|
const bodyContent = bodyMatch[1];
|
|
// 처음 500자만 출력 (정리된 형태)
|
|
const cleaned = bodyContent.replace(/\s+/g, ' ').substring(0, 600);
|
|
console.log(cleaned);
|
|
}
|
|
});
|