Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0f0d3fa91ff02fe2f2e732a9dd2cfcaac71ee6fd
C.E.L_Slide_test2/Front/8_body_layouts_final.html
kyeongmin 0f0d3fa91f 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.
2026-05-14 14:48:42 +09:00

270 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>8 Body Layouts for slide-base.html</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
<style>
body { font-family: 'Noto Sans KR', sans-serif; background: #e8ecf0; padding: 20px; }
.preview-section { margin-bottom: 50px; border: 2px solid #cbd5e1; padding: 20px; background: #f1f5f9; }
.layout-title { font-size: 18px; font-weight: 900; margin-bottom: 10px; color: #475569; }
/* ── slide-base.html의 slide-body 제약 사항 ── */
.slide-body-mock {
width: 1200px; /* calc(1280 - 80) */
height: 590px;
background: #fff;
position: relative;
overflow: hidden;
/* 실제 템플릿의 slide-body는 부모(slide)에 대해 absolute이지만,
여기서는 레이아웃 자체를 확인하기 위해 고정 크기로 둡니다. */
}
/* ── 하드코딩된 스타일 가이드 ── */
.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; }
</style>
</head>
<body>
<!-- 01. Focus Split (Single) -->
<div class="preview-section">
<div class="layout-title">01. Focus Split (65:35 Ratio)</div>
<div class="slide-body-mock">
<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-24 h-24 bg-white rounded-3xl shadow-xl flex items-center justify-center mb-8 border border-slate-50">
<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>
<!-- 02. Quadrant Grid (2x2) -->
<div class="preview-section">
<div class="layout-title">02. Quadrant Grid (Equal 4 Sectors)</div>
<div class="slide-body-mock">
<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>
<!-- 03. Three Column (1:1:1) -->
<div class="preview-section">
<div class="layout-title">03. Triple Pillars (Horizontal Comparison)</div>
<div class="slide-body-mock">
<div class="w-full h-full flex gap-6 p-10">
<div class="flex-1 bg-white border-t-8 border-emerald-600 shadow-lg rounded-b-3xl 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-lg rounded-b-3xl 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-lg rounded-b-3xl p-8 flex flex-col">
<h3 class="card-title mb-6">Phase 03</h3>
<p class="card-p mb-auto">전사 확산 및 지속 가능한 AI 운영(MLOps)</p>
<div class="mt-8 text-indigo-600 font-black text-sm uppercase tracking-tighter">Optimization</div>
</div>
</div>
</div>
</div>
<!-- 04. Vertical List (Left Icon + Text) -->
<div class="preview-section">
<div class="layout-title">04. Vertical Stack (Step-by-step)</div>
<div class="slide-body-mock">
<div class="w-full h-full flex flex-col justify-center px-24 space-y-8">
<div class="flex items-center gap-10 group">
<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="w-full h-px bg-slate-100 ml-30"></div>
<div class="flex items-center gap-10 group">
<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="w-full h-px bg-slate-100 ml-30"></div>
<div class="flex items-center gap-10 group">
<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>
<!-- 05. Key Number (Center Emphasis) -->
<div class="preview-section">
<div class="layout-title">05. Key Metric Emphasis</div>
<div class="slide-body-mock">
<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>
<!-- 06. Comparison (Before & After) -->
<div class="preview-section">
<div class="layout-title">06. Comparison Table (As-Is vs To-Be)</div>
<div class="slide-body-mock">
<div class="w-full h-full flex flex-col p-12">
<div class="flex gap-6 mb-6">
<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-4">
<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>
<!-- 07. Top Hero (Top Text + Bottom Cards) -->
<div class="preview-section">
<div class="layout-title">07. Hero Statement (Top Focus + Details)</div>
<div class="slide-body-mock">
<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-4 mb-8">
<h2 class="h2-title" style="font-size: 42px;">미래 경쟁력 확보를 위한 AI 혁신</h2>
<div class="w-20 h-1.5 bg-indigo-600 rounded-full"></div>
</div>
<div class="flex-[1.5] grid grid-cols-3 gap-8">
<div class="border-2 border-slate-100 rounded-[30px] p-8 space-y-4">
<div class="text-indigo-600 font-black text-lg">Infrastructure</div>
<p class="card-p">GPU 서버 확보 및 데이터 레이크 고도화</p>
</div>
<div class="border-2 border-slate-100 rounded-[30px] p-8 space-y-4">
<div class="text-indigo-600 font-black text-lg">Application</div>
<p class="card-p">워크플로우 내 생성형 AI 에이전트 통합</p>
</div>
<div class="border-2 border-slate-100 rounded-[30px] p-8 space-y-4">
<div class="text-indigo-600 font-black text-lg">Capability</div>
<p class="card-p">AI 특화 인재 채용 및 리터러시 교육 프로그램</p>
</div>
</div>
</div>
</div>
</div>
<!-- 08. Asymmetric Content (Left Detail + Right Small List) -->
<div class="preview-section">
<div class="layout-title">08. Asymmetric (Detailed View)</div>
<div class="slide-body-mock">
<div class="w-full h-full flex p-12 gap-16">
<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 uppercase">Core Highlight</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>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink