107 lines
3.8 KiB
JavaScript
107 lines
3.8 KiB
JavaScript
/**
|
|
* 회사 기본정보 화면 - 컴포넌트 렌더링 비율 정밀 분석
|
|
*
|
|
* 사용법: 브라우저에서 회사 기본정보 화면을 연 상태에서
|
|
* F12 → Console 탭 → 이 스크립트 전체를 붙여넣고 Enter
|
|
*/
|
|
|
|
(function analyzeLayout() {
|
|
const results = { part1: null, part2: null };
|
|
|
|
// ========== Part 1: DesktopCanvasRenderer 구조 확인 ==========
|
|
const runtime = document.querySelector('[data-screen-runtime="true"]');
|
|
if (!runtime) {
|
|
console.warn('⚠️ [data-screen-runtime="true"] 요소를 찾을 수 없습니다.');
|
|
console.log('대안: ScreenModal 기반 렌더링이거나 다른 구조일 수 있습니다.');
|
|
results.part1 = { error: 'Runtime not found' };
|
|
} else {
|
|
const rect = runtime.getBoundingClientRect();
|
|
const inner = runtime.firstElementChild;
|
|
|
|
results.part1 = {
|
|
runtimeContainer: { width: rect.width, height: rect.height },
|
|
innerDiv: null,
|
|
components: [],
|
|
};
|
|
|
|
if (inner) {
|
|
const style = inner.style;
|
|
results.part1.innerDiv = {
|
|
width: style.width,
|
|
height: style.height,
|
|
transform: style.transform,
|
|
transformOrigin: style.transformOrigin,
|
|
position: style.position,
|
|
};
|
|
|
|
const comps = inner.querySelectorAll('[data-component-id]');
|
|
comps.forEach((comp) => {
|
|
const s = comp.style;
|
|
const r = comp.getBoundingClientRect();
|
|
results.part1.components.push({
|
|
type: comp.getAttribute('data-component-type'),
|
|
id: comp.getAttribute('data-component-id'),
|
|
stylePos: `(${s.left}, ${s.top})`,
|
|
styleSize: `${s.width} x ${s.height}`,
|
|
renderedSize: `${Math.round(r.width)} x ${Math.round(r.height)}`,
|
|
});
|
|
});
|
|
} else {
|
|
// ResponsiveGridRenderer (flex 기반) 구조일 수 있음 - 행 단위로 확인
|
|
const rows = runtime.querySelectorAll(':scope > div');
|
|
results.part1.rows = [];
|
|
rows.forEach((row, i) => {
|
|
const children = row.children;
|
|
const rowData = { rowIndex: i, childCount: children.length, children: [] };
|
|
Array.from(children).forEach((child, j) => {
|
|
const cs = window.getComputedStyle(child);
|
|
const r = child.getBoundingClientRect();
|
|
rowData.children.push({
|
|
type: child.getAttribute('data-component-type') || 'unknown',
|
|
width: Math.round(r.width),
|
|
height: Math.round(r.height),
|
|
flexGrow: cs.flexGrow,
|
|
flexBasis: cs.flexBasis,
|
|
});
|
|
});
|
|
results.part1.rows.push(rowData);
|
|
});
|
|
}
|
|
}
|
|
|
|
// ========== Part 2: wrapper vs child 크기 확인 ==========
|
|
const comps = document.querySelectorAll('[data-component-id]');
|
|
results.part2 = [];
|
|
comps.forEach((comp) => {
|
|
const type = comp.getAttribute('data-component-type');
|
|
const child = comp.firstElementChild;
|
|
if (child) {
|
|
const childRect = child.getBoundingClientRect();
|
|
const compRect = comp.getBoundingClientRect();
|
|
results.part2.push({
|
|
type,
|
|
wrapper: `${Math.round(compRect.width)}x${Math.round(compRect.height)}`,
|
|
child: `${Math.round(childRect.width)}x${Math.round(childRect.height)}`,
|
|
overflow: childRect.width > compRect.width ? 'YES' : 'no',
|
|
});
|
|
}
|
|
});
|
|
|
|
// ========== 결과 출력 ==========
|
|
console.log('========== Part 1: Runtime 구조 ==========');
|
|
console.log(JSON.stringify(results.part1, null, 2));
|
|
|
|
console.log('\n========== Part 2: Wrapper vs Child ==========');
|
|
results.part2.forEach((r) => {
|
|
console.log(`${r.type}: wrapper=${r.wrapper}, child=${r.child}, overflow=${r.overflow}`);
|
|
});
|
|
|
|
// scale 값 추출 (transform에서)
|
|
if (results.part1?.innerDiv?.transform) {
|
|
const m = results.part1.innerDiv.transform.match(/scale\(([^)]+)\)/);
|
|
if (m) console.log('\n📐 Scale 값:', m[1]);
|
|
}
|
|
|
|
return results;
|
|
})();
|