/* Shared visual handoff between the static landing and the authenticated app. * Runs before React, including in Safari (no View Transition API required). * Only geometry and a decorative canvas travel across the document boundary; * never persist a conversation, input, profile, token, or DOM/HTML snapshot. */ (function () { "use strict"; var KEY = "tena-console-handoff:v1"; var MAX_AGE = 12000; function destination(path, origin) { try { var url = new URL(path, origin); if (url.origin !== origin || !/^\/(academy|student)\/?$/.test(url.pathname)) return null; return url.pathname.replace(/\/$/, "") + url.search; } catch (_) { return null; } } function validRect(value) { return value && ["x", "y", "width", "height"].every(function (key) { return Number.isFinite(value[key]) && Math.abs(value[key]) <= 16000; }) && value.width > 0 && value.height > 0; } function readRecord(raw, path, origin, now) { try { var value = JSON.parse(raw); if (!value || value.version !== 1 || !Number.isFinite(value.at) || value.path !== destination(path, origin) || !value.path || now - value.at < 0 || now - value.at > MAX_AGE) return null; if (!validRect(value.input) || !validRect(value.logo) || !validRect(value.field) || !validRect(value.viewport)) return null; if (typeof value.image !== "string" || value.image.length > 1500000 || (value.image && !/^data:image\/(webp|png);base64,[a-zA-Z0-9+/=]+$/.test(value.image))) return null; return value; } catch (_) { return null; } } if (typeof module !== "undefined" && module.exports) { module.exports = { destination: destination, readRecord: readRecord, MAX_AGE: MAX_AGE }; return; } // /welcome is a same-origin island. Its parent owns navigation and storage. if (window.parent !== window) return; var active = null; var departing = false; var motion = window.matchMedia("(prefers-reduced-motion: reduce)"); function rect(element, offset) { var box = element.getBoundingClientRect(); return { x: box.x + (offset ? offset.x : 0), y: box.y + (offset ? offset.y : 0), width: box.width, height: box.height }; } function box(element, value) { Object.assign(element.style, { left: value.x + "px", top: value.y + "px", width: value.width + "px", height: value.height + "px" }); } function removeRecord() { try { sessionStorage.removeItem(KEY); } catch (_) {} } function cleanup() { if (!active) { departing = false; removeRecord(); return; } var state = active; active = null; clearTimeout(state.timeout); clearTimeout(state.notice); if (state.observer) state.observer.disconnect(); state.animations.forEach(function (animation) { animation.cancel(); }); state.hidden.forEach(function (element) { element.style.visibility = ""; }); state.inert.forEach(function (element) { element.inert = false; }); state.root.replaceChildren(); document.documentElement.removeAttribute("data-console-handoff"); removeRecord(); departing = false; } var css = ` :host { position:fixed; inset:0; z-index:2147483000; pointer-events:none; } * { box-sizing:border-box; } .scene { position:fixed; inset:0; overflow:hidden; color:#18181b; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; pointer-events:auto; } .paper { position:absolute; inset:0; background:#fff; } .field { position:absolute; overflow:hidden; background:#fff; } .field img { width:100%; height:100%; object-fit:fill; } .brand { position:absolute; overflow:visible; } .brand img { position:absolute; inset:0; width:100%; height:100%; filter:grayscale(1) brightness(0); } .mark { clip-path:inset(0 78% 0 0); } .word { clip-path:inset(0 0 0 22%); } .agent { position:absolute; display:flex; align-items:center; gap:14px; padding:0 20px; border:1px solid #fff; border-radius:24px; background:rgba(255,255,255,.93); box-shadow:0 14px 45px #17172c0b; } .agent svg { width:18px; height:18px; flex-shrink:0; color:#71717a; } .agent span { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; font-size:14px; color:#52525b; } .glow { position:absolute; inset:-1px; border-radius:inherit; border:1px solid #dddde8; box-shadow:0 0 26px #e5e4f044; animation:breathe 2.6s ease-in-out infinite; } .status { position:absolute; top:calc(50% + 115px); left:20px; right:20px; text-align:center; font-size:13px; color:#71717a; opacity:0; transition:opacity .2s; } .dismiss { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); border:0; padding:12px 20px; border-radius:20px; background:#f4f4f5; color:#52525b; cursor:pointer; } @keyframes breathe { 50% { opacity:.35; } } @media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } } `; function mount(record, incoming) { var host = document.getElementById("tena-console-transition"); if (!host) return null; var root = host.shadowRoot || host.attachShadow({ mode: "open" }); // Static markup only. Nothing from storage is interpreted as markup. root.innerHTML = '

콘솔을 준비하고 있어요.

'; var state = { root: root, record: record, incoming: incoming, animations: [], hidden: [], inert: [], observer: null, docking: false }; active = state; var sx = innerWidth / record.viewport.width, sy = innerHeight / record.viewport.height; function scaled(value) { return { x:value.x*sx, y:value.y*sy, width:value.width*sx, height:value.height*sy }; } box(root.querySelector('.agent'), scaled(record.input)); box(root.querySelector('.brand'), scaled(record.logo)); box(root.querySelector('.field'), scaled(record.field)); if (record.image) root.querySelector('.field img').src = record.image; else root.querySelector('.field img').hidden = true; document.documentElement.setAttribute('data-console-handoff', incoming ? 'waiting' : 'leaving'); // Keep only this temporary surface keyboard-accessible. Preserve preexisting inert. function disableBackground() { Array.from(document.body.children).forEach(function (element) { if (element !== host && element.tagName !== 'SCRIPT' && !element.inert) { element.inert = true; state.inert.push(element); } }); } disableBackground(); state.disableBackground = disableBackground; root.querySelector('.dismiss').onclick = cleanup; state.notice = setTimeout(function () { root.querySelector('.status').style.opacity = '1'; root.querySelector('.dismiss').hidden = false; }, 2200); state.timeout = setTimeout(cleanup, 8500); return state; } function animate(state, element, frames, duration, delay) { if (!element || !element.animate) return; var animation = element.animate(frames, { duration:duration, delay:delay || 0, easing:'cubic-bezier(.22,1,.36,1)', fill:'both' }); state.animations.push(animation); return animation; } function visible(selector) { return Array.from(document.querySelectorAll(selector)).find(function (el) { return el.getBoundingClientRect().width > 0 && el.getBoundingClientRect().height > 0; }); } function dock(state) { if (active !== state || state.docking) return; // Auth/plan redirects are real navigation decisions, not a loading state. // Never cover their sign-in or billing screen while waiting for a bar. if (destination(location.pathname + location.search, location.origin) !== state.record.path) { cleanup(); return; } var target = visible('[data-interactive-bar]'); var logo = visible('[data-console-logo] img'); if (!target || !logo) return; state.docking = true; state.observer.disconnect(); state.disableBackground(); clearTimeout(state.notice); state.root.querySelector('.status').style.opacity = '0'; state.root.querySelector('.dismiss').hidden = true; document.documentElement.setAttribute('data-console-handoff', 'docking'); if (motion.matches || !target.animate) { cleanup(); return; } var root = state.root, agent = root.querySelector('.agent'), brand = root.querySelector('.brand'); var from = agent.getBoundingClientRect(), to = rect(target), brandFrom = brand.getBoundingClientRect(), logoTo = rect(logo); target.style.visibility = 'hidden'; logo.style.visibility = 'hidden'; state.hidden.push(target, logo); var duration = 880; animate(state, agent, [ { transform:'translate(0,0)', width:from.width+'px', height:from.height+'px', borderRadius:'24px', opacity:1 }, { transform:'translate('+(to.x-from.x)+'px,'+(to.y-from.y)+'px)', width:to.width+'px', height:to.height+'px', borderRadius:'12px', opacity:1 } ], duration); // Only the symbol remains; the wordmark gently leaves while it moves into the rail. animate(state, root.querySelector('.word'), [{ opacity:1 }, { opacity:0, transform:'translateX(-8px)' }], 280); var markScale = logoTo.width / (brandFrom.width * .22); brand.style.transformOrigin = '0 0'; animate(state, brand, [{ transform:'translate(0,0) scale(1)' }, { transform:'translate('+(logoTo.x-brandFrom.x)+'px,'+(logoTo.y-brandFrom.y)+'px) scale('+markScale+')' }], duration); // The full-screen light condenses into the same rectangle as the agent. var field = root.querySelector('.field'), fieldBox = field.getBoundingClientRect(); field.style.transformOrigin = '50% 50%'; animate(state, field, [{ opacity:1, transform:'none', borderRadius:'0' }, { opacity:.35, transform:'translate('+(to.x+to.width/2-fieldBox.x-fieldBox.width/2)+'px,'+(to.y+to.height/2-fieldBox.y-fieldBox.height/2)+'px) scale('+(to.width/fieldBox.width)+','+(to.height/fieldBox.height)+')', borderRadius:'80px' }], duration); animate(state, root.querySelector('.paper'), [{ opacity:1 }, { opacity:0 }], 600, 160); var main = document.querySelector('main[data-app-viewport-frame]'); animate(state, main, [{ opacity:0, transform:'translateY(12px)' }, { opacity:1, transform:'translateY(0)' }], 600, 220); Array.from(document.querySelectorAll('nav[aria-label="주요 메뉴"]')).forEach(function (nav) { animate(state, nav, [{ opacity:0 }, { opacity:1 }], 450, 300); }); setTimeout(function () { if (active !== state) return; target.style.visibility = ''; logo.style.visibility = ''; var finish = animate(state, root.querySelector('.scene'), [{ opacity:1 }, { opacity:0 }], 180); if (finish) finish.finished.then(function () { if (active === state) cleanup(); }).catch(function () {}); else cleanup(); }, duration); } function arrive(record) { var state = mount(record, true); if (!state) return; state.observer = new MutationObserver(function () { dock(state); }); state.observer.observe(document.body, { childList:true, subtree:true }); requestAnimationFrame(function () { dock(state); }); } function navigate(path, sourceDocument) { var safePath = destination(path, location.origin); if (!safePath) { location.assign(path); return; } if (departing || active) return; sourceDocument = sourceDocument || document.getElementById('welcome-frame')?.contentDocument || document; var frame = sourceDocument.defaultView.frameElement; var offset = frame ? frame.getBoundingClientRect() : null; var input = sourceDocument.querySelector('[data-reception-composer]'); var aura = sourceDocument.querySelector('[data-living-aura]'); var logo = document.querySelector('.brand img'); if (!logo || !aura || motion.matches) { location.assign(path); return; } // Automatic entry has a greeting instead of a composer. The agent gathers // at the same central position before docking, rather than skipping motion. var inputWidth = Math.min(680, innerWidth - 48); var inputBox = input && input.getBoundingClientRect().height ? rect(input,offset) : { x:(innerWidth-inputWidth)/2, y:innerHeight*.52, width:inputWidth, height:64 }; var record = { version:1, at:Date.now(), path:safePath, viewport:{ x:0,y:0,width:innerWidth,height:innerHeight }, input:inputBox, logo:rect(logo), field:rect(aura,offset), image:'' }; // An offscreen composer (e.g. a footer CTA) should not fly through the page. if (record.input.y < 0 || record.input.y > innerHeight) { location.assign(path); return; } try { var canvas = aura.querySelector('canvas'); if (canvas) record.image = canvas.toDataURL('image/webp', .6); if (record.image.length > 1500000) record.image = ''; sessionStorage.setItem(KEY, JSON.stringify(record)); } catch (_) { removeRecord(); location.assign(path); return; } departing = true; var state = mount(record, false); if (!state) { removeRecord(); location.assign(path); return; } // Paint the identical cover before leaving. The destination restores it in // its first parser task, before authentication/hydration can show a blank. animate(state, state.root.querySelector('.scene'), [{ opacity:0 }, { opacity:1 }], 180); setTimeout(function () { if (active !== state) return; requestAnimationFrame(function () { location.assign(path); }); }, 190); } window.TenaConsoleTransition = { navigate:navigate }; window.addEventListener('pageshow', function (event) { if (event.persisted) cleanup(); }); window.addEventListener('resize', function () { if (active && active.docking) cleanup(); }); motion.addEventListener('change', function () { if (active && active.docking) cleanup(); }); window.addEventListener('keydown', function (event) { if (event.key === 'Escape' && active) cleanup(); }); var record = null; try { record = readRecord(sessionStorage.getItem(KEY), location.pathname + location.search, location.origin, Date.now()); } catch (_) {} removeRecord(); // Consume once; refresh, unrelated pages and Back never replay it. if (record) { // A shadow root isolates the bridge from React hydration and both style systems. var parser = new MutationObserver(function () { if (document.getElementById('tena-console-transition')) { parser.disconnect(); arrive(record); } }); parser.observe(document.documentElement, { childList:true, subtree:true }); if (document.getElementById('tena-console-transition')) { parser.disconnect(); arrive(record); } setTimeout(function () { parser.disconnect(); }, 2000); } })();

패치 노트