TK-Project/demo

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. 또는 로컬 서버 실행:

   # 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: 기본 기능 (완료)

• 4개 핵심 페이지 구현
• DevonThink 스타일 적용
• 인터랙티브 기능 추가

Phase 2: 고도화 (예정)

• 실제 데이터베이스 연동
• 사용자 인증 시스템
• 실시간 데이터 업데이트

Phase 3: 확장 (예정)

• 모바일 앱 개발
• API 연동
• 고급 분석 기능

---

TK Project Demo v1.0
DevonThink 스타일 기반 프로젝트 관리 시스템