fix(installer): 약관 본문 로드 실패 시 동의 차단 + 다시 시도

로드 실패 경로에서 markReadable()로 체크박스가 활성화돼, 약관을 못 본 채로 동의할 수 있던 문제 수정. termLoaded 플래그를 두어 본문이 정상 로드된 뒤에만 동의 체크를 허용하고, 실패 시에는 체크/다음을 막고 "다시 시도" 버튼만 노출. installer / installer-rp 동일 적용. 버전 0.4.1 → 0.4.2. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
feat(installer): 약관을 한 건씩 페이지로 — 개별 동의 + 상단 스크롤 + 끝까지 읽기 강제
2026-07-16 00:09:51 +09:00 · 2026-07-15 23:54:10 +09:00 · 2026-07-15 23:21:46 +09:00
25 changed files with 1011 additions and 143 deletions
--- a/.env.build.example
+++ b/.env.build.example
@@ -31,6 +31,14 @@ SITE_BASE_URL=https://mq.example.com
 # 특별히 다른 경로를 쓰고 싶을 때만 아래를 풀어서 우선 적용시키세요.
 # MANIFEST_URL=https://mq.example.com/manifest.json

+# ----- 커스텀 게임 폴더 이름 -----
+
+# 음악퀴즈 전용 게임/캐시 폴더의 이름. %APPDATA% 바로 아래에 이 이름으로 생성됩니다.
+# 비워두면 기본값 `.mc_custom` 을 사용합니다. 경로 구분자(/ \)와 `..` 는 무시됩니다.
+# 설치기·리소스팩설치기·파일제거기가 모두 이 값을 공유하므로, 값을 바꾸면
+# 세 exe 를 같은 값으로 다시 빌드해야 서로 같은 폴더를 가리킵니다.
+# MC_CUSTOM_DIR=.mc_custom
+
 # ----- 리소스팩 설치기 -----

 # yt-dlp 동시 다운로드 수(1~8). 비워두면 CPU 코어 수로 자동 결정.
--- a/.env.example
+++ b/.env.example
@@ -27,6 +27,12 @@ SITE_BASE_URL=http://127.0.0.1:3000
 # 특별히 다른 경로를 쓰고 싶을 때만 아래를 풀어서 우선 적용시키세요.
 # MANIFEST_URL=http://127.0.0.1:3000/manifest.json

+# ----- 커스텀 게임 폴더 이름 -----
+
+# 음악퀴즈 전용 게임/캐시 폴더의 이름. %APPDATA% 바로 아래에 이 이름으로 생성됩니다.
+# 비워두면 기본값 `.mc_custom` 을 사용합니다. 경로 구분자(/ \)와 `..` 는 무시됩니다.
+# MC_CUSTOM_DIR=.mc_custom
+
 # ----- 리소스팩 설치기 -----

 # yt-dlp 동시 다운로드 수(1~8). 비워두면 CPU 코어 수로 자동 결정.
--- a/README.md
+++ b/README.md
@@ -5,6 +5,8 @@
 - **관리 사이트** — 음악퀴즈 정보(JSON)와 음악·사진 목록, 데이터팩 출력을 한 곳에서 운영.
 - **음악퀴즈 간편설치기 (`.exe`)** — `manifest.json` 기반으로 사용자가 마인크래프트 본체·서버·모드를 자동 설치.
 - **리소스팩 간편설치기 (`.exe`)** — 음악퀴즈 음악·표지를 yt-dlp 로 받아 painting variant 텍스처 리소스팩으로 패키징.
+- **간편포트포워딩 (`.exe`)** — 원하는 포트를 입력해 UPnP 로 개방. 프로그램을 켜 두는 동안만 열려 있고 창을 닫으면 자동으로 닫힙니다.
+- **음악퀴즈 파일제거 (`.exe`)** — 설치기들이 만든 게임 폴더·캐시와 런처 프로필을 휴지통 이동 또는 완전 삭제로 한 번에 정리.

 ---

@@ -15,7 +17,9 @@
 | `src/server/` | 음악퀴즈 관리 웹사이트 (Express + EJS) | `bun start` 또는 `npm start` |
 | `src/installer/` | 음악퀴즈 간편설치기 (Electron) | `npm run installer` |
 | `src/installer-rp/` | 리소스팩 간편설치기 (Electron) | `npm run installer:rp` |
-| `src/shared/` | 두 설치기와 서버가 공유하는 타입·스토어 | — |
+| `src/installer-pf/` | 간편포트포워딩 도구 (Electron) | `npm run installer:pf` |
+| `src/installer-uninstall/` | 음악퀴즈 파일제거 도구 (Electron) | `npm run installer:uninstall` |
+| `src/shared/` | 설치기들과 서버가 공유하는 타입·스토어 | — |
 | `views/` | EJS 템플릿 (관리 사이트) | — |
 | `manifest/` | 음악퀴즈별 정의 JSON | — |
 | `file/list/` | 음악퀴즈별 음악·사진 목록 JSON | — |
@@ -43,6 +47,8 @@

 이렇게 분리해 두면 사용자가 평소 쓰던 마인크래프트와 음악퀴즈 설정이 섞이지 않고, 음악퀴즈만 삭제해도 본체에는 영향이 없습니다.

+> **폴더 이름 바꾸기.** 기본값은 `.mc_custom` 이지만 `.env` / `.env.build` 의 `MC_CUSTOM_DIR` 로 다른 이름을 지정할 수 있습니다. 설치기·리소스팩설치기·파일제거기가 모두 이 값을 공유하므로, 값을 바꾸면 세 exe 를 같은 값으로 다시 빌드해야 서로 같은 폴더를 가리킵니다. (경로 구분자 `/ \` 와 `..` 는 무시되어 항상 `%APPDATA%` 바로 아래 단일 폴더가 됩니다.)
+
 ---

 ## 빠른 시작
@@ -65,8 +71,17 @@ npm run installer
 # 3) 리소스팩 간편설치기를 Electron 으로 실행해 보기
 npm run installer:rp

-# 4) 음악퀴즈 간편설치기 윈도우 .exe 빌드
-npm run dist:win
+# 4) 간편포트포워딩 / 파일제거 도구 실행해 보기
+npm run installer:pf
+npm run installer:uninstall
+
+# 5) 윈도우 .exe 빌드 (개별)
+npm run dist:win            # 음악퀴즈 간편설치기
+npm run dist:win:rp         # 음악퀴즈 리소스팩설치기
+npm run dist:win:pf         # 간편포트포워딩
+npm run dist:win:uninstall  # 음악퀴즈 파일제거
+npm run dist:win:dev        # (개발자용) 음악퀴즈 간편설치기
+npm run dist:win:rp:dev     # (개발자용) 음악퀴즈 리소스팩설치기
 ```

 리소스팩 설치기는 `yt-dlp` 가 필요합니다. 자동 다운로드되지만, 막혀 있는 환경이라면 [`docs/yt-dlp-setup.md`](docs/yt-dlp-setup.md) 참고.
@@ -155,9 +170,13 @@ minecraft_launcher/
 │  ├─ server/              Express + EJS 관리 사이트
 │  ├─ installer/           음악퀴즈 간편설치기 (Electron 메인 + preload)
 │  ├─ installer-rp/        리소스팩 간편설치기 (Electron 메인 + 음악/이미지 파이프라인)
+│  ├─ installer-pf/        간편포트포워딩 도구 (Electron 메인 + preload)
+│  ├─ installer-uninstall/ 음악퀴즈 파일제거 도구 (Electron 메인 + preload)
 │  └─ shared/              공용 타입, 매니페스트 스토어, mojang/upnp 유틸
 ├─ installer/              음악퀴즈 설치기 렌더러(HTML/CSS/JS)
 ├─ installer-rp/           리소스팩 설치기 렌더러(HTML/CSS/JS)
+├─ installer-pf/           간편포트포워딩 렌더러(HTML/JS)
+├─ installer-uninstall/    파일제거 렌더러(HTML/JS)
 ├─ views/                  관리 사이트 EJS 템플릿
 ├─ public/                 관리 사이트 정적 파일(styles.css 등)
 ├─ manifest/               음악퀴즈 JSON 정의 (운영자가 편집)
@@ -172,18 +191,24 @@ minecraft_launcher/
 ├─ manifest.json           사이트 루트 매니페스트 (자동 관리)
 ├─ account.json            관리자 계정 (절대 외부 노출 금지)
 ├─ package.json
-└─ tsconfig.{,server,installer,installer-rp}.json
+└─ tsconfig.{,server,installer,installer-rp,installer-pf,installer-uninstall}.json
 ```

 ---

 ## 빌드 산출물 / 배포

-| 산출물 | 빌드 명령 | 비고 |
+| 산출물(파일명) | 빌드 명령 | 비고 |
 | --- | --- | --- |
 | 관리 사이트 (Node 실행) | `npm start` | systemd 등으로 띄우기. 외부 도메인이 manifest 의 base URL 이 됩니다. |
-| 음악퀴즈 간편설치기 `.exe` | `npm run dist:win` | `electron-builder.yml` 설정 사용. |
-| 리소스팩 간편설치기 `.exe` | `tsconfig.installer-rp.json` 빌드 후 `electron-builder` 수동 패키징 |  |
+| `음악퀴즈 간편설치기-<버전>.exe` | `npm run dist:win` | `electron-builder.yml`. |
+| `음악퀴즈 리소스팩설치기-<버전>.exe` | `npm run dist:win:rp` | `electron-builder-rp.yml`. |
+| `간편포트포워딩-<버전>.exe` | `npm run dist:win:pf` | `electron-builder-pf.yml`. |
+| `음악퀴즈 파일제거-<버전>.exe` | `npm run dist:win:uninstall` | `electron-builder-uninstall.yml`. |
+| `(개발자용) 음악퀴즈 간편설치기-<버전>.exe` | `npm run dist:win:dev` | 비공개(public=false) 팩만 노출. 제목 앞에 `(개발자용)` 표시. |
+| `(개발자용) 음악퀴즈 리소스팩설치기-<버전>.exe` | `npm run dist:win:rp:dev` | 상동. |
+
+빌드 결과물은 `release/` 폴더에 생성됩니다(포터블 exe).

 ---

--- a/electron-builder-dev.yml
+++ b/electron-builder-dev.yml
@@ -29,7 +29,7 @@ extraResources:
      - "**/*"
 win:
  target: portable
-  artifactName: MusicQuizInstaller-Dev-${version}-Portable.${ext}
+  artifactName: (개발자용) 음악퀴즈 간편설치기-${version}.${ext}
  icon: build/icon.ico
 portable:
-  artifactName: MusicQuizInstaller-Dev-${version}-Portable.${ext}
+  artifactName: (개발자용) 음악퀴즈 간편설치기-${version}.${ext}
--- a/electron-builder-pf.yml
+++ b/electron-builder-pf.yml
@@ -27,7 +27,7 @@ extraResources:
      - "**/*"
 win:
  target: portable
-  artifactName: 마인크래프트간편포트포워딩-${version}-Portable.${ext}
+  artifactName: 간편포트포워딩-${version}.${ext}
  icon: build/icon.ico
 portable:
-  artifactName: 마인크래프트간편포트포워딩-${version}-Portable.${ext}
+  artifactName: 간편포트포워딩-${version}.${ext}
--- a/electron-builder-rp-dev.yml
+++ b/electron-builder-rp-dev.yml
@@ -29,7 +29,7 @@ extraResources:
      - "**/*"
 win:
  target: portable
-  artifactName: MusicQuizResourcepackInstaller-Dev-${version}-Portable.${ext}
+  artifactName: (개발자용) 음악퀴즈 리소스팩설치기-${version}.${ext}
  icon: build/icon.ico
 portable:
-  artifactName: MusicQuizResourcepackInstaller-Dev-${version}-Portable.${ext}
+  artifactName: (개발자용) 음악퀴즈 리소스팩설치기-${version}.${ext}
--- a/electron-builder-rp.yml
+++ b/electron-builder-rp.yml
@@ -35,7 +35,7 @@ extraResources:
      - "**/*"
 win:
  target: portable
-  artifactName: ${productName}-${version}-Portable.${ext}
+  artifactName: 음악퀴즈 리소스팩설치기-${version}.${ext}
  icon: build/icon.ico
 portable:
-  artifactName: ${productName}-${version}-Portable.${ext}
+  artifactName: 음악퀴즈 리소스팩설치기-${version}.${ext}
--- a/electron-builder-uninstall.yml
+++ b/electron-builder-uninstall.yml
@@ -0,0 +1,38 @@
+appId: kr.tkrmagid.musicquiz.uninstall
+productName: 음악퀴즈 파일제거
+# 루트 package.json 의 "main" 은 메인 설치기를 가리키므로, 패키지된 앱이
+# 파일제거 도구를 진입점으로 쓰도록 빌드 시 main 을 덮어쓴다.
+extraMetadata:
+  main: dist/installer-uninstall/main.js
+directories:
+  output: release
+  buildResources: build
+files:
+  - dist/installer-uninstall/**
+  - dist/shared/**
+  - installer-uninstall/**
+  # index.html 은 메인 설치기와 동일한 styles.css 를 공유함
+  # (`<link href="../installer/styles.css">`). 그 한 파일만 명시적으로 포함.
+  - installer/styles.css
+  - build/icon.*
+  - package.json
+  # 이 도구는 sharp(이미지 처리)를 쓰지 않으므로 통째로 제외해 exe 크기를 줄인다.
+  - "!node_modules/sharp/**"
+  - "!node_modules/@img/**"
+# MC_CUSTOM_DIR 을 커스텀으로 빌드했다면 파일제거기도 같은 폴더를 가리켜야 하므로
+# `.env.build` 를 함께 배포한다. i18n 사전(locales/installer-uninstall/ko-kr.json)도 함께.
+extraResources:
+  - from: .
+    to: .
+    filter:
+      - .env.build
+  - from: locales
+    to: locales
+    filter:
+      - "**/*"
+win:
+  target: portable
+  artifactName: 음악퀴즈 파일제거-${version}.${ext}
+  icon: build/icon.ico
+portable:
+  artifactName: 음악퀴즈 파일제거-${version}.${ext}
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -32,7 +32,7 @@ extraResources:
      - "**/*"
 win:
  target: portable
-  artifactName: ${productName}-${version}-Portable.${ext}
+  artifactName: 음악퀴즈 간편설치기-${version}.${ext}
  icon: build/icon.ico
 portable:
-  artifactName: ${productName}-${version}-Portable.${ext}
+  artifactName: 음악퀴즈 간편설치기-${version}.${ext}
--- a/installer-rp/renderer.js
+++ b/installer-rp/renderer.js
@@ -189,63 +189,61 @@ function showAgreementError(message) {
  section.querySelector('#retry').addEventListener('click', renderAgreement)
 }

+// 약관을 한 건씩 페이지로 보여준다. 각 약관마다 "해당 약관에 동의합니다" 체크가 있고,
+// 끝까지 스크롤해 읽어야 체크할 수 있으며, [다음] 을 누르면 다음 약관 페이지가 화면
+// 맨 위에서부터 나온다. 마지막 약관까지 동의하면 다음 단계(step2)로 진행한다.
 function renderAgreementWithKinds(KINDS) {
+  var idx = 0
+  var accepted = {} // kind -> true (뒤로 갔다 와도 동의 상태 유지)
+  var cache = {} // kind -> 렌더된 HTML
+
  var section = document.createElement('section')
  section.className = 'page'
+  pageHost.appendChild(section)
+
+  function renderCurrent() {
+    var k = KINDS[idx]
+    var isLast = idx === KINDS.length - 1
    section.innerHTML =
      '<h2>' + escapeHtml(tt('agreement.heading')) + '</h2>' +
-    '<p class="formMessage">' + escapeHtml(tt('agreement.intro')) + '</p>' +
-    '<div class="tabBar" id="agTabs">' +
-    KINDS.map(function (k, i) {
-      return '<button type="button" class="tabBtn' + (i === 0 ? ' active' : '') + '" data-ag="' + k.id + '">' + escapeHtml(k.tab) + '</button>'
-    }).join('') +
-    '</div>' +
-    '<div class="agreementBody" id="agBody">' + escapeHtml(tt('agreement.loading')) + '</div>' +
-    '<label class="toggleRow" style="margin-top:12px;"><input type="checkbox" id="agAccept" /> ' +
-    escapeHtml(tt('agreement.agreeAll')) + '</label>' +
+      '<p class="formMessage">' + escapeHtml(tt('agreement.stepLabel', { current: idx + 1, total: KINDS.length, label: k.tab })) + '</p>' +
+      '<div class="agreementBody" id="agBody" style="border-radius:10px;">' + escapeHtml(tt('agreement.loading')) + '</div>' +
+      '<div class="formMessage" id="agHint">' + escapeHtml(tt('agreement.readToBottom')) + '</div>' +
+      '<label class="toggleRow" style="margin-top:8px;"><input type="checkbox" id="agAccept" disabled /> ' +
+      escapeHtml(tt('agreement.agreeThis')) + '</label>' +
      '<div class="formMessage" id="agMsg"></div>' +
      '<div class="actionRow">' +
      '  <button class="secondaryBtn" id="back">' + escapeHtml(tt('common.back')) + '</button>' +
      '  <button class="primaryBtn" id="next" disabled>' + escapeHtml(tt('common.next')) + '</button>' +
      '</div>'
-  pageHost.appendChild(section)

    var body = section.querySelector('#agBody')
-  var tabs = section.querySelectorAll('[data-ag]')
-  var nextBtn = section.querySelector('#next')
    var accept = section.querySelector('#agAccept')
+    var nextBtn = section.querySelector('#next')
    var msg = section.querySelector('#agMsg')
+    var hint = section.querySelector('#agHint')

-  // 본문 캐시. 탭 전환 시 재요청하지 않음.
-  var cache = {}
+    // 새 약관 페이지는 화면 맨 위에서부터 보이도록 스크롤을 올린다.
+    if (pageHost) pageHost.scrollTop = 0

-  function showKind(kind) {
-    if (cache[kind]) { body.innerHTML = cache[kind]; return }
-    body.textContent = tt('agreement.loading')
-    api.getTerm(kind).then(function (res) {
-      if (!res.ok) {
-        body.innerHTML = '<p class="formMessage error">' + escapeHtml(tt('agreement.loadFailed', { message: res.message || '' })) + '</p>'
-        return
+    // 약관 본문이 정상 로드된 뒤에만 동의를 허용한다. 로드 실패 상태에서는
+    // 스크롤을 해도 동의 체크가 켜지지 않는다("무조건 약관을 읽도록").
+    var termLoaded = false
+
+    function markReadable() {
+      if (!termLoaded || !accept.disabled) return
+      accept.disabled = false
+      hint.textContent = ''
    }
-      var html = renderTermsMarkdown(res.content || '')
-      cache[kind] = html
-      body.innerHTML = html
-    }).catch(function (err) {
-      body.innerHTML = '<p class="formMessage error">' + escapeHtml(tt('agreement.loadFailed', { message: err.message })) + '</p>'
-    })
+    function checkScrolled() {
+      if (body.scrollHeight - body.scrollTop - body.clientHeight <= 6) markReadable()
    }
-
-  tabs.forEach(function (b) {
-    b.addEventListener('click', function () {
-      tabs.forEach(function (x) { x.classList.remove('active') })
-      b.classList.add('active')
-      showKind(b.getAttribute('data-ag'))
-    })
-  })
+    body.addEventListener('scroll', checkScrolled)

    accept.addEventListener('change', function () {
+      accepted[k.id] = accept.checked
      nextBtn.disabled = !accept.checked
-    if (accept.checked) msg.textContent = ''
+      if (accept.checked) { msg.textContent = ''; msg.classList.remove('error') }
    })

    nextBtn.addEventListener('click', function () {
@@ -254,11 +252,69 @@ function renderAgreementWithKinds(KINDS) {
        msg.classList.add('error')
        return
      }
-    renderStep2()
+      if (isLast) renderStep2()
+      else { idx++; renderCurrent() }
+    })
+    section.querySelector('#back').addEventListener('click', function () {
+      if (idx === 0) renderStep1()
+      else { idx--; renderCurrent() }
    })
-  section.querySelector('#back').addEventListener('click', renderStep1)

-  showKind(KINDS[0].id)
+    function afterLoad() {
+      termLoaded = true
+      body.scrollTop = 0
+      if (accepted[k.id]) {
+        accept.disabled = false
+        accept.checked = true
+        nextBtn.disabled = false
+        hint.textContent = ''
+      }
+      setTimeout(function () {
+        if (body.scrollHeight - body.clientHeight <= 6) markReadable()
+        else checkScrolled()
+      }, 0)
+    }
+
+    // 약관 본문 로드 실패: 동의 불가 상태를 유지하고 다시 시도만 허용한다.
+    function showLoadError(message) {
+      termLoaded = false
+      accept.disabled = true
+      accept.checked = false
+      accepted[k.id] = false
+      nextBtn.disabled = true
+      hint.textContent = tt('agreement.readToBottom')
+      body.innerHTML =
+        '<p class="formMessage error">' + escapeHtml(tt('agreement.loadFailed', { message: message || '' })) + '</p>' +
+        '<div class="actionRow" style="margin-top:10px;"><button class="secondaryBtn" id="agRetry">' + escapeHtml(tt('agreement.retry')) + '</button></div>'
+      var retry = section.querySelector('#agRetry')
+      if (retry) retry.addEventListener('click', loadTerm)
+    }
+
+    function loadTerm() {
+      if (cache[k.id]) {
+        body.innerHTML = cache[k.id]
+        afterLoad()
+        return
+      }
+      body.textContent = tt('agreement.loading')
+      api.getTerm(k.id).then(function (res) {
+        if (!res.ok) {
+          showLoadError(res.message || '')
+          return
+        }
+        var html = renderTermsMarkdown(res.content || '')
+        cache[k.id] = html
+        body.innerHTML = html
+        afterLoad()
+      }).catch(function (err) {
+        showLoadError(err && err.message ? err.message : '')
+      })
+    }
+
+    loadTerm()
+  }
+
+  renderCurrent()
 }

 // 인스톨러용 미니 markdown 렌더러. 사이트 termsEditor 와 같은 규칙을 처리한다.
--- a/installer-uninstall/index.html
+++ b/installer-uninstall/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>음악퀴즈 파일제거</title>
+  <link rel="stylesheet" href="../installer/styles.css" />
+</head>
+<body>
+  <header class="appHeader">
+    <h1>음악퀴즈 파일제거</h1>
+  </header>
+
+  <main id="pageHost"></main>
+
+  <aside class="logViewer" id="logViewer" hidden>
+    <header><h2>로그</h2><button type="button" id="logToggle">접기</button></header>
+    <pre id="logBody"></pre>
+  </aside>
+
+  <script src="./renderer.js"></script>
+</body>
+</html>
--- a/installer-uninstall/renderer.js
+++ b/installer-uninstall/renderer.js
@@ -0,0 +1,209 @@
+'use strict'
+
+const api = window.uninstaller
+
+let I18N = {}
+
+function tt(key, params) {
+  var parts = String(key).split('.')
+  var cur = I18N
+  for (var i = 0; i < parts.length; i++) {
+    if (cur && typeof cur === 'object' && parts[i] in cur) {
+      cur = cur[parts[i]]
+    } else {
+      return key
+    }
+  }
+  if (typeof cur !== 'string') return key
+  if (!params) return cur
+  return cur.replace(/\{\{\s*(\w+)\s*\}\}/g, function (_m, name) {
+    return name in params ? String(params[name]) : '{{' + name + '}}'
+  })
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, function (c) {
+    return c === '&' ? '&amp;' : c === '<' ? '&lt;' : c === '>' ? '&gt;' : c === '"' ? '&quot;' : '&#39;'
+  })
+}
+
+const pageHost = document.getElementById('pageHost')
+const logViewer = document.getElementById('logViewer')
+const logBody = document.getElementById('logBody')
+const logToggle = document.getElementById('logToggle')
+
+logToggle.addEventListener('click', function () {
+  logViewer.classList.toggle('collapsed')
+  if (logViewer.classList.contains('collapsed')) {
+    logViewer.style.height = '36px'
+    logToggle.textContent = tt('logViewer.expand')
+  } else {
+    logViewer.style.height = ''
+    logToggle.textContent = tt('logViewer.collapse')
+  }
+})
+
+api.onLog(function (line) {
+  logViewer.hidden = false
+  logBody.textContent += line + '\n'
+  logBody.scrollTop = logBody.scrollHeight
+})
+
+function applyStaticI18n() {
+  document.title = tt('app.title')
+  var h1 = document.querySelector('.appHeader h1')
+  if (h1) h1.textContent = tt('app.title')
+  var logH2 = logViewer.querySelector('header h2')
+  if (logH2) logH2.textContent = tt('logViewer.heading')
+  logToggle.textContent = tt('logViewer.collapse')
+}
+
+// ── 1단계: 삭제 동의 ──────────────────────────────
+function renderConfirm() {
+  pageHost.innerHTML =
+    '<section class="page">' +
+    '  <h2>' + escapeHtml(tt('confirm.heading')) + '</h2>' +
+    '  <p class="formMessage" style="margin-top:8px;font-size:15px;">' + escapeHtml(tt('confirm.question')) + '</p>' +
+    '  <p class="formMessage" style="margin-top:8px;">' + escapeHtml(tt('confirm.detail')) + '</p>' +
+    '  <div id="previewBox" class="progressCard" style="margin-top:14px;"><p class="formMessage">' +
+    escapeHtml(tt('confirm.loadingPreview')) + '</p></div>' +
+    '  <div class="actionRow" style="margin-top:16px;">' +
+    '    <button class="primaryBtn" id="agreeBtn" disabled>' + escapeHtml(tt('confirm.agreeBtn')) + '</button>' +
+    '    <button class="secondaryBtn" id="cancelBtn">' + escapeHtml(tt('confirm.cancelBtn')) + '</button>' +
+    '  </div>' +
+    '</section>'
+
+  var agreeBtn = document.getElementById('agreeBtn')
+  var cancelBtn = document.getElementById('cancelBtn')
+  var previewBox = document.getElementById('previewBox')
+
+  cancelBtn.addEventListener('click', function () { api.quit() })
+
+  api.preview().then(function (p) {
+    var existingDirs = p.existingDirs || []
+    var items = []
+    if (existingDirs.length) {
+      for (var d = 0; d < existingDirs.length; d++) {
+        items.push(tt('confirm.itemCustomDir', { path: existingDirs[d] }))
+      }
+    } else {
+      var first = (p.allTargetDirs && p.allTargetDirs[0]) || ''
+      items.push(tt('confirm.itemCustomDirMissing', { path: first }))
+    }
+    if (p.shortcutExists) items.push(tt('confirm.itemShortcut'))
+    if (p.launcherProfiles && p.launcherProfiles.length) {
+      items.push(tt('confirm.itemProfiles', { names: p.launcherProfiles.join(', ') }))
+    }
+    var nothing = !existingDirs.length && !p.shortcutExists && (!p.launcherProfiles || !p.launcherProfiles.length)
+    var html = '<p class="formMessage"><strong>' + escapeHtml(tt('confirm.previewTitle')) + '</strong></p><ul>'
+    for (var i = 0; i < items.length; i++) html += '<li>' + escapeHtml(items[i]) + '</li>'
+    html += '</ul>'
+    if (nothing) html += '<p class="formMessage">' + escapeHtml(tt('confirm.nothingFound')) + '</p>'
+    previewBox.innerHTML = html
+    agreeBtn.disabled = false
+    agreeBtn.addEventListener('click', function () { renderChoose(p) })
+  }).catch(function (err) {
+    previewBox.innerHTML = '<p class="formMessage error">' +
+      escapeHtml(tt('confirm.previewFail', { message: (err && err.message) || String(err) })) + '</p>'
+    agreeBtn.disabled = false
+    agreeBtn.addEventListener('click', function () { renderChoose({ existingDirs: [], allTargetDirs: [], shortcutExists: false, launcherProfiles: [] }) })
+  })
+}
+
+// ── 2단계: 삭제 방식 선택 ─────────────────────────
+function renderChoose(preview) {
+  pageHost.innerHTML =
+    '<section class="page">' +
+    '  <h2>' + escapeHtml(tt('choose.heading')) + '</h2>' +
+    '  <p class="formMessage" style="margin-top:8px;">' + escapeHtml(tt('choose.intro')) + '</p>' +
+    '  <div class="actionRow" style="margin-top:18px;flex-direction:column;gap:12px;align-items:stretch;">' +
+    '    <button class="secondaryBtn" id="trashBtn" style="padding:16px;text-align:left;">' +
+    '      <strong>' + escapeHtml(tt('choose.trashTitle')) + '</strong><br/>' +
+    '      <span class="formMessage">' + escapeHtml(tt('choose.trashDesc')) + '</span></button>' +
+    '    <button class="secondaryBtn" id="permBtn" style="padding:16px;text-align:left;">' +
+    '      <strong>' + escapeHtml(tt('choose.permTitle')) + '</strong><br/>' +
+    '      <span class="formMessage">' + escapeHtml(tt('choose.permDesc')) + '</span></button>' +
+    '  </div>' +
+    '  <div class="actionRow" style="margin-top:16px;">' +
+    '    <button class="secondaryBtn" id="backBtn">' + escapeHtml(tt('choose.backBtn')) + '</button>' +
+    '  </div>' +
+    '  <div id="runState"></div>' +
+    '</section>'
+
+  var trashBtn = document.getElementById('trashBtn')
+  var permBtn = document.getElementById('permBtn')
+  var backBtn = document.getElementById('backBtn')
+  var runState = document.getElementById('runState')
+
+  backBtn.addEventListener('click', function () { renderConfirm() })
+
+  function runMode(mode) {
+    var warn = mode === 'permanent' ? tt('choose.confirmPermanent') : tt('choose.confirmTrash')
+    if (!window.confirm(warn)) return
+    trashBtn.disabled = true
+    permBtn.disabled = true
+    backBtn.disabled = true
+    runState.innerHTML = '<p class="formMessage" style="margin-top:14px;">' + escapeHtml(tt('choose.running')) + '</p>'
+    api.run(mode).then(function (result) {
+      renderResult(result, mode)
+    }).catch(function (err) {
+      runState.innerHTML = '<p class="formMessage error" style="margin-top:14px;">' +
+        escapeHtml(tt('choose.error', { message: (err && err.message) || String(err) })) + '</p>'
+      trashBtn.disabled = false
+      permBtn.disabled = false
+      backBtn.disabled = false
+    })
+  }
+
+  trashBtn.addEventListener('click', function () { runMode('trash') })
+  permBtn.addEventListener('click', function () { runMode('permanent') })
+}
+
+// ── 3단계: 결과 ──────────────────────────────────
+function renderResult(result, mode) {
+  var total = (result.removed ? result.removed.length : 0) + (result.profilesRemoved ? result.profilesRemoved.length : 0)
+  var hasErr = result.errors && result.errors.length
+  var cls = hasErr ? 'error' : 'done'
+  var badge = hasErr ? tt('result.badgePartial') : tt('result.badgeOk')
+
+  var lines = ''
+  if (result.removed && result.removed.length) {
+    lines += '<p class="formMessage"><strong>' + escapeHtml(tt('result.removedTitle')) + '</strong></p><ul>'
+    for (var i = 0; i < result.removed.length; i++) lines += '<li>' + escapeHtml(result.removed[i]) + '</li>'
+    lines += '</ul>'
+  }
+  if (result.profilesRemoved && result.profilesRemoved.length) {
+    lines += '<p class="formMessage"><strong>' + escapeHtml(tt('result.profilesTitle')) + '</strong></p><ul>'
+    for (var j = 0; j < result.profilesRemoved.length; j++) lines += '<li>' + escapeHtml(result.profilesRemoved[j]) + '</li>'
+    lines += '</ul>'
+  }
+  if (hasErr) {
+    lines += '<p class="formMessage error"><strong>' + escapeHtml(tt('result.errorsTitle')) + '</strong></p><ul>'
+    for (var k = 0; k < result.errors.length; k++) lines += '<li>' + escapeHtml(result.errors[k]) + '</li>'
+    lines += '</ul>'
+  }
+  if (total === 0 && !hasErr) {
+    lines += '<p class="formMessage">' + escapeHtml(tt('result.nothing')) + '</p>'
+  }
+
+  pageHost.innerHTML =
+    '<section class="page">' +
+    '  <div class="progressCard ' + cls + '" style="margin-top:6px;">' +
+    '    <div class="cardTop"><span class="statusBadge ' + (hasErr ? 'fail' : 'ok') + '">' + escapeHtml(badge) + '</span> ' +
+    '    <span class="label">' + escapeHtml(tt(mode === 'permanent' ? 'mode.permanent' : 'mode.trash')) + '</span></div>' +
+    lines +
+    '    <p class="formMessage" style="margin-top:10px;"><small>' + escapeHtml(tt('result.note')) + '</small></p>' +
+    '  </div>' +
+    '  <div class="actionRow" style="margin-top:16px;">' +
+    '    <button class="primaryBtn" id="quitBtn">' + escapeHtml(tt('result.quitBtn')) + '</button>' +
+    '  </div>' +
+    '</section>'
+
+  document.getElementById('quitBtn').addEventListener('click', function () { api.quit() })
+}
+
+;(async function () {
+  try { I18N = (await api.loadLocale()) || {} } catch (_) { I18N = {} }
+  applyStaticI18n()
+  renderConfirm()
+})()
--- a/installer/renderer.js
+++ b/installer/renderer.js
@@ -232,63 +232,59 @@ function showAgreementError(message) {
  section.querySelector('#retry').addEventListener('click', renderAgreement)
 }

+// 약관을 한 건씩 페이지로 보여준다. 각 약관마다 "해당 약관에 동의합니다" 체크가 있고,
+// 끝까지 스크롤해 읽어야 체크할 수 있으며, [다음] 을 누르면 다음 약관 페이지가 화면
+// 맨 위에서부터 나온다. 마지막 약관까지 동의하면 다음 단계(step2)로 진행한다.
 function renderAgreementWithKinds(KINDS) {
+  var idx = 0
+  var accepted = {} // kind -> true (뒤로 갔다 와도 동의 상태 유지)
+  var cache = {} // kind -> 렌더된 HTML
+
  var section = document.createElement('section')
  section.className = 'page'
-  section.innerHTML =
-    '<h2>' + tt('agreement.heading') + '</h2>' +
-    '<p class="formMessage">' + tt('agreement.intro') + '</p>' +
-    '<div class="tabBar" id="agTabs">' +
-    KINDS.map(function (k, i) {
-      return '<button type="button" class="tabBtn' + (i === 0 ? ' active' : '') + '" data-ag="' + escapeHtml(k.id) + '">' + escapeHtml(k.tab) + '</button>'
-    }).join('') +
-    '</div>' +
-    '<div class="agreementBody" id="agBody">' + tt('agreement.loading') + '</div>' +
-    '<label class="toggleRow" style="margin-top:12px;"><input type="checkbox" id="agAccept" /> ' +
-    tt('agreement.agreeAll') + '</label>' +
-    '<div class="formMessage" id="agMsg"></div>' +
-    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'
  pageHost.appendChild(section)

+  function renderCurrent() {
+    var k = KINDS[idx]
+    var isLast = idx === KINDS.length - 1
+    section.innerHTML =
+      '<h2>' + tt('agreement.heading') + '</h2>' +
+      '<p class="formMessage">' + escapeHtml(tt('agreement.stepLabel', { current: idx + 1, total: KINDS.length, label: k.tab })) + '</p>' +
+      '<div class="agreementBody" id="agBody" style="border-radius:10px;">' + tt('agreement.loading') + '</div>' +
+      '<div class="formMessage" id="agHint">' + tt('agreement.readToBottom') + '</div>' +
+      '<label class="toggleRow" style="margin-top:8px;"><input type="checkbox" id="agAccept" disabled /> ' +
+      tt('agreement.agreeThis') + '</label>' +
+      '<div class="formMessage" id="agMsg"></div>' +
+      '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'
+
    var body = section.querySelector('#agBody')
-  var tabs = section.querySelectorAll('[data-ag]')
-  var nextBtn = section.querySelector('#next')
    var accept = section.querySelector('#agAccept')
+    var nextBtn = section.querySelector('#next')
    var msg = section.querySelector('#agMsg')
+    var hint = section.querySelector('#agHint')

-  // 약관 본문은 한 번 받으면 캐시. 탭 전환 시 재요청하지 않는다.
-  var cache = {}
+    // 새 약관 페이지는 화면 맨 위에서부터 보이도록 스크롤을 올린다.
+    if (pageHost) pageHost.scrollTop = 0

-  function showKind(kind) {
-    if (cache[kind]) {
-      body.innerHTML = cache[kind]
-      return
-    }
-    body.textContent = tt('agreement.loading')
-    installerApi.getTerm(kind).then(function (res) {
-      if (!res.ok) {
-        body.innerHTML = '<p class="formMessage error">' + tt('agreement.loadFailed', { message: res.message || '' }) + '</p>'
-        return
-      }
-      var html = renderTermsMarkdown(res.content || '')
-      cache[kind] = html
-      body.innerHTML = html
-    }).catch(function (err) {
-      body.innerHTML = '<p class="formMessage error">' + tt('agreement.loadFailed', { message: err.message }) + '</p>'
-    })
-  }
+    // 약관 본문이 정상 로드된 뒤에만 동의를 허용한다. 로드 실패 상태에서는
+    // 스크롤을 해도 동의 체크가 켜지지 않는다("무조건 약관을 읽도록").
+    var termLoaded = false

-  tabs.forEach(function (b) {
-    b.addEventListener('click', function () {
-      tabs.forEach(function (x) { x.classList.remove('active') })
-      b.classList.add('active')
-      showKind(b.getAttribute('data-ag'))
-    })
-  })
+    function markReadable() {
+      if (!termLoaded || !accept.disabled) return
+      accept.disabled = false
+      hint.textContent = ''
+    }
+    function checkScrolled() {
+      // 본문을 끝까지(하단 근처) 내렸으면 동의 체크를 허용한다.
+      if (body.scrollHeight - body.scrollTop - body.clientHeight <= 6) markReadable()
+    }
+    body.addEventListener('scroll', checkScrolled)

    accept.addEventListener('change', function () {
+      accepted[k.id] = accept.checked
      nextBtn.disabled = !accept.checked
-    if (accept.checked) msg.textContent = ''
+      if (accept.checked) { msg.textContent = ''; msg.classList.remove('error') }
    })

    nextBtn.addEventListener('click', function () {
@@ -297,11 +293,71 @@ function renderAgreementWithKinds(KINDS) {
        msg.classList.add('error')
        return
      }
-    renderStep2()
+      if (isLast) renderStep2()
+      else { idx++; renderCurrent() }
+    })
+    section.querySelector('#back').addEventListener('click', function () {
+      if (idx === 0) renderStep1()
+      else { idx--; renderCurrent() }
    })
-  section.querySelector('#back').addEventListener('click', renderStep1)

-  showKind(KINDS[0].id)
+    function afterLoad() {
+      termLoaded = true
+      body.scrollTop = 0
+      // 이미 동의했던 약관으로 되돌아온 경우: 체크/다음 활성화 유지.
+      if (accepted[k.id]) {
+        accept.disabled = false
+        accept.checked = true
+        nextBtn.disabled = false
+        hint.textContent = ''
+      }
+      // 레이아웃 확정 후: 스크롤이 필요 없을 만큼 짧은 약관이면 바로 동의 허용.
+      setTimeout(function () {
+        if (body.scrollHeight - body.clientHeight <= 6) markReadable()
+        else checkScrolled()
+      }, 0)
+    }
+
+    // 약관 본문 로드 실패: 동의 불가 상태를 유지하고 다시 시도만 허용한다.
+    function showLoadError(message) {
+      termLoaded = false
+      accept.disabled = true
+      accept.checked = false
+      accepted[k.id] = false
+      nextBtn.disabled = true
+      hint.textContent = tt('agreement.readToBottom')
+      body.innerHTML =
+        '<p class="formMessage error">' + tt('agreement.loadFailed', { message: message || '' }) + '</p>' +
+        '<div class="actionRow" style="margin-top:10px;"><button class="secondaryBtn" id="agRetry">' + tt('agreement.retry') + '</button></div>'
+      var retry = section.querySelector('#agRetry')
+      if (retry) retry.addEventListener('click', loadTerm)
+    }
+
+    function loadTerm() {
+      if (cache[k.id]) {
+        body.innerHTML = cache[k.id]
+        afterLoad()
+        return
+      }
+      body.textContent = tt('agreement.loading')
+      installerApi.getTerm(k.id).then(function (res) {
+        if (!res.ok) {
+          showLoadError(res.message || '')
+          return
+        }
+        var html = renderTermsMarkdown(res.content || '')
+        cache[k.id] = html
+        body.innerHTML = html
+        afterLoad()
+      }).catch(function (err) {
+        showLoadError(err && err.message ? err.message : '')
+      })
+    }
+
+    loadTerm()
+  }
+
+  renderCurrent()
 }

 // 인스톨러용 미니 markdown 렌더러. 사이트 termsEditor 와 동일한 규칙을 처리한다.
--- a/locales/installer-rp/ko-kr.json
+++ b/locales/installer-rp/ko-kr.json
@@ -33,7 +33,7 @@
  },
  "agreement": {
    "heading": "약관 동의",
-    "intro": "리소스팩을 설치하기 전에 아래 약관을 모두 확인하고 동의해 주세요.",
+    "intro": "리소스팩을 설치하기 전에 아래 약관을 한 건씩 끝까지 읽고 동의해 주세요.",
    "tabResourcepack": "리소스팩 약관",
    "tabInstaller": "리소스팩 설치기 약관",
    "loading": "약관을 불러오는 중...",
@@ -41,6 +41,9 @@
    "listLoadFailed": "약관 표시에 실패하여 설치를 진행할 수 없습니다.\n사유: {{message}}\n네트워크 상태를 확인하고 다시 시도하거나, 처음 단계로 돌아가 주세요.",
    "retry": "다시 시도",
    "agreeAll": "위 모든 약관에 동의합니다.",
+    "agreeThis": "해당 약관에 동의합니다.",
+    "readToBottom": "약관을 끝까지 내려서 확인하면 동의할 수 있습니다.",
+    "stepLabel": "약관 {{current}}/{{total}} — {{label}}",
    "agreeRequired": "약관에 동의해야 다음 단계로 진행할 수 있습니다.",
    "cancelling": "취소 중…"
  },
--- a/locales/installer-uninstall/ko-kr.json
+++ b/locales/installer-uninstall/ko-kr.json
@@ -0,0 +1,63 @@
+{
+  "app": {
+    "title": "음악퀴즈 파일제거"
+  },
+  "logViewer": {
+    "heading": "로그",
+    "collapse": "접기",
+    "expand": "펼치기"
+  },
+  "mode": {
+    "trash": "휴지통으로 이동",
+    "permanent": "컴퓨터에서 완전 삭제"
+  },
+  "confirm": {
+    "heading": "음악퀴즈 파일제거",
+    "question": "음악퀴즈 간편설치기로 설치한 내용들과, 음악퀴즈 관련된 내용을 전부 삭제하시겠습니까?",
+    "detail": "음악퀴즈 간편설치기·리소스팩설치기가 만든 게임 폴더와 캐시, 마인크래프트 런처의 음악퀴즈 프로필을 정리합니다. 평소 쓰던 .minecraft 본체는 건드리지 않습니다.",
+    "loadingPreview": "삭제 대상을 확인하는 중…",
+    "previewTitle": "삭제 대상",
+    "itemCustomDir": "음악퀴즈 전용 폴더: {{path}}",
+    "itemCustomDirMissing": "음악퀴즈 전용 폴더가 없음(이미 삭제됨): {{path}}",
+    "itemShortcut": "바탕화면의 'MusicQuiz Server' 바로가기",
+    "itemProfiles": "마인크래프트 런처 프로필: {{names}}",
+    "nothingFound": "삭제할 음악퀴즈 관련 항목을 찾지 못했습니다. 이미 정리된 상태일 수 있습니다.",
+    "previewFail": "삭제 대상 확인 실패: {{message}}",
+    "agreeBtn": "동의하고 계속",
+    "cancelBtn": "취소(종료)"
+  },
+  "choose": {
+    "heading": "삭제 방식 선택",
+    "intro": "삭제 방식을 선택하세요.",
+    "trashTitle": "휴지통으로 이동",
+    "trashDesc": "휴지통으로 옮깁니다. 실수했을 때 되돌릴 수 있습니다.",
+    "permTitle": "컴퓨터에서 완전 삭제",
+    "permDesc": "휴지통을 거치지 않고 즉시 완전히 지웁니다. 되돌릴 수 없습니다.",
+    "backBtn": "뒤로",
+    "confirmTrash": "선택한 음악퀴즈 관련 항목을 휴지통으로 이동합니다. 계속하시겠습니까?",
+    "confirmPermanent": "선택한 음악퀴즈 관련 항목을 컴퓨터에서 완전히 삭제합니다. 되돌릴 수 없습니다. 계속하시겠습니까?",
+    "running": "삭제하는 중…",
+    "error": "삭제 중 오류: {{message}}"
+  },
+  "result": {
+    "badgeOk": "완료",
+    "badgePartial": "일부 실패",
+    "removedTitle": "삭제한 항목",
+    "profilesTitle": "제거한 런처 프로필",
+    "errorsTitle": "삭제하지 못한 항목",
+    "nothing": "삭제할 항목이 없었습니다.",
+    "note": "직접 지정한 위치에 서버를 설치했다면 그 폴더는 위치를 알 수 없어 자동 삭제되지 않습니다. 필요하면 직접 삭제하세요.",
+    "quitBtn": "종료"
+  },
+  "log": {
+    "start": "삭제 시작 ({{mode}})",
+    "removedDir": "폴더 제거: {{path}}",
+    "removedShortcut": "바로가기 제거: {{path}}",
+    "removedProfile": "런처 프로필 제거: {{name}}",
+    "removeFail": "제거 실패: {{path}} — {{message}}",
+    "customDirMissing": "음악퀴즈 폴더가 이미 없음: {{path}}",
+    "launcherParseFail": "launcher_profiles.json 을 읽지 못함: {{path}}",
+    "launcherWriteFail": "launcher_profiles.json 갱신 실패: {{message}}",
+    "done": "정리 완료 — 총 {{count}}개 항목 처리"
+  }
+}
--- a/locales/installer/ko-kr.json
+++ b/locales/installer/ko-kr.json
@@ -41,7 +41,7 @@
  },
  "agreement": {
    "heading": "약관 동의",
-    "intro": "설치 전에 아래 약관을 모두 확인하고 동의해 주세요.",
+    "intro": "설치 전에 아래 약관을 한 건씩 끝까지 읽고 동의해 주세요.",
    "tabMap": "맵 약관",
    "tabMod": "모드 약관",
    "tabInstaller": "설치기 약관",
@@ -50,6 +50,9 @@
    "listLoadFailed": "약관 표시에 실패하여 설치를 진행할 수 없습니다.\n사유: {{message}}\n네트워크 상태를 확인하고 다시 시도하거나, 처음 단계로 돌아가 주세요.",
    "retry": "다시 시도",
    "agreeAll": "위 모든 약관에 동의합니다.",
+    "agreeThis": "해당 약관에 동의합니다.",
+    "readToBottom": "약관을 끝까지 내려서 확인하면 동의할 수 있습니다.",
+    "stepLabel": "약관 {{current}}/{{total}} — {{label}}",
    "agreeRequired": "약관에 동의해야 다음 단계로 진행할 수 있습니다."
  },
  "step1": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "minecraft-music-quiz-installer",
-  "version": "0.3.23",
+  "version": "0.4.2",
  "description": "마인크래프트 음악퀴즈 간편설치기 + 관리 사이트",
  "main": "dist/installer/main.js",
  "scripts": {
@@ -10,13 +10,15 @@
    "installer": "tsc -p tsconfig.installer.json && electron .",
    "installer:rp": "tsc -p tsconfig.installer-rp.json && electron dist/installer-rp/main.js",
    "installer:pf": "tsc -p tsconfig.installer-pf.json && electron dist/installer-pf/main.js",
+    "installer:uninstall": "tsc -p tsconfig.installer-uninstall.json && electron dist/installer-uninstall/main.js",
    "preinstall:sharp-win32": "npm install --no-save --force @img/sharp-win32-x64@0.34.5",
    "build:launcher-icon": "node scripts/build-launcher-icon.cjs",
    "dist:win": "npm run preinstall:sharp-win32 && npm run build:launcher-icon && tsc -p tsconfig.installer.json && electron-builder --win --config electron-builder.yml",
    "dist:win:rp": "npm run preinstall:sharp-win32 && tsc -p tsconfig.installer-rp.json && electron-builder --win --config electron-builder-rp.yml",
    "dist:win:pf": "tsc -p tsconfig.installer-pf.json && electron-builder --win --config electron-builder-pf.yml",
    "dist:win:dev": "npm run preinstall:sharp-win32 && npm run build:launcher-icon && tsc -p tsconfig.installer.json && electron-builder --win --config electron-builder-dev.yml",
-    "dist:win:rp:dev": "npm run preinstall:sharp-win32 && tsc -p tsconfig.installer-rp.json && electron-builder --win --config electron-builder-rp-dev.yml"
+    "dist:win:rp:dev": "npm run preinstall:sharp-win32 && tsc -p tsconfig.installer-rp.json && electron-builder --win --config electron-builder-rp-dev.yml",
+    "dist:win:uninstall": "tsc -p tsconfig.installer-uninstall.json && electron-builder --win --config electron-builder-uninstall.yml"
  },
  "dependencies": {
    "@types/archiver": "^7.0.0",
--- a/src/installer-pf/main.ts
+++ b/src/installer-pf/main.ts
@@ -16,6 +16,13 @@ const localeDict = i18n.dict

 let mainWindow: BrowserWindow | null = null

+// 이 도구가 UPnP 로 직접 열어둔 포트. 앱이 살아 있는 동안 매핑을 유지하고,
+// 창을 닫거나 종료할 때 이 포트의 매핑을 제거한다(사용자가 라우터에 직접 만든
+// 영구 규칙으로 이미 열려 있던 preForwarded 포트는 우리 것이 아니므로 추적하지 않음).
+let activePort: number | null = null
+// before-quit 재진입 가드. 매핑 정리를 마친 뒤에만 실제 종료로 넘어가게 한다.
+let cleanupDone = false
+
 function createMainWindow(): void {
  const iconPath = path.join(__dirname, '..', '..', 'build', process.platform === 'win32' ? 'icon.ico' : 'icon.png')
  mainWindow = new BrowserWindow({
@@ -355,6 +362,13 @@ ipcMain.handle('pf:open', async (_event, portInput: number): Promise<PortForward
  const localIp = detectLocalIpv4()
  if (localIp) sendLog(t('log.localIp', { ip: localIp }))

+  // 다른 포트를 이미 우리가 열어둔 상태에서 새 포트를 열면, 이전 포트 매핑을 먼저 닫아
+  // 매핑이 새는 것을 막는다.
+  if (activePort !== null && activePort !== port) {
+    await removeUpnpMapping(activePort)
+    activePort = null
+  }
+
  // 이전에 남은 매핑을 먼저 제거해 "사용자 라우터 규칙으로 이미 열린 상태" 와 구별.
  sendLog(t('log.cleanup'))
  await removeUpnpMapping(port)
@@ -387,6 +401,8 @@ ipcMain.handle('pf:open', async (_event, portInput: number): Promise<PortForward
  sendLog(t('log.upnpTry', { port }))
  try {
    await openPortViaUpnp(port)
+    // 우리가 연 포트로 기록 → 앱 종료/창 닫힘 시 자동으로 매핑 제거.
+    activePort = port
    sendLog(t('log.upnpReqOk'))
  } catch (error) {
    const msg = (error as Error).message
@@ -415,6 +431,7 @@ ipcMain.handle('pf:close', async (_event, portInput: number): Promise<void> => {
  const port = Number.isFinite(portInput) && portInput > 0 && portInput < 65536 ? Math.floor(portInput) : 25565
  sendLog(t('log.closeTry', { port }))
  await removeUpnpMapping(port)
+  if (activePort === port) activePort = null
 })

 ipcMain.handle('pf:quit', async () => {
@@ -432,6 +449,20 @@ app.whenReady().then(() => {
  })
 })

+// 창을 닫거나 종료할 때, 이 도구가 열어둔 UPnP 매핑을 제거한 뒤 실제 종료로 넘어간다.
+// removeUpnpMapping 은 비동기라 before-quit 을 한 번 막고(cleanup) 끝나면 다시 quit 한다.
+app.on('before-quit', (event) => {
+  if (cleanupDone || activePort === null) return
+  event.preventDefault()
+  const port = activePort
+  activePort = null
+  sendLog(t('log.closeTry', { port }))
+  void removeUpnpMapping(port).finally(() => {
+    cleanupDone = true
+    app.quit()
+  })
+})
+
 app.on('window-all-closed', () => {
  app.quit()
 })
--- a/src/installer-rp/main.ts
+++ b/src/installer-rp/main.ts
@@ -9,7 +9,7 @@ import { URL } from 'node:url'
 import type { ChildProcess } from 'node:child_process'
 import type { Manifest, PackDefinition, PackList } from '../shared/types.js'
 import { normalizePackDefinition } from '../shared/store.js'
-import { getAppDataDir, getMcCustomDir } from '../shared/paths.js'
+import { getAppDataDir, getMcCustomDir, withCustomDirName } from '../shared/paths.js'
 import { loadEnv, getManifestUrl } from '../shared/env.js'
 import { loadComponentI18n } from '../shared/i18n.js'
 import { resolveAudience, isPackVisibleForAudience, type Audience } from '../shared/audience.js'
@@ -273,7 +273,25 @@ ipcMain.handle('rp:packs:select', async (_event, packKey: string) => {
  sendLog(t('log.selectedPack', { key: packKey }))
 })

-ipcMain.handle('rp:i18n:dict', () => localeDict)
+// 개발자용 빌드(musicQuizAudience=developer)면 렌더러에 넘기는 사전의 제목 앞에
+// "(개발자용) " 을 붙여, 창 제목/헤더에 개발자용임을 표시한다.
+function dictForRenderer(): Record<string, unknown> {
+  // 커스텀 폴더명을 UI 문구에 반영.
+  const base = withCustomDirName(localeDict)
+  if (getAudience() !== 'developer') return base
+  const prefix = '(개발자용) '
+  const appBlock = (base.app ?? {}) as Record<string, unknown>
+  const title = appBlock.title
+  return {
+    ...base,
+    app: {
+      ...appBlock,
+      title: typeof title === 'string' && !title.startsWith(prefix) ? prefix + title : title
+    }
+  }
+}
+
+ipcMain.handle('rp:i18n:dict', () => dictForRenderer())

 // ── IPC: 약관 다운로드 ──────────────────────────────
 // v0.3.4~ : 사이트에서 임의 kind 가 만들어질 수 있으니 5종 화이트리스트 대신
--- a/src/installer-uninstall/main.ts
+++ b/src/installer-uninstall/main.ts
@@ -0,0 +1,224 @@
+import { app, BrowserWindow, ipcMain, shell } from 'electron'
+import path from 'node:path'
+import fs from 'node:fs'
+import fsp from 'node:fs/promises'
+import { loadEnv } from '../shared/env.js'
+import { getAppDataDir, getMcCustomDir } from '../shared/paths.js'
+import { loadComponentI18n } from '../shared/i18n.js'
+
+// 음악퀴즈 파일제거 도구. 음악퀴즈 간편설치기 / 리소스팩설치기가 만든 데이터를
+// 한 번에 정리한다. (설치기 exe 자체는 사용자가 임의 위치에 둔 포터블이라
+// 위치를 알 수 없어 삭제 대상에서 제외)
+loadEnv()
+
+const i18n = loadComponentI18n('installer-uninstall')
+const t = i18n.t
+const localeDict = i18n.dict
+
+let mainWindow: BrowserWindow | null = null
+
+function createMainWindow(): void {
+  const iconPath = path.join(__dirname, '..', '..', 'build', process.platform === 'win32' ? 'icon.ico' : 'icon.png')
+  mainWindow = new BrowserWindow({
+    width: 720,
+    height: 620,
+    icon: iconPath,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false
+    }
+  })
+  mainWindow.removeMenu()
+  void mainWindow.loadFile(path.join(__dirname, '..', '..', 'installer-uninstall', 'index.html'))
+}
+
+function sendLog(line: string): void {
+  if (!mainWindow || mainWindow.isDestroyed()) return
+  const stamped = `[${new Date().toLocaleTimeString('ko-KR', { hour12: false })}] ${line}`
+  mainWindow.webContents.send('log', stamped)
+}
+
+/** 마인크래프트 런처 프로필 파일 경로. */
+function launcherProfilesPath(): string {
+  return path.join(getAppDataDir(), '.minecraft', 'launcher_profiles.json')
+}
+
+/** 데스크톱에 설치기가 만든 서버 실행 바로가기 경로. */
+function serverShortcutPath(): string {
+  return path.join(app.getPath('desktop'), 'MusicQuiz Server.lnk')
+}
+
+/** 기본 폴더 이름(.mc_custom) 경로. MC_CUSTOM_DIR 을 바꿔 빌드해도, 예전 기본 폴더가 남아 있을 수 있으므로 함께 지운다. */
+function defaultCustomDir(): string {
+  return path.join(getAppDataDir(), '.mc_custom')
+}
+
+/** 삭제 대상 커스텀 폴더 후보(현재 설정값 + 기본 .mc_custom)를 대소문자 무시로 중복 제거. */
+function targetCustomDirs(): string[] {
+  const seen = new Set<string>()
+  const out: string[] = []
+  for (const dir of [getMcCustomDir(), defaultCustomDir()]) {
+    const key = path.resolve(dir).toLowerCase()
+    if (!seen.has(key)) {
+      seen.add(key)
+      out.push(dir)
+    }
+  }
+  return out
+}
+
+/** 두 경로가 같은 폴더거나, a 가 b 하위인지(대소문자 무시 — Windows 파일계). */
+function isSameOrInside(child: string, parent: string): boolean {
+  const c = path.resolve(child).replace(/[\\/]+$/, '').toLowerCase()
+  const p = path.resolve(parent).replace(/[\\/]+$/, '').toLowerCase()
+  return c === p || c.startsWith(p + path.sep.toLowerCase()) || c.startsWith(p + '/')
+}
+
+interface UninstallPreview {
+  existingDirs: string[]
+  allTargetDirs: string[]
+  shortcutExists: boolean
+  launcherProfiles: string[]
+}
+
+/** 삭제 전 미리보기: 실제로 존재하는 대상만 추려 렌더러에 보여준다. */
+ipcMain.handle('uninstall:preview', async (): Promise<UninstallPreview> => {
+  const allTargetDirs = targetCustomDirs()
+  const existingDirs = allTargetDirs.filter((d) => fs.existsSync(d))
+  const shortcutExists = fs.existsSync(serverShortcutPath())
+  const launcherProfiles = findMusicQuizProfiles(allTargetDirs)
+  return { existingDirs, allTargetDirs, shortcutExists, launcherProfiles }
+})
+
+/** launcher_profiles.json 에서 gameDir 가 커스텀 폴더(또는 그 하위)인 프로필 이름 목록. */
+function findMusicQuizProfiles(customDirs: string[]): string[] {
+  const file = launcherProfilesPath()
+  if (!fs.existsSync(file)) return []
+  try {
+    const json = JSON.parse(fs.readFileSync(file, 'utf8')) as {
+      profiles?: Record<string, { name?: string; gameDir?: string }>
+    }
+    const profiles = json.profiles ?? {}
+    const names: string[] = []
+    for (const [key, prof] of Object.entries(profiles)) {
+      const gameDir = typeof prof?.gameDir === 'string' ? prof.gameDir : ''
+      if (gameDir && customDirs.some((d) => isSameOrInside(gameDir, d))) {
+        names.push(typeof prof?.name === 'string' && prof.name ? prof.name : key)
+      }
+    }
+    return names
+  } catch {
+    return []
+  }
+}
+
+interface UninstallResult {
+  removed: string[]
+  profilesRemoved: string[]
+  errors: string[]
+}
+
+/** 하나의 파일/폴더를 mode 에 따라 휴지통 이동 또는 완전 삭제. */
+async function removeOne(target: string, mode: 'trash' | 'permanent'): Promise<void> {
+  if (mode === 'trash') {
+    await shell.trashItem(target)
+  } else {
+    await fsp.rm(target, { recursive: true, force: true })
+  }
+}
+
+/** launcher_profiles.json 에서 음악퀴즈 프로필만 제거하고 나머지는 보존. */
+async function cleanLauncherProfiles(customDirs: string[]): Promise<string[]> {
+  const file = launcherProfilesPath()
+  if (!fs.existsSync(file)) return []
+  let json: { profiles?: Record<string, { name?: string; gameDir?: string }> }
+  try {
+    json = JSON.parse(await fsp.readFile(file, 'utf8'))
+  } catch {
+    sendLog(t('log.launcherParseFail', { path: file }))
+    return []
+  }
+  const profiles = json.profiles ?? {}
+  const removed: string[] = []
+  for (const [key, prof] of Object.entries(profiles)) {
+    const gameDir = typeof prof?.gameDir === 'string' ? prof.gameDir : ''
+    if (gameDir && customDirs.some((d) => isSameOrInside(gameDir, d))) {
+      removed.push(typeof prof?.name === 'string' && prof.name ? prof.name : key)
+      delete profiles[key]
+    }
+  }
+  if (removed.length > 0) {
+    json.profiles = profiles
+    await fsp.writeFile(file, `${JSON.stringify(json, null, 2)}\n`, 'utf8')
+  }
+  return removed
+}
+
+ipcMain.handle('uninstall:run', async (_event, modeInput: unknown): Promise<UninstallResult> => {
+  const mode: 'trash' | 'permanent' = modeInput === 'permanent' ? 'permanent' : 'trash'
+  const customDirs = targetCustomDirs()
+  const removed: string[] = []
+  const errors: string[] = []
+
+  sendLog(t('log.start', { mode: t(mode === 'trash' ? 'mode.trash' : 'mode.permanent') }))
+
+  // 1) 커스텀 게임/캐시 폴더 통째로(현재 설정값 + 기본 .mc_custom).
+  for (const customDir of customDirs) {
+    if (fs.existsSync(customDir)) {
+      try {
+        await removeOne(customDir, mode)
+        removed.push(customDir)
+        sendLog(t('log.removedDir', { path: customDir }))
+      } catch (err) {
+        const msg = (err as Error).message
+        errors.push(`${customDir}: ${msg}`)
+        sendLog(t('log.removeFail', { path: customDir, message: msg }))
+      }
+    } else {
+      sendLog(t('log.customDirMissing', { path: customDir }))
+    }
+  }
+
+  // 2) 데스크톱 서버 실행 바로가기.
+  const shortcut = serverShortcutPath()
+  if (fs.existsSync(shortcut)) {
+    try {
+      await removeOne(shortcut, mode)
+      removed.push(shortcut)
+      sendLog(t('log.removedShortcut', { path: shortcut }))
+    } catch (err) {
+      const msg = (err as Error).message
+      errors.push(`${shortcut}: ${msg}`)
+      sendLog(t('log.removeFail', { path: shortcut, message: msg }))
+    }
+  }
+
+  // 3) 마인크래프트 런처 프로필에서 음악퀴즈 설정 제거.
+  let profilesRemoved: string[] = []
+  try {
+    profilesRemoved = await cleanLauncherProfiles(customDirs)
+    for (const name of profilesRemoved) sendLog(t('log.removedProfile', { name }))
+  } catch (err) {
+    const msg = (err as Error).message
+    errors.push(`launcher_profiles.json: ${msg}`)
+    sendLog(t('log.launcherWriteFail', { message: msg }))
+  }
+
+  sendLog(t('log.done', { count: removed.length + profilesRemoved.length }))
+  return { removed, profilesRemoved, errors }
+})
+
+ipcMain.handle('uninstall:i18n:dict', () => localeDict)
+ipcMain.handle('uninstall:quit', () => app.quit())
+
+app.whenReady().then(() => {
+  createMainWindow()
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createMainWindow()
+  })
+})
+
+app.on('window-all-closed', () => {
+  app.quit()
+})
--- a/src/installer-uninstall/preload.ts
+++ b/src/installer-uninstall/preload.ts
@@ -0,0 +1,43 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+interface UninstallPreview {
+  customDir: string
+  customDirExists: boolean
+  shortcutExists: boolean
+  launcherProfiles: string[]
+}
+
+interface UninstallResult {
+  removed: string[]
+  profilesRemoved: string[]
+  errors: string[]
+}
+
+const api = {
+  /** i18n 사전을 렌더러에 전달. */
+  loadLocale: (): Promise<Record<string, unknown>> => ipcRenderer.invoke('uninstall:i18n:dict'),
+
+  /** 삭제 전, 실제로 존재하는 대상 미리보기. */
+  preview: (): Promise<UninstallPreview> => ipcRenderer.invoke('uninstall:preview'),
+
+  /** 삭제 실행. mode: 'trash'(휴지통) | 'permanent'(완전 삭제). */
+  run: (mode: 'trash' | 'permanent'): Promise<UninstallResult> => ipcRenderer.invoke('uninstall:run', mode),
+
+  /** 프로그램 종료. */
+  quit: (): Promise<void> => ipcRenderer.invoke('uninstall:quit'),
+
+  /** 로그 스트림 구독. */
+  onLog: (handler: (line: string) => void): (() => void) => {
+    const listener = (_event: unknown, line: string) => handler(line)
+    ipcRenderer.on('log', listener)
+    return () => ipcRenderer.removeListener('log', listener)
+  }
+}
+
+contextBridge.exposeInMainWorld('uninstaller', api)
+
+declare global {
+  interface Window {
+    uninstaller: typeof api
+  }
+}
--- a/src/installer/main.ts
+++ b/src/installer/main.ts
@@ -20,6 +20,7 @@ import type {
 } from './types.js'
 import type { Manifest, PackDefinition } from '../shared/types.js'
 import { normalizePackDefinition } from '../shared/store.js'
+import { getMcCustomDirName, withCustomDirName } from '../shared/paths.js'
 import { loadEnv, getManifestUrl } from '../shared/env.js'
 import { loadComponentI18n } from '../shared/i18n.js'
 import { resolveAudience, isPackVisibleForAudience, type Audience } from '../shared/audience.js'
@@ -1044,7 +1045,7 @@ function sleep(ms: number): Promise<void> {
 ipcMain.handle('client:install', async (_event, payload: ClientInstallPayload) => {
  const pack = state.packs.get(payload.packKey)
  if (!pack) throw new Error(t('errors.packNotFound2'))
-  const customRoot = path.join(getAppDataDir(), '.mc_custom')
+  const customRoot = path.join(getAppDataDir(), getMcCustomDirName())
  await fsp.mkdir(path.join(customRoot, 'mods'), { recursive: true })
  await fsp.mkdir(path.join(customRoot, 'resourcepacks'), { recursive: true })

@@ -1587,7 +1588,27 @@ ipcMain.handle('finish:startLauncher', async () => {
  sendLog(t('log.launcherAllFail'))
 })

-ipcMain.handle('i18n:dict', () => localeDict)
+// 개발자용 빌드(musicQuizAudience=developer)면 렌더러에 넘기는 사전의 제목 앞에
+// "(개발자용) " 을 붙여, 창 제목/헤더에 개발자용임을 표시한다.
+function dictForRenderer(): Record<string, unknown> {
+  // 커스텀 폴더명을 UI 문구에 반영.
+  const base = withCustomDirName(localeDict)
+  if (getAudience() !== 'developer') return base
+  const prefix = '(개발자용) '
+  const appBlock = (base.app ?? {}) as Record<string, unknown>
+  const withPrefix = (v: unknown): unknown =>
+    typeof v === 'string' && !v.startsWith(prefix) ? prefix + v : v
+  return {
+    ...base,
+    app: {
+      ...appBlock,
+      browserTitle: withPrefix(appBlock.browserTitle),
+      headerTitle: withPrefix(appBlock.headerTitle)
+    }
+  }
+}
+
+ipcMain.handle('i18n:dict', () => dictForRenderer())

 ipcMain.handle('app:quit', () => {
  // 모든 창을 닫고 앱 종료. macOS에서도 종료(설치기는 한 번 쓰고 끝이니 잔류시키지 않음).
--- a/src/shared/i18n.ts
+++ b/src/shared/i18n.ts
@@ -73,7 +73,9 @@ export function createI18n(filePath: string): I18n {
 *   1. 패키징된 Electron 앱이면 `process.resourcesPath/locales/<component>/ko-kr.json`
 *   2. `<프로젝트 루트>/locales/<component>/ko-kr.json`
 */
-export function loadComponentI18n(component: 'server' | 'installer' | 'installer-rp' | 'installer-pf'): I18n {
+export function loadComponentI18n(
+  component: 'server' | 'installer' | 'installer-rp' | 'installer-pf' | 'installer-uninstall'
+): I18n {
  // 컴파일된 dist/shared/i18n.js 기준으로 프로젝트 루트는 2단계 위.
  const projectRoot = path.resolve(__dirname, '..', '..')

--- a/src/shared/paths.ts
+++ b/src/shared/paths.ts
@@ -39,9 +39,43 @@ export function getAppDataDir(): string {
  return process.env.XDG_CONFIG_HOME || path.join(os.homedir(), '.config')
 }

-/** %appdata%/.mc_custom — 음악퀴즈 관련 외부 도구/캐시 보관 디렉터리. */
+/**
+ * 커스텀 게임 디렉터리의 폴더 이름. 기본은 `.mc_custom` 이지만 환경변수
+ * `MC_CUSTOM_DIR` 로 다른 이름을 지정할 수 있다(.env / .env.build 로 주입).
+ * 경로 구분자·상위경로 이스케이프(`/`, `\`, `..`)는 제거해 항상 %appdata%
+ * 바로 아래 단일 폴더로 강제한다.
+ */
+export function getMcCustomDirName(): string {
+  const raw = (process.env.MC_CUSTOM_DIR ?? '').trim()
+  if (!raw) return '.mc_custom'
+  const sanitized = raw.replace(/[\\/]+/g, '').replace(/\.\.+/g, '.')
+  return sanitized || '.mc_custom'
+}
+
+/** %appdata%/<MC_CUSTOM_DIR|.mc_custom> — 음악퀴즈 관련 게임 폴더/외부 도구/캐시 보관 디렉터리. */
 export function getMcCustomDir(): string {
-  return path.join(getAppDataDir(), '.mc_custom')
+  return path.join(getAppDataDir(), getMcCustomDirName())
+}
+
+/**
+ * 사전/문자열 구조 안의 리터럴 `.mc_custom` 을 실제 폴더 이름으로 치환한 깊은
+ * 복사본을 돌려준다. 기본값(`.mc_custom`)이면 원본을 그대로 반환한다. 렌더러로
+ * 넘기는 i18n 사전에 적용해 UI 안내 문구가 실제 폴더 이름과 어긋나지 않게 한다.
+ */
+export function withCustomDirName<T>(value: T): T {
+  const name = getMcCustomDirName()
+  if (name === '.mc_custom') return value
+  const replace = (v: unknown): unknown => {
+    if (typeof v === 'string') return v.split('.mc_custom').join(name)
+    if (Array.isArray(v)) return v.map(replace)
+    if (v && typeof v === 'object') {
+      const out: Record<string, unknown> = {}
+      for (const [k, val] of Object.entries(v as Record<string, unknown>)) out[k] = replace(val)
+      return out
+    }
+    return v
+  }
+  return replace(value) as T
 }

 /**
--- a/tsconfig.installer-uninstall.json
+++ b/tsconfig.installer-uninstall.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/installer-uninstall/**/*.ts", "src/shared/**/*.ts"]
+}