kyy/headless-login-demo
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

로그인 성공 페이지 UI/UX 수정

Browse Source
This commit is contained in:
김용연
2026-04-10 14:06:23 +09:00
parent e6e501700a
commit c1ead98f80
2 changed files with 174 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
public/home.html
View File

@@ -5,244 +5,53 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Headless Login Demo</title>
<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>
<body>
<header class="dashboard-header">
<h1 class="dashboard-title">SSO Portal</h1>
<div class="header-actions">
<div id="userAvatar" class="avatar">?</div>
<button id="logoutBtn" class="logout-btn-header">로그아웃</button>
</div>
</header>
<main class="app-shell dashboard-shell">
<header class="system-header">
<span class="sub-title">총괄기획실</span>
<h2 class="main-title">기술기획팀 PM Login Demo</h2>
</header>
<main class="dashboard-main">
<section class="welcome-section">
<h2>안녕하세요, <span id="welcomeName">사용자</span>님!</h2>
<p>보안이 강화된 Single Sign-On 환경에 성공적으로 접속했습니다.</p>
</section>
<article class="login-panel dashboard-panel">
<div class="welcome-msg">
<h2>안녕하세요, <span id="welcomeName">사용자</span>님!</h2>
<p>안전한 업무 시스템 접속을 환영합니다. 성공적으로 인증되었습니다.</p>
</div>
<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 class="dashboard-content">
<div class="info-grid">
<div class="info-card">
<h3 class="card-title">🛡️ 계정 정보</h3>
<div id="userInfoContent">
<p style="color: #5a7369; 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 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 class="footer-actions">
<button id="logoutBtn" class="secondary-button">로그아웃</button>
</div>
</div>
</article>
</main>
<script>
@@ -253,18 +62,8 @@
const data = await response.json();
const user = data.user;
// UI 업데이트
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 = `
<ul class="info-list">
<li class="info-item">
@@ -282,13 +81,12 @@
<li class="info-item">
<span class="info-label">사용된 인증 방식</span>
<div style="margin-top: 4px;">
<span class="${badgeClass}">${user.method || '알 수 없음'}</span>
<span class="badge">${user.method || '알 수 없음'}</span>
</div>
</li>
</ul>
`;
} else {
// 인증 실패 시 로그인 페이지로 이동
window.location.href = '/';
}
} catch (err) {
@@ -305,7 +103,6 @@
}
});
// 페이지 로드 시 사용자 정보 가져오기
fetchUserInfo();
</script>
</body>

134
public/styles.css
View File

@@ -218,4 +218,136 @@ input {
padding: 28px 22px;
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;
}