Headless Login 데모 앱 초기 구현 및 Mock API 구축
This commit is contained in:
116
public/app.js
Normal file
116
public/app.js
Normal file
@@ -0,0 +1,116 @@
|
||||
const identifierInput = document.getElementById('identifier');
|
||||
const passwordField = document.getElementById('password-field');
|
||||
const passwordInput = document.getElementById('password');
|
||||
const inputHint = document.getElementById('input-hint');
|
||||
const submitButton = document.getElementById('submit-button');
|
||||
const loginForm = document.getElementById('login-form');
|
||||
const statusText = document.getElementById('status-text');
|
||||
const statusDisplay = document.getElementById('status-display');
|
||||
const successPanel = document.getElementById('success-panel');
|
||||
const successTitle = document.getElementById('success-title');
|
||||
const successDescription = document.getElementById('success-description');
|
||||
|
||||
let currentMode = 'unknown'; // 'unknown', 'phone', 'employee'
|
||||
|
||||
function classifyInput(value) {
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) return 'unknown';
|
||||
|
||||
// Check if it's strictly numeric (ignoring spaces or dashes for phone)
|
||||
const numericOnly = trimmed.replace(/[\s-]/g, '');
|
||||
if (/^\d+$/.test(numericOnly)) {
|
||||
return 'phone';
|
||||
}
|
||||
return 'employee';
|
||||
}
|
||||
|
||||
function formatPhoneNumber(value) {
|
||||
const digits = value.replace(/\D/g, '').slice(0, 11);
|
||||
if (digits.length <= 3) return digits;
|
||||
if (digits.length <= 7) return `${digits.slice(0, 3)}-${digits.slice(3)}`;
|
||||
return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7)}`;
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
const value = identifierInput.value;
|
||||
const mode = classifyInput(value);
|
||||
currentMode = mode;
|
||||
|
||||
if (mode === 'phone') {
|
||||
const formatted = formatPhoneNumber(value);
|
||||
if (identifierInput.value !== formatted) {
|
||||
identifierInput.value = formatted;
|
||||
}
|
||||
|
||||
passwordField.classList.add('hidden');
|
||||
inputHint.textContent = '전화번호가 확인되었습니다. 인증링크 발송 흐름을 사용할 수 있습니다.';
|
||||
submitButton.textContent = '인증링크 발송';
|
||||
submitButton.disabled = value.replace(/\D/g, '').length < 10;
|
||||
statusText.textContent = '인증링크 발송 단계를 준비했습니다.';
|
||||
} else if (mode === 'employee') {
|
||||
passwordField.classList.remove('hidden');
|
||||
inputHint.textContent = 'ID 입력이 확인되었습니다. 비밀번호를 입력해 로그인하세요.';
|
||||
submitButton.textContent = '로그인';
|
||||
submitButton.disabled = passwordInput.value.trim().length === 0;
|
||||
statusText.textContent = '비밀번호 입력 단계를 노출했습니다.';
|
||||
} else {
|
||||
passwordField.classList.add('hidden');
|
||||
inputHint.textContent = '입력값에 따라 적절한 로그인 방식이 자동으로 선택됩니다.';
|
||||
submitButton.textContent = '로그인';
|
||||
submitButton.disabled = true;
|
||||
statusText.textContent = '입력값을 기다리는 초기 상태입니다.';
|
||||
}
|
||||
}
|
||||
|
||||
identifierInput.addEventListener('input', updateUI);
|
||||
passwordInput.addEventListener('input', updateUI);
|
||||
|
||||
loginForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const identifier = identifierInput.value;
|
||||
const password = passwordInput.value;
|
||||
|
||||
submitButton.disabled = true;
|
||||
const originalBtnText = submitButton.textContent;
|
||||
submitButton.textContent = '처리 중...';
|
||||
|
||||
try {
|
||||
let response;
|
||||
if (currentMode === 'phone') {
|
||||
response = await fetch('/api/send-link', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ phoneNumber: identifier.replace(/\D/g, '') })
|
||||
});
|
||||
} else {
|
||||
response = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ loginId: identifier, password: password })
|
||||
});
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
loginForm.classList.add('hidden');
|
||||
statusDisplay.classList.add('hidden');
|
||||
successPanel.classList.remove('hidden');
|
||||
|
||||
successTitle.textContent = currentMode === 'phone' ? '인증링크 발송 완료' : '로그인 성공';
|
||||
successDescription.textContent = currentMode === 'phone'
|
||||
? `${identifier} 번호로 인증 링크를 보냈습니다.`
|
||||
: `${identifier} 계정으로 접속되었습니다.`;
|
||||
} else {
|
||||
alert(result.message || '오류가 발생했습니다.');
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = originalBtnText;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Request failed', error);
|
||||
alert('서버 통신에 실패했습니다.');
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = originalBtnText;
|
||||
}
|
||||
});
|
||||
47
public/index.html
Normal file
47
public/index.html
Normal file
@@ -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>
|
||||
177
public/styles.css
Normal file
177
public/styles.css
Normal file
@@ -0,0 +1,177 @@
|
||||
:root {
|
||||
color: #132238;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(180, 202, 224, 0.45), transparent 35%),
|
||||
linear-gradient(180deg, #edf3f8 0%, #f7fafc 100%);
|
||||
font-family: 'Segoe UI', 'Noto Sans KR', sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
width: min(100%, 560px);
|
||||
padding: 40px;
|
||||
border: 1px solid rgba(84, 111, 138, 0.18);
|
||||
border-radius: 28px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 32px 80px rgba(32, 55, 79, 0.12);
|
||||
}
|
||||
|
||||
.panel-heading h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 3vw, 2.8rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.panel-heading p {
|
||||
margin: 12px 0 0;
|
||||
color: #516b86;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.field label {
|
||||
color: #1c3954;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
width: 100%;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid rgba(96, 123, 149, 0.24);
|
||||
border-radius: 18px;
|
||||
background: #fdfefe;
|
||||
color: #132238;
|
||||
transition: all 160ms ease;
|
||||
}
|
||||
|
||||
.text-input:focus {
|
||||
outline: none;
|
||||
border-color: #2f5f8f;
|
||||
box-shadow: 0 0 0 4px rgba(93, 137, 181, 0.14);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.input-hint {
|
||||
margin: 0;
|
||||
min-height: 24px;
|
||||
color: #5c748d;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 54px;
|
||||
padding: 0 20px;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, #214e77 0%, #15395b 100%);
|
||||
color: #f8fbff;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 20px 40px rgba(22, 57, 92, 0.24);
|
||||
transition: all 160ms ease;
|
||||
}
|
||||
|
||||
.primary-button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 24px 44px rgba(22, 57, 92, 0.3);
|
||||
}
|
||||
|
||||
.primary-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.54;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.success-panel {
|
||||
margin-top: 24px;
|
||||
padding: 20px 22px;
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(96, 123, 149, 0.18);
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: #f6f9fb;
|
||||
}
|
||||
|
||||
.status-card strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #18334d;
|
||||
}
|
||||
|
||||
.status-card p,
|
||||
.success-panel p {
|
||||
margin: 0;
|
||||
color: #5a738d;
|
||||
}
|
||||
|
||||
.success-panel {
|
||||
background: linear-gradient(180deg, #f3f8f5 0%, #edf5ef 100%);
|
||||
border-color: rgba(66, 131, 92, 0.18);
|
||||
}
|
||||
|
||||
.success-label {
|
||||
margin-bottom: 8px;
|
||||
color: #38694a;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.success-panel h3 {
|
||||
margin: 0 0 8px;
|
||||
color: #12301f;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.app-shell {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 28px 22px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user