Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Add remaining samples, tooling, and local project assets

Browse Source
This commit is contained in:
이경민
2026-04-15 18:02:17 +09:00
parent 05d43a7999
commit 1ff6c6cbb2
862 changed files with 18979 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
samples/src/test_pages/01. DX 도입배경(슬라이드).mdx Normal file
View File

@@ -0,0 +1,285 @@
---
title: DX도입 배경(슬라이드6:4)
sidebar:
order: 5
tableOfContents: false
---
<style>{`
/* 1. 전체 폭 강제 사용 및 패딩 제거 */
.content-panel, .sl-container, .sl-markdown-content {
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
}
.padding-vert--lg { padding-top: 0 !important; padding-bottom: 0 !important; }
/* 2. 리스트 스타일 잡기 */
.slide-content ul { padding-left: 20px; margin-top: 10px; }
.slide-content li { margin-bottom: 8px; }
`}</style>
{/* 👇 슬라이드 컨테이너: 높이를 화면 크기에서 [제목+여백]만큼 뺀 값으로 자동 계산 */
/* calc(100vh - 140px) : 140px은 상단 시스템 제목과 헤더가 차지하는 대략적인 높이입니다. */
}
<div className="slide-container" style={{
height: 'calc(100vh - 140px)',
width: '100%',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
padding: '0 40px'
}}>
{/* 본문 영역 (6:4 분할) */}
<div style={{
flex: '1 1 auto', /* 남은 공간을 꽉 채움 */
display: 'flex',
gap: '40px',
alignItems: 'stretch', /* ⭐ 핵심: 자식 요소들을 높이 끝까지 강제로 늘림 */
marginTop: '10px',
marginBottom: '20px'
}}>
{/* 🟢 [왼쪽 60%] */}
<div className="slide-content" style={{
flex: 6,
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start', /* 내용은 중앙 정렬하되 */
height: '100%', /* ⭐ 박스 자체는 100% 높이 유지 */
borderRight: '1px solid #e0e0e0',
paddingRight: '40px'
}}>
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
1. 건설산업의 낮은 생산성
</h2>
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
<p>
* **건설산업** 생산성 성장률은 **1%**, 제조업(**3.6%**) 대비 **심각한 정체** 상태.
* 국내 건설기업의 **노동 생산성**또한 **제조업의 53.2%** 수준에 불과함.
* **건설산업**은 **효율성 혁신 지체**로, 여전히 전통적인 **노동 집약적 생산 방식**에 머물러 있음.
<br/>
<br/>
</p>
</div>
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
2. 디지털화와 건설산업의 현재
</h2>
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
<p>
* 세계적으로 산업별 **디지털화 수준과 생산성은 정비례**함.
* 건설산업의 디지털화 지수는 **농업보다도 낮은 최하위권**에 머물러 있음.
* 디지털 전환을 위한 **노력 부족**과 건설산업에 맞는 **디지털 기술 부족**이 그 원인.
* 디지털 기술이 발전한 현재, 생산성 혁신을 위해 **건설산업 전반의 디지털 전환(DX)** 이 필요.
</p>
</div>
{/* ================= [핵심 요약] 박스 ================= */}
<div style={{
marginTop: '30px', /* 위쪽 내용과 간격 */
padding: '20px', /* 박스 내부 여백 */
backgroundColor: '#f6f8fa', /* 연한 회색 배경 (취향에 따라 #e6f7ff 등 변경 가능) */
borderLeft: '5px solid #0056b3', /* 왼쪽 굵은 파란 선 */
borderRadius: '4px', /* 모서리 둥글게 */
fontSize: '1rem'
}}>
{/* 제목 부분 */}
<div style={{ fontWeight: 'bold', marginBottom: '10px', color: '#0056b3' }}>
핵심 요약
</div>
{/* 내용 부분 */}
<ul style={{ margin: 0, paddingLeft: '20px' }}>
<li>
건설산업은 디지털전환을 통해 <strong>Process의 혁신</strong>과
<strong> Products의 변화</strong>를 일으켜야 한다.
</li>
</ul>
</div>
</div>
{/* 🟠 [오른쪽 40%] */}
<div style={{
flex: 4,
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'left',
paddingLeft: '10px',
height: '100%'
}}>
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
<img
src="/assets/images/그림4.png"
alt="건설산업 생산성 추이"
className="zoomable"
style={{
maxWidth: '100%',
maxHeight: '40vh',
objectFit: 'contain',
borderRadius: '8px',
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
marginBottom: '0px'
}}
/>
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
*[그림 1] 국내외 건설산업 생산성 추이 (출처: McKinsey / 한국은행)*<br/>
</p>
<br/>
<br/>
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
<img
src="/assets/images/그림3.png"
alt="건설산업 생산성 추이"
className="zoomable"
style={{
maxWidth: '100%',
maxHeight: '40vh',
objectFit: 'contain',
borderRadius: '8px',
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
marginBottom: '0px'
}}
/>
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
*[그림 2] 산업별 디지털화 지수 비교 (출처: McKinsey 보고서, 2018)*<br/>
</p>
</div>
</div>
</div>
{/* ================================================================================== */}
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
{/* ================================================================================== */}
<style>{`
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
.zoomable:hover { transform: scale(1.02); }
/* 팝업 배경 설정 */
#image-modal {
display: none; /* 평소엔 숨김 */
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
justify-content: center;
align-items: center;
position: fixed;
left: 0; top: 0; width: 100%; height: 100%;
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
z-index: 2147483647;
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
backdrop-filter: blur(5px);
padding: 20px; /* 가장자리 여백 확보 */
box-sizing: border-box;
}
/* 팝업 이미지 설정 */
#modal-content {
max-width: 60%;
max-height: 95vh;
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
border-radius: 4px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* 닫기 버튼 설정 */
#modal-close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 50px;
font-weight: bold;
cursor: pointer;
z-index: 2147483648; /* 이미지보다도 더 위에 */
line-height: 1;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
`}</style>
{/* 팝업창 HTML 구조 */}
<div id="image-modal">
<span id="modal-close">&times;</span>
<img id="modal-content" />
</div>
{/* 스크립트 */}
<script>{`
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('image-modal');
const modalImg = document.getElementById('modal-content');
const closeBtn = document.getElementById('modal-close');
const images = document.querySelectorAll('.zoomable');
// 1. 이미지 클릭 시 열기
images.forEach(img => {
img.addEventListener('click', function(e) {
e.preventDefault(); // 혹시 모를 기본 동작 차단
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
modalImg.src = this.src;
modalImg.alt = this.alt;
});
});
// 2. 닫기 기능 함수
function closeModal() {
modal.style.display = "none";
}
// 3. 닫기 버튼 클릭
if (closeBtn) closeBtn.onclick = closeModal;
// 4. 배경 클릭 시 닫기
if (modal) {
modal.onclick = function(event) {
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
if (event.target === modal) {
closeModal();
}
}
}
// 5. ESC 키 누르면 닫기 (추가 편의기능)
document.addEventListener('keydown', function(event) {
if (event.key === "Escape" && modal.style.display === "flex") {
closeModal();
}
});
});
`}</script>

255
samples/src/test_pages/02. 정부 DX정책 추진현황(슬라이드).mdx Normal file
View File

@@ -0,0 +1,255 @@
---
title: 정부 DX정책 추진현황(슬라이드 4:6)
sidebar:
order: 6
tableOfContents: false
---
<style>{`
.content-panel, .sl-container, .sl-markdown-content {
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
}
.slide-content ul { padding-left: 20px; margin-top: 5px; }
.slide-content li { margin-bottom: 5px; }
/* 테이블 스타일 */
.custom-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
.custom-table th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
.custom-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
`}</style>
<div className="slide-container" style={{
height: 'calc(100vh - 140px)', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', padding: '0 40px'
}}>
{/* 메인 컨테이너 */}
<div style={{ flex: '1 1 auto', display: 'flex', gap: '40px', alignItems: 'stretch', marginTop: '10px', marginBottom: '20px' }}>
{/* ================================================================================== */}
{/* 🟠 [왼쪽 40%] - 너비는 좁아졌지만 "왼쪽 값" 유지 */}
{/* ================================================================================== */}
<div className="slide-content" style={{
flex: 4,
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
borderRight: '1px solid #e0e0e0', paddingRight: '40px',
height: '100%', overflowY: 'auto',
/* ⭐ 왼쪽은 구분선 영향이 있으므로 "왼쪽 황금비율" 유지 */
paddingTop: '5px'
}}>
<h2 style={{
fontSize: '1.5rem', fontWeight: 'bold',
marginBottom: '15px', borderBottom: '2px solid #333', paddingBottom: '10px',
/* ⭐ 왼쪽 황금비율 유지 */
marginTop: '7px'
}}>
1. 건설 정책 로드맵 및 목표
</h2>
{/* 내용 */}
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '-20px' }}>
<ul>
<li>디지털전환(DX)을 통한 건설산업의 **국가 신성장 동력** 재도약</li>
<li>스마트건설 도입 및 디지털전환을 위한 **국가 R&D 및 정책**추진</li>
</ul>
</div>
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
<img
src="/assets/images/04.png"
alt="건설산업DX 정책 로드맵"
className="zoomable"
style={{ maxWidth: '100%', maxHeight: '50vh', objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
/>
<p style={{ fontSize: '0.9rem', color: '#666', marginTop: '5px' }}>
*[사진 1] 건설산업DX 정책 로드맵*
</p>
</div>
{/* 핵심 요약 */}
<div style={{ marginTop: '5px', padding: '15px', backgroundColor: '#e7f5ff', borderLeft: '5px solid #0056b3', borderRadius: '4px', fontSize: '1rem' }}>
<div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#0056b3' }}>ℹ️ 핵심 요약</div>
<ul style={{ margin: 0, paddingLeft: '20px' }}>
<li>정부는 건설산업의 디지털 전환을 지속적으로 추진하고 있으며 현재는 디지털화(BIM), 자동화(OCS)를 목표로 삼고있다.</li>
</ul>
</div>
</div>
{/* ================================================================================== */}
{/* 🟢 [오른쪽 60%] - 너비는 넓어졌지만 "오른쪽 값" 유지 */}
{/* ================================================================================== */}
<div className="slide-content" style={{
flex: 6,
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
paddingLeft: '10px',
height: '100%', overflowY: 'auto',
/* ⭐ 오른쪽은 구분선이 없으므로 "오른쪽 황금비율" 유지 */
paddingTop: '0px'
}}>
<h2 style={{
fontSize: '1.5rem', fontWeight: 'bold',
marginBottom: '0px', borderBottom: '2px solid #333', paddingBottom: '10px',
/* ⭐ 오른쪽 황금비율 유지 */
marginTop: '-3px'
}}>
2. 건설산업 BIM 기본 지침 [국토교통부, 2020]
</h2>
{/* 내용 */}
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
<p>
**정부 BIM 도입 개요 (건설산업 BIM 기본지침)**
* **비전**: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약
* **목표**: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화
* **기대 효과**:
* **비용/공기**: 건설 비용 감소 및 기간 단축
* **품질/안전**: 설계·시공 오류 최소화, 프로젝트 리스크 저감
* **협업**: 협업과 의사소통 강화, 건설정보 통합관리
</p>
<h2 style={{
fontSize: '1.5rem', fontWeight: 'bold',
marginBottom: '0px', borderBottom: '2px solid #333', paddingBottom: '10px',
/* ⭐ 오른쪽 황금비율 유지 */
marginTop: '50px'
}}>
3. 스마트 건설 활성화 방안 [국토교통부, 2022]
</h2>
{/* 내용 */}
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
<p>
**스마트 건설 활성화 방안 주요내용**
| 구분 | 주요 내용 |
| :--- | :--- |
| **BIM**<br/>(Building Information Modeling) | **건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구**<br/>건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함 |
| **OSC**<br/>(Off-Site Construction) | **탈현장 건설 (공장 제작 시공)**<br/>단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식 |
</p>
</div>
</div>
</div>
</div>
</div>
{/* ================================================================================== */}
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
{/* ================================================================================== */}
<style>{`
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
.zoomable:hover { transform: scale(1.02); }
/* 팝업 배경 설정 */
#image-modal {
display: none; /* 평소엔 숨김 */
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
justify-content: center;
align-items: center;
position: fixed;
left: 0; top: 0; width: 100%; height: 100%;
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
z-index: 2147483647;
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
backdrop-filter: blur(5px);
padding: 20px; /* 가장자리 여백 확보 */
box-sizing: border-box;
}
/* 팝업 이미지 설정 */
#modal-content {
max-width: 60%;
max-height: 95vh;
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
border-radius: 4px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* 닫기 버튼 설정 */
#modal-close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 50px;
font-weight: bold;
cursor: pointer;
z-index: 2147483648; /* 이미지보다도 더 위에 */
line-height: 1;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
`}</style>
{/* 팝업창 HTML 구조 */}
<div id="image-modal">
<span id="modal-close">&times;</span>
<img id="modal-content" />
</div>
{/* 스크립트 */}
<script>{`
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('image-modal');
const modalImg = document.getElementById('modal-content');
const closeBtn = document.getElementById('modal-close');
const images = document.querySelectorAll('.zoomable');
// 1. 이미지 클릭 시 열기
images.forEach(img => {
img.addEventListener('click', function(e) {
e.preventDefault(); // 혹시 모를 기본 동작 차단
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
modalImg.src = this.src;
modalImg.alt = this.alt;
});
});
// 2. 닫기 기능 함수
function closeModal() {
modal.style.display = "none";
}
// 3. 닫기 버튼 클릭
if (closeBtn) closeBtn.onclick = closeModal;
// 4. 배경 클릭 시 닫기
if (modal) {
modal.onclick = function(event) {
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
if (event.target === modal) {
closeModal();
}
}
}
// 5. ESC 키 누르면 닫기 (추가 편의기능)
document.addEventListener('keydown', function(event) {
if (event.key === "Escape" && modal.style.display === "flex") {
closeModal();
}
});
});
`}</script>

148
samples/src/test_pages/slide_2026-03-23 (2).mdx Normal file
View File

@@ -0,0 +1,148 @@
---
title: 건설 정책 로드맵 및 목표
tableOfContents: false
---
<style>{`
.content-panel, .sl-container, .sl-markdown-content {
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
}
.slide-content ul { padding-left: 20px; margin-top: 5px; }
.slide-content li { margin-bottom: 5px; }
.custom-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
.custom-table th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
.custom-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
`}</style>
<div className="slide-container" style={{
height: 'calc(100vh - 140px)', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', padding: '0 40px'
}}>
{/* 메인 2컬럼 영역 */}
<div style={{ flex: '1 1 auto', display: 'flex', gap: '40px', alignItems: 'stretch', marginTop: '10px', marginBottom: '20px' }}>
{/* 왼쪽 (40%) */}
<div className="slide-content" style={{
flex: 4,
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
borderRight: '1px solid #e0e0e0', paddingRight: '40px',
height: '100%', overflowY: 'auto',
paddingTop: '5px'
}}>
<h2 style={{
fontSize: '1.5rem', fontWeight: 'bold',
borderBottom: '2px solid #333', paddingBottom: '10px', marginBottom: '15px',
marginTop: '7px'
}}>
1. 건설 정책 로드맵 및 목표
</h2>
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
<p>
정부는 **디지털 전환(DX)** 을 통해 정체된 건설산업을 **국가 신성장 동력**으로 재도약시키고자, 건설산업을 정보화하고 스마트 건설을 도입하기위해 다양한 국가연구개발사업 및 건설 정책을 시행하고있다.
![건설 정책 로드맵](/assets/images/04.png)
*[사진 1] 건설산업DX 정책 로드맵*
### 2. 건설산업 BIM 기본 지침
2020년 「**건설산업 BIM 기본지침**」, 2022년 「**건설산업 BIM 시행지침**」을 발의하여 건설산업의 **생산성 향상**과 **품질, 안전 및 친환경의 극대화**를 핵심 목표로 설정하였으며, 설계·시공·유지관리 등 건설산업 전반의 **디지털 전환을 가속화**하고자 한다.
**정부 BIM 도입 개요 (건설산업 BIM 기본지침)**
* **비전**: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약
* **목표**: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화
* **기대 효과**:
* **비용/공기**: 건설 비용 감소 및 기간 단축
* **품질/안전**: 설계·시공 오류 최소화, 프로젝트 리스크 저감
* **협업**: 협업과 의사소통 강화, 건설정보 통합관리
![건설산업 BIM 기본 지침](/assets/images/09.png)
*[사진 1] 건설산업 BIM 기본 지침 및 시행지침*
</p>
</div>
</div>
{/* 오른쪽 (60%) */}
<div className="slide-content" style={{
flex: 6,
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
paddingLeft: '10px',
height: '100%', overflowY: 'auto',
paddingTop: '0px'
}}>
<h2 style={{
fontSize: '1.5rem', fontWeight: 'bold',
borderBottom: '2px solid #333', paddingBottom: '10px', marginBottom: '0px',
marginTop: '-3px'
}}>
3. 스마트 건설 활성화 방안
</h2>
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px', paddingTop: '20px' }}>
<p>
2022년 7월 국토교통부가 발표한 '**스마트 건설 활성화 방안**'은 건설산업의 디지털화와 자동화를 위한 핵심 전략을 포함한다.
**스마트 건설 활성화 방안 주요내용**
| 구분 | 주요 내용 |
| --- | --- |
| **BIM** (Building Information Modeling) | **건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구** 건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함 |
| **OSC** (Off-Site Construction) | **탈현장 건설 (공장 제작 시공)** 단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식 |
![스마트 건설 활성화 방안](/assets/images/05.png)
*[사진 2] 스마트 건설 활성화 방안*
</p>
</div>
</div>
</div>
{/* 핵심 요약 - 하단 풀폭 */}
<div style={{
padding: '20px 25px',
backgroundColor: '#e7f5ff',
borderLeft: '6px solid #0056b3',
borderRadius: '6px',
fontSize: '1.1rem',
lineHeight: '1.7',
marginTop: '10px'
}}>
<div style={{ fontWeight: 'bold', marginBottom: '8px', color: '#0056b3', fontSize: '1.15rem' }}>ℹ️ 핵심 요약</div>
<div style={{ color: '#1a365d', fontWeight: '500' }}>
* 정부는 [건설산업 BIM 기본 지침], [스마트 건설 활성화 방안] 등을 통해 건설산업의 디지털 전환을 지속적으로 추진하고 있다.
</div>
</div>
</div>
{/* 이미지 팝업 */}
<style>{`
.zoomable { cursor: zoom-in; transition: transform 0.2s; } .zoomable:hover { transform: scale(1.02); }
#image-modal { display: none; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147483647; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); padding: 20px; box-sizing: border-box; }
#modal-content { max-width: 95%; max-height: 95vh; object-fit: contain; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.5); animation: popUp 0.3s; }
#modal-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 50px; font-weight: bold; cursor: pointer; z-index: 2147483648; line-height: 1; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
`}</style>
<div id="image-modal"><span id="modal-close">&times;</span><img id="modal-content" /></div>
<script>{`
document.addEventListener('DOMContentLoaded', () => {
const m = document.getElementById('image-modal'), i = document.getElementById('modal-content'), c = document.getElementById('modal-close');
document.querySelectorAll('.zoomable').forEach(e => e.addEventListener('click', function(ev) { ev.preventDefault(); m.style.display = "flex"; i.src = this.src; i.alt = this.alt; }));
const clo = () => m.style.display = "none";
if(c) c.onclick = clo; if(m) m.onclick = e => { if(e.target === m) clo(); };
document.addEventListener('keydown', e => { if(e.key === "Escape" && m.style.display === "flex") clo(); });
});
`}</script>

302
samples/src/test_pages/test_1.astro Normal file
View File

@@ -0,0 +1,302 @@
---
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
---
<StarlightPage frontmatter={{ title: '건설 정책 로드맵 및 목표', tableOfContents: false }}>
<style is:global>
.sl-markdown-content,
.content-panel,
.sl-container,
main {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
body { font-family: 'Noto Sans KR', sans-serif; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
ul { padding-left: 20px; margin-top: 5px; }
li { margin-bottom: 5px; }
img { max-width: 100%; border-radius: 8px; }
blockquote { margin: 10px 0; padding: 10px 15px; border-left: 4px solid #0056b3; background: #f8f9fa; }
/* 컬럼 리사이즈 핸들 */
.col-resize-handle {
width: 6px;
cursor: col-resize;
background: transparent;
flex-shrink: 0;
position: relative;
z-index: 10;
transition: background 0.2s;
}
.col-resize-handle:hover, .col-resize-handle.dragging {
background: #0056b3;
border-radius: 3px;
}
.col-resize-handle::after {
content: '⋮';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
font-size: 14px;
pointer-events: none;
}
.col-resize-handle:hover::after, .col-resize-handle.dragging::after {
color: #fff;
}
/* 표 리사이즈 */
table {
position: relative;
}
.table-wrapper {
position: relative;
margin-top: 10px;
}
.table-col-grip {
position: absolute;
top: 0;
width: 8px;
height: 100%;
cursor: col-resize;
z-index: 10;
background: transparent;
}
.table-col-grip:hover {
background: rgba(0, 86, 179, 0.25);
}
.table-row-grip {
position: absolute;
left: 0;
width: 100%;
height: 8px;
cursor: row-resize;
z-index: 10;
background: transparent;
}
.table-row-grip:hover {
background: rgba(0, 86, 179, 0.25);
}
</style>
<div style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column; padding: 15px 40px; box-sizing: border-box;">
<div id="colContainer" style="flex: 1 1 auto; display: flex; align-items: stretch; margin-top: 10px; margin-bottom: 10px;">
<div id="leftCol" style="flex: 4.5 1 0%; display: flex; flex-direction: column; padding-right: 20px; overflow-y: auto; padding-top: 5px;">
<h2 style="font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #333;
padding-bottom: 10px; margin-bottom: 15px; margin-top: 7px;">1. 건설 정책 로드맵 및 목표</h2>
<div style="font-size: 1rem; line-height: 1.6; color: #333;"><p>정부는 <strong>디지털 전환(DX)</strong> 을 통해 정체된 건설산업을 <strong>국가 신성장 동력</strong>으로 재도약시키고자, 건설산업을 정보화하고 스마트 건설을 도입하기위해 다양한 국가연구개발사업 및 건설 정책을 시행하고있다.</p>
<div style="text-align: center; margin: 15px 0;">
<img alt="건설 정책 로드맵" src="/assets/images/04.png" style="max-height: 35vh; object-fit: contain;"/>
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 1] 건설산업DX 정책 로드맵</em></p>
</div>
<h3 style="font-size:1.3rem; font-weight:bold; border-bottom:1px solid #999; padding-bottom:8px; margin-top:25px; margin-bottom:10px;">2. 건설산업 BIM 기본 지침</h3>
<p>2020년 「<strong>건설산업 BIM 기본지침</strong>」, 2022년 「<strong>건설산업 BIM 시행지침</strong>」을 발의하여 건설산업의 <strong>생산성 향상</strong>과 <strong>품질, 안전 및 친환경의 극대화</strong>를 핵심 목표로 설정하였으며, 설계·시공·유지관리 등 건설산업 전반의 <strong>디지털 전환을 가속화</strong>하고자 한다.</p>
<p><strong>정부 BIM 도입 개요 (건설산업 BIM 기본지침)</strong></p>
<ul>
<li><strong>비전</strong>: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약</li>
<li><strong>목표</strong>: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화</li>
<li><strong>기대 효과</strong>:</li>
<ul><li><strong>비용/공기</strong>: 건설 비용 감소 및 기간 단축</li></ul>
<ul><li><strong>품질/안전</strong>: 설계·시공 오류 최소화, 프로젝트 리스크 저감</li></ul>
<ul><li><strong>협업</strong>: 협업과 의사소통 강화, 건설정보 통합관리</li></ul>
</ul>
<div style="text-align: center; margin: 15px 0;">
<img alt="건설산업 BIM 기본 지침" src="/assets/images/09.png" style="max-height: 35vh; object-fit: contain;"/>
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 1] 건설산업 BIM 기본 지침 및 시행지침</em></p>
</div>
</div>
</div>
<div class="col-resize-handle" id="colResizeHandle"></div>
<div id="rightCol" style="flex: 5.5 1 0%; display: flex; flex-direction: column; padding-left: 20px; overflow-y: auto;">
<h2 style="font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #333;
padding-bottom: 10px; margin-bottom: 15px; margin-top: -3px;">3. 스마트 건설 활성화 방안</h2>
<div style="font-size: 1rem; line-height: 1.6; color: #333;"><p>2022년 7월 국토교통부가 발표한 '<strong>스마트 건설 활성화 방안</strong>'은 건설산업의 디지털화와 자동화를 위한 핵심 전략을 포함한다.</p>
<p><strong>스마트 건설 활성화 방안 주요내용</strong></p>
<div class="table-wrapper"><table style="width:100%; border-collapse:collapse; margin-top:10px; font-size:0.9rem; table-layout:fixed;"><thead><tr><th style="background:#f1f3f5; border:1px solid #ddd; padding:8px; text-align:left; width:30%;">구분</th><th style="background:#f1f3f5; border:1px solid #ddd; padding:8px; text-align:left; width:70%;">주요 내용</th></tr></thead><tbody><tr><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>BIM</strong><br/>(Building Information Modeling)</td><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구</strong><br/>건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함</td></tr><tr><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>OSC</strong><br/>(Off-Site Construction)</td><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>탈현장 건설 (공장 제작 시공)</strong><br/>단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식</td></tr></tbody></table><div class="table-col-grip" data-col-index="0" style="left: 305px; height: 191px;"></div><div class="table-row-grip" data-row-index="0" style="top: 36px; width: 1009px;"></div><div class="table-row-grip" data-row-index="1" style="top: 99px; width: 1009px;"></div></div>
<div style="text-align: center; margin: 15px 0;">
<img alt="스마트 건설 활성화 방안" src="/assets/images/05.png" style="max-height: 35vh; object-fit: contain;"/>
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 2] 스마트 건설 활성화 방안</em></p>
</div>
</div>
</div>
</div>
<div style="padding: 20px 25px; background-color: #e7f5ff; border-left: 6px solid #0056b3;
border-radius: 6px; font-size: 1.1rem; line-height: 1.7; margin-top: 10px;">
<div style="font-weight: bold; margin-bottom: 8px; color: #0056b3; font-size: 1.15rem;">ℹ️ 핵심 요약</div>
<div style="color: #1a365d; font-weight: 500;"><ul>
<li>정부는 [건설산업 BIM 기본 지침], [스마트 건설 활성화 방안] 등을 통해 건설산업의 디지털 전환을 지속적으로 추진하고 있다.</li>
</ul></div>
</div>
</div>
</StarlightPage>
<script is:inline>
document.addEventListener('DOMContentLoaded', function() {
// ===== 1. 컬럼 리사이즈 =====
(function() {
var handle = document.getElementById('colResizeHandle');
if (!handle) return;
var container = document.getElementById('colContainer');
var leftCol = document.getElementById('leftCol');
var rightCol = document.getElementById('rightCol');
if (!leftCol || !rightCol) return;
var dragging = false;
handle.addEventListener('mousedown', function(e) {
e.preventDefault();
dragging = true;
handle.classList.add('dragging');
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', function(e) {
if (!dragging) return;
var rect = container.getBoundingClientRect();
var x = e.clientX - rect.left;
var totalW = rect.width;
var leftRatio = (x / totalW) * 10;
leftRatio = Math.max(2, Math.min(8, leftRatio));
var rightRatio = 10 - leftRatio;
leftCol.style.flex = leftRatio.toFixed(1);
rightCol.style.flex = rightRatio.toFixed(1);
});
document.addEventListener('mouseup', function() {
if (!dragging) return;
dragging = false;
handle.classList.remove('dragging');
document.body.style.cursor = '';
document.body.style.userSelect = '';
});
})();
// ===== 2. 표 셀 리사이즈 (오버레이 방식) =====
(function() {
document.querySelectorAll('table').forEach(function(table) {
table.style.tableLayout = 'fixed';
// 테이블을 wrapper로 감싸기
var wrapper = document.createElement('div');
wrapper.className = 'table-wrapper';
table.parentNode.insertBefore(wrapper, table);
wrapper.appendChild(table);
function createGrips() {
// 기존 그립 제거
wrapper.querySelectorAll('.table-col-grip, .table-row-grip').forEach(function(g) { g.remove(); });
var rows = table.querySelectorAll('tr');
if (rows.length === 0) return;
// 컬럼 그립 - 첫 행의 셀 경계에 배치
var cells = rows[0].querySelectorAll('th, td');
var cumX = 0;
for (var i = 0; i < cells.length - 1; i++) {
cumX += cells[i].offsetWidth;
var grip = document.createElement('div');
grip.className = 'table-col-grip';
grip.style.left = (cumX - 4) + 'px';
grip.style.height = table.offsetHeight + 'px';
grip.dataset.colIndex = i;
wrapper.appendChild(grip);
(function(colIdx, gripEl) {
var startX, startW, nextStartW, col, nextCol;
gripEl.addEventListener('mousedown', function(e) {
e.preventDefault();
startX = e.clientX;
col = [];
nextCol = [];
rows.forEach(function(row) {
var c = row.querySelectorAll('th, td');
if (c[colIdx]) col.push(c[colIdx]);
if (c[colIdx + 1]) nextCol.push(c[colIdx + 1]);
});
startW = col[0] ? col[0].offsetWidth : 100;
nextStartW = nextCol[0] ? nextCol[0].offsetWidth : 100;
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
function onMove(ev) {
var diff = ev.clientX - startX;
var newW = Math.max(40, startW + diff);
var newNextW = Math.max(40, nextStartW - diff);
col.forEach(function(c) { c.style.width = newW + 'px'; });
nextCol.forEach(function(c) { c.style.width = newNextW + 'px'; });
}
function onUp() {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
document.body.style.cursor = '';
document.body.style.userSelect = '';
createGrips();
}
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
})(i, grip);
}
// 행 그립 - 각 행 하단에 배치
var cumY = 0;
for (var r = 0; r < rows.length - 1; r++) {
cumY += rows[r].offsetHeight;
var rowGrip = document.createElement('div');
rowGrip.className = 'table-row-grip';
rowGrip.style.top = (cumY - 4) + 'px';
rowGrip.style.width = table.offsetWidth + 'px';
rowGrip.dataset.rowIndex = r;
wrapper.appendChild(rowGrip);
(function(rowIdx, gripEl) {
var startY, startH;
gripEl.addEventListener('mousedown', function(e) {
e.preventDefault();
startY = e.clientY;
startH = rows[rowIdx].offsetHeight;
document.body.style.cursor = 'row-resize';
document.body.style.userSelect = 'none';
function onMove(ev) {
var diff = ev.clientY - startY;
rows[rowIdx].style.height = Math.max(20, startH + diff) + 'px';
}
function onUp() {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
document.body.style.cursor = '';
document.body.style.userSelect = '';
createGrips();
}
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
})(r, rowGrip);
}
}
// 초기 그립 생성 (약간의 딜레이 후 — 렌더링 완료 대기)
setTimeout(createGrips, 100);
});
})();
});
</script>

297
samples/src/test_pages/test_1.html Normal file
View File

@@ -0,0 +1,297 @@
<!DOCTYPE html><html lang="ko"><head>
<meta charset="UTF-8">
<title>건설 정책 로드맵 및 목표</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
body { margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; background: #fff; height: 100%; overflow: hidden; }
html { height: 100%; overflow: hidden; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
ul { padding-left: 20px; margin-top: 5px; }
li { margin-bottom: 5px; }
img { max-width: 100%; border-radius: 8px; }
blockquote { margin: 10px 0; padding: 10px 15px; border-left: 4px solid #0056b3; background: #f8f9fa; }
/* 컬럼 리사이즈 핸들 */
.col-resize-handle {
width: 6px;
cursor: col-resize;
background: transparent;
flex-shrink: 0;
position: relative;
z-index: 10;
transition: background 0.2s;
}
.col-resize-handle:hover, .col-resize-handle.dragging {
background: #0056b3;
border-radius: 3px;
}
.col-resize-handle::after {
content: '⋮';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
font-size: 14px;
pointer-events: none;
}
.col-resize-handle:hover::after, .col-resize-handle.dragging::after {
color: #fff;
}
/* 표 리사이즈 */
table {
position: relative;
}
.table-wrapper {
position: relative;
margin-top: 10px;
}
.table-col-grip {
position: absolute;
top: 0;
width: 8px;
height: 100%;
cursor: col-resize;
z-index: 10;
background: transparent;
}
.table-col-grip:hover {
background: rgba(0, 86, 179, 0.25);
}
.table-row-grip {
position: absolute;
left: 0;
width: 100%;
height: 8px;
cursor: row-resize;
z-index: 10;
background: transparent;
}
.table-row-grip:hover {
background: rgba(0, 86, 179, 0.25);
}
</style>
</head>
<body style="">
<div style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column; padding: 15px 40px; box-sizing: border-box;">
<div id="colContainer" style="flex: 1 1 auto; display: flex; align-items: stretch; margin-top: 10px; margin-bottom: 10px;">
<div id="leftCol" style="flex: 4.5 1 0%; display: flex; flex-direction: column; padding-right: 20px; overflow-y: auto; padding-top: 5px;">
<h2 style="font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #333;
padding-bottom: 10px; margin-bottom: 15px; margin-top: 7px;">1. 건설 정책 로드맵 및 목표</h2>
<div style="font-size: 1rem; line-height: 1.6; color: #333;"><p>정부는 <strong>디지털 전환(DX)</strong> 을 통해 정체된 건설산업을 <strong>국가 신성장 동력</strong>으로 재도약시키고자, 건설산업을 정보화하고 스마트 건설을 도입하기위해 다양한 국가연구개발사업 및 건설 정책을 시행하고있다.</p>
<div style="text-align: center; margin: 15px 0;">
<img src="/assets/images/04.png" alt="건설 정책 로드맵" style="max-height: 35vh; object-fit: contain;">
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 1] 건설산업DX 정책 로드맵</em></p>
</div>
<h3 style="font-size:1.3rem; font-weight:bold; border-bottom:1px solid #999; padding-bottom:8px; margin-top:25px; margin-bottom:10px;">2. 건설산업 BIM 기본 지침</h3>
<p>2020년 「<strong>건설산업 BIM 기본지침</strong>」, 2022년 「<strong>건설산업 BIM 시행지침</strong>」을 발의하여 건설산업의 <strong>생산성 향상</strong>과 <strong>품질, 안전 및 친환경의 극대화</strong>를 핵심 목표로 설정하였으며, 설계·시공·유지관리 등 건설산업 전반의 <strong>디지털 전환을 가속화</strong>하고자 한다.</p>
<p><strong>정부 BIM 도입 개요 (건설산업 BIM 기본지침)</strong></p>
<ul>
<li><strong>비전</strong>: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약</li>
<li><strong>목표</strong>: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화</li>
<li><strong>기대 효과</strong>:</li>
<ul><li><strong>비용/공기</strong>: 건설 비용 감소 및 기간 단축</li></ul>
<ul><li><strong>품질/안전</strong>: 설계·시공 오류 최소화, 프로젝트 리스크 저감</li></ul>
<ul><li><strong>협업</strong>: 협업과 의사소통 강화, 건설정보 통합관리</li></ul>
</ul>
<div style="text-align: center; margin: 15px 0;">
<img src="/assets/images/09.png" alt="건설산업 BIM 기본 지침" style="max-height: 35vh; object-fit: contain;">
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 1] 건설산업 BIM 기본 지침 및 시행지침</em></p>
</div>
</div>
</div>
<div class="col-resize-handle" id="colResizeHandle"></div>
<div id="rightCol" style="flex: 5.5 1 0%; display: flex; flex-direction: column; padding-left: 20px; overflow-y: auto;">
<h2 style="font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #333;
padding-bottom: 10px; margin-bottom: 15px; margin-top: -3px;">3. 스마트 건설 활성화 방안</h2>
<div style="font-size: 1rem; line-height: 1.6; color: #333;"><p>2022년 7월 국토교통부가 발표한 '<strong>스마트 건설 활성화 방안</strong>'은 건설산업의 디지털화와 자동화를 위한 핵심 전략을 포함한다.</p>
<p><strong>스마트 건설 활성화 방안 주요내용</strong></p>
<div class="table-wrapper"><table style="width:100%; border-collapse:collapse; margin-top:10px; font-size:0.9rem; table-layout:fixed;"><thead><tr><th style="background:#f1f3f5; border:1px solid #ddd; padding:8px; text-align:left; width:30%;">구분</th><th style="background:#f1f3f5; border:1px solid #ddd; padding:8px; text-align:left; width:70%;">주요 내용</th></tr></thead><tbody><tr><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>BIM</strong><br>(Building Information Modeling)</td><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구</strong><br>건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함</td></tr><tr><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>OSC</strong><br>(Off-Site Construction)</td><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>탈현장 건설 (공장 제작 시공)</strong><br>단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식</td></tr></tbody></table><div class="table-col-grip" data-col-index="0" style="left: 305px; height: 191px;"></div><div class="table-row-grip" data-row-index="0" style="top: 36px; width: 1009px;"></div><div class="table-row-grip" data-row-index="1" style="top: 99px; width: 1009px;"></div></div>
<div style="text-align: center; margin: 15px 0;">
<img src="/assets/images/05.png" alt="스마트 건설 활성화 방안" style="max-height: 35vh; object-fit: contain;">
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 2] 스마트 건설 활성화 방안</em></p>
</div>
</div>
</div>
</div>
<div style="padding: 20px 25px; background-color: #e7f5ff; border-left: 6px solid #0056b3;
border-radius: 6px; font-size: 1.1rem; line-height: 1.7; margin-top: 10px;">
<div style="font-weight: bold; margin-bottom: 8px; color: #0056b3; font-size: 1.15rem;">ℹ️ 핵심 요약</div>
<div style="color: #1a365d; font-weight: 500;"><ul>
<li>정부는 [건설산업 BIM 기본 지침], [스마트 건설 활성화 방안] 등을 통해 건설산업의 디지털 전환을 지속적으로 추진하고 있다.</li>
</ul></div>
</div>
</div>
<script>
// ===== 1. 컬럼 리사이즈 =====
(function() {
var handle = document.getElementById('colResizeHandle');
if (!handle) return;
var container = document.getElementById('colContainer');
var leftCol = document.getElementById('leftCol');
var rightCol = document.getElementById('rightCol');
if (!leftCol || !rightCol) return;
var dragging = false;
handle.addEventListener('mousedown', function(e) {
e.preventDefault();
dragging = true;
handle.classList.add('dragging');
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', function(e) {
if (!dragging) return;
var rect = container.getBoundingClientRect();
var x = e.clientX - rect.left;
var totalW = rect.width;
var leftRatio = (x / totalW) * 10;
leftRatio = Math.max(2, Math.min(8, leftRatio));
var rightRatio = 10 - leftRatio;
leftCol.style.flex = leftRatio.toFixed(1);
rightCol.style.flex = rightRatio.toFixed(1);
});
document.addEventListener('mouseup', function() {
if (!dragging) return;
dragging = false;
handle.classList.remove('dragging');
document.body.style.cursor = '';
document.body.style.userSelect = '';
});
})();
// ===== 2. 표 셀 리사이즈 (오버레이 방식) =====
(function() {
document.querySelectorAll('table').forEach(function(table) {
table.style.tableLayout = 'fixed';
// 테이블을 wrapper로 감싸기
var wrapper = document.createElement('div');
wrapper.className = 'table-wrapper';
table.parentNode.insertBefore(wrapper, table);
wrapper.appendChild(table);
function createGrips() {
// 기존 그립 제거
wrapper.querySelectorAll('.table-col-grip, .table-row-grip').forEach(function(g) { g.remove(); });
var rows = table.querySelectorAll('tr');
if (rows.length === 0) return;
// 컬럼 그립 - 첫 행의 셀 경계에 배치
var cells = rows[0].querySelectorAll('th, td');
var cumX = 0;
for (var i = 0; i < cells.length - 1; i++) {
cumX += cells[i].offsetWidth;
var grip = document.createElement('div');
grip.className = 'table-col-grip';
grip.style.left = (cumX - 4) + 'px';
grip.style.height = table.offsetHeight + 'px';
grip.dataset.colIndex = i;
wrapper.appendChild(grip);
(function(colIdx, gripEl) {
var startX, startW, nextStartW, col, nextCol;
gripEl.addEventListener('mousedown', function(e) {
e.preventDefault();
startX = e.clientX;
col = [];
nextCol = [];
rows.forEach(function(row) {
var c = row.querySelectorAll('th, td');
if (c[colIdx]) col.push(c[colIdx]);
if (c[colIdx + 1]) nextCol.push(c[colIdx + 1]);
});
startW = col[0] ? col[0].offsetWidth : 100;
nextStartW = nextCol[0] ? nextCol[0].offsetWidth : 100;
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
function onMove(ev) {
var diff = ev.clientX - startX;
var newW = Math.max(40, startW + diff);
var newNextW = Math.max(40, nextStartW - diff);
col.forEach(function(c) { c.style.width = newW + 'px'; });
nextCol.forEach(function(c) { c.style.width = newNextW + 'px'; });
}
function onUp() {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
document.body.style.cursor = '';
document.body.style.userSelect = '';
createGrips();
}
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
})(i, grip);
}
// 행 그립 - 각 행 하단에 배치
var cumY = 0;
for (var r = 0; r < rows.length - 1; r++) {
cumY += rows[r].offsetHeight;
var rowGrip = document.createElement('div');
rowGrip.className = 'table-row-grip';
rowGrip.style.top = (cumY - 4) + 'px';
rowGrip.style.width = table.offsetWidth + 'px';
rowGrip.dataset.rowIndex = r;
wrapper.appendChild(rowGrip);
(function(rowIdx, gripEl) {
var startY, startH;
gripEl.addEventListener('mousedown', function(e) {
e.preventDefault();
startY = e.clientY;
startH = rows[rowIdx].offsetHeight;
document.body.style.cursor = 'row-resize';
document.body.style.userSelect = 'none';
function onMove(ev) {
var diff = ev.clientY - startY;
rows[rowIdx].style.height = Math.max(20, startH + diff) + 'px';
}
function onUp() {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
document.body.style.cursor = '';
document.body.style.userSelect = '';
createGrips();
}
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
})(r, rowGrip);
}
}
// 초기 그립 생성 (약간의 딜레이 후 — 렌더링 완료 대기)
setTimeout(createGrips, 100);
});
})();
</script>
</body></html>

357
samples/src/test_pages/test_2.astro Normal file
View File

File diff suppressed because one or more lines are too long

348
samples/src/test_pages/test_2.html Normal file
View File

File diff suppressed because one or more lines are too long