Add remaining samples, tooling, and local project assets
This commit is contained in:
285
samples/src/test_pages/01. DX 도입배경(슬라이드).mdx
Normal file
285
samples/src/test_pages/01. DX 도입배경(슬라이드).mdx
Normal 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">×</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>
|
||||
Reference in New Issue
Block a user