From 6c042503d6ef91f99d54c9e776b277a409e92f7f Mon Sep 17 00:00:00 2001
From: claude-bot <claude-bot@tkrmagid.kr>
Date: Sun, 10 May 2026 21:12:26 +0900
Subject: [PATCH] Step 3: replace stacked sub-steps with single-slot wizard
 flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 installer/renderer.js | 38 ++++++++++++++------------------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/installer/renderer.js b/installer/renderer.js
index 2d4a642..333d362 100644
--- a/installer/renderer.js
+++ b/installer/renderer.js
@@ -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 () {
-              state.stepDone[3] = true
-              renderStep4()
-            })
-          })
-        })
-      })
+  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) {