로그인 성공 페이지 UI/UX 개선
This commit is contained in:
297
public/home.html
297
public/home.html
@@ -6,42 +6,244 @@
|
|||||||
<title>Home - Headless Login Demo</title>
|
<title>Home - Headless Login Demo</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<style>
|
<style>
|
||||||
.home-container {
|
/* 대시보드 전용 스타일 (인라인/오버라이드용, 기본은 styles.css 활용) */
|
||||||
text-align: center;
|
body {
|
||||||
padding: 40px 20px;
|
background: #f0f4f8; /* 약간 더 어두운 회색 계열 배경 */
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.user-info {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
.dashboard-header {
|
||||||
border-radius: 12px;
|
background: #ffffff;
|
||||||
padding: 20px;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||||
margin: 20px 0;
|
padding: 16px 32px;
|
||||||
text-align: left;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dashboard-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #1a365d;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #3182ce, #2b6cb0);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn-header {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #cbd5e0;
|
||||||
|
color: #4a5568;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn-header:hover {
|
||||||
|
background: #edf2f7;
|
||||||
|
color: #2d3748;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 40px 24px;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
animation: fadeIn 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-section {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-section h2 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
color: #1a365d;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-section p {
|
||||||
|
color: #4a5568;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
border-bottom: 1px solid #edf2f7;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #2d3748;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title i {
|
||||||
|
color: #3182ce;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.info-item {
|
.info-item {
|
||||||
margin-bottom: 10px;
|
display: flex;
|
||||||
font-size: 0.9rem;
|
flex-direction: column;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px dashed #e2e8f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
color: #ccc;
|
font-size: 0.85rem;
|
||||||
margin-right: 10px;
|
color: #718096;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
.logout-btn {
|
|
||||||
background: #ff4757;
|
.info-value {
|
||||||
margin-top: 20px;
|
font-size: 1.05rem;
|
||||||
|
color: #1a202c;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background: #eebfbf;
|
||||||
|
color: #2b6cb0;
|
||||||
|
background-color: #ebf8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.phone {
|
||||||
|
background-color: #e6fffa;
|
||||||
|
color: #319795;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.dashboard-header {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.dashboard-main {
|
||||||
|
padding: 24px 16px;
|
||||||
|
}
|
||||||
|
.welcome-section h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="login-container home-container">
|
<header class="dashboard-header">
|
||||||
<h1 class="login-title">환영합니다!</h1>
|
<h1 class="dashboard-title">SSO Portal</h1>
|
||||||
<p>SSO를 통해 안전하게 로그인되었습니다.</p>
|
<div class="header-actions">
|
||||||
|
<div id="userAvatar" class="avatar">?</div>
|
||||||
<div id="userInfo" class="user-info">
|
<button id="logoutBtn" class="logout-btn-header">로그아웃</button>
|
||||||
<p>사용자 정보를 불러오는 중...</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<button id="logoutBtn" class="login-button logout-btn">로그아웃</button>
|
<main class="dashboard-main">
|
||||||
</div>
|
<section class="welcome-section">
|
||||||
|
<h2>안녕하세요, <span id="welcomeName">사용자</span>님!</h2>
|
||||||
|
<p>보안이 강화된 Single Sign-On 환경에 성공적으로 접속했습니다.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="dashboard-grid">
|
||||||
|
<div class="dashboard-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🛡️ 내 계정 정보</h3>
|
||||||
|
</div>
|
||||||
|
<div id="userInfoContent">
|
||||||
|
<p style="color: #718096; text-align: center;">정보를 불러오는 중...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dashboard-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🔐 시스템 상태</h3>
|
||||||
|
</div>
|
||||||
|
<ul class="info-list">
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">SSO 연결 상태</span>
|
||||||
|
<span class="info-value" style="color: #38a169; font-weight: bold;">● 정상 (안전함)</span>
|
||||||
|
</li>
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">인증 제공자(Issuer)</span>
|
||||||
|
<span class="info-value">Headless Auth Gateway</span>
|
||||||
|
</li>
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">세션 유효성</span>
|
||||||
|
<span class="info-value">현재 활성 상태</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
async function fetchUserInfo() {
|
async function fetchUserInfo() {
|
||||||
@@ -50,12 +252,43 @@
|
|||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
const user = data.user;
|
const user = data.user;
|
||||||
document.getElementById('userInfo').innerHTML = `
|
|
||||||
<div class="info-item"><span class="info-label">사용자 ID:</span> <span>${user.id}</span></div>
|
// UI 업데이트
|
||||||
<div class="info-item"><span class="info-label">이름:</span> <span>${user.name}</span></div>
|
document.getElementById('welcomeName').textContent = user.name;
|
||||||
<div class="info-item"><span class="info-label">로그인 시간:</span> <span>${new Date(user.loginTime).toLocaleString()}</span></div>
|
|
||||||
|
// 아바타 이니셜 설정 (첫 글자)
|
||||||
|
const initial = user.name ? user.name.charAt(0) : 'U';
|
||||||
|
document.getElementById('userAvatar').textContent = initial;
|
||||||
|
|
||||||
|
// 인증 방식 뱃지 클래스 결정
|
||||||
|
const isPhone = user.method && user.method.includes('전화번호');
|
||||||
|
const badgeClass = isPhone ? 'badge phone' : 'badge';
|
||||||
|
|
||||||
|
// 정보 카드 내용 채우기
|
||||||
|
document.getElementById('userInfoContent').innerHTML = `
|
||||||
|
<ul class="info-list">
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">사용자 식별자 (ID)</span>
|
||||||
|
<span class="info-value">${user.id || '-'}</span>
|
||||||
|
</li>
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">표시 이름</span>
|
||||||
|
<span class="info-value">${user.name || '-'}</span>
|
||||||
|
</li>
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">로그인 시간</span>
|
||||||
|
<span class="info-value">${user.loginTime || '-'}</span>
|
||||||
|
</li>
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">사용된 인증 방식</span>
|
||||||
|
<div style="margin-top: 4px;">
|
||||||
|
<span class="${badgeClass}">${user.method || '알 수 없음'}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
|
// 인증 실패 시 로그인 페이지로 이동
|
||||||
window.location.href = '/';
|
window.location.href = '/';
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -65,10 +298,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('logoutBtn').addEventListener('click', async () => {
|
document.getElementById('logoutBtn').addEventListener('click', async () => {
|
||||||
await fetch('/api/logout', { method: 'POST' });
|
try {
|
||||||
window.location.href = '/';
|
await fetch('/api/logout', { method: 'POST' });
|
||||||
|
} finally {
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 페이지 로드 시 사용자 정보 가져오기
|
||||||
fetchUserInfo();
|
fetchUserInfo();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user