From 8f532b446b45a99019d856dc41d3e8847b9e5e31 Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Fri, 10 Apr 2026 11:19:30 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=84=B1?=
 =?UTF-8?q?=EA=B3=B5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI/UX=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/home.html | 299 ++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 268 insertions(+), 31 deletions(-)

diff --git a/public/home.html b/public/home.html
index f946ca2..1cc9d2c 100644
--- a/public/home.html
+++ b/public/home.html
@@ -6,42 +6,244 @@
     <title>Home - Headless Login Demo</title>
     <link rel="stylesheet" href="styles.css">
     <style>
-        .home-container {
-            text-align: center;
-            padding: 40px 20px;
+        /* 대시보드 전용 스타일 (인라인/오버라이드용, 기본은 styles.css 활용) */
+        body {
+            background: #f0f4f8; /* 약간 더 어두운 회색 계열 배경 */
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
-        .user-info {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            padding: 20px;
-            margin: 20px 0;
-            text-align: left;
+
+        .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 {
-            margin-bottom: 10px;
-            font-size: 0.9rem;
+            display: flex;
+            flex-direction: column;
+            padding: 10px 0;
+            border-bottom: 1px dashed #e2e8f0;
         }
+
+        .info-item:last-child {
+            border-bottom: none;
+        }
+
         .info-label {
-            color: #ccc;
-            margin-right: 10px;
+            font-size: 0.85rem;
+            color: #718096;
+            margin-bottom: 4px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
-        .logout-btn {
-            background: #ff4757;
-            margin-top: 20px;
+
+        .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>
-    <div class="login-container home-container">
-        <h1 class="login-title">환영합니다!</h1>
-        <p>SSO를 통해 안전하게 로그인되었습니다.</p>
-        
-        <div id="userInfo" class="user-info">
-            <p>사용자 정보를 불러오는 중...</p>
+    <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>
 
-        <button id="logoutBtn" class="login-button logout-btn">로그아웃</button>
-    </div>
+    <main class="dashboard-main">
+        <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>
         async function fetchUserInfo() {
@@ -50,12 +252,43 @@
                 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>
+                    
+                    // 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">
+                                <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 {
+                    // 인증 실패 시 로그인 페이지로 이동
                     window.location.href = '/';
                 }
             } catch (err) {
@@ -65,11 +298,15 @@
         }
 
         document.getElementById('logoutBtn').addEventListener('click', async () => {
-            await fetch('/api/logout', { method: 'POST' });
-            window.location.href = '/';
+            try {
+                await fetch('/api/logout', { method: 'POST' });
+            } finally {
+                window.location.href = '/';
+            }
         });
 
+        // 페이지 로드 시 사용자 정보 가져오기
         fetchUserInfo();
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file