# 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 스타일 기반 프로젝트 관리 시스템*