- 외주/자체제작 프로세스를 가로에서 세로 방향으로 변경
- 이모지 제거하여 전문적인 프레젠테이션 스타일 적용
- 화살표 방향을 → 에서 ↓ 로 변경
- 불필요한 견적 요청 문구 제거
- 자체제작 프로세스 최적화: 8단계 → 7단계로 단순화
- 최종 검사를 검수 및 보관 단계에 통합
- 상세한 프로세스 내용 복원 및 가독성 향상
- presentation.html에 워크플로우 단계별 링크 추가
- 워크플로우 상세 페이지들의 뒤로가기 버튼을 presentation.html로 연결
- workflow-stage-1.html에 표준 스펙 관리 시스템 및 외주 vs 자체제작 결정 시스템 추가
- workflow-stage-4.html에 프로젝트 일정 캘린더 추가 (8월 자재 입고 일정 포함)
- 워크플로우 페이지 스크롤 문제 해결 (CSS 수정)
- 캘린더 테이블 기반으로 재구성하여 정확한 달력 형태 구현
- 워크플로우 개요 페이지에 플로우차트 형태 추가 (3x2 그리드)
- 각 워크플로우 단계별 독립 HTML 페이지 생성 (1-4단계)
- 클릭 가능한 워크플로우 박스와 상세 페이지 연결
- DevonThink 스타일 적용 및 반응형 디자인
- 구매/물류팀 용어 통일 및 프레젠테이션 업데이트
핵심 변경사항:
✅ 구글 검색창 스타일의 깔끔한 프로젝트 관리 페이지 완성
- 복잡한 카드 리스트 → 중앙 집중식 드롭다운 선택기
- 미니멀한 디자인으로 사용성 대폭 개선
🎯 구글 스타일 드롭다운 시스템
- 중앙 배치된 둥근 검색창 스타일 드롭다운
- 클릭 시 부드러운 확장 애니메이션 (둥근→사각형)
- 내장된 실시간 검색 기능 (프로젝트명/Job No./고객사)
- 외부 클릭 시 자동 닫힘
🎨 DevonThink 미니멀 디자인
- 중앙 정렬된 대형 'TK Project' 타이틀 (48px, 얇은 폰트)
- 충분한 여백과 깔끔한 레이아웃 (80vh 중앙 배치)
- 회색/파란색 위주의 절제된 색상 팔레트
- 부드러운 그림자와 호버 효과
📋 스마트 프로젝트 정보 표시
- 드롭다운 옵션: 프로젝트명 + Job No. + 고객사 + 상태
- 선택 후 상세 정보 카드 자동 표시 (fadeInUp 애니메이션)
- 프로젝트별 맞춤 액션 버튼 (상태에 따른 활성화/비활성화)
- 세션 스토리지 자동 저장
⚡ 인터랙티브 기능
- 드롭다운 열기 시 검색창 자동 포커스
- 실시간 필터링 (타이핑과 동시에 옵션 필터링)
- 키보드 네비게이션 지원 (Enter, Escape)
- 상태별 버튼 동적 업데이트
🔄 상태별 버튼 로직
- 계획 단계: 생산회의록 비활성화
- 진행중: 모든 기능 활성화
- 제작중: 생산회의록 + 프로젝트 관리 활성화
- 완료: 모든 버튼 '(완료)' 표시로 변경
📊 하단 통계 표시
- 간소화된 4개 통계 (전체/진행중/제작중/지연)
- 중앙 정렬된 깔끔한 배치
- 큰 숫자 + 작은 라벨 구조
💾 하드코딩 데이터 구조화
- getProjectData() 함수로 중앙 관리
- 4개 프로젝트 완전한 정보 (고객사, 납기, PM, 상태 등)
- 상태별 클래스와 진행률 포함
🎭 애니메이션 효과
- 페이지 로드 시 순차적 fade-in
- 드롭다운 화살표 회전 (180도)
- 프로젝트 정보 카드 fadeInUp
- 호버 시 그림자 확대
시연 준비: 구글 수준의 직관적이고 깔끔한 프로젝트 선택 시스템 완성
핵심 구현사항:
✅ 전체 워크플로우의 시작점이 되는 프로젝트 관리 페이지 완성
- 사이드바에 '프로젝트 관리' 메뉴 추가 (최상단 배치)
- 기본 페이지를 프로젝트 관리로 변경
🎯 프로젝트 선택 시스템
- 4개 샘플 프로젝트 (계획/진행중/제작중/완료 상태)
- 각 프로젝트별 상세 정보 (고객사, 납기일, 납품방식, 담당PM)
- 5단계 진행률 표시 (설계→구매→제작→검사→납품)
- 상태별 색상 구분 및 진행률 바
🔍 검색 및 필터 기능
- 프로젝트명/Job No./고객사 통합 검색
- 상태별 필터 (전체/계획/진행중/제작중/완료)
- 실시간 통계 표시 (전체 12개, 진행중 8개, 제작중 3개, 지연 1개)
- 검색 결과 카운트 알림
🎨 카드 기반 UI 디자인
- DevonThink 스타일 프로젝트 카드
- 호버 효과 (lift-up 애니메이션)
- 상태별 좌측 컬러 바 (파란색/회색/노랑/초록)
- 반응형 그리드 레이아웃 (2열→1열)
⚡ 인터랙티브 기능
- 프로젝트 선택 시 세션 스토리지 저장
- 각 프로젝트별 맞춤 액션 버튼
- 제작중: '프로젝트 관리' + '생산회의록'
- 계획중: '프로젝트 관리' + 비활성화된 '생산회의록'
- 진행중: '프로젝트 관리' + '입고 검수'
- 완료: '프로젝트 보기' + '완료됨'
📊 하드코딩 데이터
- TK-2024-015: ABC 공장 배관공사 (제작중 75%)
- TK-2024-016: DEF 플랜트 배관 설치 (계획 25%)
- TK-2024-017: GHI 정유 공장 개보수 (진행중 60%)
- TK-2024-012: JKL 화학 공장 신설 (완료 100%)
🔄 워크플로우 연결
- 프로젝트 선택 → 각 기능 페이지로 연결
- 선택된 프로젝트 정보 전역 공유
- 다른 페이지에서 프로젝트 컨텍스트 유지
시연 준비: 전체 워크플로우의 중심이 되는 프로젝트 관리 시스템 완성
핵심 변경사항:
✅ 간단한 프로젝트 등록 요청 시스템으로 변경
- 복잡한 2단계 시스템 → 간단한 요청 폼으로 단순화
- 필수 입력 항목만 4개로 축소
📋 새로운 입력 항목 (4개만)
1. 프로젝트명 *
2. 고객사 정보 (엔드유저 * + EPC/실제고객사)
3. 납기일 *
4. 납품방식 * (현장납품/공장인도/부분납품)
🎯 Job No. 자동 생성 시스템
- TK-년도-순번 규칙 (예: TK-2024-156)
- 실시간 미리보기 기능
- 등록 승인 후 자동 부여
🎨 UI/UX 개선
- 좌측: 간단한 등록 폼
- 우측: 최근 등록 요청 현황 리스트
- 상태별 색상 구분 (승인완료/검토중/추가정보필요)
- 반응형 디자인 (모바일 지원)
⚡ 인터랙티브 기능
- 실시간 Job No. 미리보기
- 폼 검증 및 제출 처리
- 새 요청 자동 리스트 추가
- 애니메이션 효과 (fade-in, slide-in)
- 초기화 버튼 기능
💾 하드코딩 데이터
- 기존 요청 3개 (승인완료/검토중/보류)
- 실제 업무 시나리오 반영
- 다양한 고객사 유형 (엔드유저 vs EPC)
시연 준비: 간단하고 직관적인 프로젝트 등록 시스템 완성
핵심 구현사항:
✅ 4개 핵심 기능 페이지 완성
- 📋 프로젝트 정보 등록 (2단계 시스템)
- 🏭 생산회의록 시스템 (4구역 레이아웃)
- 📦 입고 검수 & 보관 관리
- 🔧 생산팀 작업 관리 (그룹장용)
🎨 DevonThink 스타일 디자인
- 회색(#F8F9FA~#202124) + 하늘색(#4A90E2) 컬러 팔레트
- 미니멀하고 전문적인 UI/UX
- 반응형 디자인 (데스크톱/태블릿/모바일)
- CSS Grid + Flexbox 레이아웃
⚡ 인터랙티브 기능
- 페이지 전환 애니메이션 (fade-in, slide-in)
- 버튼 클릭 상태 변경 및 알림 시스템
- 진행률 슬라이더, 창고 선반 선택
- 키보드 단축키 (Ctrl+1~4)
📁 파일 구조
- demo/index.html (메인 HTML)
- demo/styles/devonthink.css (DevonThink 스타일)
- demo/styles/main.css (기본 CSS + 유틸리티)
- demo/scripts/main.js (JavaScript 기능)
- demo/README.md (사용법 및 시연 시나리오)
💾 하드코딩 데이터
- TK-2024-015 프로젝트 (ABC 공장 배관공사)
- 공정표, 일정, 자재 현황, 이슈 사항
- 실제 업무 시나리오 반영
🎯 시연 준비 완료
- 브라우저에서 index.html 실행 가능
- 4개 페이지 완전 구현
- 실무진 시연용 데모 완성
핵심 수정사항:
- 생산팀은 구매 요청/신청을 하지 않음 (설계팀 담당)
- 단순 확인 기능으로 역할 명확화
수정된 기능:
📦 자재 확인 (확인만 가능)
1. 물건이 있냐 없냐 → 6단계 상태 확인
🟢 사용가능 🔵 인수완료 🟡 입고완료
🟠 발주중 🔴 구매요청 ⚫ 미요청
2. 있으면 어디에 있냐/어떤 상태냐
- 위치 정보: A-3-상단 (창고 구역-선반-위치)
- 진행 상황: 구매 진행 중, 입고예정일 등
3. 없으면 데일리체크에 등록
- 부족 자재 발견 → 데일리 체크 이슈 등록
- 설계팀/구매팀 정보 전달용 (직접 요청 X)
업무 플로우 수정:
자재 요청 → 데일리 체크 등록
구매팀 자동 알림 → 정보 전달용 기록
하드코딩 데이터 및 시연 시나리오도
실제 업무 역할에 맞게 수정
핵심 개선사항:
- TK-FB 스타일 유지하면서 그룹장 업무에 특화
- 일일작업현황 + 자재확인 2대 핵심 기능 집중
새로운 구조:
📝 일일 작업 현황 입력 (TK-FB 스타일)
- 그룹별 작업 현황 (인원, 프로젝트, 작업내용)
- 진행률, 난이도, 완료예정일 관리
- 이슈 발생시 즉시 기록 (자재부족, 품질, 안전 등)
📦 자재 확인 기능
- Job No. 기반 BOM 자동 로드
- 필요 vs 보유 자재 대조표
- 5단계 상태 추적 (사용가능→인수완료→입고완료→입고예정→미발주)
- 창고 위치 정보 및 실시간 업데이트
🔍 자재 요청 및 알림
- 부족 자재 긴급 요청 시스템
- QR코드 스캔 인수 처리
- 대체재 검색 및 호환성 표시
실무 반영:
- 그룹장 일일 업무 플로우 완전 반영
- 자재 부족시 즉시 대응 시스템
- 이슈 발생 → 기록 → 알림 → 해결 추적
- 용접팀 실제 작업 시나리오 (엘보 부족 등)
시연 시나리오도 그룹장 관점으로 업데이트
핵심 개선사항:
- 가상 창고 지도 → 발주 정보 연동 시스템으로 변경
- 구매 담당자 중심의 실무 프로세스 반영
새로운 구조:
📋 상단: 발주 연동 입고 대시보드 (PO 정보 자동 연동)
🔍 중앙: 3단계 검수 프로세스 (입고확인→검수진행→결과처리)
📍 하단: 보관 위치 관리 (QR코드, 라벨 출력)
🔄 추가: 인수인계 관리 (생산팀과의 상태 연동)
실무 반영:
- 발주번호(PO) 기반 품목 추적
- 품목별 맞춤 검수 체크리스트
- 5단계 상태 관리 (입고대기→검수중→보관대기→보관중→인수완료)
- 부분인수 처리 및 잔량 관리
- NCR 발행 및 조건부 합격 처리
구매 담당자 업무 플로우:
발주완료 → 입고모니터링 → 검수진행 → 보관위치지정 →
생산팀알림 → 인수인계 → 상태업데이트
시연 시나리오도 새 시스템에 맞게 업데이트
핵심 개선사항:
- 데일리 체크 개념 수정: 문제 발생 즉시 기록 → 해결 추적
- 생산회의록을 실용적 4구역 레이아웃으로 재설계
새로운 구조:
📋 상단: 프로젝트 공정표 (Gantt Chart 스타일)
📅 중앙: 캘린더 기반 마감일자 관리 (메모 기능)
📦 우측: 입고 예정 품목 (상태별 색상 구분)
⚠️ 하단: Follow-up 리스트 (우선순위별 미해결 사항)
실무 반영:
- 도장 외주, 검사 일정 등 실제 업무 시나리오
- 지연 품목 추적 및 알림 시스템
- 담당자별 액션 아이템 관리
- 데일리 체크는 별도 페이지로 분리 예정
시연 시나리오도 새 시스템에 맞게 업데이트
핵심 변경사항:
- 기본정보 입력 완료 = 프로젝트 승인 완료 (프로젝트 시작)
- 세부사양 입력은 프로젝트 진행 중 지속적으로 업데이트 가능
- 킥오프 미팅, 기술사양, 품질요구사항 등은 선택적/지속적 관리
- 납품까지 전 기간에 걸쳐 필요시 언제든 정보 업데이트
워크플로우 재정의:
Step 1: 프로젝트 생성 및 승인 (영업) ✅
Step 2-4: 지속적 정보 관리 (진행 중)
1단계: 기본 정보 입력 (영업팀)
- 프로젝트명, 고객사, 계약금액
- 납기일, 납품방식 추가
- Job No. 자동 생성, 담당자 배정
2단계: 세부 사양 입력 (PM 주도)
- 킥오프 미팅 결과
- 기술 사양서 (User Spec)
- 품질 요구사항, 리스크 분석
- 4단계 워크플로우 정의
시연 시나리오도 2단계 시스템에 맞게 업데이트
