๐Ÿชข Main Page QA - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

1๏ธโƒฃ ๊ธฐ๋ณธ ์ •๋ณด

ํ•ญ๋ชฉ ๋‚ด์šฉ
ํ”„๋กœ์ ํŠธ๋ช… ๐Ÿ•น๏ธ 7์งฑ ์˜ค๋ฝ์‹ค - Main Page
ํ…Œ์ŠคํŠธ ๊ธฐ๊ฐ„ 2025.05.20 ~ 2025.05.22
๋‹ด๋‹น์ž ๋ฐ ํŒ€์› ํ™ฉ์œ ๋นˆ
ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ Windows 11 / macOS Sonoma Chrome 124.0, Edge, Safari ๋ฐ์Šคํฌํƒ‘ / ๋…ธํŠธ๋ถ (FHD ๊ธฐ์ค€ 1920ร—1080)

2๏ธโƒฃ ํ…Œ์ŠคํŠธ ๊ฐœ์š”

  • ํ…Œ์ŠคํŠธ ๋ชฉ์ 
    • ๋ฉ”์ธ ํ™”๋ฉด(arcade ๋ณธ์ฒด) ๋ฆฌ์‚ฌ์ด์ฆˆ & ์คŒ ์ƒํƒœ ์ „ํ™˜ ๊ฒ€์ฆ
    • ์ฝ”์ธ ํˆฌ์ž… ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐ BGM ์ž๋™ ์žฌ์ƒ(once-only) ๋™์ž‘ ํ™•์ธ
    • BGM ์ˆ˜๋™ ํ† ๊ธ€(on/off) ๋ฐ ESC ์™ธ ์˜์—ญ ํด๋ฆญ ์‹œ ์ดˆ๊ธฐํ™” ๋™์ž‘ ํ™•์ธ
    • ๊ฒŒ์ž„ ์„ ํƒ ์•„์ด์ฝ˜ ํด๋ฆญ ์‹œ <object> ๋กœ๋“œ/์–ธ๋กœ๋“œ, ์žฌ์‚ฌ์šฉ ๋กœ์ง ๊ฒ€์ฆ
  • ํ…Œ์ŠคํŠธ ๋ฒ”์œ„
    • updateMainImgScale()๋ฅผ ํ†ตํ•œ ํ™”๋ฉด ๋น„์œจ ๋ณด์ •
    • ์ฝ”์ธ ์Šฌ๋กฏ(.coin-slot) ํด๋ฆญ โ†’ playCoinAnimation() ํ˜ธ์ถœ
    • ์˜ค๋””์˜ค ์•„์ด์ฝ˜(.audio-icon) ํด๋ฆญ โ†’ toggleBgm() ํ˜ธ์ถœ
    • ๋ฐฐ๊ฒฝ ์™ธ ํด๋ฆญ ๊ฐ์ง€ โ†’ ์คŒ ์ถ•์†Œ ์ƒํƒœ๋กœ ๋ณต๊ท€
    • ๊ฒŒ์ž„ ์•„์ด์ฝ˜ ์„ ํƒ โ†’ selection ์ˆจ๊น€ ๋ฐ object ์ƒ์„ฑ/์žฌํ™œ์šฉ
  • ํ…Œ์ŠคํŠธ ๋ฐฉ๋ฒ•
    • ์ˆ˜๋™ ํ…Œ์ŠคํŠธ (ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ํฌํ•จ)
    • ํ™”๋ฉด ํฌ๊ธฐ ๋ณ€๊ฒฝ(resize)์— ๋”ฐ๋ฅธ ์Šค์ผ€์ผ ๋™์ž‘ ํ™•์ธ
    • ์ฝ”์ธ ์Šฌ๋กฏ ํด๋ฆญ 1ํšŒ vs. ๋‹คํšŒ โ†’ BGM ์ž๋™ ์žฌ์ƒ ์—ฌ๋ถ€ ํ™•์ธ
    • ์˜ค๋””์˜ค ์•„์ด์ฝ˜ ์—ฌ๋Ÿฌ ๋ฒˆ ํด๋ฆญ โ†’ play/pause ์ •์ƒ ๋™์ž‘ ํ™•์ธ
    • ์„ ํƒ ์•„์ด์ฝ˜ ํด๋ฆญ โ†’ iframe(object) ์ •์ƒ ๋กœ๋“œ ๋ฐ home ๋งํฌ ํด๋ฆญ ์‹œ ๋ณต๊ท€

๐Ÿ” ์ฃผ์š” ์ด์Šˆ ๋ชฉ๋ก

ID ํ•ญ๋ชฉ ์žฌํ˜„ ์กฐ๊ฑด ์‹ค์ œ ๊ฒฐ๊ณผ ์˜ˆ์ƒ ๊ฒฐ๊ณผ ์‹ฌ๊ฐ๋„
BUG-01 BGM ์ž๋™ ์žฌ์ƒ ์ค‘๋ณต ์ฝ”์ธ ์Šฌ๋กฏ ํด๋ฆญ ๋‘ ๋ฒˆ์งธ ์ด์ƒ ์ฒซ ํด๋ฆญ ์ดํ›„ ์ด๋ฏธ ์žฌ์ƒ ์ค‘์ธ๋ฐ, ๋‘ ๋ฒˆ์งธ ํด๋ฆญ ์‹œ์—๋„ coinSound๋งŒ ์žฌ์ƒ๋˜๊ณ  BGM ์žฌ์ƒ ์‹œ๋„ํ•จ ์ž๋™ ์žฌ์ƒ์€ ์ตœ์ดˆ 1ํšŒ๋งŒ, ์ดํ›„ ํด๋ฆญ ์‹œ ์ฝ”์ธ ํšจ๊ณผ์Œ๋งŒ ์žฌ์ƒ๋˜์–ด์•ผ ํ•จ Minor
BUG-02 ํ™”๋ฉด ๋ฆฌ์‚ฌ์ด์ฆˆ ์‹œ transition ๊นœ๋นก์ž„ ์คŒ ์ƒํƒœ์—์„œ ์ฐฝ ํฌ๊ธฐ ์กฐ์ ˆ el.style.transition์ด ๋‚จ์•„ ์žˆ์–ด ๋ฆฌ์‚ฌ์ด์ฆˆํ•  ๋•Œ๋„ 0.8s ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋ฐœ์ƒ ๋ฆฌ์‚ฌ์ด์ฆˆ ์‹œ ์ฆ‰์‹œ ์Šค์ผ€์ผ๋งŒ ์ ์šฉ, ๋ถˆํ•„์š”ํ•œ transition ์ œ๊ฑฐ ํ•„์š” Trivial
BUG-03 object ์žฌํ™œ์šฉ ์‹œ ๋ฐ์ดํ„ฐ ํ‚ค ๋ˆ„๋ฝ ๋™์ผ ๊ฒŒ์ž„ ์•„์ด์ฝ˜ ์—ฐ์† ํด๋ฆญ currentObj.dataset.key๊ฐ€ ๋‚จ์•„ ์žˆ์ง€ ์•Š์œผ๋ฉด ์žฌ์ƒ์„ฑ ๋กœ์ง ์ง„์ž… ์ด๋ฏธ ๋กœ๋“œ๋œ object๋Š” ์žฌ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•จ Minor

3๏ธโƒฃ ๊ฒฐ๋ก  ๋ฐ ๊ฐœ์„  ์‚ฌํ•ญ

  • ์ฃผ์š” ๋ฌธ์ œ ์š”์•ฝ
    • BGM ์ž๋™ ์žฌ์ƒ ๋กœ์ง(coinBgmPlayed)์ด ๋‘ ๋ฒˆ์งธ ํด๋ฆญ ์ดํ›„์—๋„ ์žฌ์ƒ ์‹œ๋„๋ฅผ ํ•จ
    • ์คŒ ์ถ•์†Œ/ํ™•์žฅ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋ฆฌ์‚ฌ์ด์ฆˆ ์‹œ์—๋„ ์ ์šฉ๋˜์–ด UX๊ฐ€ ์–ด์ƒ‰
    • object ์žฌํ™œ์šฉ ์กฐ๊ฑด ์ฒดํฌ ๋กœ์ง์ด ์ผ๋ถ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ dataset ๋ˆ„๋ฝ์œผ๋กœ ์žฌ์ƒ์„ฑ์œผ๋กœ ๋น ์ง
  • ํ•ด๊ฒฐ๋œ ์ด์Šˆ
    • coinBgmPlayed ํ”Œ๋ž˜๊ทธ ๊ฒ€์ฆ ์œ„์น˜ ์กฐ์ •์œผ๋กœ ์ž๋™ ์žฌ์ƒ 1ํšŒ ๋ณด์žฅ
    • ๋ฆฌ์‚ฌ์ด์ฆˆ ํ•ธ๋“ค๋Ÿฌ ๋‚ด transition ์ œ๊ฑฐ ๋˜๋Š” isZoomed ์ƒํƒœ ์ผ๊ด„ ์ฒดํฌ ์ถ”๊ฐ€
    • object ์ƒ์„ฑ ๋กœ์ง ์ „๋ฐ˜์— dataset.key ์ดˆ๊ธฐํ™”/์œ ์ง€ ์ฝ”๋“œ ์‚ฝ์ž…
  • ์ถ”๊ฐ€ ํ…Œ์ŠคํŠธ ํ•„์š” ์—ฌ๋ถ€
    • ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์žฌ๊ฒ€์ฆ: Edge, Safari ๋“ฑ์—์„œ dataset ํ˜ธํ™˜์„ฑ ํ™•์ธ
    • ์ŠคํŠธ๋ ˆ์Šค ํ…Œ์ŠคํŠธ: ๋น ๋ฅธ ์—ฐ์† ํด๋ฆญ(์ฝ”์ธยท์˜ค๋””์˜ค ์•„์ด์ฝ˜) ์‹œ ๋ฉ”๋ชจ๋ฆฌ/์˜ค๋””์˜ค ์ถฉ๋Œ ์—ฌ๋ถ€
    • ์ ‘๊ทผ์„ฑ ๊ฒ€์ฆ: ํ‚ค๋ณด๋“œ(ESCยทํƒญ) ์ด๋ฒคํŠธ์™€ ํ™”๋ฉด ๋ฆฌ๋” ๋™์ž‘ ์ƒํ˜ธ์ž‘์šฉ ํ™•์ธ
  • ํ–ฅํ›„ ๊ฐœ์„  ๋ฐฉํ–ฅ
    • ๋ชจ๋“ˆํ™”: ํ™”๋ฉด ์Šค์ผ€์ผ๋ง, ์˜ค๋””์˜ค ๊ด€๋ฆฌ, ๊ฒŒ์ž„ ์„ ํƒ ๋กœ์ง์„ ๋ณ„๋„ ํด๋ž˜์Šค๋กœ ๋ถ„๋ฆฌ
    • ์ž๋™ํ™”: GitHub Actions ์—ฐ๋™์œผ๋กœ ๋ฆฐํŠธยท์œ ๋‹› ํ…Œ์ŠคํŠธยทํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ๋นŒ๋“œ
    • ์„ฑ๋Šฅ ์ตœ์ ํ™”: requestAnimationFrame ์‚ฌ์šฉํ•ด ๋ ˆ์ด์•„์›ƒ ์“ฐ๋ ˆ์‹ฑ ์ตœ์†Œํ™”
    • ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ํ–ฅ์ƒ: ESC ํ‚ค ์™ธ์—๋„ UI ๋ฒ„ํŠผ์œผ๋กœ ์คŒ ํ† ๊ธ€ ๊ธฐ๋Šฅ ์ถ”๊ฐ€
โš ๏ธ **GitHub.com Fallback** โš ๏ธ