Step 3: replace stacked sub-steps with single-slot wizard flow

Mirror the step 4 change: 3-1..3-5 now render into one #subHost slot, replacing instead of stacking when each 확인 button is clicked. The duplicated section-level "4단계로 진행" button is removed; 3-5's confirm advances straight to step 4.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-10 21:12:26 +09:00
parent 2dc3bc0aed
commit 6c042503d6

View File

@@ -160,34 +160,24 @@ function renderStep3() {
section.className = 'page'
section.innerHTML =
'<h2>3단계. 서버 관련 설정</h2>' +
'<div id="sub31" class="subStep"></div>' +
'<div id="sub32" class="subStep" hidden></div>' +
'<div id="sub33" class="subStep" hidden></div>' +
'<div id="sub34" class="subStep" hidden></div>' +
'<div id="sub35" class="subStep" hidden></div>' +
'<div class="actionRow"><button class="secondaryBtn" id="back">이전</button><button class="primaryBtn" id="proceedClient" hidden>4단계로 진행</button></div>'
'<div class="subStep" id="subHost"></div>' +
'<div class="actionRow"><button class="secondaryBtn" id="back">이전</button><span></span></div>'
pageHost.appendChild(section)
var subHost = section.querySelector('#subHost')
section.querySelector('#back').addEventListener('click', renderStep2)
renderSubStep31(section.querySelector('#sub31'), function () {
section.querySelector('#sub32').hidden = false
renderSubStep32(section.querySelector('#sub32'), function () {
section.querySelector('#sub33').hidden = false
renderSubStep33(section.querySelector('#sub33'), function () {
section.querySelector('#sub34').hidden = false
renderSubStep34(section.querySelector('#sub34'), function () {
section.querySelector('#sub35').hidden = false
renderSubStep35(section.querySelector('#sub35'), function () {
section.querySelector('#proceedClient').hidden = false
section.querySelector('#proceedClient').addEventListener('click', function () {
function show31() { subHost.innerHTML = ''; renderSubStep31(subHost, show32) }
function show32() { subHost.innerHTML = ''; renderSubStep32(subHost, show33) }
function show33() { subHost.innerHTML = ''; renderSubStep33(subHost, show34) }
function show34() { subHost.innerHTML = ''; renderSubStep34(subHost, show35) }
function show35() {
subHost.innerHTML = ''
renderSubStep35(subHost, function () {
state.stepDone[3] = true
renderStep4()
})
})
})
})
})
})
}
show31()
}
function renderSubStep31(host, done) {