로그인 성공 페이지 UI/UX 수정
This commit is contained in:
285
public/home.html
285
public/home.html
@@ -5,244 +5,53 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<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>
|
|
||||||
/* 대시보드 전용 스타일 (인라인/오버라이드용, 기본은 styles.css 활용) */
|
|
||||||
body {
|
|
||||||
background: #f0f4f8; /* 약간 더 어두운 회색 계열 배경 */
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-header {
|
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
||||||
padding: 16px 32px;
|
|
||||||
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 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 10px 0;
|
|
||||||
border-bottom: 1px dashed #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-label {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #718096;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-value {
|
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="dashboard-header">
|
<main class="app-shell dashboard-shell">
|
||||||
<h1 class="dashboard-title">SSO Portal</h1>
|
<header class="system-header">
|
||||||
<div class="header-actions">
|
<span class="sub-title">총괄기획실</span>
|
||||||
<div id="userAvatar" class="avatar">?</div>
|
<h2 class="main-title">기술기획팀 PM Login Demo</h2>
|
||||||
<button id="logoutBtn" class="logout-btn-header">로그아웃</button>
|
</header>
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="dashboard-main">
|
<article class="login-panel dashboard-panel">
|
||||||
<section class="welcome-section">
|
<div class="welcome-msg">
|
||||||
<h2>안녕하세요, <span id="welcomeName">사용자</span>님!</h2>
|
<h2>안녕하세요, <span id="welcomeName">사용자</span>님!</h2>
|
||||||
<p>보안이 강화된 Single Sign-On 환경에 성공적으로 접속했습니다.</p>
|
<p>안전한 업무 시스템 접속을 환영합니다. 성공적으로 인증되었습니다.</p>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<div class="dashboard-grid">
|
<div class="dashboard-content">
|
||||||
<div class="dashboard-card">
|
<div class="info-grid">
|
||||||
<div class="card-header">
|
<div class="info-card">
|
||||||
<h3 class="card-title">🛡️ 내 계정 정보</h3>
|
<h3 class="card-title">🛡️ 계정 정보</h3>
|
||||||
</div>
|
<div id="userInfoContent">
|
||||||
<div id="userInfoContent">
|
<p style="color: #5a7369; text-align: center;">정보를 불러오는 중...</p>
|
||||||
<p style="color: #718096; text-align: center;">정보를 불러오는 중...</p>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-card">
|
||||||
|
<h3 class="card-title">🔐 시스템 상태</h3>
|
||||||
|
<ul class="info-list">
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">SSO 연결 상태</span>
|
||||||
|
<span class="info-value" style="color: #2d8a63;">● 정상 (안전함)</span>
|
||||||
|
</li>
|
||||||
|
<li class="info-item">
|
||||||
|
<span class="info-label">인증 제공자</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="dashboard-card">
|
<div class="footer-actions">
|
||||||
<div class="card-header">
|
<button id="logoutBtn" class="secondary-button">로그아웃</button>
|
||||||
<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>
|
||||||
</div>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -253,18 +62,8 @@
|
|||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
const user = data.user;
|
const user = data.user;
|
||||||
|
|
||||||
// UI 업데이트
|
|
||||||
document.getElementById('welcomeName').textContent = user.name;
|
document.getElementById('welcomeName').textContent = user.name;
|
||||||
|
|
||||||
// 아바타 이니셜 설정 (첫 글자)
|
|
||||||
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 = `
|
document.getElementById('userInfoContent').innerHTML = `
|
||||||
<ul class="info-list">
|
<ul class="info-list">
|
||||||
<li class="info-item">
|
<li class="info-item">
|
||||||
@@ -282,13 +81,12 @@
|
|||||||
<li class="info-item">
|
<li class="info-item">
|
||||||
<span class="info-label">사용된 인증 방식</span>
|
<span class="info-label">사용된 인증 방식</span>
|
||||||
<div style="margin-top: 4px;">
|
<div style="margin-top: 4px;">
|
||||||
<span class="${badgeClass}">${user.method || '알 수 없음'}</span>
|
<span class="badge">${user.method || '알 수 없음'}</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
// 인증 실패 시 로그인 페이지로 이동
|
|
||||||
window.location.href = '/';
|
window.location.href = '/';
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -305,8 +103,7 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 페이지 로드 시 사용자 정보 가져오기
|
|
||||||
fetchUserInfo();
|
fetchUserInfo();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -218,4 +218,136 @@ input {
|
|||||||
padding: 28px 22px;
|
padding: 28px 22px;
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dashboard Specific Styles */
|
||||||
|
.dashboard-panel {
|
||||||
|
width: min(100%, 1000px); /* 대시보드 패널 너비 확장 (800px -> 1000px) */
|
||||||
|
padding: 64px; /* 패널 내부 여유 공간 확대 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content {
|
||||||
|
display: grid;
|
||||||
|
gap: 24px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-msg {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-msg h2 {
|
||||||
|
font-size: 2.4rem; /* 환영 메시지 크기 확대 */
|
||||||
|
color: #0f3d2e;
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-msg p {
|
||||||
|
color: #4a6659;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 카드 최소 너비 확대 */
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
background: rgba(255, 255, 255, 0.75); /* 투명도 살짝 조정 */
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 32px; /* 카드 내부 여백 확대 */
|
||||||
|
border: 1px solid rgba(15, 61, 46, 0.12);
|
||||||
|
box-shadow: 0 10px 30px rgba(15, 61, 46, 0.05); /* 카드에 미세한 그림자 추가 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
font-size: 1.4rem; /* 카드 제목 확대 */
|
||||||
|
color: #0f3d2e;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-bottom: 1px solid rgba(15, 61, 46, 0.1);
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 14px 0; /* 아이템 간격 확대 */
|
||||||
|
border-bottom: 1px dashed rgba(15, 61, 46, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #5a7369;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 1.15rem; /* 값 텍스트 크기 확대 */
|
||||||
|
color: #0a291f;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 650;
|
||||||
|
background-color: #0f3d2e;
|
||||||
|
color: #f8fbff;
|
||||||
|
border: 2px solid #185c45;
|
||||||
|
box-shadow: 0 4px 12px rgba(15, 61, 46, 0.15);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-actions {
|
||||||
|
margin-top: 48px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button {
|
||||||
|
background: linear-gradient(180deg, #185c45 0%, #0f3d2e 100%);
|
||||||
|
border: none;
|
||||||
|
color: #f8fbff;
|
||||||
|
padding: 14px 48px; /* 버튼 크기 유지 및 소폭 조정 */
|
||||||
|
border-radius: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: none; /* 초기 그림자 없음 (로그인 입력 전과 동일) */
|
||||||
|
opacity: 0.54; /* 초기 투명도 (로그인 입력 전과 동일) */
|
||||||
|
transition: all 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 20px 40px rgba(15, 61, 46, 0.28); /* 마우스 오버 시 그림자 생성 */
|
||||||
|
opacity: 1; /* 마우스 오버 시 선명하게 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dashboard specific background override */
|
||||||
|
.dashboard-shell {
|
||||||
|
background:
|
||||||
|
linear-gradient(rgba(15, 61, 46, 0.5), rgba(15, 61, 46, 0.7)),
|
||||||
|
url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80') !important;
|
||||||
|
background-size: cover !important;
|
||||||
|
background-position: center !important;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user