🧩 puzzlelo UI 설계 문서

// 인쇄 QR에 담기는 URL 예시 puzzleSeed = "A3F1B2" // SEED 6자리 puzzleType = "battleship" // 퍼즐 종류 difficulty = "normal" // 난이도 // 결과 URL battleship-play.html?seed=A3F1B2&diff=normal // 학생 저장 완료 후 URL (Table API ID 포함) battleship-play.html?seed=A3F1B2&save=uuid-1234

// 테이블: student_works { id: UUID (자동), puzzle_type: "battleship", // 퍼즐 종류 seed: "A3F1B2", // 문제 SEED difficulty: "normal", // 난이도 answer_data:"JSON 직렬화 풀이", // 학생 풀이 상태 student_name:"홍길동", // 학생 이름(선택) class_code: "3-2", // 반 코드(선택) is_correct: true, // 정답 여부 created_at: timestamp }

<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/puzzle-shell.css"> <script src="js/ui/print-common.js"></script> <script src="js/ui/puzzle-shell.js"></script>

// HTML: 사이드바 하단에 컨테이너 추가 <div id="ps-sidebar-bottom"></div> // JS: DOMContentLoaded 에서 document.getElementById('ps-sidebar-bottom').innerHTML = PuzzleShell.sidebarBottomHtml({ pageQtyId: 'ps-pages', modalId: 'mypuzzle-pm', genBtnLabel: '🎲 새 문제 생성', genBtnId: 'gen-btn', pageQtyHint: '서로 다른 문제 N페이지 인쇄' });

// HTML: body 끝에 모달 컨테이너 추가 (id는 파일별 접두어 사용) <div id="xx-pm-modal-container"></div> // JS: DOMContentLoaded 에서 document.getElementById('xx-pm-modal-container').innerHTML = PuzzleShell.PrintModal.html({ id: 'xx-pm', puzzleName: '내 퍼즐', recommend: { easy:4, normal:2, hard:1 }, hasAnswer: true, layouts: [1, 2, 4], pageQtyId: 'xx-pages' // ← 사이드바 PageQty와 연동 }); PuzzleShell.PrintModal.onPrint('xx-pm', function(o) { // o.layout: 1|2|4 o.output: 'problem'|'both' o.pageCount: N executePrint(o); // o 객체 그대로 전달 권장 }, 'xx-pages'); // openPrintModal 함수 (탑바 버튼 등에서 호출) function openPrintModal() { if (!puzzle) { alert('먼저 문제를 생성해주세요.'); return; } PuzzleShell.PrintModal.open('xx-pm', PuzzleShell.PageQty.get('xx-pages'), currentDiff ); } // executePrint: o 파라미터로 모달 값 수신 (print-qty2 참조 제거) async function executePrint(o) { PuzzleShell.PrintModal.close('xx-pm'); const pages = o?.pageCount || 1; const layout = o?.layout || 4; const inclAns = o?.output === 'both'; // ... 인쇄 HTML 생성 → PrintCommon.openPrintWindow() }

// HTML: main 안 최상단에 컨테이너 추가 <main id="main"> <div id="xx-empty-area"></div> <div id="grid-wrap" style="display:none"> ... </div> </main> // JS: DOMContentLoaded 에서 주입 document.getElementById('xx-empty-area').innerHTML = PuzzleShell.emptyStateHtml({ icon: '🧩', title: '퍼즐 생성기 이름', desc: '퍼즐 설명 한 줄', ctaLabel: '첫 문제 생성하기', ctaOnClick: 'newPuzzle()' }); // applyPuzzle/renderPuzzle 등 문제 생성 후 호출되는 함수 안에서 해제 function applyPuzzle(result) { document.getElementById('xx-empty-area').style.display = 'none'; document.getElementById('grid-wrap').style.display = ''; // ... 기존 코드 }

// HTML: 카드 내 <div class="ps-qr-section"> <div class="ps-qr-box" id="qr-puzzle-A3F1B2"></div> <div class="ps-qr-info"> <b>앱에서 이어 풀기</b><br> <span class="ps-qr-label">QR 스캔 → 같은 문제 이어 풀기</span> </div> </div> // JS PuzzleShell.QR.renderToBox('qr-puzzle-A3F1B2', editorUrl);