kyy/sso_expressjs_demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI 개선 및 스타일 적용

Browse Source
This commit is contained in:
kyy
2026-01-16 13:15:08 +09:00
parent dbad6bccf4
commit d5179daf57
3 changed files with 232 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
sso-demo/views/index.ejs
View File

@@ -3,31 +3,72 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express SSO Demo</title>
<style>
body { font-family: sans-serif; text-align: center; padding-top: 50px; }
.user-info { margin-bottom: 20px; }
#sso-login-btn, .logout-link {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<title>Express SSO Login Demo</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Welcome to the Express SSO Demo</h1>
<div class="user-info">
<!-- 1. Top Notice Bar -->
<div class="notice-bar">
<% if (user) { %>
<span>Welcome, <strong><%= user.username %></strong>!</span>
<p><a href="/logout" class="logout-link">Logout</a></p>
<p>환영합니다, <strong><%= user.username %></strong>!</p>
<a href="/logout" class="cta-button">Logout</a>
<% } else { %>
<p>You are not logged in.</p>
<button id="sso-login-btn">Login with SSO</button>
<p>SSO로 로그인하면 회원 전용 글을 확인할 수 있습니다.</p>
<button id="sso-login-btn" class="cta-button">Baron SSO Login</button>
<% } %>
</div>
<div class="container">
<!-- 2. Hero/Header Area -->
<header class="hero">
<h1>SSO LOGIN DEMO</h1>
<% if (user) { %>
<p class="status-text">Welcome, user!</p>
<% } else { %>
<p class="status-text logged-out">You are not logged in.</p>
<% } %>
</header>
<!-- 3. Content Area -->
<main class="content-section">
<h2>Blog</h2>
<% if (user) { %>
<div class="card-grid">
<div class="card">
<h3>회원 전용 컨텐츠</h3>
<p>로그인한 사용자에게만 보이는 특별한 컨텐츠입니다.</p>
</div>
<div class="card">
<h3>로그인 버튼 디자인</h3>
<p>일관성 있는 CTA 버튼 디자인 가이드입니다.</p>
</div>
<div class="card">
<h3>SSO 핸들러 로직 분석</h3>
<p>JWT 토큰을 검증하고 세션을 처리하는 과정을 살펴봅니다.</p>
</div>
<div class="card">
<h3>보안 강화 방안</h3>
<p>애플리케이션의 보안을 강화하기 위한 몇 가지 방법입니다.</p>
</div>
<div class="card">
<h3>EJS 템플릿 엔진 활용</h3>
<p>동적 웹 페이지를 만들기 위한 EJS 사용법을 알아봅니다.</p>
</div>
<div class="card">
<h3>CSS 스타일 가이드</h3>
<p>UI의 일관성을 유지하기 위한 스타일 규칙입니다.</p>
</div>
</div>
<% } else { %>
<div class="login-prompt">
<h3>회원 전용 글은 로그인 후 열람 가능합니다.</h3>
<p>상단 버튼을 클릭해 Baron SSO로 로그인해주세요.</p>
</div>
<% } %>
</main>
</div>
<script src="/js/sso.js"></script>
</body>
</html>