현재는 별도 저장 기능이 없습니다. 작성한 코드를 복사해 텍스트 파일로 저장해두세요.

외부 라이브러리는 또는 `; const frame = document.getElementById('previewFrame'); frame.srcdoc = doc; const status = document.getElementById('previewStatus'); status.textContent = '● 실행됨'; status.style.color = '#22c55e'; } /* ── 탭 전환 (수평 레이아웃) ── */ function switchTab(lang) { document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active')); document.querySelectorAll('.editor-tab').forEach(t => t.classList.remove('active')); document.getElementById('tab-' + lang).classList.add('active'); document.querySelectorAll('.editor-tab').forEach(t => { if (t.textContent.trim().toLowerCase().startsWith(lang === 'js' ? 'js' : lang)) t.classList.add('active'); }); setTimeout(() => { cmHtml.refresh(); cmCss.refresh(); cmJs.refresh(); }, 10); } /* ── 레이아웃 토글 ── */ let isVertical = false; function toggleLayout() { isVertical = !isVertical; const main = document.getElementById('editorMain'); const btn = document.getElementById('layoutBtn'); if (isVertical) { main.classList.add('layout-vertical'); btn.textContent = '↕ 수평 레이아웃'; } else { main.classList.remove('layout-vertical'); btn.textContent = '↔ 수직 레이아웃'; } setTimeout(() => { cmHtml.refresh(); cmCss.refresh(); cmJs.refresh(); }, 50); } /* ── 전체화면 ── */ let isFullscreen = false; function toggleFullscreen() { isFullscreen = !isFullscreen; document.getElementById('previewPane').classList.toggle('fullscreen', isFullscreen); if (isFullscreen) { const closeBtn = document.createElement('button'); closeBtn.id = 'closeFullscreenBtn'; closeBtn.textContent = '✕ 닫기'; closeBtn.style.cssText = 'position:fixed;top:12px;right:16px;z-index:10001;padding:8px 16px;background:#ef4444;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:0.9rem;'; closeBtn.onclick = toggleFullscreen; document.body.appendChild(closeBtn); } else { const btn = document.getElementById('closeFullscreenBtn'); if (btn) btn.remove(); } } /* ── URL 공유 ── */ function shareCode() { const data = { h: cmHtml.getValue(), c: cmCss.getValue(), j: cmJs.getValue() }; try { const encoded = btoa(unescape(encodeURIComponent(JSON.stringify(data)))); const url = location.origin + location.pathname + '#' + encoded; navigator.clipboard.writeText(url).then(() => showToast('🔗 URL이 클립보드에 복사됐어요!')).catch(() => prompt('아래 URL을 복사하세요:', url)); } catch(e) { alert('공유 URL 생성 실패'); } } /* ── URL에서 복원 ── */ function loadFromHash() { const hash = location.hash.slice(1); if (!hash) return false; try { const data = JSON.parse(decodeURIComponent(escape(atob(hash)))); if (data.h !== undefined) cmHtml.setValue(data.h); if (data.c !== undefined) cmCss.setValue(data.c); if (data.j !== undefined) cmJs.setValue(data.j); return true; } catch(e) { return false; } } /* ── 템플릿 로드 ── */ function loadTemplate(name) { if (!name) return; const t = TEMPLATES[name]; if (!t) return; cmHtml.setValue(t.html); cmCss.setValue(t.css); cmJs.setValue(t.js); runCode(); } /* ── 초기화 ── */ function clearAll() { if (!confirm('모든 코드를 초기화할까요?')) return; cmHtml.setValue(''); cmCss.setValue(''); cmJs.setValue(''); document.getElementById('previewFrame').srcdoc = ''; location.hash = ''; } /* ── 토스트 ── */ function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2800); } /* ── 초기 실행 ── */ window.addEventListener('load', () => { setEditorHeight(); const loaded = loadFromHash(); if (!loaded) loadTemplate('blank'); else runCode(); }); window.addEventListener('resize', () => { cmHtml.refresh(); cmCss.refresh(); cmJs.refresh(); });