Fix medium priority issues from code review

- Add DEPLOY_TIMING constants for deployment simulation
- Add null checks in switchTab function for consistency
- Add role="radiogroup" and fieldset/legend to wizard steps
- Add role="log" and aria-live="polite" to chat container
- Add bottom border to active pricing region button for better visual distinction

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-20 23:44:13 +09:00
parent 8374cbc19b
commit 7463a2a481
2 changed files with 28 additions and 14 deletions

19
app.js
View File

@@ -58,6 +58,14 @@ const PAYMENT_METHODS = [
{ id: 'yearly', name: '연간 결제', desc: '2개월 무료 (17% 할인)', discount: 17 }
];
// 배포 시뮬레이션 타이밍 상수
const DEPLOY_TIMING = {
IMAGE_READY: 1500,
CONTAINER_CREATED: 3000,
NETWORK_CONFIGURED: 4500,
COMPLETE: 6000
};
/**
* 가격 포맷팅 (한국 원화)
*/
@@ -197,26 +205,26 @@ function anvilApp() {
this.logs.push('✅ 이미지 준비 완료');
this.logs.push('🔧 컨테이너 인스턴스 생성 중...');
this.deployStep = 2;
}, 1500);
}, DEPLOY_TIMING.IMAGE_READY);
setTimeout(() => {
this.logs.push('✅ 컨테이너 생성 완료');
this.logs.push('🌐 네트워크 및 방화벽 구성 중...');
this.deployStep = 3;
}, 3000);
}, DEPLOY_TIMING.CONTAINER_CREATED);
setTimeout(() => {
const randomIP = Math.floor(Math.random() * 254 + 1);
this.logs.push(`✅ IP 할당 완료: 45.12.89.${randomIP}`);
this.logs.push('⚙️ 시스템 서비스 시작 중...');
this.deployStep = 4;
}, 4500);
}, DEPLOY_TIMING.NETWORK_CONFIGURED);
setTimeout(() => {
this.launching = false;
this.deployStep = 5;
this.logs.push('🎉 서버가 활성화되었습니다!');
}, 6000);
}, DEPLOY_TIMING.COMPLETE);
},
// 런처 열기
@@ -275,6 +283,9 @@ function switchTab(tab) {
const panelN8n = document.getElementById('panel-n8n');
const panelTf = document.getElementById('panel-tf');
// Null checks for DOM elements
if (!btnN8n || !btnTf || !panelN8n || !panelTf) return;
if (tab === 'n8n') {
// Update ARIA states for n8n tab
btnN8n.setAttribute('aria-selected', 'true');