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

Compare commits

base: hyungi:23eb3f1f46347ccf5fd04a297eacb80f30491556
Branches Tags
hyungi:main
..
compare: hyungi:main
Branches Tags
hyungi:main

4 Commits
23eb3f1f46 ... main

Author SHA1 Message Date
hyungi
65103af5c0 프레젠테이션 슬라이드 개선: 세로 플로우차트로 변경 및 프로세스 최적화 
- 외주/자체제작 프로세스를 가로에서 세로 방향으로 변경
- 이모지 제거하여 전문적인 프레젠테이션 스타일 적용
- 화살표 방향을 → 에서 ↓ 로 변경
- 불필요한 견적 요청 문구 제거
- 자체제작 프로세스 최적화: 8단계 → 7단계로 단순화
- 최종 검사를 검수 및 보관 단계에 통합
- 상세한 프로세스 내용 복원 및 가독성 향상
 2025-09-16 06:15:19 +09:00
hyungi
8d9c2bd5c3 워크플로우 시스템 개선 및 캘린더 기능 추가 
- presentation.html에 워크플로우 단계별 링크 추가
- 워크플로우 상세 페이지들의 뒤로가기 버튼을 presentation.html로 연결
- workflow-stage-1.html에 표준 스펙 관리 시스템 및 외주 vs 자체제작 결정 시스템 추가
- workflow-stage-4.html에 프로젝트 일정 캘린더 추가 (8월 자재 입고 일정 포함)
- 워크플로우 페이지 스크롤 문제 해결 (CSS 수정)
- 캘린더 테이블 기반으로 재구성하여 정확한 달력 형태 구현
 2025-09-15 23:05:15 +09:00
Hyungi Ahn
bd23e00232 워크플로우 시스템 구축 완료 
- 워크플로우 개요 페이지에 플로우차트 형태 추가 (3x2 그리드)
- 각 워크플로우 단계별 독립 HTML 페이지 생성 (1-4단계)
- 클릭 가능한 워크플로우 박스와 상세 페이지 연결
- DevonThink 스타일 적용 및 반응형 디자인
- 구매/물류팀 용어 통일 및 프레젠테이션 업데이트
 2025-09-15 19:17:42 +09:00
Hyungi Ahn
5375842144 🔍 구글 스타일 프로젝트 선택기로 전면 개편 
핵심 변경사항:
✅ 구글 검색창 스타일의 깔끔한 프로젝트 관리 페이지 완성
- 복잡한 카드 리스트 → 중앙 집중식 드롭다운 선택기
- 미니멀한 디자인으로 사용성 대폭 개선

🎯 구글 스타일 드롭다운 시스템
- 중앙 배치된 둥근 검색창 스타일 드롭다운
- 클릭 시 부드러운 확장 애니메이션 (둥근→사각형)
- 내장된 실시간 검색 기능 (프로젝트명/Job No./고객사)
- 외부 클릭 시 자동 닫힘

🎨 DevonThink 미니멀 디자인
- 중앙 정렬된 대형 'TK Project' 타이틀 (48px, 얇은 폰트)
- 충분한 여백과 깔끔한 레이아웃 (80vh 중앙 배치)
- 회색/파란색 위주의 절제된 색상 팔레트
- 부드러운 그림자와 호버 효과

📋 스마트 프로젝트 정보 표시
- 드롭다운 옵션: 프로젝트명 + Job No. + 고객사 + 상태
- 선택 후 상세 정보 카드 자동 표시 (fadeInUp 애니메이션)
- 프로젝트별 맞춤 액션 버튼 (상태에 따른 활성화/비활성화)
- 세션 스토리지 자동 저장

⚡ 인터랙티브 기능
- 드롭다운 열기 시 검색창 자동 포커스
- 실시간 필터링 (타이핑과 동시에 옵션 필터링)
- 키보드 네비게이션 지원 (Enter, Escape)
- 상태별 버튼 동적 업데이트

🔄 상태별 버튼 로직
- 계획 단계: 생산회의록 비활성화
- 진행중: 모든 기능 활성화
- 제작중: 생산회의록 + 프로젝트 관리 활성화
- 완료: 모든 버튼 '(완료)' 표시로 변경

📊 하단 통계 표시
- 간소화된 4개 통계 (전체/진행중/제작중/지연)
- 중앙 정렬된 깔끔한 배치
- 큰 숫자 + 작은 라벨 구조

💾 하드코딩 데이터 구조화
- getProjectData() 함수로 중앙 관리
- 4개 프로젝트 완전한 정보 (고객사, 납기, PM, 상태 등)
- 상태별 클래스와 진행률 포함

🎭 애니메이션 효과
- 페이지 로드 시 순차적 fade-in
- 드롭다운 화살표 회전 (180도)
- 프로젝트 정보 카드 fadeInUp
- 호버 시 그림자 확대

시연 준비: 구글 수준의 직관적이고 깔끔한 프로젝트 선택 시스템 완성
 2025-09-15 11:56:56 +09:00
10 changed files with 5952 additions and 660 deletions
Expand all files Collapse all files

39
TK_Project_Workflow.md
View File

@@ -5,6 +5,33 @@ TK Project는 수주부터 납품까지의 전체 프로젝트 라이프사이
--- ---
## 🏢 0. 프로젝트 관리 (워크플로우 시작점)
### 0.1 프로젝트 선택 시스템
- **목적**: 전체 워크플로우의 중심이 되는 프로젝트 접근점
- **담당자**: 모든 사용자 (권한에 따른 접근 제어)
- **주요 기능**:
- 활성 프로젝트 목록 표시 (납기 미경과, 미완료 프로젝트만)
- 간단하고 직관적인 프로젝트 선택 인터페이스
- 선택된 프로젝트 컨텍스트 전역 유지
### 0.2 워크플로우 연결
```
프로젝트 선택 → 세션 저장 → 각 기능 모듈로 분기
├── 📋 프로젝트 등록/수정
├── 🏭 생산회의록
├── 📦 입고 검수 관리
├── 🔧 생산팀 작업 관리
└── 🔍 품질 검사 시스템
```
### 0.3 실제 구현 시 고려사항
- **동적 필터링**: 납기일 기준 활성 프로젝트만 표시
- **권한 기반 접근**: 사용자 권한에 따른 프로젝트 접근 제어
- **실시간 동기화**: 프로젝트 상태 변경 시 즉시 반영
---
## 🚀 1. 준비 단계 ## 🚀 1. 준비 단계
### 1.1 프로젝트 등록 ### 1.1 프로젝트 등록
@@ -135,11 +162,13 @@ TK Project는 수주부터 납품까지의 전체 프로젝트 라이프사이
## 🎯 핵심 목표 ## 🎯 핵심 목표
1. **통합 관리**: 수주부터 납품까지 원스톱 관리 1. **중앙집중식 프로젝트 관리**: 모든 워크플로우의 시작점 제공
2. **실시간 현황**: 언제든 프로젝트 상태 확인 가능 2. **통합 관리**: 수주부터 납품까지 원스톱 관리
3. **유연성**: 각 부서별 맞춤형 워크플로우 지원 3. **실시간 현황**: 언제든 프로젝트 상태 확인 가능
4. **데이터 축적**: 문제 발생 이력을 통한 개선점 도출 4. **유연성**: 각 부서별 맞춤형 워크플로우 지원
5. **승인 체계**: 단계별 필수 확인을 통한 품질 보장 5. **데이터 축적**: 문제 발생 이력을 통한 개선점 도출
6. **승인 체계**: 단계별 필수 확인을 통한 품질 보장
7. **사용자 경험**: 직관적이고 간단한 인터페이스 제공
--- ---

751
demo/index.html
View File

@@ -53,6 +53,16 @@
</a></li> </a></li>
</ul> </ul>
</div> </div>
<div class="nav-section">
<h3>워크플로우</h3>
<ul>
<li><a href="#" onclick="showPage('workflow-overview')" class="nav-item">
<span class="nav-icon">🔄</span>
전체 워크플로우
</a></li>
</ul>
</div>
</nav> </nav>
<div class="sidebar-footer"> <div class="sidebar-footer">
@@ -70,248 +80,24 @@
<div class="main-content"> <div class="main-content">
<!-- 프로젝트 관리 페이지 --> <!-- 프로젝트 관리 페이지 -->
<div id="project-management" class="page active"> <div id="project-management" class="page active">
<div class="page-header"> <div class="simple-project-selector">
<h2>프로젝트 관리</h2> <h1>TK Project</h1>
<p class="page-description">진행 중인 프로젝트를 선택하여 세부 관리를 시작합니다.</p> <p>프로젝트를 선택하여 관리를 시작하세요</p>
</div>
<div class="project-management-container"> <div class="project-select-box">
<!-- 프로젝트 필터 및 검색 --> <select id="project-select" onchange="selectProject(this.value)">
<div class="project-filters"> <option value="">프로젝트를 선택하세요</option>
<div class="filter-section"> <option value="TK-2024-015">ABC 공장 배관공사 (TK-2024-015)</option>
<div class="search-box"> <option value="TK-2024-016">DEF 플랜트 배관 설치 (TK-2024-016)</option>
<input type="text" placeholder="프로젝트명 또는 Job No. 검색..." class="search-input"> <option value="TK-2024-017">GHI 정유 공장 개보수 (TK-2024-017)</option>
<button class="search-btn">🔍</button> <option value="TK-2024-012">JKL 화학 공장 신설 (TK-2024-012)</option>
</div> </select>
<div class="filter-buttons">
<button class="filter-btn active" data-filter="all">전체</button>
<button class="filter-btn" data-filter="planning">계획</button>
<button class="filter-btn" data-filter="in-progress">진행중</button>
<button class="filter-btn" data-filter="production">제작중</button>
<button class="filter-btn" data-filter="completed">완료</button>
</div>
</div>
<div class="project-stats">
<div class="stat-item">
<span class="stat-number">12</span>
<span class="stat-label">전체 프로젝트</span>
</div>
<div class="stat-item">
<span class="stat-number">8</span>
<span class="stat-label">진행중</span>
</div>
<div class="stat-item">
<span class="stat-number">3</span>
<span class="stat-label">제작중</span>
</div>
<div class="stat-item">
<span class="stat-number">1</span>
<span class="stat-label">지연</span>
</div>
</div>
</div> </div>
<!-- 프로젝트 리스트 --> <div class="project-actions" id="project-actions" style="display: none;">
<div class="project-list"> <button class="btn btn-primary" onclick="showPage('production-meeting')">🏭 생산회의록</button>
<div class="project-card status-production" data-job-no="TK-2024-015"> <button class="btn btn-primary" onclick="showPage('incoming-inspection')">📦 입고 검수</button>
<div class="project-header"> <button class="btn btn-primary" onclick="showPage('production-work')">🔧 생산팀 작업</button>
<div class="project-title">
<h3>ABC 공장 배관공사</h3>
<span class="job-no">TK-2024-015</span>
</div>
<div class="project-status">
<span class="status-badge status-production">제작중</span>
<span class="progress-text">75%</span>
</div>
</div>
<div class="project-info">
<div class="info-row">
<span class="info-label">고객사</span>
<span class="info-value">ABC 케미칼</span>
</div>
<div class="info-row">
<span class="info-label">납기일</span>
<span class="info-value">2024-03-30</span>
</div>
<div class="info-row">
<span class="info-label">납품방식</span>
<span class="info-value">현장납품</span>
</div>
<div class="info-row">
<span class="info-label">담당 PM</span>
<span class="info-value">이PM</span>
</div>
</div>
<div class="project-progress">
<div class="progress-bar">
<div class="progress-fill" style="width: 75%"></div>
</div>
<div class="progress-stages">
<div class="stage completed">설계</div>
<div class="stage completed">구매</div>
<div class="stage active">제작</div>
<div class="stage">검사</div>
<div class="stage">납품</div>
</div>
</div>
<div class="project-actions">
<button class="btn btn-primary" onclick="selectProject('TK-2024-015')">📊 프로젝트 관리</button>
<button class="btn btn-secondary" onclick="showPage('production-meeting')">🏭 생산회의록</button>
</div>
</div>
<div class="project-card status-planning" data-job-no="TK-2024-016">
<div class="project-header">
<div class="project-title">
<h3>DEF 플랜트 배관 설치</h3>
<span class="job-no">TK-2024-016</span>
</div>
<div class="project-status">
<span class="status-badge status-planning">계획</span>
<span class="progress-text">25%</span>
</div>
</div>
<div class="project-info">
<div class="info-row">
<span class="info-label">고객사</span>
<span class="info-value">DEF 화학</span>
</div>
<div class="info-row">
<span class="info-label">납기일</span>
<span class="info-value">2024-04-15</span>
</div>
<div class="info-row">
<span class="info-label">납품방식</span>
<span class="info-value">공장인도</span>
</div>
<div class="info-row">
<span class="info-label">담당 PM</span>
<span class="info-value">박PM</span>
</div>
</div>
<div class="project-progress">
<div class="progress-bar">
<div class="progress-fill" style="width: 25%"></div>
</div>
<div class="progress-stages">
<div class="stage active">설계</div>
<div class="stage">구매</div>
<div class="stage">제작</div>
<div class="stage">검사</div>
<div class="stage">납품</div>
</div>
</div>
<div class="project-actions">
<button class="btn btn-primary" onclick="selectProject('TK-2024-016')">📊 프로젝트 관리</button>
<button class="btn btn-secondary disabled">🏭 생산회의록</button>
</div>
</div>
<div class="project-card status-in-progress" data-job-no="TK-2024-017">
<div class="project-header">
<div class="project-title">
<h3>GHI 정유 공장 개보수</h3>
<span class="job-no">TK-2024-017</span>
</div>
<div class="project-status">
<span class="status-badge status-in-progress">진행중</span>
<span class="progress-text">60%</span>
</div>
</div>
<div class="project-info">
<div class="info-row">
<span class="info-label">고객사</span>
<span class="info-value">GHI 정유 / 한국엔지니어링</span>
</div>
<div class="info-row">
<span class="info-label">납기일</span>
<span class="info-value">2024-05-20</span>
</div>
<div class="info-row">
<span class="info-label">납품방식</span>
<span class="info-value">부분납품</span>
</div>
<div class="info-row">
<span class="info-label">담당 PM</span>
<span class="info-value">최PM</span>
</div>
</div>
<div class="project-progress">
<div class="progress-bar">
<div class="progress-fill" style="width: 60%"></div>
</div>
<div class="progress-stages">
<div class="stage completed">설계</div>
<div class="stage active">구매</div>
<div class="stage">제작</div>
<div class="stage">검사</div>
<div class="stage">납품</div>
</div>
</div>
<div class="project-actions">
<button class="btn btn-primary" onclick="selectProject('TK-2024-017')">📊 프로젝트 관리</button>
<button class="btn btn-secondary" onclick="showPage('incoming-inspection')">📦 입고 검수</button>
</div>
</div>
<div class="project-card status-completed" data-job-no="TK-2024-012">
<div class="project-header">
<div class="project-title">
<h3>JKL 화학 공장 신설</h3>
<span class="job-no">TK-2024-012</span>
</div>
<div class="project-status">
<span class="status-badge status-completed">완료</span>
<span class="progress-text">100%</span>
</div>
</div>
<div class="project-info">
<div class="info-row">
<span class="info-label">고객사</span>
<span class="info-value">JKL 화학</span>
</div>
<div class="info-row">
<span class="info-label">납기일</span>
<span class="info-value">2024-02-28</span>
</div>
<div class="info-row">
<span class="info-label">납품방식</span>
<span class="info-value">현장납품</span>
</div>
<div class="info-row">
<span class="info-label">담당 PM</span>
<span class="info-value">김PM</span>
</div>
</div>
<div class="project-progress">
<div class="progress-bar">
<div class="progress-fill" style="width: 100%"></div>
</div>
<div class="progress-stages">
<div class="stage completed">설계</div>
<div class="stage completed">구매</div>
<div class="stage completed">제작</div>
<div class="stage completed">검사</div>
<div class="stage completed">납품</div>
</div>
</div>
<div class="project-actions">
<button class="btn btn-secondary" onclick="selectProject('TK-2024-012')">📋 프로젝트 보기</button>
<button class="btn btn-success">✅ 완료됨</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -886,6 +672,493 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 워크플로우 개요 페이지 -->
<div id="workflow-overview" class="page">
<div class="page-header">
<h2>🔄 TK Project 전체 워크플로우</h2>
<p class="page-description">수주부터 납품까지의 전체 프로젝트 라이프사이클 관리 시스템</p>
</div>
<div class="workflow-overview-container">
<div class="workflow-flowchart">
<!-- 첫 번째 행 -->
<div class="workflow-row">
<div class="workflow-box" onclick="showPage('workflow-stage-1')">
<div class="box-number">1</div>
<div class="box-icon">📋</div>
<div class="box-title">준비 단계</div>
<div class="box-subtitle">수주 → Job No. 부여 → 담당자 배정<br>외주/자체제작 결정 → 각 부서 일정 수립</div>
</div>
<div class="flow-arrow horizontal">→</div>
<div class="workflow-box" onclick="showPage('workflow-stage-2')">
<div class="box-number">2</div>
<div class="box-icon">🚀</div>
<div class="box-title">프로젝트 진행 (발주)</div>
<div class="box-subtitle">외주: 도면 → 견적 → 발주 → 관리<br>자체: BOM → 구매신청 → 발주 → 입고</div>
</div>
<div class="flow-arrow horizontal">→</div>
<div class="workflow-box" onclick="showPage('workflow-stage-3')">
<div class="box-number">3</div>
<div class="box-icon">🔧</div>
<div class="box-title">제작 단계</div>
<div class="box-subtitle">외주: 업체 공정표 관리 + NCR 처리<br>자체: 생산팀 공정관리 + 자재 인수인계</div>
</div>
</div>
<!-- 두 번째 행 -->
<div class="workflow-row">
<div class="workflow-box" onclick="showPage('workflow-stage-4')">
<div class="box-number">4</div>
<div class="box-icon">🏭</div>
<div class="box-title">생산회의</div>
<div class="box-subtitle">제작 전/중 현황 관리<br>공정표 표시 개선 + 실시간 모니터링</div>
</div>
<div class="flow-arrow horizontal">→</div>
<div class="workflow-box" onclick="showPage('workflow-stage-5')">
<div class="box-number">5</div>
<div class="box-icon">📦</div>
<div class="box-title">납품 (출하전 보고서)</div>
<div class="box-subtitle">필수 확인점 완료 확인<br>대표 승인 → 출하 가능</div>
</div>
<div class="flow-arrow horizontal">→</div>
<div class="workflow-box special" onclick="showPage('workflow-stage-0')">
<div class="box-number">💡</div>
<div class="box-icon">⚡</div>
<div class="box-title">특이사항</div>
<div class="box-subtitle">긴급/가공건: 구두신청 → 긴급진행<br>각 팀장이 워크플로우 자유 변형 가능</div>
</div>
</div>
<!-- 연결선들 -->
<div class="flow-connections">
<!-- 세로 연결선 (1→4) -->
<div class="vertical-line" style="left: 16.66%; top: 45%; height: 10%;"></div>
<!-- 세로 연결선 (2→5) -->
<div class="vertical-line" style="left: 50%; top: 45%; height: 10%;"></div>
<!-- 세로 연결선 (3→특이사항) -->
<div class="vertical-line" style="left: 83.33%; top: 45%; height: 10%;"></div>
</div>
</div>
<div class="workflow-summary">
<h3>🎯 핵심 목표</h3>
<ul>
<li><strong>중앙집중식 프로젝트 관리:</strong> 모든 프로젝트 정보를 한 곳에서 통합 관리</li>
<li><strong>구매 신청 중심 자재 관리:</strong> 구매 프로세스를 중심으로 한 완전한 자재 추적</li>
<li><strong>실시간 정보 연동:</strong> 부서 간 정보 공유 및 실시간 업데이트</li>
<li><strong>사용자 경험 최적화:</strong> 직관적이고 효율적인 업무 프로세스</li>
</ul>
</div>
</div>
</div>
<!-- 워크플로우 상세 페이지들 -->
<!-- Stage 0: 프로젝트 관리 -->
<div id="workflow-stage-0" class="page">
<div class="page-header">
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
<h2>🏢 0단계: 프로젝트 관리 (워크플로우 시작점)</h2>
<p class="page-description">전체 워크플로우의 중심이 되는 프로젝트 접근점</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>📋 주요 기능</h3>
<ul class="feature-list">
<li>활성 프로젝트 목록 표시 (납기 미경과, 미완료 프로젝트만)</li>
<li>간단하고 직관적인 프로젝트 선택 인터페이스</li>
<li>선택된 프로젝트 컨텍스트 전역 유지</li>
</ul>
</div>
<div class="detail-section">
<h3>🔄 워크플로우 연결</h3>
<div class="workflow-connection">
<div class="connection-item">프로젝트 선택</div>
<div class="arrow">→</div>
<div class="connection-item">세션 저장</div>
<div class="arrow">→</div>
<div class="connection-item">각 기능 모듈로 분기</div>
</div>
<div class="module-list">
<div class="module-item">📋 프로젝트 등록/수정</div>
<div class="module-item">🏭 생산회의록</div>
<div class="module-item">📦 입고 검수 관리</div>
<div class="module-item">🔧 생산팀 작업 관리</div>
<div class="module-item">🔍 품질 검사 시스템</div>
</div>
</div>
<div class="detail-section">
<h3>⚙️ 실제 구현 시 고려사항</h3>
<div class="consideration-grid">
<div class="consideration-item">
<h4>동적 필터링</h4>
<p>납기일 기준 활성 프로젝트만 표시</p>
</div>
<div class="consideration-item">
<h4>권한 기반 접근</h4>
<p>사용자 권한에 따른 프로젝트 접근 제어</p>
</div>
<div class="consideration-item">
<h4>실시간 동기화</h4>
<p>프로젝트 상태 변경 시 즉시 반영</p>
</div>
</div>
</div>
</div>
</div>
<!-- Stage 1: 준비 단계 -->
<div id="workflow-stage-1" class="page">
<div class="page-header">
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
<h2>🚀 1단계: 준비 단계</h2>
<p class="page-description">프로젝트 등록 및 각 부서별 업무 분기 단계</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>📋 프로젝트 등록</h3>
<div class="process-flow">
<div class="process-step">
<h4>수주에 따른 Job No. 부여</h4>
<p><strong>담당자:</strong> 영업 또는 PM</p>
</div>
<div class="process-step">
<h4>업무 내용</h4>
<ul>
<li>관련 정보 업로드 (관련 자료 + 담당자 정리본)</li>
<li>일정을 고려한 외주 & 자체제작 여부 확정</li>
</ul>
</div>
</div>
</div>
<div class="detail-section">
<h3>🏗️ 업무 분기 및 일정 수립</h3>
<p>등록된 정보와 확정된 일정을 토대로 각 부서별 업무 분기:</p>
<div class="department-grid">
<div class="department-card">
<h4>🏗️ 설계팀</h4>
<ul>
<li>도면 일정 수립</li>
</ul>
</div>
<div class="department-card">
<h4>🔍 품질팀</h4>
<ul>
<li>검사 포인트 확인 및 일정 수립</li>
<li>ITP 작성</li>
</ul>
</div>
<div class="department-card">
<h4>🛒 구매/물류팀</h4>
<ul>
<li>외주 제작 일정 시작과 끝 입력</li>
<li>항목별 소요 일수 산정 (필요시 견적 진행)</li>
</ul>
</div>
<div class="department-card">
<h4>🏭 생산팀</h4>
<ul>
<li>납기일 확인 후 제작일정 수립</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Stage 2: 프로젝트 진행 단계 -->
<div id="workflow-stage-2" class="page">
<div class="page-header">
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
<h2>🔄 2단계: 프로젝트 진행 단계 (발주)</h2>
<p class="page-description">외주 및 자체제작 프로세스 관리</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>
</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>
<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>
</div>
</div>
</div>
<!-- Stage 3: 제작 단계 -->
<div id="workflow-stage-3" class="page">
<div class="page-header">
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
<h2>🛠️ 3단계: 제작 단계</h2>
<p class="page-description">외주 및 자체제작 생산 관리</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>🏢 외주의 경우</h3>
<div class="responsibility-card">
<h4>담당부서: 구매/물류팀</h4>
<ul>
<li>납기, 업체 공정표의 정보 입력 페이지</li>
<li>품질팀은 해당 입력을 토대로 검사일정 수립</li>
</ul>
</div>
<div class="ncr-process">
<h4>📋 NCR 발생시 처리 순서</h4>
<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="arrow">→</div>
<div class="process-step">품질 전달</div>
</div>
</div>
</div>
<div class="detail-section">
<h3>🏭 자체제작의 경우</h3>
<div class="department-responsibilities">
<div class="responsibility-card">
<h4>생산팀</h4>
<ul>
<li>공정표 이용한 공정관리</li>
<li>생산회의에 활용</li>
<li>해당 회의에서 관련 프로젝트 발주현황 확인 가능</li>
</ul>
</div>
<div class="responsibility-card">
<h4>구매/물류팀</h4>
<ul>
<li>생산팀 자재 인수인계 (자재 상태 변경)</li>
</ul>
</div>
</div>
</div>
<div class="detail-section">
<h3>⚠️ 문제 발생시 대응</h3>
<div class="problem-handling">
<h4>작업중 미수령 자재 있을시</h4>
<p>생산팀에서 검색하기 쉽게 유도 (위치정보 등)</p>
<h4>문제 발생시 (자재문제 이외에도 설계미스, 품질미스, 생산미스 전부 포함)</h4>
<p>종류와 발생 사유등을 쉽게 입력하여 차후 프로젝트에 활용할 수 있도록 설계</p>
<h4>데일리체크 개선</h4>
<p>생산회의 제작전, 제작중 모든 고정에 대한 현황을 알 수 있도록 개선</p>
</div>
</div>
</div>
</div>
<!-- Stage 4: 생산회의 -->
<div id="workflow-stage-4" class="page">
<div class="page-header">
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
<h2>🏢 4단계: 생산회의</h2>
<p class="page-description">프로젝트 진행 현황 통합 관리</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>📊 생산회의 주요 기능</h3>
<div class="meeting-features">
<div class="feature-card">
<h4>공정표 표시 개선</h4>
<p>제작전, 제작중 모든 공정에 대한 현황을 한눈에 확인</p>
</div>
<div class="feature-card">
<h4>프로젝트 발주현황 확인</h4>
<p>관련 프로젝트의 발주 상태를 실시간으로 파악</p>
</div>
<div class="feature-card">
<h4>데일리체크 통합</h4>
<p>일일 작업 현황 및 이슈사항 종합 관리</p>
</div>
</div>
</div>
<div class="detail-section">
<h3>🎯 회의 목적</h3>
<ul class="purpose-list">
<li>전체 프로젝트 진행 상황 점검</li>
<li>부서간 협업 이슈 해결</li>
<li>일정 지연 요소 사전 파악</li>
<li>자재 수급 현황 확인</li>
<li>품질 이슈 공유 및 대응</li>
</ul>
</div>
<div class="detail-section">
<h3>📋 회의 구성 요소</h3>
<div class="meeting-components">
<div class="component-item">
<h4>📈 공정 진행률</h4>
<p>각 프로젝트별 공정 완료 현황</p>
</div>
<div class="component-item">
<h4>📦 자재 현황</h4>
<p>입고 예정, 검수 완료, 불출 대기 자재 현황</p>
</div>
<div class="component-item">
<h4>⚠️ 이슈 사항</h4>
<p>데일리체크에서 올라온 문제점 및 해결 방안</p>
</div>
<div class="component-item">
<h4>📅 일정 조정</h4>
<p>지연 요소에 따른 일정 재조정</p>
</div>
</div>
</div>
</div>
</div>
<!-- Stage 5: 납품 -->
<div id="workflow-stage-5" class="page">
<div class="page-header">
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
<h2>📦 5단계: 납품 (출하전 보고서)</h2>
<p class="page-description">최종 품질 확인 및 출하 승인 프로세스</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>✅ 출하전 필수 확인점</h3>
<div class="checklist-grid">
<div class="checklist-item">
<h4>🔍 품질 검사</h4>
<ul>
<li>최종 품질 검사 완료</li>
<li>모든 NCR 처리 완료</li>
<li>고객 요구사항 충족 확인</li>
</ul>
</div>
<div class="checklist-item">
<h4>📋 문서 완성</h4>
<ul>
<li>제작 완료 보고서</li>
<li>품질 검사 성적서</li>
<li>납품 관련 서류</li>
</ul>
</div>
<div class="checklist-item">
<h4>📦 포장 및 준비</h4>
<ul>
<li>적절한 포장 완료</li>
<li>운송 준비 완료</li>
<li>납품 일정 확정</li>
</ul>
</div>
</div>
</div>
<div class="detail-section">
<h3>🔄 승인 프로세스</h3>
<div class="approval-flow">
<div class="approval-step">
<h4>1단계: 필수 확인점 검토</h4>
<p>상기 공정별 필수 확인점 여부 표시</p>
</div>
<div class="arrow-down">↓</div>
<div class="approval-step">
<h4>2단계: 미완료 항목 확인</h4>
<p>미완료 표시 있으면 승인요청 불가</p>
</div>
<div class="arrow-down">↓</div>
<div class="approval-step">
<h4>3단계: 대표 승인</h4>
<p>대표님 승인 후 출하 가능</p>
</div>
</div>
</div>
<div class="detail-section">
<h3>📊 최종 보고서 구성</h3>
<div class="report-components">
<div class="report-item">
<h4>프로젝트 개요</h4>
<p>Job No., 고객사, 납기일 등 기본 정보</p>
</div>
<div class="report-item">
<h4>제작 현황</h4>
<p>공정별 완료 현황 및 소요 시간</p>
</div>
<div class="report-item">
<h4>품질 현황</h4>
<p>검사 결과, NCR 처리 내역</p>
</div>
<div class="report-item">
<h4>특이사항</h4>
<p>프로젝트 진행 중 발생한 주요 이슈 및 해결 방안</p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<script src="scripts/main.js"></script> <script src="scripts/main.js"></script>

169
demo/scripts/main.js
View File

@@ -359,148 +359,55 @@ function initializePage(pageId) {
function initializeProjectManagement() { function initializeProjectManagement() {
console.log('프로젝트 관리 페이지 초기화'); console.log('프로젝트 관리 페이지 초기화');
// 프로젝트 카드 애니메이션 // 애니메이션 효과
animateElements('.project-card'); animateElements('.simple-project-selector');
// 필터 버튼 이벤트 설정
setupProjectFilters();
// 검색 기능 설정
setupProjectSearch();
} }
// 프로젝트 필터 설정 // 프로젝트 선택 (간단한 select 박스용)
function setupProjectFilters() { function selectProject(jobNo) {
const filterButtons = document.querySelectorAll('.filter-btn'); if (!jobNo) {
// 선택 해제
filterButtons.forEach(btn => { document.getElementById('project-actions').style.display = 'none';
btn.addEventListener('click', function() { selectedProject = null;
// 활성 버튼 변경
filterButtons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
// 필터 적용
const filter = this.getAttribute('data-filter');
filterProjects(filter);
});
});
}
// 프로젝트 검색 설정
function setupProjectSearch() {
const searchInput = document.querySelector('.search-input');
const searchBtn = document.querySelector('.search-btn');
if (searchInput && searchBtn) {
searchBtn.addEventListener('click', performSearch);
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
performSearch();
}
});
}
}
// 검색 실행
function performSearch() {
const searchInput = document.querySelector('.search-input');
const query = searchInput.value.toLowerCase().trim();
if (!query) {
showAllProjects();
return; return;
} }
const projectCards = document.querySelectorAll('.project-card'); // 프로젝트 선택됨
let visibleCount = 0;
projectCards.forEach(card => {
const title = card.querySelector('h3').textContent.toLowerCase();
const jobNo = card.querySelector('.job-no').textContent.toLowerCase();
const customer = card.querySelector('.info-value').textContent.toLowerCase();
if (title.includes(query) || jobNo.includes(query) || customer.includes(query)) {
card.style.display = 'block';
visibleCount++;
} else {
card.style.display = 'none';
}
});
showNotification(`${visibleCount}개의 프로젝트를 찾았습니다.`, 'info');
}
// 프로젝트 필터링
function filterProjects(filter) {
const projectCards = document.querySelectorAll('.project-card');
let visibleCount = 0;
projectCards.forEach(card => {
if (filter === 'all') {
card.style.display = 'block';
visibleCount++;
} else {
const hasStatus = card.classList.contains(`status-${filter}`);
if (hasStatus) {
card.style.display = 'block';
visibleCount++;
} else {
card.style.display = 'none';
}
}
});
// 통계 업데이트
updateProjectStats(filter, visibleCount);
}
// 모든 프로젝트 표시
function showAllProjects() {
const projectCards = document.querySelectorAll('.project-card');
projectCards.forEach(card => {
card.style.display = 'block';
});
}
// 프로젝트 통계 업데이트
function updateProjectStats(filter, count) {
const filterName = {
'all': '전체',
'planning': '계획',
'in-progress': '진행중',
'production': '제작중',
'completed': '완료'
};
showNotification(`${filterName[filter]} 프로젝트: ${count}개`, 'info');
}
// 프로젝트 선택
function selectProject(jobNo) {
selectedProject = jobNo; selectedProject = jobNo;
// 프로젝트 정보 저장 // 액션 버튼들 표시
const projectCard = document.querySelector(`[data-job-no="${jobNo}"]`); document.getElementById('project-actions').style.display = 'flex';
if (projectCard) {
const projectName = projectCard.querySelector('h3').textContent;
const customer = projectCard.querySelector('.info-value').textContent;
// 세션 스토리지에 저장 // 세션 스토리지에 저장 (간단한 정보만)
sessionStorage.setItem('selectedProject', JSON.stringify({ sessionStorage.setItem('selectedProject', JSON.stringify({
jobNo: jobNo, jobNo: jobNo,
name: projectName, name: getProjectName(jobNo)
customer: customer }));
}));
showNotification(`${projectName} (${jobNo}) 프로젝트가 선택되었습니다.`, 'success'); showNotification(`${getProjectName(jobNo)} 프로젝트가 선택되었습니다.`, 'success');
// 프로젝트 세부 관리 페이지로 이동 (현재는 알림만)
setTimeout(() => {
showNotification('프로젝트 세부 관리 기능은 추후 구현 예정입니다.', 'info');
}, 1000);
}
} }
// 프로젝트 이름 가져오기
function getProjectName(jobNo) {
const projectNames = {
'TK-2024-015': 'ABC 공장 배관공사',
'TK-2024-016': 'DEF 플랜트 배관 설치',
'TK-2024-017': 'GHI 정유 공장 개보수',
'TK-2024-012': 'JKL 화학 공장 신설'
};
return projectNames[jobNo] || '알 수 없는 프로젝트';
}
// 참고: 실제 구현시에는 다음과 같이 필터링할 예정
// function getActiveProjects() {
// // 납기가 지나지 않았고 완료 처리가 안된 프로젝트만 반환
// return projects.filter(project => {
// const today = new Date();
// const deadline = new Date(project.deadline);
// return deadline >= today && project.status !== 'completed';
// });
// }
// 프로젝트 등록 페이지 초기화 // 프로젝트 등록 페이지 초기화
function initializeProjectRegistration() { function initializeProjectRegistration() {
console.log('프로젝트 등록 페이지 초기화'); console.log('프로젝트 등록 페이지 초기화');

3502
demo/styles/devonthink.css
View File

File diff suppressed because it is too large Load Diff

426
demo/workflow-stage-1.html Normal file
View File

@@ -0,0 +1,426 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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?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">
<div class="page-header">
<a href="../presentation.html" class="btn-back">← 프레젠테이션으로 돌아가기</a>
<h1>🚀 1단계: 준비 단계</h1>
<p class="page-description">프로젝트 등록 및 각 부서별 업무 분기 단계</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>📋 프로젝트 등록 (간소화)</h3>
<div class="simple-note">
<p>✅ <strong>Job No. 부여 및 기본 정보 등록</strong> - 별도 시스템에서 처리</p>
</div>
</div>
<div class="detail-section">
<h3>📐 표준 스펙 관리 시스템</h3>
<p class="section-description"><strong>핵심 개념:</strong> 회사 표준 스펙을 기반으로 프로젝트별 맞춤 스펙을 효율적으로 관리</p>
<div class="concept-explanation">
<div class="concept-step">
<h4>🏢 1단계: 회사 표준 스펙 활용</h4>
<div class="concept-content">
<p><strong>목적:</strong> 매번 새로 작성하지 않고 검증된 표준 스펙을 재사용</p>
<ul class="concept-list">
<li><strong>배관 표준 스펙:</strong> 파이프, 밸브, 피팅 표준 사양</li>
<li><strong>용접 표준 스펙:</strong> 용접 절차, 검사 기준</li>
<li><strong>도장 표준 스펙:</strong> 표면처리, 도장 사양</li>
</ul>
<div class="benefit-note">
💡 <strong>효과:</strong> 스펙 작성 시간 80% 단축, 품질 일관성 확보
</div>
</div>
</div>
<div class="concept-step">
<h4>🎯 2단계: 고객 요구사항 반영</h4>
<div class="concept-content">
<p><strong>목적:</strong> 표준 스펙에서 고객사별 특수 요구사항만 추가/변경</p>
<div class="example-box">
<h5>📋 변경 예시 (ABC 공장 프로젝트)</h5>
<ul class="example-list">
<li><strong>파이프 재질:</strong> STS304 → STS316L (고온 환경 대응)</li>
<li><strong>밸브 압력 등급:</strong> 150LB → 300LB (운전 압력 상승)</li>
<li><strong>도장 색상:</strong> 표준 회색 → 고객사 지정 파란색</li>
</ul>
</div>
<div class="benefit-note">
💡 <strong>효과:</strong> 변경사항만 관리하여 실수 방지, 이력 추적 가능
</div>
</div>
</div>
<div class="concept-step">
<h4>📁 3단계: 문서 통합 관리</h4>
<div class="concept-content">
<p><strong>목적:</strong> 고객사 원본 문서와 우리 스펙을 통합하여 최종 스펙서 생성</p>
<div class="process-flow">
<div class="flow-item">📤 고객사 PDF 업로드</div>
<div class="flow-arrow">→</div>
<div class="flow-item">📋 표준 스펙 적용</div>
<div class="flow-arrow">→</div>
<div class="flow-item">✏️ 변경사항 추가</div>
<div class="flow-arrow">→</div>
<div class="flow-item">📄 최종 스펙서 생성</div>
</div>
<div class="benefit-note">
💡 <strong>효과:</strong> 모든 관련 문서가 하나로 통합, 다운로드/공유 간편
</div>
</div>
</div>
</div>
<div class="key-benefits">
<h4>🎯 핵심 가치</h4>
<div class="benefits-grid">
<div class="benefit-item">
<div class="benefit-icon">⚡</div>
<div class="benefit-content">
<h5>효율성 극대화</h5>
<p>표준 스펙 재사용으로 작성 시간 대폭 단축</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">🎯</div>
<div class="benefit-content">
<h5>품질 일관성</h5>
<p>검증된 표준을 기반으로 한 안정적 품질</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">📋</div>
<div class="benefit-content">
<h5>변경 이력 관리</h5>
<p>모든 변경사항과 사유를 체계적으로 기록</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">🔗</div>
<div class="benefit-content">
<h5>문서 통합</h5>
<p>분산된 문서들을 하나의 최종 스펙서로 통합</p>
</div>
</div>
</div>
</div>
</div>
<div class="detail-section">
<h3>🏭 외주 vs 자체제작 결정 시스템</h3>
<p class="section-description"><strong>핵심 개념:</strong> 프로젝트 특성과 회사 역량을 분석하여 최적의 제작 방식 결정</p>
<div class="decision-process">
<div class="decision-step">
<h4>📊 1단계: 프로젝트 분석</h4>
<div class="analysis-content">
<div class="analysis-factors">
<div class="factor-group">
<h5>🎯 기술적 요소</h5>
<ul class="factor-list">
<li><strong>기술 난이도:</strong> 고난이도 → 외주, 표준 사양 → 자체제작</li>
<li><strong>특수 공법:</strong> 특수 용접, 도금 등 → 외주 전문업체</li>
<li><strong>품질 요구사항:</strong> 초고압, 특수재질 → 외주</li>
</ul>
</div>
<div class="factor-group">
<h5>⏰ 일정적 요소</h5>
<ul class="factor-list">
<li><strong>납기 여유:</strong> 촉박한 납기 → 외주 (병렬 진행)</li>
<li><strong>생산팀 일정:</strong> 포화 상태 → 외주</li>
<li><strong>긴급도:</strong> 긴급 프로젝트 → 외주</li>
</ul>
</div>
<div class="factor-group">
<h5>💰 경제적 요소</h5>
<ul class="factor-list">
<li><strong>물량 규모:</strong> 대량 → 자체제작, 소량 → 외주</li>
<li><strong>수익성:</strong> 고수익 → 자체제작</li>
<li><strong>자재비 비중:</strong> 높은 자재비 → 자체제작</li>
</ul>
</div>
</div>
</div>
</div>
<div class="decision-step">
<h4>⚖️ 2단계: 의사결정 매트릭스</h4>
<div class="decision-matrix">
<div class="matrix-example">
<h5>📋 ABC 공장 배관공사 예시</h5>
<div class="matrix-table">
<div class="matrix-row header">
<div class="matrix-cell">평가 항목</div>
<div class="matrix-cell">가중치</div>
<div class="matrix-cell">외주</div>
<div class="matrix-cell">자체제작</div>
<div class="matrix-cell">결과</div>
</div>
<div class="matrix-row">
<div class="matrix-cell">기술 난이도</div>
<div class="matrix-cell">30%</div>
<div class="matrix-cell score-high">8점</div>
<div class="matrix-cell score-medium">6점</div>
<div class="matrix-cell">외주 우세</div>
</div>
<div class="matrix-row">
<div class="matrix-cell">납기 여유</div>
<div class="matrix-cell">25%</div>
<div class="matrix-cell score-medium">6점</div>
<div class="matrix-cell score-high">8점</div>
<div class="matrix-cell">자체 우세</div>
</div>
<div class="matrix-row">
<div class="matrix-cell">비용 효율성</div>
<div class="matrix-cell">25%</div>
<div class="matrix-cell score-medium">5점</div>
<div class="matrix-cell score-high">9점</div>
<div class="matrix-cell">자체 우세</div>
</div>
<div class="matrix-row">
<div class="matrix-cell">품질 관리</div>
<div class="matrix-cell">20%</div>
<div class="matrix-cell score-high">7점</div>
<div class="matrix-cell score-high">8점</div>
<div class="matrix-cell">자체 우세</div>
</div>
<div class="matrix-row total">
<div class="matrix-cell"><strong>총점</strong></div>
<div class="matrix-cell">100%</div>
<div class="matrix-cell"><strong>6.5점</strong></div>
<div class="matrix-cell"><strong>7.8점</strong></div>
<div class="matrix-cell result-selected"><strong>자체제작 선택</strong></div>
</div>
</div>
</div>
</div>
</div>
<div class="decision-step">
<h4>📝 3단계: 결정 사항 문서화</h4>
<div class="decision-documentation">
<div class="decision-result">
<div class="result-box selected">
<div class="result-header">
<span class="result-icon">🏭</span>
<h5>최종 결정: 자체제작</h5>
</div>
<div class="result-details">
<p><strong>결정 근거:</strong></p>
<ul>
<li>표준 배관 사양으로 기술적 난이도 적정</li>
<li>충분한 납기 여유 (8주)</li>
<li>대량 물량으로 자체제작 시 원가 절감 효과 큼</li>
<li>생산팀 일정 여유 있음</li>
</ul>
</div>
</div>
<div class="alternative-option">
<h5>🏢 외주 시 고려사항</h5>
<ul class="alternative-list">
<li><strong>추천 업체:</strong> 대한배관, 코리아파이프 (기존 협력업체)</li>
<li><strong>예상 비용:</strong> 자체제작 대비 15% 증가</li>
<li><strong>납기:</strong> 6주 (2주 단축 가능)</li>
<li><strong>품질 리스크:</strong> 중간 (업체 품질 관리 필요)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="decision-impact">
<h4>🎯 결정에 따른 후속 조치</h4>
<div class="impact-comparison">
<div class="impact-item">
<div class="impact-header">
<span class="impact-icon">🏭</span>
<h5>자체제작 선택 시</h5>
</div>
<div class="impact-actions">
<ul class="action-list">
<li><strong>설계팀:</strong> 상세 도면 작성 및 BOM 생성</li>
<li><strong>구매팀:</strong> 자재 구매 신청 및 발주</li>
<li><strong>생산팀:</strong> 제작 일정 수립 및 인력 배치</li>
<li><strong>품질팀:</strong> 공정별 검사 계획 수립</li>
</ul>
</div>
</div>
<div class="impact-item">
<div class="impact-header">
<span class="impact-icon">🏢</span>
<h5>외주 선택 시</h5>
</div>
<div class="impact-actions">
<ul class="action-list">
<li><strong>설계팀:</strong> 외주용 도면 패키지 준비</li>
<li><strong>구매팀:</strong> 외주업체 견적 및 발주</li>
<li><strong>생산팀:</strong> 일정 여유 확보, 다른 프로젝트 집중</li>
<li><strong>품질팀:</strong> 외주업체 품질 관리 계획</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="detail-section">
<h3>🏗️ 업무 분기 및 일정 수립</h3>
<p>등록된 정보와 확정된 일정을 토대로 각 부서별 업무 분기:</p>
<div class="department-grid">
<div class="department-card">
<h4>🏗️ 설계팀</h4>
<ul>
<li>도면 일정 수립</li>
</ul>
</div>
<div class="department-card">
<h4>🔍 품질팀</h4>
<ul>
<li>검사 포인트 확인 및 일정 수립</li>
<li>ITP 작성</li>
</ul>
</div>
<div class="department-card">
<h4>🛒 구매/물류팀</h4>
<ul>
<li>외주 제작 일정 시작과 끝 입력</li>
<li>항목별 소요 일수 산정 (필요시 견적 진행)</li>
</ul>
</div>
<div class="department-card">
<h4>🏭 생산팀</h4>
<ul>
<li>납기일 확인 후 제작일정 수립</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

477
demo/workflow-stage-2.html Normal file
View File

@@ -0,0 +1,477 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2단계: 프로젝트 진행 단계 - TK Project</title>
<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>
<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="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>
<!-- 검수 및 보관 시스템 하이라이트 -->
<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 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>
</div>
</body>
</html>

82
demo/workflow-stage-3.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3단계: 제작 단계 - TK Project</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/devonthink.css">
</head>
<body class="workflow-page">
<div class="workflow-detail-page">
<div class="page-header">
<a href="../presentation.html" class="btn-back">← 프레젠테이션으로 돌아가기</a>
<h1>🛠️ 3단계: 제작 단계</h1>
<p class="page-description">외주 및 자체제작 생산 관리</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>🏢 외주의 경우</h3>
<div class="responsibility-card">
<h4>담당부서: 구매/물류팀</h4>
<ul>
<li>납기, 업체 공정표의 정보 입력 페이지</li>
<li>품질팀은 해당 입력을 토대로 검사일정 수립</li>
</ul>
</div>
<div class="ncr-process">
<h4>📋 NCR 발생시 처리 순서</h4>
<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="arrow">→</div>
<div class="process-step">품질 전달</div>
</div>
</div>
</div>
<div class="detail-section">
<h3>🏭 자체제작의 경우</h3>
<div class="department-responsibilities">
<div class="responsibility-card">
<h4>생산팀</h4>
<ul>
<li>공정표 이용한 공정관리</li>
<li>생산회의에 활용</li>
<li>해당 회의에서 관련 프로젝트 발주현황 확인 가능</li>
</ul>
</div>
<div class="responsibility-card">
<h4>구매/물류팀</h4>
<ul>
<li>생산팀 자재 인수인계 (자재 상태 변경)</li>
</ul>
</div>
</div>
</div>
<div class="detail-section">
<h3>⚠️ 문제 발생시 대응</h3>
<div class="problem-handling">
<h4>작업중 미수령 자재 있을시</h4>
<p>생산팀에서 검색하기 쉽게 유도 (위치정보 등)</p>
<h4>문제 발생시 (자재문제 이외에도 설계미스, 품질미스, 생산미스 전부 포함)</h4>
<p>종류와 발생 사유등을 쉽게 입력하여 차후 프로젝트에 활용할 수 있도록 설계</p>
<h4>데일리체크 개선</h4>
<p>생산회의 제작전, 제작중 모든 고정에 대한 현황을 알 수 있도록 개선</p>
</div>
</div>
</div>
</div>
</body>
</html>

334
demo/workflow-stage-4.html Normal file
View File

@@ -0,0 +1,334 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4단계: 생산회의 - TK Project</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/devonthink.css">
</head>
<body class="workflow-page">
<div class="workflow-detail-page">
<div class="page-header">
<a href="../presentation.html" class="btn-back">← 프레젠테이션으로 돌아가기</a>
<h1>🏢 4단계: 생산회의</h1>
<p class="page-description">프로젝트 진행 현황 통합 관리</p>
</div>
<div class="workflow-detail-container">
<div class="detail-section">
<h3>📅 프로젝트 일정 캘린더</h3>
<p class="section-description">자재 입고 및 제작 일정을 한눈에 확인</p>
<div class="calendar-container">
<div class="calendar-header">
<button class="calendar-nav-btn" id="prevMonth">◀</button>
<h4 class="calendar-title" id="calendarTitle">2024년 8월</h4>
<button class="calendar-nav-btn" id="nextMonth">▶</button>
</div>
<!-- 8월 캘린더 -->
<div class="calendar-month" id="month-2024-08">
<table class="calendar-table">
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td class="other-month">28</td>
<td class="other-month">29</td>
<td class="other-month">30</td>
<td class="other-month">31</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td class="has-event" data-event="파이프 4인치 입고">12</td>
<td>13</td>
<td>14</td>
<td class="has-event" data-event="밸브 2인치 입고">15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td class="has-event" data-event="엘보 4인치 입고">20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td class="has-event" data-event="플랜지 입고">25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
<!-- 9월 캘린더 -->
<div class="calendar-month" id="month-2024-09" style="display: none;">
<table class="calendar-table">
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td class="other-month">1</td>
<td class="other-month">2</td>
<td class="other-month">3</td>
<td class="other-month">4</td>
<td class="other-month">5</td>
</tr>
</tbody>
</table>
</div>
<!-- 10월 캘린더 -->
<div class="calendar-month" id="month-2024-10" style="display: none;">
<table class="calendar-table">
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td class="other-month">29</td>
<td class="other-month">30</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="other-month">1</td>
<td class="other-month">2</td>
</tr>
</tbody>
</table>
</div>
<div class="calendar-legend">
<div class="legend-item">
<div class="legend-color has-event"></div>
<span>자재 입고 예정</span>
</div>
</div>
</div>
</div>
<div class="detail-section">
<h3>📊 생산회의 주요 기능</h3>
<div class="meeting-features">
<div class="feature-card">
<h4>공정표 표시 개선</h4>
<p>제작전, 제작중 모든 공정에 대한 현황을 한눈에 확인</p>
</div>
<div class="feature-card">
<h4>프로젝트 발주현황 확인</h4>
<p>관련 프로젝트의 발주 상태를 실시간으로 파악</p>
</div>
<div class="feature-card">
<h4>데일리체크 통합</h4>
<p>일일 작업 현황 및 이슈사항 종합 관리</p>
</div>
</div>
</div>
<div class="detail-section">
<h3>🎯 회의 목적</h3>
<ul class="purpose-list">
<li>전체 프로젝트 진행 상황 점검</li>
<li>부서간 협업 이슈 해결</li>
<li>일정 지연 요소 사전 파악</li>
<li>자재 수급 현황 확인</li>
<li>품질 이슈 공유 및 대응</li>
</ul>
</div>
<div class="detail-section">
<h3>📋 회의 구성 요소</h3>
<div class="meeting-components">
<div class="component-item">
<h4>📈 공정 진행률</h4>
<p>각 프로젝트별 공정 완료 현황</p>
</div>
<div class="component-item">
<h4>📦 자재 현황</h4>
<p>입고 예정, 검수 완료, 불출 대기 자재 현황</p>
</div>
<div class="component-item">
<h4>⚠️ 이슈 사항</h4>
<p>데일리체크에서 올라온 문제점 및 해결 방안</p>
</div>
<div class="component-item">
<h4>📅 일정 조정</h4>
<p>지연 요소에 따른 일정 재조정</p>
</div>
</div>
</div>
</div>
</div>
<script>
// 캘린더 기능
let currentMonth = 8; // 8월부터 시작
const months = [
{ num: 8, name: '8월', year: 2024 },
{ num: 9, name: '9월', year: 2024 },
{ num: 10, name: '10월', year: 2024 }
];
let currentIndex = 0;
function updateCalendar() {
// 모든 월 숨기기
document.querySelectorAll('.calendar-month').forEach(month => {
month.style.display = 'none';
});
// 현재 월 보이기
const currentMonthData = months[currentIndex];
const monthId = `month-${currentMonthData.year}-${String(currentMonthData.num).padStart(2, '0')}`;
const monthElement = document.getElementById(monthId);
if (monthElement) {
monthElement.style.display = 'block';
}
// 타이틀 업데이트
document.getElementById('calendarTitle').textContent =
`${currentMonthData.year}년 ${currentMonthData.name}`;
}
// 이전 월 버튼
document.getElementById('prevMonth').addEventListener('click', function() {
if (currentIndex > 0) {
currentIndex--;
updateCalendar();
}
});
// 다음 월 버튼
document.getElementById('nextMonth').addEventListener('click', function() {
if (currentIndex < months.length - 1) {
currentIndex++;
updateCalendar();
}
});
// 초기 캘린더 설정
updateCalendar();
</script>
</body>
</html>

754
presentation.html Normal file
View File

@@ -0,0 +1,754 @@
<!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);
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}
.workflow-step:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
text-decoration: none;
color: inherit;
}
.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">
<a href="demo/workflow-stage-1.html" class="workflow-step">
<div class="step-number">1</div>
<div class="step-title">📋 준비 단계</div>
<div class="step-description">수주 → Job No. 부여 → 담당자 배정<br>외주/자체제작 결정 → 각 부서 일정 수립</div>
</a>
<a href="demo/workflow-stage-2.html" class="workflow-step">
<div class="step-number">2</div>
<div class="step-title">🚀 프로젝트 진행 (발주)</div>
<div class="step-description">외주: 도면 → 견적 → 발주 → 관리<br>자체: BOM → 구매신청 → 발주 → 입고</div>
</a>
<a href="demo/workflow-stage-3.html" class="workflow-step">
<div class="step-number">3</div>
<div class="step-title">🛠️ 제작 단계</div>
<div class="step-description">외주: 업체 공정표 관리 + NCR 처리<br>자체: 생산팀 공정관리 + 자재 인수인계</div>
</a>
<a href="demo/workflow-stage-4.html" class="workflow-step">
<div class="step-number">4</div>
<div class="step-title">🏢 생산회의</div>
<div class="step-description">제작 전/중 현황 관리<br>공정표 표시 개선 + 실시간 모니터링</div>
</a>
<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>

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

@@ -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단계 시스템)** ### 1. **📋 프로젝트 정보 등록 (2단계 시스템)**
@@ -626,6 +679,20 @@ const qualityData = {
### **🎬 시나리오: "ABC 공장 배관공사 프로젝트"** ### **🎬 시나리오: "ABC 공장 배관공사 프로젝트"**
#### **Scene 0: 프로젝트 선택** (기능 0)
1. **TK Project 메인 화면 진입**
- 중앙에 큰 "TK Project" 타이틀 표시
- "프로젝트를 선택하여 관리를 시작하세요" 안내
2. **프로젝트 선택**
- HTML Select 박스 클릭
- "ABC 공장 배관공사 (TK-2024-015)" 선택
3. **액션 버튼 표시**
- 🏭 생산회의록, 📦 입고 검수, 🔧 생산팀 작업 버튼 나타남
- 선택된 프로젝트 정보 세션 스토리지에 저장
4. **워크플로우 시작**
- 원하는 기능 버튼 클릭하여 해당 페이지로 이동
- 선택된 프로젝트 컨텍스트 유지
#### **Scene 1: 프로젝트 등록** (기능 1) #### **Scene 1: 프로젝트 등록** (기능 1)
##### **1단계: 프로젝트 생성 및 승인** ##### **1단계: 프로젝트 생성 및 승인**
@@ -649,7 +716,7 @@ const qualityData = {
4. 리스크 분석 완료 → **정보 업데이트** (납품까지 지속적 관리) 4. 리스크 분석 완료 → **정보 업데이트** (납품까지 지속적 관리)
#### **Scene 2: 생산회의** (기능 2) #### **Scene 2: 생산회의** (기능 2)
1. **프로젝트 TK-2024-015 선택** → 생산회의록 화면 진입 1. **프로젝트 관리 화면에서 🏭 생산회의록 버튼 클릭** → 생산회의록 화면 진입
2. **공정표 확인** (상단) 2. **공정표 확인** (상단)
- 설계: 100% 완료 ✅ - 설계: 100% 완료 ✅
- 구매: 85% 진행중 🟡 - 구매: 85% 진행중 🟡
@@ -734,6 +801,7 @@ const qualityData = {
## 📋 개발 우선순위 ## 📋 개발 우선순위
### **Phase 1: 기본 기능 (시연용)** ### **Phase 1: 기본 기능 (시연용)**
- [x] 프로젝트 관리 (워크플로우 시작점)
- [x] 프로젝트 등록 시스템 - [x] 프로젝트 등록 시스템
- [x] 생산회의록 대시보드 - [x] 생산회의록 대시보드
- [x] 입고 관리 시스템 - [x] 입고 관리 시스템