feat(installer-rp): auto-start install with progress card grid

2단계 페이지 진입 즉시 설치를 시작하고, 음악·사진을 1번부터 카드 그리드로
한눈에 볼 수 있게 만든다. 다운로드는 % 게이지로, 완료/실패는 색상으로 표시.

- main: prep/item/package phase 의 ProgressEvent 를 renderer 로 송신
- music.ts: yt-dlp stdout 의 [download] X% 라인을 파싱해 onProgress 호출
- preload: onProgress 채널 구독 함수 노출
- renderer: 다음 버튼 제거, prep chip + music/image 카드 그리드 + 빌드 상태
- styles: progressCard / prepChip / progressGrid 스타일 추가

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-12 20:01:15 +09:00
parent d5079125cb
commit 9f9cffffeb
5 changed files with 288 additions and 48 deletions

View File

@@ -69,6 +69,24 @@ function sendLog(line: string): void {
mainWindow.webContents.send('log', stamped)
}
type ProgressEvent =
| { phase: 'prep'; message: string; done?: boolean }
| {
phase: 'item'
kind: 'music' | 'image'
index: number
total: number
percent: number
status: 'running' | 'done' | 'error'
message?: string
}
| { phase: 'package'; message: string; done?: boolean }
function sendProgress(payload: ProgressEvent): void {
if (!mainWindow || mainWindow.isDestroyed()) return
mainWindow.webContents.send('progress', payload)
}
function fetchBuffer(url: string): Promise<Buffer> {
return new Promise((resolve, reject) => {
const target = new URL(url)
@@ -161,67 +179,92 @@ ipcMain.handle('rp:install:start', async (): Promise<{ resourcepackPath: string
const tempRoot = path.join(getMcCustomDir(), '.temp')
await fsp.mkdir(tempRoot, { recursive: true })
const musicTotal = pack.list.music.length
const imageTotal = pack.list.images.length
try {
// 2-1. yt-dlp / ffmpeg 준비 (%appdata%/.mc_custom/{yt-dlp,ffmpeg}.exe)
sendLog('yt-dlp 준비 중…')
sendProgress({ phase: 'prep', message: 'yt-dlp 준비 중' })
const ytDlpBin = await ensureYtDlpExe(sendLog)
sendLog(`yt-dlp 경로: ${ytDlpBin}`)
throwIfCancelled()
sendLog('ffmpeg 준비 중…')
sendProgress({ phase: 'prep', message: 'ffmpeg 준비 중' })
const ffmpegBin = await ensureFfmpegExe(sendLog)
sendLog(`ffmpeg 경로: ${ffmpegBin}`)
sendProgress({ phase: 'prep', message: '준비 완료', done: true })
throwIfCancelled()
// 2-2. 음악 다운로드 (1번부터 순차, ogg 변환)
const musicDir = path.join(tempRoot, 'music')
await fsp.mkdir(musicDir, { recursive: true })
sendLog(`음악 다운로드 시작 (${pack.list.music.length}곡)`)
for (let i = 0; i < pack.list.music.length; i++) {
sendLog(`음악 다운로드 시작 (${musicTotal}곡)`)
for (let i = 0; i < musicTotal; i++) {
throwIfCancelled()
const entry = pack.list.music[i]
sendLog(`${i + 1}번 노래 다운로드 중…`)
const idx = i + 1
sendLog(`${idx}번 노래 다운로드 중…`)
sendProgress({ phase: 'item', kind: 'music', index: idx, total: musicTotal, percent: 0, status: 'running' })
try {
const outPath = await downloadMusicTrack({
ytdlpExe: ytDlpBin,
ffmpegExe: ffmpegBin,
tempDir: musicDir,
index: i + 1,
index: idx,
url: entry.url,
log: sendLog,
onChild: (c) => { state.currentChild = c }
onChild: (c) => { state.currentChild = c },
onProgress: (pct) => {
// 다운로드(0~90%) + 변환(90~100%) 으로 매핑.
sendProgress({
phase: 'item', kind: 'music', index: idx, total: musicTotal,
percent: Math.min(90, pct * 0.9), status: 'running'
})
}
})
state.currentChild = null
sendLog(`${i + 1}번 노래 완료: ${path.basename(outPath)}`)
sendLog(`${idx}번 노래 완료: ${path.basename(outPath)}`)
sendProgress({ phase: 'item', kind: 'music', index: idx, total: musicTotal, percent: 100, status: 'done' })
} catch (err) {
state.currentChild = null
// 취소된 경우는 throwIfCancelled 가 일관된 메시지로 다시 던지게 함.
if (state.cancelRequested) throwIfCancelled()
throw new Error(`${i + 1}번 노래 다운로드 실패: ${(err as Error).message}`)
if (state.cancelRequested) {
sendProgress({ phase: 'item', kind: 'music', index: idx, total: musicTotal, percent: 0, status: 'error', message: '취소됨' })
throwIfCancelled()
}
sendProgress({ phase: 'item', kind: 'music', index: idx, total: musicTotal, percent: 0, status: 'error', message: (err as Error).message })
throw new Error(`${idx}번 노래 다운로드 실패: ${(err as Error).message}`)
}
}
// 2-3. 사진 다운로드 + painting variant 정규화
const paintingDir = path.join(tempRoot, 'painting')
await fsp.mkdir(paintingDir, { recursive: true })
sendLog(`사진 다운로드 시작 (${pack.list.images.length}장)`)
for (let i = 0; i < pack.list.images.length; i++) {
sendLog(`사진 다운로드 시작 (${imageTotal}장)`)
for (let i = 0; i < imageTotal; i++) {
throwIfCancelled()
const entry = pack.list.images[i]
sendLog(`${i + 1}번 사진 다운로드 중…`)
const idx = i + 1
sendLog(`${idx}번 사진 다운로드 중…`)
sendProgress({ phase: 'item', kind: 'image', index: idx, total: imageTotal, percent: 10, status: 'running' })
let buf: Buffer
try {
buf = await downloadImage(entry.url)
} catch (err) {
throw new Error(`${i + 1}번 사진 다운로드 실패: ${(err as Error).message}`)
sendProgress({ phase: 'item', kind: 'image', index: idx, total: imageTotal, percent: 0, status: 'error', message: (err as Error).message })
throw new Error(`${idx}번 사진 다운로드 실패: ${(err as Error).message}`)
}
throwIfCancelled()
const outPath = path.join(paintingDir, coverFileName(i + 1))
sendProgress({ phase: 'item', kind: 'image', index: idx, total: imageTotal, percent: 60, status: 'running' })
const outPath = path.join(paintingDir, coverFileName(idx))
try {
await normalizeToCover(buf, outPath)
} catch (err) {
throw new Error(`${i + 1}번 사진 정규화 실패: ${(err as Error).message}`)
sendProgress({ phase: 'item', kind: 'image', index: idx, total: imageTotal, percent: 0, status: 'error', message: (err as Error).message })
throw new Error(`${idx}번 사진 정규화 실패: ${(err as Error).message}`)
}
sendLog(`${i + 1}번 사진 완료: ${path.basename(outPath)}`)
sendLog(`${idx}번 사진 완료: ${path.basename(outPath)}`)
sendProgress({ phase: 'item', kind: 'image', index: idx, total: imageTotal, percent: 100, status: 'done' })
}
// 2-4. 리소스팩 zip 빌드 (pack.mcmeta + sounds.json + 음악·이미지)
@@ -230,6 +273,7 @@ ipcMain.handle('rp:install:start', async (): Promise<{ resourcepackPath: string
const resourcepackDir = path.join(getAppDataDir(), '.minecraft', 'resourcepacks')
const resourcepackPath = path.join(resourcepackDir, resourcepackName)
sendLog(`리소스팩 zip 빌드 중… (${resourcepackName})`)
sendProgress({ phase: 'package', message: 'zip 빌드 중' })
await buildResourcepackZip({
musicDir,
paintingDir,
@@ -242,6 +286,7 @@ ipcMain.handle('rp:install:start', async (): Promise<{ resourcepackPath: string
// 2-5. %appdata%/.minecraft/resourcepacks/ 에 배치 (위 빌드가 직접 outZipPath 에 저장)
sendLog(`설치 완료: ${resourcepackPath}`)
sendProgress({ phase: 'package', message: '설치 완료', done: true })
return { resourcepackPath }
} finally {
// 임시 파일 정리

View File

@@ -14,6 +14,8 @@ export interface DownloadMusicOptions {
log?: (line: string) => void
/** 현재 실행 중인 자식 프로세스를 외부에 알림 (취소용). */
onChild?: (child: ChildProcess) => void
/** yt-dlp 의 다운로드 퍼센트 (0~100). 변환 단계는 별도. */
onProgress?: (percent: number) => void
}
/**
@@ -40,9 +42,28 @@ export function downloadMusicTrack(opts: DownloadMusicOptions): Promise<string>
const child = spawn(opts.ytdlpExe, args, { stdio: ['ignore', 'pipe', 'pipe'] })
opts.onChild?.(child)
let stderr = ''
let stdoutBuf = ''
let lastReportedPct = -1
child.stdout?.on('data', (chunk: Buffer) => {
const line = chunk.toString('utf8').trimEnd()
if (line) opts.log?.(`yt-dlp> ${line}`)
stdoutBuf += chunk.toString('utf8')
// yt-dlp 는 `[download] 3.3% of 3.72MiB at ...` 형식으로
// \r 로 같은 줄을 갱신한다. \r 과 \n 을 모두 split 해서 마지막 진행률을 뽑는다.
const lines = stdoutBuf.split(/[\r\n]/)
stdoutBuf = lines.pop() ?? ''
for (const raw of lines) {
const line = raw.trimEnd()
if (!line) continue
opts.log?.(`yt-dlp> ${line}`)
const m = line.match(/\[download\]\s+([\d.]+)%/)
if (m) {
const pct = Math.min(100, Math.max(0, parseFloat(m[1])))
// 너무 잦은 이벤트를 피하기 위해 1% 단위로만 전달.
if (Math.floor(pct) !== lastReportedPct) {
lastReportedPct = Math.floor(pct)
opts.onProgress?.(pct)
}
}
}
})
child.stderr?.on('data', (chunk: Buffer) => {
stderr += chunk.toString('utf8')

View File

@@ -27,6 +27,13 @@ const api = {
const listener = (_event: unknown, line: string) => handler(line)
ipcRenderer.on('log', listener)
return () => ipcRenderer.removeListener('log', listener)
},
/** 설치 진행 이벤트 구독. payload 구조는 renderer 가 알아서 분기. */
onProgress: (handler: (payload: unknown) => void): (() => void) => {
const listener = (_event: unknown, payload: unknown) => handler(payload)
ipcRenderer.on('progress', listener)
return () => ipcRenderer.removeListener('progress', listener)
}
}