bd23e00232
- 워크플로우 개요 페이지에 플로우차트 형태 추가 (3x2 그리드) - 각 워크플로우 단계별 독립 HTML 페이지 생성 (1-4단계) - 클릭 가능한 워크플로우 박스와 상세 페이지 연결 - DevonThink 스타일 적용 및 반응형 디자인 - 구매/물류팀 용어 통일 및 프레젠테이션 업데이트
749 lines
30 KiB
HTML
749 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TK Project 시스템 발표</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: #2d3748;
|
|
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.presentation-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.slide {
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
margin-bottom: 40px;
|
|
padding: 40px;
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
animation: slideIn 0.8s ease forwards;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.slide:nth-child(1) { animation-delay: 0.1s; }
|
|
.slide:nth-child(2) { animation-delay: 0.2s; }
|
|
.slide:nth-child(3) { animation-delay: 0.3s; }
|
|
.slide:nth-child(4) { animation-delay: 0.4s; }
|
|
.slide:nth-child(5) { animation-delay: 0.5s; }
|
|
.slide:nth-child(6) { animation-delay: 0.6s; }
|
|
.slide:nth-child(7) { animation-delay: 0.7s; }
|
|
.slide:nth-child(8) { animation-delay: 0.8s; }
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
text-align: center;
|
|
color: #4299e1;
|
|
margin-bottom: 20px;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.2em;
|
|
color: #2d3748;
|
|
margin-bottom: 25px;
|
|
border-bottom: 3px solid #4299e1;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5em;
|
|
color: #2d3748;
|
|
margin: 20px 0 15px 0;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
color: #666;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.workflow-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 25px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.workflow-step {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
border-left: 5px solid #4299e1;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.workflow-step:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.step-number {
|
|
background: #4299e1;
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.step-title {
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
color: #2d3748;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.step-description {
|
|
color: #4a5568;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 30px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.feature-card {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
border: 2px solid #e2e8f0;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #4299e1, #ed8936);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
|
border-color: #4299e1;
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 3em;
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
|
|
.feature-title {
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
color: #2d3748;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.feature-points {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.feature-points li {
|
|
padding: 8px 0;
|
|
color: #4a5568;
|
|
position: relative;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.feature-points li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
color: #48bb78;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.scenario-flow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.scenario-step {
|
|
background: linear-gradient(135deg, #4299e1 0%, #ed8936 100%);
|
|
color: white;
|
|
padding: 20px 25px;
|
|
border-radius: 25px;
|
|
font-weight: bold;
|
|
position: relative;
|
|
min-width: 200px;
|
|
text-align: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.scenario-step:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.scenario-step::after {
|
|
content: '→';
|
|
position: absolute;
|
|
right: -15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 1.5em;
|
|
color: #4299e1;
|
|
}
|
|
|
|
.scenario-step:last-child::after {
|
|
display: none;
|
|
}
|
|
|
|
.benefits-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.benefit-item {
|
|
background: linear-gradient(135deg, #4299e1 0%, #ed8936 100%);
|
|
color: white;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.benefit-item:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.benefit-icon {
|
|
font-size: 2.5em;
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
|
|
.benefit-title {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tech-stack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.tech-item {
|
|
background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border-radius: 20px;
|
|
font-weight: bold;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.tech-item:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.demo-link {
|
|
text-align: center;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.demo-button {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #4299e1 0%, #ed8936 100%);
|
|
color: white;
|
|
padding: 15px 40px;
|
|
border-radius: 30px;
|
|
text-decoration: none;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.demo-button:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.highlight {
|
|
background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
|
|
border-left: 5px solid #ed8936;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.presentation-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.slide {
|
|
padding: 25px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.2em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.workflow-grid,
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.scenario-flow {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.scenario-step::after {
|
|
content: '↓';
|
|
right: 50%;
|
|
top: 100%;
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="presentation-container">
|
|
<!-- 타이틀 슬라이드 -->
|
|
<div class="slide">
|
|
<h1>🏭 TK Project</h1>
|
|
<p class="subtitle">구매 신청 중심 자재 관리 통합 시스템</p>
|
|
<div class="highlight">
|
|
<h3>🎯 핵심 개념</h3>
|
|
<p style="font-size: 1.2em; font-weight: bold; color: #4299e1; text-align: center; margin-bottom: 15px;">
|
|
"구매 신청으로 촉발되는 자재 관리 정보의 실시간 통합 연동"
|
|
</p>
|
|
<p>구매 신청부터 자재 불출까지의 모든 과정을 하나의 시스템에서 관리하여<br>
|
|
<strong>정보 단절 없는 완전한 자재 추적</strong>을 실현합니다.</p>
|
|
|
|
<div class="scenario-flow" style="margin-top: 20px;">
|
|
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">구매 신청</div>
|
|
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">발주 처리</div>
|
|
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">입고 검수</div>
|
|
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">창고 보관</div>
|
|
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">생산 불출</div>
|
|
</div>
|
|
<p style="text-align: center; margin-top: 15px; font-style: italic; color: #718096;">
|
|
모든 부서가 실시간으로 동일한 자재 정보를 공유
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 워크플로우 개요 -->
|
|
<div class="slide">
|
|
<h2>🔄 전체 워크플로우</h2>
|
|
<div class="workflow-grid">
|
|
<div class="workflow-step">
|
|
<div class="step-number">1</div>
|
|
<div class="step-title">📋 준비 단계</div>
|
|
<div class="step-description">수주 → Job No. 부여 → 담당자 배정<br>외주/자체제작 결정 → 각 부서 일정 수립</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-title">🚀 프로젝트 진행 (발주)</div>
|
|
<div class="step-description">외주: 도면 → 견적 → 발주 → 관리<br>자체: BOM → 구매신청 → 발주 → 입고</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-title">🛠️ 제작 단계</div>
|
|
<div class="step-description">외주: 업체 공정표 관리 + NCR 처리<br>자체: 생산팀 공정관리 + 자재 인수인계</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">4</div>
|
|
<div class="step-title">🏢 생산회의</div>
|
|
<div class="step-description">제작 전/중 현황 관리<br>공정표 표시 개선 + 실시간 모니터링</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">5</div>
|
|
<div class="step-title">📦 납품 (출하전 보고서)</div>
|
|
<div class="step-description">필수 확인점 완료 확인<br>대표 승인 → 출하 가능</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">💡</div>
|
|
<div class="step-title">⚡ 특이사항</div>
|
|
<div class="step-description">긴급/가공건: 구두신청 → 긴급진행<br>각 팀장이 워크플로우 자유 변형 가능</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight">
|
|
<h3>🎯 핵심 특징</h3>
|
|
<ul class="feature-points">
|
|
<li><strong>정형화된 루틴:</strong> 프로젝트 등록 → 구매신청 → 구매 → 생산팀 인계 → 비용지불</li>
|
|
<li><strong>실시간 현황:</strong> 진행중 = 생산회의록, 납품대기 = 출하전 보고서</li>
|
|
<li><strong>데이터 축적:</strong> 문제 발생 이력을 통한 차후 프로젝트 개선</li>
|
|
<li><strong>유연한 시스템:</strong> 각 부서별 담당자가 워크플로우 맞춤 설정 가능</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 구매 신청 중심 자재 관리 통합 시스템 -->
|
|
<div class="slide">
|
|
<h2>🛒 구매 신청 중심 자재 관리 통합 시스템</h2>
|
|
|
|
<div class="highlight" style="margin-bottom: 30px;">
|
|
<h3>💡 시스템 핵심 철학</h3>
|
|
<p>구매 신청 한 번으로 시작되는 자재의 모든 여정을 실시간으로 추적하고 관리합니다.<br>
|
|
각 부서는 동일한 자재 정보를 실시간으로 공유하여 <strong>정보 단절 없는 완벽한 협업</strong>을 실현합니다.</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<span class="feature-icon">📝</span>
|
|
<div class="feature-title">구매 신청 시스템</div>
|
|
<ul class="feature-points">
|
|
<li>BOM 기반 자동 구매 신청</li>
|
|
<li>프로젝트별 자재 소요량 산출</li>
|
|
<li>긴급/일반 구매 구분 처리</li>
|
|
<li>승인 워크플로우 자동화</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="feature-icon">🛍️</span>
|
|
<div class="feature-title">발주 관리 시스템</div>
|
|
<ul class="feature-points">
|
|
<li>공급업체별 자동 발주 생성</li>
|
|
<li>납기일 기반 우선순위 관리</li>
|
|
<li>발주 현황 실시간 추적</li>
|
|
<li>공급업체 성과 분석</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="feature-icon">📦</span>
|
|
<div class="feature-title">입고 검수 시스템</div>
|
|
<ul class="feature-points">
|
|
<li>발주 정보 자동 연동</li>
|
|
<li>QR코드 기반 입고 처리</li>
|
|
<li>3단계 검수 프로세스</li>
|
|
<li>부적합품 NCR 자동 생성</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="feature-icon">🏪</span>
|
|
<div class="feature-title">물류 관리 시스템</div>
|
|
<ul class="feature-points">
|
|
<li>구역별 체계적 보관 관리</li>
|
|
<li>QR코드 기반 위치 추적</li>
|
|
<li>재고 현황 실시간 업데이트</li>
|
|
<li>자동 재고 알림 시스템</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="feature-icon">🔄</span>
|
|
<div class="feature-title">자재 추적 시스템</div>
|
|
<ul class="feature-points">
|
|
<li>신청→발주→입고→보관→불출 전 과정 추적</li>
|
|
<li>모든 부서 실시간 정보 공유</li>
|
|
<li>자재 상태 변경 즉시 알림</li>
|
|
<li>프로젝트별 자재 소요 현황</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="feature-icon">📊</span>
|
|
<div class="feature-title">통합 대시보드</div>
|
|
<ul class="feature-points">
|
|
<li>부서별 맞춤 정보 제공</li>
|
|
<li>자재 부족 사전 경고</li>
|
|
<li>구매 성과 분석 리포트</li>
|
|
<li>프로젝트 지연 위험 알림</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight">
|
|
<h3>🔗 실시간 연동 효과</h3>
|
|
<div class="scenario-flow">
|
|
<div class="scenario-step">설계팀<br><small>BOM 등록</small></div>
|
|
<div class="scenario-step">구매/물류팀<br><small>발주 처리</small></div>
|
|
<div class="scenario-step">구매/물류팀<br><small>입고 검수</small></div>
|
|
<div class="scenario-step">생산팀<br><small>자재 확인</small></div>
|
|
<div class="scenario-step">품질팀<br><small>검사 관리</small></div>
|
|
</div>
|
|
<p style="text-align: center; margin-top: 15px; font-style: italic;">
|
|
한 부서의 작업이 즉시 모든 관련 부서에 반영
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 시연 시나리오 -->
|
|
<div class="slide">
|
|
<h2>🎪 시연 시나리오</h2>
|
|
<h3>🎬 "ABC 공장 배관공사 프로젝트" 시나리오</h3>
|
|
<div class="scenario-flow">
|
|
<div class="scenario-step">프로젝트 선택</div>
|
|
<div class="scenario-step">생산회의 확인</div>
|
|
<div class="scenario-step">입고 검수</div>
|
|
<div class="scenario-step">품질 검사</div>
|
|
<div class="scenario-step">생산팀 작업</div>
|
|
</div>
|
|
<div class="highlight">
|
|
<h3>📝 시연 포인트</h3>
|
|
<ul class="feature-points">
|
|
<li><strong>Scene 0:</strong> TK Project 메인 화면에서 "ABC 공장 배관공사" 선택</li>
|
|
<li><strong>Scene 1:</strong> 생산회의록에서 공정표, 일정, Follow-up 확인</li>
|
|
<li><strong>Scene 2:</strong> 스테인리스 파이프 입고 검수 및 보관 위치 지정</li>
|
|
<li><strong>Scene 3:</strong> 게이트밸브 품질 검사 및 적합 판정</li>
|
|
<li><strong>Scene 4:</strong> 용접팀 일일 작업 현황 및 자재 부족 이슈 기록</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 기대 효과 -->
|
|
<div class="slide">
|
|
<h2>🎯 기대 효과</h2>
|
|
|
|
<div class="highlight" style="margin-bottom: 30px;">
|
|
<h3>🛒 구매/물류 업무 중심 통합의 핵심 가치</h3>
|
|
<p style="font-size: 1.1em; color: #4a5568;">
|
|
구매 신청부터 자재 불출까지의 전 과정을 구매/물류팀 중심으로 통합 관리하여<br>
|
|
<strong>정보 단절 없는 완전한 자재 추적</strong>이 가능합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="benefits-grid">
|
|
<div class="benefit-item">
|
|
<span class="benefit-icon">🔗</span>
|
|
<div class="benefit-title">실시간 자재 추적</div>
|
|
<p>구매신청→발주→입고→보관→불출 전 과정 실시간 연동</p>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<span class="benefit-icon">📦</span>
|
|
<div class="benefit-title">재고 최적화</div>
|
|
<p>정확한 재고 현황으로 과다/부족 재고 방지</p>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<span class="benefit-icon">⚡</span>
|
|
<div class="benefit-title">업무 효율성 극대화</div>
|
|
<p>중복 입력 제거, 자동 알림으로 업무 시간 50% 단축</p>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<span class="benefit-icon">👥</span>
|
|
<div class="benefit-title">부서간 정보 통합</div>
|
|
<p>모든 부서가 동일한 자재 정보 실시간 공유</p>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<span class="benefit-icon">💰</span>
|
|
<div class="benefit-title">구매 비용 절감</div>
|
|
<p>공급업체 성과 분석, 최적 발주 타이밍 제안</p>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<span class="benefit-icon">🎯</span>
|
|
<div class="benefit-title">프로젝트 지연 방지</div>
|
|
<p>자재 부족 사전 알림으로 생산 차질 최소화</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight">
|
|
<h3>📈 예상 개선 효과</h3>
|
|
<div class="scenario-flow">
|
|
<div class="scenario-step">자재 추적 시간<br><strong>90% 단축</strong></div>
|
|
<div class="scenario-step">재고 정확도<br><strong>95% 향상</strong></div>
|
|
<div class="scenario-step">구매 업무<br><strong>60% 효율화</strong></div>
|
|
<div class="scenario-step">프로젝트 지연<br><strong>70% 감소</strong></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 기술 스택 -->
|
|
<div class="slide">
|
|
<h2>💻 기술 스택</h2>
|
|
<div class="tech-stack">
|
|
<div class="tech-item">React.js</div>
|
|
<div class="tech-item">FastAPI</div>
|
|
<div class="tech-item">PostgreSQL</div>
|
|
<div class="tech-item">Docker</div>
|
|
<div class="tech-item">SQLAlchemy</div>
|
|
<div class="tech-item">JWT Auth</div>
|
|
<div class="tech-item">CORS</div>
|
|
<div class="tech-item">Bcrypt</div>
|
|
</div>
|
|
<div class="highlight">
|
|
<h3>🏗️ 시스템 아키텍처</h3>
|
|
<p><strong>Frontend:</strong> React.js 기반 SPA (Single Page Application)<br>
|
|
<strong>Backend:</strong> FastAPI 기반 RESTful API 서버<br>
|
|
<strong>Database:</strong> PostgreSQL 관계형 데이터베이스<br>
|
|
<strong>Deployment:</strong> Docker 컨테이너 기반 배포</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 개발 방향성 및 로드맵 -->
|
|
<div class="slide">
|
|
<h2>🎯 개발 방향성 및 로드맵</h2>
|
|
|
|
<div class="highlight" style="margin-bottom: 30px;">
|
|
<h3>💡 핵심 개발 철학</h3>
|
|
<p style="font-size: 1.2em; font-weight: bold; color: #667eea;">
|
|
"구매 신청으로 촉발되는 자재 관리 정보의 실시간 통합 연동"
|
|
</p>
|
|
<ul class="feature-points">
|
|
<li><strong>구매 신청</strong> → <strong>발주</strong> → <strong>입고</strong> → <strong>검수</strong> → <strong>보관</strong> → <strong>불출</strong></li>
|
|
<li>모든 부서가 동일한 자재 정보를 실시간으로 공유</li>
|
|
<li>자재의 모든 상태 변화가 즉시 전 부서에 반영</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="workflow-grid">
|
|
<div class="workflow-step">
|
|
<div class="step-number">1차</div>
|
|
<div class="step-title">🛒 구매/물류 업무 중심 완성</div>
|
|
<div class="step-description">
|
|
<strong>🎯 목표:</strong> 구매/물류 프로세스 완전 자동화<br>
|
|
✅ 구매 신청 시스템<br>
|
|
✅ 발주 관리 시스템<br>
|
|
✅ 입고 검수 시스템<br>
|
|
✅ 물류 관리 시스템<br>
|
|
✅ 자재 추적 시스템
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">2차</div>
|
|
<div class="step-title">🏢 각 부서별 핵심업무 확장</div>
|
|
<div class="step-description">
|
|
<strong>🎯 목표:</strong> 부서별 맞춤 기능 추가<br>
|
|
🔄 설계팀: BOM 관리, 도면 버전 관리<br>
|
|
🔄 생산팀: 공정 관리, 작업 지시서<br>
|
|
🔄 품질팀: 검사 관리, NCR 처리<br>
|
|
🔄 영업팀: 프로젝트 현황, 고객 관리
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">3차</div>
|
|
<div class="step-title">🚀 고도화 및 확장</div>
|
|
<div class="step-description">
|
|
<strong>🎯 목표:</strong> 지능형 시스템 구축<br>
|
|
🚀 AI 기반 자재 소요량 예측<br>
|
|
🚀 공급업체 성과 분석<br>
|
|
🚀 모바일 앱 (현장 작업자용)<br>
|
|
🚀 외부 업체 포털 연동
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight">
|
|
<h3>🔗 실시간 연동 시스템 구조</h3>
|
|
<div class="scenario-flow">
|
|
<div class="scenario-step">구매 신청</div>
|
|
<div class="scenario-step">발주 처리</div>
|
|
<div class="scenario-step">입고 알림</div>
|
|
<div class="scenario-step">검수 완료</div>
|
|
<div class="scenario-step">창고 보관</div>
|
|
<div class="scenario-step">생산 불출</div>
|
|
</div>
|
|
<p style="text-align: center; margin-top: 20px; font-style: italic;">
|
|
각 단계마다 모든 관련 부서에 실시간 상태 업데이트
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 데모 링크 -->
|
|
<div class="slide">
|
|
<h2>🎮 라이브 데모</h2>
|
|
<div class="demo-link">
|
|
<a href="demo/index.html" class="demo-button">
|
|
🚀 데모 시연 시작하기
|
|
</a>
|
|
</div>
|
|
<div class="highlight">
|
|
<h3>💡 데모 특징</h3>
|
|
<ul class="feature-points">
|
|
<li><strong>하드코딩 데이터:</strong> DB 없이 실제 업무 시나리오 구현</li>
|
|
<li><strong>DevonThink UI:</strong> 미니멀하고 직관적인 사용자 인터페이스</li>
|
|
<li><strong>반응형 디자인:</strong> 데스크톱 및 모바일 환경 지원</li>
|
|
<li><strong>실시간 인터랙션:</strong> 실제 시스템과 동일한 사용자 경험</li>
|
|
</ul>
|
|
</div>
|
|
<p style="text-align: center; margin-top: 30px; color: #666; font-style: italic;">
|
|
"수주부터 납품까지, 모든 프로세스가 하나의 시스템에서"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 스크롤 애니메이션
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.animationPlayState = 'running';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.slide').forEach(slide => {
|
|
observer.observe(slide);
|
|
});
|
|
|
|
// 호버 효과 강화
|
|
document.querySelectorAll('.feature-card, .workflow-step, .benefit-item').forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-8px) scale(1.02)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
});
|
|
|
|
// 데모 버튼 클릭 효과
|
|
document.querySelector('.demo-button').addEventListener('click', function(e) {
|
|
this.style.transform = 'scale(0.95)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1)';
|
|
}, 150);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|