워크플로우 시스템 구축 완료

- 워크플로우 개요 페이지에 플로우차트 형태 추가 (3x2 그리드)
- 각 워크플로우 단계별 독립 HTML 페이지 생성 (1-4단계)
- 클릭 가능한 워크플로우 박스와 상세 페이지 연결
- DevonThink 스타일 적용 및 반응형 디자인
- 구매/물류팀 용어 통일 및 프레젠테이션 업데이트

시연회_핵심기능_5선.md

@@ -6,7 +6,60 @@ DB 연동 없이 하드코딩으로 구현하여 전체 워크플로우를 효
 
 ---
 
-## 🚀 핵심 기능 5선
+## 🚀 핵심 기능 6선
+
+### 0. **🏢 프로젝트 관리 (워크플로우 시작점)**
+
+#### 🎯 **시연 포인트**
+- 전체 워크플로우의 중심이 되는 프로젝트 선택 시스템
+- 간단하고 직관적인 UI로 빠른 프로젝트 접근
+
+#### 📱 **구현 내용**
+
+##### **🎨 간단한 프로젝트 선택기**
+- **중앙 배치 디자인**:
+  - 큰 "TK Project" 타이틀
+  - "프로젝트를 선택하여 관리를 시작하세요" 안내 문구
+- **HTML Select 박스**:
+  - 4개 프로젝트 옵션 (하드코딩)
+  - 깔끔하고 직관적인 드롭다운 방식
+- **동적 액션 버튼**:
+  - 프로젝트 선택 시에만 표시
+  - 🏭 생산회의록, 📦 입고 검수, 🔧 생산팀 작업
+
+##### **💡 하드코딩 데이터**
+```javascript
+const projectOptions = [
+  { value: "TK-2024-015", text: "ABC 공장 배관공사 (TK-2024-015)" },
+  { value: "TK-2024-016", text: "DEF 플랜트 배관 설치 (TK-2024-016)" },
+  { value: "TK-2024-017", text: "GHI 정유 공장 개보수 (TK-2024-017)" },
+  { value: "TK-2024-012", text: "JKL 화학 공장 신설 (TK-2024-012)" }
+];
+```
+
+##### **🔄 워크플로우 연결**
+```
+프로젝트 선택 → 세션 스토리지 저장 → 각 기능 페이지로 이동
+```
+
+##### **💡 실제 구현 시 고려사항**
+- **납기 필터링**: 납기가 지나지 않고 완료 처리가 안된 프로젝트만 표시
+- **동적 로딩**: DB에서 활성 프로젝트 목록을 가져와서 select 옵션 생성
+- **권한 관리**: 사용자 권한에 따른 프로젝트 접근 제어
+
+```javascript
+// 실제 구현시 필터링 로직 예시
+function getActiveProjects() {
+  // 납기가 지나지 않았고 완료 처리가 안된 프로젝트만 반환
+  return projects.filter(project => {
+    const today = new Date();
+    const deadline = new Date(project.deadline);
+    return deadline >= today && project.status !== 'completed';
+  });
+}
+```
+
+---
 
 ### 1. **📋 프로젝트 정보 등록 (2단계 시스템)**
 
@@ -626,6 +679,20 @@ const qualityData = {
 
 ### **🎬 시나리오: "ABC 공장 배관공사 프로젝트"**
 
+#### **Scene 0: 프로젝트 선택** (기능 0)
+1. **TK Project 메인 화면 진입**
+   - 중앙에 큰 "TK Project" 타이틀 표시
+   - "프로젝트를 선택하여 관리를 시작하세요" 안내
+2. **프로젝트 선택**
+   - HTML Select 박스 클릭
+   - "ABC 공장 배관공사 (TK-2024-015)" 선택
+3. **액션 버튼 표시**
+   - 🏭 생산회의록, 📦 입고 검수, 🔧 생산팀 작업 버튼 나타남
+   - 선택된 프로젝트 정보 세션 스토리지에 저장
+4. **워크플로우 시작**
+   - 원하는 기능 버튼 클릭하여 해당 페이지로 이동
+   - 선택된 프로젝트 컨텍스트 유지
+
 #### **Scene 1: 프로젝트 등록** (기능 1)
 
 ##### **1단계: 프로젝트 생성 및 승인**
@@ -649,7 +716,7 @@ const qualityData = {
 4. 리스크 분석 완료 → **정보 업데이트** (납품까지 지속적 관리)
 
 #### **Scene 2: 생산회의** (기능 2)
-1. **프로젝트 TK-2024-015 선택** → 생산회의록 화면 진입
+1. **프로젝트 관리 화면에서 🏭 생산회의록 버튼 클릭** → 생산회의록 화면 진입
 2. **공정표 확인** (상단)
    - 설계: 100% 완료 ✅
    - 구매: 85% 진행중 🟡 
@@ -734,6 +801,7 @@ const qualityData = {
 ## 📋 개발 우선순위
 
 ### **Phase 1: 기본 기능 (시연용)**
+- [x] 프로젝트 관리 (워크플로우 시작점)
 - [x] 프로젝트 등록 시스템
 - [x] 생산회의록 대시보드  
 - [x] 입고 관리 시스템