hyungi/TK-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

프레젠테이션 슬라이드 개선: 세로 플로우차트로 변경 및 프로세스 최적화

Browse Source 
- 외주/자체제작 프로세스를 가로에서 세로 방향으로 변경
- 이모지 제거하여 전문적인 프레젠테이션 스타일 적용
- 화살표 방향을 → 에서 ↓ 로 변경
- 불필요한 견적 요청 문구 제거
- 자체제작 프로세스 최적화: 8단계 → 7단계로 단순화
- 최종 검사를 검수 및 보관 단계에 통합
- 상세한 프로세스 내용 복원 및 가독성 향상
This commit is contained in:
hyungi
2025-09-16 06:15:19 +09:00
parent 8d9c2bd5c3
commit 65103af5c0
3 changed files with 2870 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2299
demo/styles/devonthink.css
View File

File diff suppressed because it is too large Load Diff

113
demo/workflow-stage-1.html
View File

@@ -5,7 +5,118 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1단계: 준비 단계 - TK Project</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/devonthink.css">
<link rel="stylesheet" href="styles/devonthink.css?v=2">
<style>
/* 인라인 CSS로 강제 적용 */
.simple-note {
background: linear-gradient(135deg, #e8f5e8 0%, #f0f9ff 100%) !important;
border-left: 4px solid #34A853 !important;
padding: 20px !important;
border-radius: 12px !important;
margin: 20px 0 !important;
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15) !important;
}
.concept-step {
background: white !important;
border-radius: 16px !important;
padding: 30px !important;
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15) !important;
border: 1px solid #E8EAED !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
margin: 25px 0 !important;
}
.concept-step::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #4A90E2, #7BB3F0) !important;
}
.concept-step:hover {
transform: translateY(-4px) !important;
box-shadow: 0 4px 6px -1px rgba(60, 64, 67, 0.15) !important;
}
.concept-step h4 {
color: #4A90E2 !important;
font-size: 1.3em !important;
margin-bottom: 20px !important;
}
.concept-list {
list-style: none !important;
padding: 0 !important;
margin: 20px 0 !important;
}
.concept-list li {
background: #F8F9FA !important;
padding: 12px 20px !important;
margin: 8px 0 !important;
border-radius: 8px !important;
border-left: 3px solid #7BB3F0 !important;
transition: all 0.2s ease !important;
}
.concept-list li:hover {
background: #F1F3F4 !important;
transform: translateX(5px) !important;
}
.example-box {
background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%) !important;
border: 2px solid #FBBC04 !important;
border-radius: 12px !important;
padding: 20px !important;
margin: 20px 0 !important;
}
.benefit-note {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
border: 2px solid #7BB3F0 !important;
border-radius: 10px !important;
padding: 15px 20px !important;
margin-top: 20px !important;
color: #357ABD !important;
font-weight: 500 !important;
}
.key-benefits {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-radius: 16px !important;
padding: 30px !important;
margin: 40px 0 !important;
border: 1px solid #E8EAED !important;
}
.benefits-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
gap: 20px !important;
}
.benefit-item {
background: white !important;
border-radius: 12px !important;
padding: 25px !important;
text-align: center !important;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.1) !important;
border: 1px solid #E8EAED !important;
transition: all 0.3s ease !important;
}
.benefit-item:hover {
transform: translateY(-4px) !important;
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15) !important;
}
</style>
</head>
<body class="workflow-page">
<div class="workflow-detail-page">

514
demo/workflow-stage-2.html
View File

@@ -4,67 +4,471 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2단계: 프로젝트 진행 단계 - TK Project</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/devonthink.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
min-height: 100vh;
color: #333;
overflow-x: hidden;
}
.presentation-container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
.slide-header {
text-align: center;
margin-bottom: 60px;
color: white;
}
.slide-title {
font-size: 5em;
font-weight: 800;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.slide-subtitle {
font-size: 2.2em;
font-weight: 300;
opacity: 0.9;
}
.back-btn {
position: fixed;
top: 30px;
left: 30px;
background: rgba(255,255,255,0.2);
color: white;
padding: 15px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
z-index: 1000;
}
.back-btn:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-2px);
}
/* 프로세스 슬라이드 스타일 */
.process-slides {
margin-bottom: 80px;
}
.slide-row {
display: flex;
flex-direction: column;
gap: 60px;
max-width: 1600px;
margin: 0 auto;
}
.process-slide {
background: #FFFFFF;
border-radius: 30px;
padding: 60px 50px;
box-shadow: 0 20px 60px rgba(128,128,128,0.3);
transition: all 0.3s ease;
min-height: 800px;
}
.process-slide:hover {
transform: translateY(-10px);
box-shadow: 0 30px 80px rgba(128,128,128,0.4);
}
.slide-icon {
font-size: 5em;
text-align: center;
margin-bottom: 30px;
}
.process-slide h2 {
font-size: 3.2em;
font-weight: 700;
text-align: center;
margin-bottom: 50px;
color: #333333;
}
.process-flow {
display: flex;
flex-direction: column;
gap: 20px;
}
.flow-step {
display: flex;
align-items: center;
gap: 25px;
padding: 25px;
background: #f7fafc;
border-radius: 20px;
border-left: 6px solid #e2e8f0;
transition: all 0.3s ease;
}
.flow-step:hover {
background: #edf2f7;
border-left-color: #87CEEB;
transform: translateX(10px);
}
.flow-step.highlight {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
border-left-color: #FF8C00;
box-shadow: 0 10px 30px rgba(255, 140, 0, 0.2);
}
.step-number {
background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
font-weight: bold;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(135, 206, 235, 0.3);
}
.flow-step.highlight .step-number {
background: linear-gradient(135deg, #FF8C00 0%, #FFA500 100%);
box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
}
.step-content h3 {
font-size: 1.8em;
font-weight: 600;
margin-bottom: 12px;
color: #333333;
}
.step-content p {
font-size: 1.3em;
color: #666666;
line-height: 1.5;
margin-bottom: 15px;
}
.flow-arrow {
text-align: center;
font-size: 2.5em;
color: #87CEEB;
font-weight: bold;
margin: 10px 0;
}
.flow-arrow::before {
content: '↓';
text-shadow: 2px 2px 4px rgba(135, 206, 235, 0.3);
}
/* 검수 시스템 하이라이트 섹션 */
.inspection-highlight {
background: rgba(255,255,255,0.95);
border-radius: 30px;
padding: 60px 50px;
margin: 80px 0;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
text-align: center;
}
.inspection-title {
font-size: 3.5em;
font-weight: 800;
color: #2d3748;
margin-bottom: 30px;
background: linear-gradient(135deg, #4299e1 0%, #667eea 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.inspection-subtitle {
font-size: 1.6em;
color: #4a5568;
margin-bottom: 50px;
font-weight: 300;
}
.key-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 50px;
}
.feature-card {
background: #f7fafc;
border-radius: 20px;
padding: 40px 30px;
transition: all 0.3s ease;
}
.feature-card:hover {
background: #edf2f7;
transform: translateY(-5px);
}
.feature-icon {
font-size: 3.5em;
margin-bottom: 20px;
}
.feature-title {
font-size: 1.4em;
font-weight: 600;
color: #2d3748;
margin-bottom: 15px;
}
.feature-desc {
font-size: 1.1em;
color: #4a5568;
line-height: 1.6;
}
/* 프레젠테이션용 - 모바일 반응형 제거 */
.step-details {
list-style: none;
padding: 0;
margin-top: 15px;
display: flex;
flex-direction: column;
gap: 5px;
}
.step-details li {
font-size: 0.95em;
color: #666666;
margin: 0;
padding-left: 5px;
line-height: 1.4;
}
</style>
</head>
<body class="workflow-page">
<div class="workflow-detail-page">
<div class="page-header">
<a href="../presentation.html" class="btn-back">← 프레젠테이션으로 돌아가기</a>
<h1>🔄 2단계: 프로젝트 진행 단계 (발주)</h1>
<p class="page-description">외주 및 자체제작 프로세스 관리</p>
<body>
<a href="../presentation.html" class="back-btn">← 돌아가기</a>
<div class="presentation-container">
<div class="slide-header">
<h1 class="slide-title">2단계: 프로젝트 진행</h1>
<p class="slide-subtitle">외주 vs 자체제작 프로세스</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>🏢 외주의 경우</h3>
<div class="process-flow">
<div class="process-step">도면 업로드</div>
<div class="arrow">→</div>
<div class="process-step">견적진행</div>
<div class="arrow">→</div>
<div class="process-step">발주</div>
<div class="arrow">→</div>
<div class="process-step">관리페이지 (납기, 검사포인트 등)</div>
<!-- 프로세스 비교 슬라이드 -->
<div class="process-slides">
<div class="slide-row">
<div class="process-slide outsourcing-slide">
<h2>외주 프로세스</h2>
<div class="process-flow">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-content">
<h3>도면 업로드</h3>
<p><strong>설계 도면 및 사양서 올리기</strong></p>
<ul class="step-details">
<li>• 설계 도면 파일 (2D/3D)</li>
<li>• 재료 종류와 크기 정보</li>
<li>• 품질 기준과 검사 방법</li>
<li>• 언제까지 몇 개 필요한지</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step">
<div class="step-number">2</div>
<div class="step-content">
<h3>견적 진행</h3>
<p><strong>여러 외주업체 견적 받고 비교하기</strong></p>
<ul class="step-details">
<li>• 가격, 품질, 납기일 종합 평가</li>
<li>• 업체 기술력과 믿을 수 있는지 확인</li>
<li>• 과거 거래 기록과 평가 반영</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step">
<div class="step-number">3</div>
<div class="step-content">
<h3>발주</h3>
<p><strong>가장 좋은 업체 골라 계약하기</strong></p>
<ul class="step-details">
<li>• 평가 점수 높은 업체 선정</li>
<li>• 계약서 쓰고 법적으로 문제 없는지 확인</li>
<li>• 품질 보증서와 보험 확인</li>
<li>• 발주서 보내고 계약금 주기</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step highlight">
<div class="step-number">4</div>
<div class="step-content">
<h3>관리페이지</h3>
<p><strong>실시간으로 진행 상황과 품질 확인하기</strong></p>
<ul class="step-details">
<li>• 제작 진행률 실시간으로 보기</li>
<li>• 중간중간 검사할 부분 관리</li>
<li>• 납기일 늦어지면 자동으로 알려주기</li>
<li>• 마지막 검사와 물건 받기</li>
</ul>
</div>
</div>
</div>
</div>
<div class="process-slide manufacturing-slide">
<h2>자체제작 프로세스</h2>
<div class="process-flow">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-content">
<h3>자재 명세서 업로드</h3>
<p><strong>필요한 모든 자재 목록 정리</strong></p>
<ul class="step-details">
<li>• 파이프, 밸브, 피팅 등 자재 목록</li>
<li>• 각 자재별 규격과 수량</li>
<li>• 재질 정보와 품질 기준</li>
<li>• 프로젝트별 필요 시기</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step">
<div class="step-number">2</div>
<div class="step-content">
<h3>자재 분류</h3>
<p><strong>자재 종류별로 체계적 분류</strong></p>
<ul class="step-details">
<li>• 파이프류 (탄소강, 스테인리스)</li>
<li>• 밸브류 (볼밸브, 체크밸브)</li>
<li>• 피팅류 (엘보, 티, 플랜지)</li>
<li>• 특수자재 (가스켓, 볼트)</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step">
<div class="step-number">3</div>
<div class="step-content">
<h3>구매 신청</h3>
<p><strong>분류된 자재별 구매 요청서 작성</strong></p>
<ul class="step-details">
<li>• 자재별 상세 사양서 작성</li>
<li>• 필요 수량과 납기일 명시</li>
<li>• 예산 범위 및 품질 요구사항</li>
<li>• 부서장 승인 및 구매팀 전달</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step">
<div class="step-number">4</div>
<div class="step-content">
<h3>견적 및 발주</h3>
<p><strong>공급업체 선정 및 주문 처리</strong></p>
<ul class="step-details">
<li>• 여러 업체 견적 비교 검토</li>
<li>• 가격, 품질, 납기 종합 평가</li>
<li>• 최적 업체 선정 및 계약</li>
<li>• 발주서 발행 및 일정 확정</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step">
<div class="step-number">5</div>
<div class="step-content">
<h3>자재 입고</h3>
<p><strong>주문한 자재 입고 및 기본 확인</strong></p>
<ul class="step-details">
<li>• 납품서와 주문서 대조 확인</li>
<li>• 수량 및 외관 상태 점검</li>
<li>• 포장 상태 및 손상 여부</li>
<li>• 입고 일시 및 담당자 기록</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step highlight">
<div class="step-number">6</div>
<div class="step-content">
<h3>검수 및 보관</h3>
<p><strong>철저한 품질 검사 후 체계적 보관</strong></p>
<ul class="step-details">
<li>• 규격 및 재질 정밀 검사</li>
<li>• 품질 기준 적합성 확인</li>
<li>• 생산 일정에 맞춰 재검사</li>
<li>• 보관 중 손상 여부 확인</li>
<li>• 필요시 추가 성능 테스트</li>
<li>• 최종 합격 판정 및 승인</li>
<li>• 구역별 체계적 보관 배치</li>
<li>• 위치 정보 시스템 등록</li>
</ul>
</div>
</div>
<div class="flow-arrow"></div>
<div class="flow-step">
<div class="step-number">7</div>
<div class="step-content">
<h3>생산 불출</h3>
<p><strong>생산라인으로 자재 공급</strong></p>
<ul class="step-details">
<li>• 생산 계획에 따른 불출 일정</li>
<li>• 필요 수량만큼 정확히 불출</li>
<li>• 불출 기록 및 재고 업데이트</li>
<li>• 생산팀 인수 확인 완료</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="detail-section">
<h3>🏭 자체제작의 경우</h3>
<div class="process-flow-vertical">
<div class="process-step">도면(BOM) 업로드</div>
<div class="arrow-down">↓</div>
<div class="process-step">분류</div>
<div class="arrow-down">↓</div>
<div class="process-step">구매신청</div>
<div class="arrow-down">↓</div>
<div class="process-step">견적/발주</div>
<div class="arrow-down">↓</div>
<div class="process-step">입고</div>
<div class="arrow-down">↓</div>
<div class="process-step">검수 및 보관</div>
<div class="arrow-down">↓</div>
<div class="process-step">검사</div>
<div class="arrow-down">↓</div>
<div class="process-step">불출</div>
</div>
<!-- 검수 및 보관 시스템 하이라이트 -->
<div class="inspection-highlight">
<h2 class="inspection-title">🔍 검수 및 보관 관리 시스템</h2>
<p class="inspection-subtitle">Zero Defect를 위한 완벽한 품질 관리</p>
<div class="key-features">
<div class="feature-card">
<div class="feature-icon">✓</div>
<h3 class="feature-title">3단계 검수</h3>
<p class="feature-desc">입고확인 → 품질검수 → 최종판정<br>체계적인 검수 프로세스</p>
</div>
</div>
<div class="detail-section">
<h3>📝 중요 사항</h3>
<div class="important-notes">
<div class="note-item">
<h4>보관 단계</h4>
<p>입고 위치 정보 입력 필수</p>
</div>
<div class="note-item">
<h4>추가분 발생시</h4>
<p>리비전 로직으로 진행</p>
</div>
<div class="note-item">
<h4>긴급/가공건</h4>
<p>구두로 신청(근거는 남겨야됨) → 긴급 진행 → 사후 처리(발주 담당자)</p>
</div>
<div class="feature-card">
<div class="feature-icon">✓</div>
<h3 class="feature-title">QR 추적 시스템</h3>
<p class="feature-desc">실시간 위치 추적<br>3초 내 즉시 확인</p>
</div>
<div class="feature-card">
<div class="feature-icon">✓</div>
<h3 class="feature-title">실시간 모니터링</h3>
<p class="feature-desc">24/7 자동 알림<br>95% 재고 정확도</p>
</div>
</div>
</div>