feat(frontend): add Front/ — Vite/React frontend with backend pipeline integration
Mirror of design_agent_front/design-agent/ for shipping alongside backend.
Vite plugin (vitePluginPhaseZApi) endpoints :
- POST /api/run — spawn `python -m src.phase_z2_pipeline` with overrides
- GET /api/sample-mdx?mdx=03/04/05 — fixed sample MDX
- GET /frame-preview/{n} — figma preview thumbnails
- GET /data/runs/{run_id}/{path} — pipeline artifacts (final.html, step*.json, ...)
Env toggle forward (보고용) :
PHASE_Z_ALLOW_RESTRUCTURE / PHASE_Z_ALLOW_REJECT / PHASE_Z_MAX_RANK=32
Components :
- LeftMdxPanel (03/04/05 fix list + section tree)
- SlideCanvas (iframe + slideOverrideCss prop for inline CSS inject)
- FramePanel (label priority + confidence sort)
- LayoutPanel
README with mermaid diagrams covering the 5-step demo flow.
node_modules / dist / .manus-logs / .env excluded via .gitignore.
This commit is contained in:
282
Front/integrated_slide_layouts.html
Normal file
282
Front/integrated_slide_layouts.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1280">
|
||||
<title>8 Integrated Slide Layouts (Step 22)</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* ── slide-base.html에서 가져온 원본 CSS ── */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
background: #e8ecf0;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 50px 0;
|
||||
gap: 100px;
|
||||
}
|
||||
.slide {
|
||||
width: 1280px; height: 720px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 40px rgba(0,0,0,0.2);
|
||||
}
|
||||
.slide-bg { position: absolute; inset: 0; background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%); z-index: 0; }
|
||||
.slide-bg-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.02; pointer-events: none; }
|
||||
.slide-title {
|
||||
position: absolute; left: 52px; top: 22px; width: calc(100% - 104px);
|
||||
font-weight: 700; font-size: 22px; line-height: 1.4;
|
||||
background-image: linear-gradient(180deg, #296b55 0%, #123328 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
text-shadow: 0 0 2px #322c1e; z-index: 2;
|
||||
}
|
||||
.slide-divider { position: absolute; left: 50px; top: 58px; width: calc(100% - 100px); height: 2px; z-index: 2; background: #e2e8f0; }
|
||||
.slide-body {
|
||||
position: absolute; left: 40px; top: 65px; width: calc(100% - 80px); height: 590px;
|
||||
z-index: 1; overflow: hidden;
|
||||
}
|
||||
.slide-footer {
|
||||
position: absolute; left: 50px; bottom: 8px; width: calc(100% - 100px); height: 41px;
|
||||
border-radius: 999px; overflow: hidden; z-index: 2; display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||||
}
|
||||
.slide-footer-text { position: relative; z-index: 1; font-size: 20px; font-weight: 700; color: #ffffff; text-align: center; line-height: 1.2; text-shadow: 0 0 4px rgba(0,0,0,0.5); letter-spacing: -0.01em; }
|
||||
.slide-footer-text em { color: #ffee33; font-style: normal; }
|
||||
|
||||
/* ── 본문용 하드코딩 스타일 ── */
|
||||
.h2-title { font-size: 38px; font-weight: 900; line-height: 1.2; color: #0f172a; }
|
||||
.p-content { font-size: 22px; font-weight: 500; line-height: 1.6; color: #334155; }
|
||||
.card-title { font-size: 24px; font-weight: 900; color: #1e293b; }
|
||||
.card-p { font-size: 16px; font-weight: 700; color: #64748b; }
|
||||
.layout-label { font-size: 18px; font-weight: 900; color: #64748b; margin-bottom: 20px; text-transform: uppercase; border-left: 8px solid #296b55; padding-left: 15px; width: 1280px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 01. Focus Split -->
|
||||
<div class="layout-label">Layout 01: Focus Split (65:35)</div>
|
||||
<div class="slide">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="slide-title">DX 실행 필수 요건 및 추진 체계 고도화</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="w-full h-full flex items-center px-12 gap-16">
|
||||
<div class="flex-[6.5] space-y-6">
|
||||
<div class="w-16 h-2 bg-emerald-600 rounded-full"></div>
|
||||
<h2 class="h2-title">DX 역량 내재화 및 추진 체계</h2>
|
||||
<p class="p-content">단순 기술 도입을 넘어 조직 전반의 데이터 리터러시를 확보하고, 전담 조직 구성을 통해 실행력을 극대화해야 합니다.</p>
|
||||
</div>
|
||||
<div class="flex-[3.5] h-[450px] bg-slate-50 rounded-[40px] border-2 border-slate-100 flex flex-col items-center justify-center p-10 text-center relative shadow-inner">
|
||||
<div class="w-20 h-20 bg-white rounded-3xl shadow-xl flex items-center justify-center mb-6"><div class="w-10 h-10 bg-emerald-600 rounded-xl"></div></div>
|
||||
<h3 class="card-title mb-4">Strategic Goal</h3>
|
||||
<p class="card-p">데이터 기반 의사결정 체계 구축을 통한 효율성 40% 향상</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-footer"><div class="slide-footer-text">기술보다 <em>조직의 변화</em>가 성공적인 디지털 전환의 핵심입니다.</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 02. Quadrant Grid -->
|
||||
<div class="layout-label">Layout 02: Quadrant Grid (2x2)</div>
|
||||
<div class="slide">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="slide-title">4대 핵심 추진 영역 가시화</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="w-full h-full grid grid-cols-2 grid-rows-2 gap-8 p-12">
|
||||
<div class="bg-slate-50 rounded-[32px] border-2 border-slate-100 p-8 flex flex-col justify-between">
|
||||
<div class="flex items-center gap-4"><span class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-900 text-white font-black text-sm">01</span><h3 class="card-title">Strategy</h3></div>
|
||||
<p class="card-p pl-14">전사적 DX 비전 수립 및 세부 로드맵 도출</p>
|
||||
<div class="pl-14"><div class="w-full h-2 bg-emerald-600 rounded-full"></div></div>
|
||||
</div>
|
||||
<div class="bg-slate-50 rounded-[32px] border-2 border-slate-100 p-8 flex flex-col justify-between">
|
||||
<div class="flex items-center gap-4"><span class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-900 text-white font-black text-sm">02</span><h3 class="card-title">Data</h3></div>
|
||||
<p class="card-p pl-14">통합 데이터 댐 구축 및 거버넌스 체계 강화</p>
|
||||
<div class="pl-14"><div class="w-full h-2 bg-emerald-200 rounded-full"></div></div>
|
||||
</div>
|
||||
<div class="bg-slate-50 rounded-[32px] border-2 border-slate-100 p-8 flex flex-col justify-between">
|
||||
<div class="flex items-center gap-4"><span class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-900 text-white font-black text-sm">03</span><h3 class="card-title">AI Tech</h3></div>
|
||||
<p class="card-p pl-14">LLM 기반 비즈니스 자동화 모델 현장 적용</p>
|
||||
<div class="pl-14"><div class="w-full h-2 bg-emerald-200 rounded-full"></div></div>
|
||||
</div>
|
||||
<div class="bg-slate-50 rounded-[32px] border-2 border-slate-100 p-8 flex flex-col justify-between">
|
||||
<div class="flex items-center gap-4"><span class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-900 text-white font-black text-sm">04</span><h3 class="card-title">Agile</h3></div>
|
||||
<p class="card-p pl-14">도메인 전문가 육성 및 애자일 문화 확산</p>
|
||||
<div class="pl-14"><div class="w-full h-2 bg-emerald-200 rounded-full"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-footer"><div class="slide-footer-text">영역별 <em>균형 있는 추진</em>을 통해 시너지를 극대화합니다.</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 03. Triple Pillars -->
|
||||
<div class="layout-label">Layout 03: Triple Pillars (1:1:1)</div>
|
||||
<div class="slide">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="slide-title">단계별 추진 로드맵</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="w-full h-full flex gap-6 p-12">
|
||||
<div class="flex-1 bg-white border-t-8 border-emerald-600 shadow-xl rounded-b-[30px] p-8 flex flex-col">
|
||||
<h3 class="card-title mb-6">Phase 01</h3>
|
||||
<p class="card-p mb-auto">인프라 현대화 및 클라우드 네이티브 전환</p>
|
||||
<div class="mt-8 text-emerald-600 font-black text-sm uppercase tracking-tighter">Foundation</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white border-t-8 border-blue-600 shadow-xl rounded-b-[30px] p-8 flex flex-col">
|
||||
<h3 class="card-title mb-6">Phase 02</h3>
|
||||
<p class="card-p mb-auto">데이터 통합 및 AI 서비스 파일럿 실행</p>
|
||||
<div class="mt-8 text-blue-600 font-black text-sm uppercase tracking-tighter">Integration</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white border-t-8 border-indigo-600 shadow-xl rounded-b-[30px] p-8 flex flex-col">
|
||||
<h3 class="card-title mb-6">Phase 03</h3>
|
||||
<p class="card-p mb-auto">전사 확산 및 지속 가능한 AI 운영</p>
|
||||
<div class="mt-8 text-indigo-600 font-black text-sm uppercase tracking-tighter">Optimization</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-footer"><div class="slide-footer-text"><em>체계적인 로드맵</em>을 바탕으로 중장기 가치를 창출합니다.</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 04. Vertical Stack -->
|
||||
<div class="layout-label">Layout 04: Vertical Stack</div>
|
||||
<div class="slide">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="slide-title">주요 혁신 과제 리스트</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="w-full h-full flex flex-col justify-center px-24 space-y-10">
|
||||
<div class="flex items-center gap-10">
|
||||
<div class="w-20 h-20 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600 font-black text-2xl border border-emerald-100 shadow-sm">01</div>
|
||||
<div class="space-y-1"><h3 class="card-title">데이터 기반 의사결정 문화 정착</h3><p class="card-p">객관적 데이터에 근거한 판단 프로세스 구축</p></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-10">
|
||||
<div class="w-20 h-20 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 font-black text-2xl border border-blue-100 shadow-sm">02</div>
|
||||
<div class="space-y-1"><h3 class="card-title">AI 기술 리터러시 전사 확산</h3><p class="card-p">생성형 AI 활용 역량 강화를 위한 교육 지원</p></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-10">
|
||||
<div class="w-20 h-20 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 font-black text-2xl border border-indigo-100 shadow-sm">03</div>
|
||||
<div class="space-y-1"><h3 class="card-title">디지털 기술을 통한 업무 혁신</h3><p class="card-p">단순 반복 업무 자동화 및 고부가가치 업무 집중</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-footer"><div class="slide-footer-text">과제별 <em>실행 우선순위</em>에 따른 집중 투자가 필요합니다.</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 05. Key Number -->
|
||||
<div class="layout-label">Layout 05: Key Number</div>
|
||||
<div class="slide">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="slide-title">DX 추진 성과 가시화</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="w-full h-full flex items-center p-12 gap-12">
|
||||
<div class="flex-1 space-y-6">
|
||||
<h2 class="h2-title">DX 성과 지표 요약</h2>
|
||||
<p class="p-content">지난 1년간의 디지털 전환 노력을 통해 달성한 핵심 수치입니다.</p>
|
||||
</div>
|
||||
<div class="flex-1 grid grid-cols-2 gap-6">
|
||||
<div class="bg-white p-8 rounded-[30px] shadow-xl border border-slate-50 text-center">
|
||||
<div class="text-[48px] font-black text-emerald-600 leading-none mb-2">35%</div><div class="card-p">비용 절감 효과</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-[30px] shadow-xl border border-slate-50 text-center">
|
||||
<div class="text-[48px] font-black text-blue-600 leading-none mb-2">2.4x</div><div class="card-p">업무 속도 향상</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-[30px] shadow-xl border border-slate-50 text-center">
|
||||
<div class="text-[48px] font-black text-indigo-600 leading-none mb-2">92%</div><div class="card-p">직원 만족도</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-[30px] shadow-xl border border-slate-50 text-center">
|
||||
<div class="text-[48px] font-black text-rose-600 leading-none mb-2">0건</div><div class="card-p">보안 사고 발생</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-footer"><div class="slide-footer-text">지표의 <em>우상향 트렌드</em>를 지속적으로 관리하겠습니다.</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 06. Comparison -->
|
||||
<div class="layout-label">Layout 06: Comparison</div>
|
||||
<div class="slide">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="slide-title">운영 체계의 변화 (AS-IS vs TO-BE)</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="w-full h-full flex flex-col p-12">
|
||||
<div class="flex gap-6 mb-8">
|
||||
<div class="flex-1 py-4 bg-slate-900 text-white rounded-2xl text-center font-black text-xl">현재 방식 (AS-IS)</div>
|
||||
<div class="flex-1 py-4 bg-emerald-600 text-white rounded-2xl text-center font-black text-xl">혁신 방식 (TO-BE)</div>
|
||||
</div>
|
||||
<div class="flex-1 space-y-6">
|
||||
<div class="flex gap-6"><div class="flex-1 p-6 bg-slate-100 rounded-2xl card-p">수작업 기반의 데이터 관리</div><div class="flex-1 p-6 bg-emerald-50 rounded-2xl card-title" style="font-size: 18px;">실시간 자동화 리포팅 체계</div></div>
|
||||
<div class="flex gap-6"><div class="flex-1 p-6 bg-slate-100 rounded-2xl card-p">파편화된 시스템 운영</div><div class="flex-1 p-6 bg-emerald-50 rounded-2xl card-title" style="font-size: 18px;">통합 협업 플랫폼 기반 운영</div></div>
|
||||
<div class="flex gap-6"><div class="flex-1 p-6 bg-slate-100 rounded-2xl card-p">경험 기반의 의사결정</div><div class="flex-1 p-6 bg-emerald-50 rounded-2xl card-title" style="font-size: 18px;">데이터 모델 기반 최적 의사결정</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-footer"><div class="slide-footer-text">단순 개선이 아닌 <em>근본적인 구조 변화</em>를 지향합니다.</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 07. Hero Statement -->
|
||||
<div class="layout-label">Layout 07: Hero Statement</div>
|
||||
<div class="slide">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="slide-title">미래 비전 선포</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="w-full h-full flex flex-col p-12">
|
||||
<div class="flex-1 flex flex-col justify-center items-center text-center space-y-6 mb-10">
|
||||
<h2 class="h2-title" style="font-size: 42px;">지속 가능한 성장을 위한 DX 혁신</h2>
|
||||
<div class="w-24 h-2 bg-indigo-600 rounded-full"></div>
|
||||
</div>
|
||||
<div class="flex-[1.2] grid grid-cols-3 gap-8">
|
||||
<div class="bg-white border-2 border-slate-100 rounded-[30px] p-8 text-center shadow-sm">
|
||||
<div class="text-indigo-600 font-black text-lg mb-4">Infrastructure</div><p class="card-p">GPU 서버 확보 및 데이터 레이크 고도화</p>
|
||||
</div>
|
||||
<div class="bg-white border-2 border-slate-100 rounded-[30px] p-8 text-center shadow-sm">
|
||||
<div class="text-indigo-600 font-black text-lg mb-4">Application</div><p class="card-p">워크플로우 내 AI 에이전트 통합</p>
|
||||
</div>
|
||||
<div class="bg-white border-2 border-slate-100 rounded-[30px] p-8 text-center shadow-sm">
|
||||
<div class="text-indigo-600 font-black text-lg mb-4">Capability</div><p class="card-p">AI 특화 인재 채용 및 역량 강화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-footer"><div class="slide-footer-text">미래 경쟁력은 <em>디지털 대응 속도</em>에서 결정됩니다.</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 08. Asymmetric -->
|
||||
<div class="layout-label">Layout 08: Asymmetric</div>
|
||||
<div class="slide">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="slide-title">심층 분석 및 세부 실행 방안</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="w-full h-full flex p-12 gap-16 items-center">
|
||||
<div class="flex-[6] space-y-8">
|
||||
<div class="space-y-4">
|
||||
<span class="px-4 py-1.5 bg-slate-900 text-white text-[12px] font-black rounded-lg">CORE STRATEGY</span>
|
||||
<h2 class="h2-title">지능형 운영 체계 전환</h2>
|
||||
</div>
|
||||
<p class="p-content">AI가 실시간으로 이상 징후를 감지하고 최적의 대응 방안을 제안하는 능동형 체계로 진화하여 운영 무결성을 확보합니다.</p>
|
||||
</div>
|
||||
<div class="flex-[4] space-y-4">
|
||||
<div class="p-6 bg-slate-50 border border-slate-100 rounded-[24px]">
|
||||
<h4 class="font-black text-slate-800 mb-2">Real-time Analysis</h4><p class="text-sm text-slate-500 font-bold">전 공정 데이터의 초단위 수집</p>
|
||||
</div>
|
||||
<div class="p-6 bg-slate-50 border border-slate-100 rounded-[24px]">
|
||||
<h4 class="font-black text-slate-800 mb-2">Predictive Maint.</h4><p class="text-sm text-slate-500 font-bold">장애 발생 전 사전 알림 및 조치</p>
|
||||
</div>
|
||||
<div class="p-6 bg-slate-50 border border-slate-100 rounded-[24px]">
|
||||
<h4 class="font-black text-slate-800 mb-2">Auto Optimization</h4><p class="text-sm text-slate-500 font-bold">수요 기반 생산량 자동 최적화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-footer"><div class="slide-footer-text">기술 혁신을 통해 <em>운영의 초격차</em>를 실현하겠습니다.</div></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user