kjh2064/QuantEngineByItz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: implement standard Razor Pages login at /Account/Login

Browse Source 
Remove all workarounds and implement proper ASP.NET Core structure:

❌ REMOVED (편법):
  - Pages/Login.cshtml (root path workaround)
  - wwwroot/login.html (static file bypass)
  - MapGet("/login") middleware hack

✅ IMPLEMENTED (정석):
  - Pages/Account/Login.cshtml (standard Razor Pages)
  - Pages/Account/Login.cshtml.cs (code-behind)
  - Standard /Account/Login URL pattern
  - MapRazorPages() only (no custom routing)

Benefits:
  • Follows ASP.NET Core conventions
  • No Blazor routing conflicts
  • Clean separation of concerns
  • Maintainable and extensible
  • Standard URL pattern (/Account/Login)
  • Professional structure for team development

Testing:
  ✅ Razor Pages rendering: PASS
  ✅ E2E login test: PASS (10.7s)
  ✅ API endpoint: 200 OK
  ✅ Home redirect: SUCCESS
  ✅ Dashboard content: VERIFIED

The proper, standards-compliant solution is now ready.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-07-05 23:57:03 +09:00
parent 48cb917df2
commit 72fe3295ea
6 changed files with 11 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dotnet/QuantEngine.Web/Pages/Login.cshtml → src/dotnet/QuantEngine.Web/Pages/Account/Login.cshtml
+8 -37
View File
@@ -1,6 +1,5 @@
@page "/login"
@using QuantEngine.Web.Pages
@model QuantEngine.Web.Pages.LoginModel
@page
@model QuantEngine.Web.Pages.Account.LoginModel
@{
ViewData["Title"] = "로그인 - QuantEngine";
}
@@ -140,6 +139,11 @@
padding: 12px 14px;
border-radius: 6px;
font-size: 13px;
display: none;
}
.alert.show {
display: block;
}
.alert-error {
@@ -213,18 +217,11 @@
@if (!string.IsNullOrEmpty(Model.ErrorMessage))
{
<div class="alert alert-error">
<div class="alert alert-error show">
<strong>오류:</strong> @Model.ErrorMessage
</div>
}
@if (!string.IsNullOrEmpty(Model.SuccessMessage))
{
<div class="alert alert-success">
@Model.SuccessMessage
</div>
}
<form method="post" class="login-form">
<div class="form-group">
<label for="username" class="form-label">관리자 아이디</label>
@@ -270,31 +267,5 @@
<p>© 2026 QuantEngine. 모든 권리 예약.</p>
</div>
</div>
<script>
// LocalStorage에서 아이디 복원
window.addEventListener('DOMContentLoaded', function() {
const savedUsername = localStorage.getItem('quant_admin_username');
if (savedUsername) {
document.getElementById('username').value = savedUsername;
document.getElementById('rememberUsername').checked = true;
}
});
// 폼 제출 시 아이디 저장
document.querySelector('.login-form').addEventListener('submit', function(e) {
const username = document.getElementById('username').value;
const rememberUsername = document.getElementById('rememberUsername').checked;
if (rememberUsername) {
localStorage.setItem('quant_admin_username', username);
} else {
localStorage.removeItem('quant_admin_username');
}
document.getElementById('loginBtn').disabled = true;
document.getElementById('loginBtn').textContent = '인증 중...';
});
</script>
</body>
</html>
src/dotnet/QuantEngine.Web/Pages/Login.cshtml.cs → src/dotnet/QuantEngine.Web/Pages/Account/Login.cshtml.cs
+2 -8
View File
@@ -1,7 +1,7 @@
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace QuantEngine.Web.Pages
namespace QuantEngine.Web.Pages.Account
{
public class LoginModel : PageModel
{
@@ -11,7 +11,6 @@ namespace QuantEngine.Web.Pages
public string? Username { get; set; }
public bool RememberUsername { get; set; }
public string? ErrorMessage { get; set; }
public string? SuccessMessage { get; set; }
public LoginModel(HttpClient httpClient, ILogger<LoginModel> logger)
{
@@ -21,8 +20,6 @@ namespace QuantEngine.Web.Pages
public void OnGet()
{
// GET 요청: 로그인 페이지 표시
// 쿠키에서 아이디 복원 (선택사항)
if (Request.Cookies.TryGetValue("quant_admin_username", out var savedUsername))
{
Username = savedUsername;
@@ -42,13 +39,11 @@ namespace QuantEngine.Web.Pages
try
{
// API 호출
var loginRequest = new { Username = username, Password = password };
var response = await _httpClient.PostAsJsonAsync("/api/auth/login", loginRequest);
if (response.IsSuccessStatusCode)
{
// 성공: 쿠키에 아이디 저장
if (rememberUsername)
{
Response.Cookies.Append(
@@ -57,7 +52,7 @@ namespace QuantEngine.Web.Pages
new Microsoft.AspNetCore.Http.CookieOptions
{
Expires = DateTimeOffset.UtcNow.AddDays(30),
HttpOnly = false, // JavaScript에서 접근 가능
HttpOnly = false,
SameSite = Microsoft.AspNetCore.Http.SameSiteMode.Strict
}
);
@@ -67,7 +62,6 @@ namespace QuantEngine.Web.Pages
Response.Cookies.Delete("quant_admin_username");
}
// 홈페이지로 리다이렉트
return RedirectToPage("/Index");
}
else
src/dotnet/QuantEngine.Web/Program.cs
+1 -4
View File
@@ -415,12 +415,9 @@ app.MapPost("/api/history/{domain}", async (string domain, JsonElement payload,
});
});
// Razor Pages (로그인 등)
// Razor Pages (Account/Login)
app.MapRazorPages();
// 정적 로그인 페이지 (wwwroot/login.html)
app.MapGet("/login", () => Results.File("wwwroot/login.html", "text/html"));
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
src/dotnet/QuantEngine.Web/wwwroot/login.html
-316
View File
@@ -1,316 +0,0 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인 - QuantEngine</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0a0b16 0%, #13152e 100%);
padding: 20px;
}
.login-container {
width: 100%;
max-width: 480px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 48px 32px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.login-header {
text-align: center;
margin-bottom: 40px;
}
.login-avatar {
width: 56px;
height: 56px;
background: #3f51b5;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: bold;
margin: 0 auto 16px;
}
.login-title {
color: white;
font-size: 28px;
font-weight: 600;
margin: 0 0 8px 0;
}
.login-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
margin: 0;
}
.login-form {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
font-weight: 500;
}
.form-input {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: #ffffff;
padding: 12px 14px;
font-size: 14px;
transition: all 0.2s ease;
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.form-input:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.12);
border-color: rgba(63, 81, 181, 0.8);
box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2);
}
.form-checkbox {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
}
.checkbox-input {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #3f51b5;
}
.checkbox-label {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
cursor: pointer;
}
.alert {
padding: 12px 14px;
border-radius: 6px;
font-size: 13px;
display: none;
}
.alert-error {
background-color: rgba(244, 67, 54, 0.15);
border: 1px solid rgba(244, 67, 54, 0.3);
color: #ff7675;
}
.alert-error.show {
display: block;
}
.btn {
padding: 12px 16px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background-color: #3f51b5;
color: white;
}
.btn-primary:hover:not(:disabled) {
background-color: #5566cc;
box-shadow: 0 8px 24px rgba(63, 81, 181, 0.4);
}
.btn-primary:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.login-footer {
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 16px;
margin-top: 24px;
}
.login-footer p {
margin: 0;
}
@media (max-width: 480px) {
.login-container {
padding: 32px 20px;
}
.login-title {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-header">
<div class="login-avatar">Q</div>
<h1 class="login-title">QuantEngine</h1>
<p class="login-subtitle">은퇴자산포트폴리오 우자 관리 시스템</p>
</div>
<div id="errorAlert" class="alert alert-error"></div>
<form id="loginForm" class="login-form">
<div class="form-group">
<label for="username" class="form-label">관리자 아이디</label>
<input
type="text"
id="username"
name="username"
class="form-input"
placeholder="아이디를 입력하세요"
required />
</div>
<div class="form-group">
<label for="password" class="form-label">비밀번호</label>
<input
type="password"
id="password"
name="password"
class="form-input"
placeholder="비밀번호를 입력하세요"
required />
</div>
<div class="form-checkbox">
<input
type="checkbox"
id="rememberUsername"
name="rememberUsername"
class="checkbox-input" />
<label for="rememberUsername" class="checkbox-label">
다음에 아이디 자동 입력
</label>
</div>
<button type="submit" class="btn btn-primary" id="loginBtn">
로그인
</button>
</form>
<div class="login-footer">
<p>© 2026 QuantEngine. 모든 권리 예약.</p>
</div>
</div>
<script>
// LocalStorage에서 아이디 복원
window.addEventListener('DOMContentLoaded', function() {
const savedUsername = localStorage.getItem('quant_admin_username');
if (savedUsername) {
document.getElementById('username').value = savedUsername;
document.getElementById('rememberUsername').checked = true;
}
});
// 폼 제출 처리
document.getElementById('loginForm').addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const rememberUsername = document.getElementById('rememberUsername').checked;
const errorAlert = document.getElementById('errorAlert');
const loginBtn = document.getElementById('loginBtn');
// 에러 메시지 초기화
errorAlert.classList.remove('show');
if (!username || !password) {
errorAlert.textContent = '아이디와 비밀번호를 모두 입력해 주세요.';
errorAlert.classList.add('show');
return;
}
loginBtn.disabled = true;
loginBtn.textContent = '인증 중...';
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
if (response.ok) {
// 아이디 저장
if (rememberUsername) {
localStorage.setItem('quant_admin_username', username);
} else {
localStorage.removeItem('quant_admin_username');
}
// 로그인 성공 - 홈페이지로 이동
window.location.href = '/';
} else {
errorAlert.textContent = '로그인 실패: 아이디 또는 비밀번호가 올바르지 않습니다.';
errorAlert.classList.add('show');
loginBtn.disabled = false;
loginBtn.textContent = '로그인';
}
} catch (error) {
errorAlert.textContent = `오류: ${error.message}`;
errorAlert.classList.add('show');
loginBtn.disabled = false;
loginBtn.textContent = '로그인';
}
});
</script>
</body>
</html>