feat: 세션 관리 및 로그인 후 사용자 홈 화면 구현 (Phase 2 완료)

- express-session을 이용한 로그인 상태 유지 구현 - 인증 성공 시 /home.html 리디렉션 및 정보 표시 기능 추가 - 로그아웃 기능 구현 - UI 흐름 개선: 로그인 성공 시 홈 화면으로 자동 이동
2026-04-09 14:18:14 +09:00
parent ea2b96c9a5
commit cf9eecf19f
5 changed files with 212 additions and 3 deletions
--- a/public/home.html
+++ b/public/home.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home - Headless Login Demo</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        .home-container {
+            text-align: center;
+            padding: 40px 20px;
+        }
+        .user-info {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 20px;
+            margin: 20px 0;
+            text-align: left;
+        }
+        .info-item {
+            margin-bottom: 10px;
+            font-size: 0.9rem;
+        }
+        .info-label {
+            color: #ccc;
+            margin-right: 10px;
+        }
+        .logout-btn {
+            background: #ff4757;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container home-container">
+        <h1 class="login-title">환영합니다!</h1>
+        <p>SSO를 통해 안전하게 로그인되었습니다.</p>
+        
+        <div id="userInfo" class="user-info">
+            <p>사용자 정보를 불러오는 중...</p>
+        </div>
+
+        <button id="logoutBtn" class="login-button logout-btn">로그아웃</button>
+    </div>
+
+    <script>
+        async function fetchUserInfo() {
+            try {
+                const response = await fetch('/api/me');
+                if (response.ok) {
+                    const data = await response.json();
+                    const user = data.user;
+                    document.getElementById('userInfo').innerHTML = `
+                        <div class="info-item"><span class="info-label">사용자 ID:</span> <span>${user.id}</span></div>
+                        <div class="info-item"><span class="info-label">이름:</span> <span>${user.name}</span></div>
+                        <div class="info-item"><span class="info-label">로그인 시간:</span> <span>${new Date(user.loginTime).toLocaleString()}</span></div>
+                    `;
+                } else {
+                    window.location.href = '/';
+                }
+            } catch (err) {
+                console.error('Failed to fetch user info:', err);
+                window.location.href = '/';
+            }
+        }
+
+        document.getElementById('logoutBtn').addEventListener('click', async () => {
+            await fetch('/api/logout', { method: 'POST' });
+            window.location.href = '/';
+        });
+
+        fetchUserInfo();
+    </script>
+</body>
+</html>