From c1ead98f80ffe0cca1922cc0cf5e5346a04ec0bb Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Fri, 10 Apr 2026 14:06:23 +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=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/home.html  | 285 +++++++---------------------------------------
 public/styles.css | 134 +++++++++++++++++++++-
 2 files changed, 174 insertions(+), 245 deletions(-)

diff --git a/public/home.html b/public/home.html
index 1cc9d2c..9a74f15 100644
--- a/public/home.html
+++ b/public/home.html
@@ -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,8 +103,7 @@
             }
         });
 
-        // 페이지 로드 시 사용자 정보 가져오기
         fetchUserInfo();
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/styles.css b/public/styles.css
index 6d16229..d8421fd 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -218,4 +218,136 @@ input {
         padding: 28px 22px;
         border-radius: 24px;
     }
-}
\ No newline at end of file
+    }
+
+    /* 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;
+    }
\ No newline at end of file