[MT Game] 08. MT 퀴즈 게임 코드리뷰 6편 - 퀴즈 편집기

MT Game 08

[MT Game] 08. MT 퀴즈 게임 코드리뷰 6편 - 퀴즈 편집기

사이트 주소: https://mtgame.vercel.app/

이번 글의 목표는 TopicEditor 컴포넌트가 문제를 추가하고 수정하며, JSON 대량 입력과 이미지 업로드를 처리하는 방식을 설명합니다.

MT Game 코드리뷰 시리즈 바로가기

번호	글 제목	주요 내용
03	[MT Game] 03. MT 퀴즈 게임 코드리뷰 1편 - 프로젝트 전체 구조 뜯어보기	프로젝트 폴더 구조와 전체 흐름
04	[MT Game] 04. MT 퀴즈 게임 코드리뷰 2편 - app/page.tsx 상태관리와 모드 전환	메인 페이지 상태관리와 화면 전환
05	[MT Game] 05. MT 퀴즈 게임 코드리뷰 3편 - 데이터 모델 이해하기	퀴즈, 제비뽑기, 점수판 타입 구조
06	[MT Game] 06. MT 퀴즈 게임 코드리뷰 4편 - 저장소와 API 구조	서버 저장, 브라우저 저장, JSON 백업
07	[MT Game] 07. MT 퀴즈 게임 코드리뷰 5편 - 일반게임 주제 목록	검색, 필터, 랜덤 시작
08	[MT Game] 08. MT 퀴즈 게임 코드리뷰 6편 - 퀴즈 편집기 (현재 글)	문제 추가, JSON 입력, 이미지 업로드
09	[MT Game] 09. MT 퀴즈 게임 코드리뷰 7편 - 퀴즈 진행 화면	전체화면, 정답 표시, 진행 상태
10	[MT Game] 10. MT 퀴즈 게임 코드리뷰 8편 - 제비뽑기	항목 관리와 무작위 추첨 로직
11	[MT Game] 11. MT 퀴즈 게임 코드리뷰 9편 - 점수 카운팅	팀 추가, 점수 조정, 실시간 순위
12	[MT Game] 12. MT 퀴즈 게임 코드리뷰 10편 - 총정리와 개선 포인트	리팩터링 방향과 운영 안정성

이전 글
[MT Game] 07. MT 퀴즈 게임 코드리뷰 5편 - 일반게임 주제 목록

다음 글
[MT Game] 09. MT 퀴즈 게임 코드리뷰 7편 - 퀴즈 진행 화면

퀴즈 편집기에서는 제목 수정, 문제 추가, 문제 JSON 입력을 할 수 있습니다.

편집기는 단건 입력, JSON 입력, 이미지 리사이즈를 각각 다른 흐름으로 처리합니다.

1. TopicEditor의 입력 상태

const [newQuestion, setNewQuestion] = useState("")
const [newAnswer, setNewAnswer] = useState("")
const [newImageUrl, setNewImageUrl] = useState("")
const [jsonText, setJsonText] = useState("")

입력창에 적는 값은 곧바로 실제 데이터가 되지 않습니다. 먼저 임시 상태에 담고 추가 버튼을 눌렀을 때 부모에게 전달합니다.

2. 문제 추가

handleAdd는 질문을 다듬고 정답이 비어 있으면 질문을 정답으로 사용합니다. 인물퀴즈나 이미지퀴즈처럼 이미지가 필요한 유형은 이미지가 없으면 추가하지 않습니다.

3. JSON 대량 입력

문제 JSON 기능은 여러 문제를 한 번에 넣기 위한 기능입니다. JSON.parse를 먼저 시도하고 줄 단위 JSON도 처리할 수 있게 한 점이 실용적입니다.

4. 이미지 리사이즈

const canvas = document.createElement("canvas")
context.drawImage(image, 0, 0, width, height)
return canvas.toDataURL("image/jpeg", 0.62)

이미지를 그대로 저장하면 데이터가 너무 커질 수 있습니다. 그래서 브라우저에서 캔버스로 줄인 뒤 base64 이미지로 저장합니다.

5. 개선 포인트

이미지 base64는 편하지만 데이터가 커질 수 있습니다. 문제가 아주 많아질 예정이라면 이미지 저장소를 따로 두고 URL만 저장하는 구조도 고려할 수 있습니다.

6. 퀴즈 편집기를 운영자 도구로 이해하기

TopicEditor는 진행자가 게임 내용을 직접 준비하는 화면입니다. 주제 이름을 바꾸고, 문제를 추가하고, 기존 문제를 수정하거나 삭제할 수 있습니다. 초보자가 이 파일을 읽을 때는 입력창이 많아서 복잡해 보일 수 있지만, 핵심 흐름은 단순합니다. 사용자가 입력한 값을 상태로 들고 있다가, 추가나 저장을 누르면 부모 컴포넌트에 “이 문제를 추가해 주세요” 또는 “이 문제를 수정해 주세요”라고 알려주는 구조입니다.

이 편집기가 조금 특별한 이유는 퀴즈 타입에 따라 필요한 입력이 달라진다는 점입니다. 초성퀴즈는 문제와 정답이 필요하고, 몸으로 말해요처럼 정답을 따로 보여주지 않는 게임은 문제만 있어도 됩니다. 인물퀴즈나 이미지퀴즈는 이미지가 필요하므로 imageUrl이 없으면 추가를 막습니다. 이런 조건은 사용자 실수를 줄이기 위한 장치입니다. 이미지가 필요한 게임인데 이미지 없이 저장되면 진행 화면에서 보여줄 것이 없기 때문입니다.

또 하나 중요한 기능은 JSON 일괄 추가입니다. 문제를 하나씩 입력하는 방식은 소량의 문제를 만들 때 편하지만, 이미 엑셀이나 메모장에 문제 목록이 있는 경우에는 시간이 오래 걸립니다. 그래서 handleJsonAdd는 JSON 배열이나 줄 단위 JSON을 받아 여러 문제를 한 번에 추가할 수 있게 합니다. 초보자는 이 기능을 보면서 “관리자용 도구는 반복 작업을 줄이는 방향으로 설계해야 한다”는 점을 배울 수 있습니다.

편집 기능	확인해야 할 코드	왜 필요한가
단일 문제 추가	handleAdd	빠르게 한 문제씩 입력합니다.
이미지 업로드	resizeImage	큰 이미지를 줄여 저장 부담을 낮춥니다.
문제 수정	startEdit, saveEdit	기존 문제를 삭제하지 않고 고칩니다.
JSON 추가	handleJsonAdd	여러 문제를 한 번에 넣습니다.

실전 팁: 블로그 독자에게 이 코드를 설명할 때는 “입력값 검증”을 강조하면 좋습니다. 좋은 편집기는 사용자가 잘못된 데이터를 넣지 않도록 미리 막아주고, 잘못 넣었을 때 어떤 형식이 필요한지 알려줍니다.

이전 글
[MT Game] 07. MT 퀴즈 게임 코드리뷰 5편 - 일반게임 주제 목록

다음 글
[MT Game] 09. MT 퀴즈 게임 코드리뷰 7편 - 퀴즈 진행 화면

정리: 이번 글에서는 문제 추가, JSON 입력, 이미지 업로드를 중심으로 MT Game 코드를 살펴봤습니다. 다음 글과 함께 보면 화면, 상태, 데이터, 저장 흐름이 어떻게 이어지는지 더 선명해집니다.