d1d52e4f50
핵심 구현사항: ✅ 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개 페이지 완전 구현 - 실무진 시연용 데모 완성
178 lines
5.7 KiB
Markdown
178 lines
5.7 KiB
Markdown
# TK Project - 시연회용 데모
|
|
|
|
## 📋 개요
|
|
TK Project 통합 프로젝트 관리 시스템의 시연회용 데모 페이지입니다.
|
|
DevonThink UI 스타일을 참조하여 회색과 하늘색 위주의 깔끔한 디자인으로 구현되었습니다.
|
|
|
|
## 🚀 핵심 기능 4선
|
|
|
|
### 1. 📋 프로젝트 정보 등록 (2단계 시스템)
|
|
- **1단계**: 프로젝트 생성 및 기본 정보 입력
|
|
- **2단계**: 세부 사양 입력 (킥오프 미팅, 기술 사양서)
|
|
- **특징**: Job No. 자동 생성, 프로젝트 승인 시스템
|
|
|
|
### 2. 🏭 생산회의록 시스템 (4구역 레이아웃)
|
|
- **상단**: 프로젝트 공정표 (Gantt Chart 스타일)
|
|
- **중앙 좌측**: 캘린더 기반 일정 관리
|
|
- **우측**: 입고 예정 품목 현황
|
|
- **하단**: Follow-up 리스트 (미해결 사항)
|
|
|
|
### 3. 📦 입고 검수 & 보관 관리
|
|
- **상단**: 발주 연동 입고 대시보드
|
|
- **중앙**: 3단계 검수 프로세스
|
|
- **하단**: 창고 구역 관리 및 인수인계 현황
|
|
|
|
### 4. 🔧 생산팀 작업 관리 (그룹장용)
|
|
- **좌측**: 일일 작업 현황 입력 (TK-FB 스타일)
|
|
- **우측**: 자재 확인 기능 (확인 전용)
|
|
- **특징**: 이슈 등록, 데일리 체크 연동
|
|
|
|
## 🎨 디자인 특징
|
|
|
|
### DevonThink 스타일
|
|
- **컬러 팔레트**: 회색(#F8F9FA ~ #202124), 하늘색(#4A90E2)
|
|
- **최소한의 색상 사용**: 깔끔하고 전문적인 느낌
|
|
- **그림자 효과**: 미묘한 그림자로 깊이감 표현
|
|
- **타이포그래피**: 시스템 폰트 사용으로 가독성 향상
|
|
|
|
### 반응형 디자인
|
|
- **데스크톱**: 사이드바 + 메인 컨텐츠 레이아웃
|
|
- **태블릿/모바일**: 스택형 레이아웃으로 자동 변환
|
|
- **그리드 시스템**: CSS Grid를 활용한 유연한 레이아웃
|
|
|
|
## 🖥️ 사용 방법
|
|
|
|
### 실행
|
|
1. `index.html` 파일을 웹 브라우저에서 열기
|
|
2. 또는 로컬 서버 실행:
|
|
```bash
|
|
# Python 3
|
|
python -m http.server 8000
|
|
|
|
# Node.js (http-server)
|
|
npx http-server
|
|
```
|
|
|
|
### 네비게이션
|
|
- **사이드바**: 각 기능별 페이지 이동
|
|
- **키보드 단축키**: Ctrl + 1~4 (페이지 전환)
|
|
- **반응형**: 모바일에서는 상하 스택 레이아웃
|
|
|
|
### 인터랙티브 기능
|
|
- **버튼 클릭**: 상태 변경 및 알림 표시
|
|
- **진행률 슬라이더**: 실시간 값 업데이트
|
|
- **창고 선반 선택**: 클릭으로 위치 지정
|
|
- **애니메이션**: 페이지 전환시 fade-in 효과
|
|
|
|
## 📁 파일 구조
|
|
```
|
|
demo/
|
|
├── index.html # 메인 HTML 파일
|
|
├── styles/
|
|
│ ├── devonthink.css # DevonThink 스타일 CSS
|
|
│ └── main.css # 기본 CSS 및 유틸리티
|
|
├── scripts/
|
|
│ └── main.js # JavaScript 기능
|
|
└── README.md # 이 파일
|
|
```
|
|
|
|
## 🎯 시연 시나리오
|
|
|
|
### Scene 1: 프로젝트 등록
|
|
1. 새 프로젝트 "ABC 공장 배관공사" 등록
|
|
2. Job No. TK-2024-015 자동 생성
|
|
3. 기본 정보 입력 → 프로젝트 승인
|
|
4. 세부 사양 입력 (킥오프 미팅 결과)
|
|
|
|
### Scene 2: 생산회의
|
|
1. 프로젝트 현황 대시보드 확인
|
|
2. 공정표에서 진행률 확인 (설계 100%, 구매 85%)
|
|
3. 캘린더 일정 확인 (도장 외주, 압력시험)
|
|
4. Follow-up 리스트에서 긴급 사항 확인
|
|
|
|
### Scene 3: 입고 검수
|
|
1. 발주 연동 대시보드에서 입고 예정 품목 확인
|
|
2. 검수 프로세스 진행 (입고확인 → 검수진행 → 결과처리)
|
|
3. 창고 구역에서 보관 위치 선택
|
|
4. 인수인계 현황 확인
|
|
|
|
### Scene 4: 생산팀 작업
|
|
1. 김그룹장 일일 작업 현황 입력
|
|
2. 자재 현황 확인 (BOM 조회)
|
|
3. 부족한 자재 발견 → 데일리 체크 기록
|
|
4. 가용 자재 인수 처리
|
|
|
|
## 💡 하드코딩 데이터
|
|
|
|
### 프로젝트 정보
|
|
- **Job No**: TK-2024-015
|
|
- **프로젝트명**: ABC 공장 배관공사
|
|
- **고객사**: ABC 케미칼
|
|
- **납기일**: 2024-03-30
|
|
|
|
### 자재 현황
|
|
- 파이프 4인치: 사용가능 (A-3-상단, 45EA)
|
|
- 엘보 4인치: 발주중 (입고예정 09/18)
|
|
- 플랜지 4인치: 미요청 (설계팀 대기)
|
|
- 밸브 2인치: 입고완료 (B-2-중단)
|
|
|
|
### 이슈 사항
|
|
- 14:30 자재부족: 엘보 4인치 10EA 부족
|
|
- 10:15 품질이슈: 용접부 기공 발견
|
|
|
|
## 🔧 기술 스택
|
|
|
|
### Frontend
|
|
- **HTML5**: 시맨틱 마크업
|
|
- **CSS3**: Grid, Flexbox, 애니메이션
|
|
- **Vanilla JavaScript**: ES6+ 문법 사용
|
|
|
|
### 스타일링
|
|
- **CSS Variables**: 일관된 컬러 시스템
|
|
- **CSS Grid**: 복잡한 레이아웃 구현
|
|
- **CSS Animations**: 부드러운 전환 효과
|
|
|
|
### 호환성
|
|
- **모던 브라우저**: Chrome, Firefox, Safari, Edge
|
|
- **반응형**: 모바일, 태블릿, 데스크톱
|
|
- **접근성**: 키보드 네비게이션 지원
|
|
|
|
## 📝 개발 노트
|
|
|
|
### 디자인 철학
|
|
- **미니멀리즘**: 불필요한 요소 제거
|
|
- **일관성**: 통일된 컴포넌트 시스템
|
|
- **사용성**: 직관적인 인터페이스
|
|
|
|
### 성능 최적화
|
|
- **CSS 최적화**: 효율적인 선택자 사용
|
|
- **JavaScript 최적화**: 이벤트 위임 패턴
|
|
- **이미지 최적화**: 아이콘은 이모지 사용
|
|
|
|
### 확장성
|
|
- **모듈화**: 기능별 함수 분리
|
|
- **데이터 분리**: 하드코딩 데이터 객체화
|
|
- **컴포넌트화**: 재사용 가능한 UI 요소
|
|
|
|
## 🚀 향후 계획
|
|
|
|
### Phase 1: 기본 기능 (완료)
|
|
- [x] 4개 핵심 페이지 구현
|
|
- [x] DevonThink 스타일 적용
|
|
- [x] 인터랙티브 기능 추가
|
|
|
|
### Phase 2: 고도화 (예정)
|
|
- [ ] 실제 데이터베이스 연동
|
|
- [ ] 사용자 인증 시스템
|
|
- [ ] 실시간 데이터 업데이트
|
|
|
|
### Phase 3: 확장 (예정)
|
|
- [ ] 모바일 앱 개발
|
|
- [ ] API 연동
|
|
- [ ] 고급 분석 기능
|
|
|
|
---
|
|
|
|
**TK Project Demo v1.0**
|
|
*DevonThink 스타일 기반 프로젝트 관리 시스템*
|