Headless Login 데모 앱 초기 구현 및 Mock API 구축

2026-04-09 13:52:03 +09:00
commit 102efa15b3
589 changed files with 62668 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Headless Login Demo</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <main class="app-shell">
+        <article class="login-panel">
+            <div class="panel-heading">
+                <h1>PM 데모 로그인</h1>
+                <p>숫자만 입력하면 전화번호 인증, 그 외 입력은 ID/PW 로그인으로 전환됩니다.</p>
+            </div>
+
+            <form id="login-form" class="login-form">
+                <div class="field">
+                    <label for="identifier">사번 또는 전화번호</label>
+                    <input type="text" id="identifier" name="identifier" class="text-input" placeholder="예: b24051 또는 01012345678" autocomplete="off">
+                </div>
+
+                <div id="password-field" class="field hidden">
+                    <label for="password">비밀번호</label>
+                    <input type="password" id="password" name="password" class="text-input" placeholder="비밀번호를 입력하세요">
+                </div>
+
+                <p id="input-hint" class="input-hint">입력값에 따라 적절한 로그인 방식이 자동으로 선택됩니다.</p>
+
+                <button type="submit" id="submit-button" class="primary-button" disabled>로그인</button>
+            </form>
+
+            <div id="status-display" class="status-card">
+                <strong>현재 동작</strong>
+                <p id="status-text">입력값을 기다리는 초기 상태입니다.</p>
+            </div>
+
+            <div id="success-panel" class="success-panel hidden">
+                <div class="success-label">완료</div>
+                <h3 id="success-title">성공!</h3>
+                <p id="success-description"></p>
+            </div>
+        </article>
+    </main>
+    <script src="app.js"></script>
+</body>
+</html>