// document.addEventListener('DOMContentLoaded', () => {
//     const generateBtn = document.getElementById('generate-btn');
//     const boardElement = document.getElementById('sudoku-board');
//     const statusMessage = document.getElementById('status-message');
//
//     // 스도쿠 보드를 화면에 그리는 함수
//     function renderBoard(puzzleString) {
//         boardElement.innerHTML = ''; // 기존 보드 초기화
//         if (!puzzleString || puzzleString.length !== 81) {
//             statusMessage.textContent = '잘못된 퍼즐 데이터입니다.';
//             return;
//         }
//
//         for (const char of puzzleString) {
//             const cell = document.createElement('div');
//             cell.classList.add('cell');
//             cell.textContent = char;
//             boardElement.appendChild(cell);
//         }
//     }
//
//     // 생성 버튼 클릭 이벤트 리스너
//     generateBtn.addEventListener('click', async () => {
//         // 버튼 비활성화 및 상태 메시지 업데이트
//         generateBtn.disabled = true;
//         statusMessage.textContent = '새로운 스도쿠 퍼즐을 생성 중입니다... 🧠';
//         boardElement.innerHTML = ''; // 보드 비우기
//
//         try {
//             // 백엔드 API 호출 (POST 요청)
//             const response = await fetch('/sudoku/generate', {
//                 method: 'POST',
//             });
//
//             if (!response.ok) {
//                 throw new Error(`서버 오류: ${response.statusText}`);
//             }
//
//             const result = await response.json();
//
//             // 성공 시 보드 렌더링
//             renderBoard(result.puzzle);
//             statusMessage.textContent = `✅ 퍼즐 생성 완료! (ID: ${result.puzzleKey})`;
//
//         } catch (error) {
//             console.error('Error generating Sudoku:', error);
//             statusMessage.textContent = `❌ 생성 실패: ${error.message}`;
//         } finally {
//             // 성공/실패 여부와 관계없이 버튼 다시 활성화
//             generateBtn.disabled = false;
//         }
//     });
// });