Files
TK-Project/demo/index.html
Hyungi Ahn b83654ba25 📝 프로젝트 등록 페이지 간소화 및 개선
핵심 변경사항:
 간단한 프로젝트 등록 요청 시스템으로 변경
- 복잡한 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)

시연 준비: 간단하고 직관적인 프로젝트 등록 시스템 완성
2025-09-15 11:43:43 +09:00

642 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/devonthink.css">
</head>
<body>
<!-- 사이드바 -->
<div class="sidebar">
<div class="sidebar-header">
<h1>TK Project</h1>
<p class="version">v1.0 Demo</p>
</div>
<nav class="sidebar-nav">
<div class="nav-section">
<h3>프로젝트 관리</h3>
<ul>
<li><a href="#" onclick="showPage('project-registration')" class="nav-item active">
<span class="nav-icon">📋</span>
프로젝트 등록
</a></li>
<li><a href="#" onclick="showPage('production-meeting')" class="nav-item">
<span class="nav-icon">🏭</span>
생산회의록
</a></li>
</ul>
</div>
<div class="nav-section">
<h3>자재 관리</h3>
<ul>
<li><a href="#" onclick="showPage('incoming-inspection')" class="nav-item">
<span class="nav-icon">📦</span>
입고 검수
</a></li>
</ul>
</div>
<div class="nav-section">
<h3>생산 관리</h3>
<ul>
<li><a href="#" onclick="showPage('production-work')" class="nav-item">
<span class="nav-icon">🔧</span>
생산팀 작업
</a></li>
</ul>
</div>
</nav>
<div class="sidebar-footer">
<div class="user-info">
<div class="user-avatar"></div>
<div class="user-details">
<div class="user-name">김그룹장</div>
<div class="user-role">생산팀</div>
</div>
</div>
</div>
</div>
<!-- 메인 컨텐츠 -->
<div class="main-content">
<!-- 프로젝트 등록 페이지 -->
<div id="project-registration" class="page active">
<div class="page-header">
<h2>프로젝트 등록 요청</h2>
<p class="page-description">새로운 프로젝트의 기본 정보를 입력하여 등록을 요청합니다.</p>
</div>
<div class="project-registration-container">
<div class="card">
<div class="card-header">
<h3>프로젝트 기본 정보</h3>
<span class="status-badge status-active">신규 등록</span>
</div>
<div class="card-content">
<form class="project-form">
<div class="form-group">
<label>프로젝트명 *</label>
<input type="text" id="project-name" placeholder="예: ABC 공장 배관공사" class="form-input" required>
</div>
<div class="customer-section">
<h4>고객사 정보</h4>
<div class="customer-grid">
<div class="form-group">
<label>엔드유저 *</label>
<input type="text" id="end-user" placeholder="예: ABC 케미칼" class="form-input" required>
</div>
<div class="form-group">
<label>EPC / 실제 고객사</label>
<input type="text" id="epc-customer" placeholder="예: 대한엔지니어링 (선택사항)" class="form-input">
</div>
</div>
</div>
<div class="delivery-section">
<div class="form-row">
<div class="form-group">
<label>납기일 *</label>
<input type="date" id="delivery-date" class="form-input" required>
</div>
<div class="form-group">
<label>납품방식 *</label>
<select id="delivery-method" class="form-select" required>
<option value="">선택하세요</option>
<option value="현장납품">현장납품</option>
<option value="공장인도">공장인도</option>
<option value="부분납품">부분납품</option>
</select>
</div>
</div>
</div>
<div class="auto-generated">
<div class="generated-preview">
<span class="label">생성될 Job No. (예시)</span>
<span class="value" id="preview-job-no">TK-2024-XXX</span>
</div>
<div class="generation-rule">
<small>* Job No.는 등록 승인 후 자동으로 부여됩니다 (TK-년도-순번)</small>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="clearForm()">🔄 초기화</button>
<button type="submit" class="btn btn-primary" id="submit-btn">📝 프로젝트 등록 요청</button>
</div>
</form>
</div>
</div>
<!-- 등록 요청 현황 -->
<div class="card">
<div class="card-header">
<h3>최근 등록 요청 현황</h3>
</div>
<div class="card-content">
<div class="request-list">
<div class="request-item status-approved">
<div class="request-info">
<div class="request-title">ABC 공장 배관공사</div>
<div class="request-details">
<span class="customer">ABC 케미칼</span>
<span class="delivery">현장납품</span>
<span class="date">납기: 2024-03-30</span>
</div>
</div>
<div class="request-status">
<span class="status-badge status-completed">승인완료</span>
<span class="job-no">TK-2024-015</span>
</div>
</div>
<div class="request-item status-pending">
<div class="request-info">
<div class="request-title">DEF 플랜트 배관 설치</div>
<div class="request-details">
<span class="customer">DEF 화학</span>
<span class="delivery">공장인도</span>
<span class="date">납기: 2024-04-15</span>
</div>
</div>
<div class="request-status">
<span class="status-badge status-pending">검토중</span>
<span class="job-no">대기중</span>
</div>
</div>
<div class="request-item status-review">
<div class="request-info">
<div class="request-title">GHI 정유 공장 개보수</div>
<div class="request-details">
<span class="customer">GHI 정유 / 한국엔지니어링</span>
<span class="delivery">부분납품</span>
<span class="date">납기: 2024-05-20</span>
</div>
</div>
<div class="request-status">
<span class="status-badge status-warning">추가정보 필요</span>
<span class="job-no">보류</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 생산회의록 페이지 -->
<div id="production-meeting" class="page">
<div class="page-header">
<h2>생산회의록 시스템</h2>
<p class="page-description">TK-2024-015 (ABC 공장 배관공사) 프로젝트 현황</p>
</div>
<!-- 공정표 (상단) -->
<div class="process-chart">
<h3>프로젝트 공정표</h3>
<div class="gantt-container">
<div class="process-item completed">
<div class="process-info">
<span class="process-name">설계</span>
<span class="process-responsible">박설계</span>
</div>
<div class="process-bar">
<div class="progress-fill" style="width: 100%"></div>
<span class="progress-text">100%</span>
</div>
<span class="process-date">2024-02-15</span>
</div>
<div class="process-item in-progress">
<div class="process-info">
<span class="process-name">구매</span>
<span class="process-responsible">김구매</span>
</div>
<div class="process-bar">
<div class="progress-fill" style="width: 85%"></div>
<span class="progress-text">85%</span>
</div>
<span class="process-date">2024-02-28</span>
</div>
<div class="process-item in-progress">
<div class="process-info">
<span class="process-name">제작</span>
<span class="process-responsible">이생산</span>
</div>
<div class="process-bar">
<div class="progress-fill" style="width: 60%"></div>
<span class="progress-text">60%</span>
</div>
<span class="process-date">2024-03-20</span>
</div>
<div class="process-item pending">
<div class="process-info">
<span class="process-name">검사</span>
<span class="process-responsible">최품질</span>
</div>
<div class="process-bar">
<div class="progress-fill" style="width: 0%"></div>
<span class="progress-text">대기</span>
</div>
<span class="process-date">2024-03-25</span>
</div>
</div>
</div>
<div class="meeting-layout">
<!-- 캘린더 일정 (중앙 좌측) -->
<div class="schedule-section">
<h3>캘린더 일정</h3>
<div class="schedule-list">
<div class="schedule-item urgent">
<div class="schedule-date">09/20</div>
<div class="schedule-content">
<div class="schedule-title">도장 작업 출고</div>
<div class="schedule-type">외주출고</div>
<div class="schedule-memo">A구역 파이프 20본, B구역 밸브 5개</div>
</div>
</div>
<div class="schedule-item normal">
<div class="schedule-date">09/22</div>
<div class="schedule-content">
<div class="schedule-title">압력시험</div>
<div class="schedule-type">검사일정</div>
<div class="schedule-memo">시험압력: 15bar, 30분간 유지</div>
</div>
</div>
</div>
</div>
<!-- 입고 예정 품목 (우측) -->
<div class="delivery-section">
<h3>입고 예정 품목</h3>
<div class="delivery-list">
<div class="delivery-item completed">
<span class="delivery-status"></span>
<div class="delivery-info">
<div class="delivery-name">파이프 4인치 x 50EA</div>
<div class="delivery-date">입고완료 - 09/10</div>
</div>
</div>
<div class="delivery-item warning">
<span class="delivery-status">🟡</span>
<div class="delivery-info">
<div class="delivery-name">밸브 2인치 x 10EA</div>
<div class="delivery-date">입고예정 - 09/16</div>
</div>
</div>
<div class="delivery-item delayed">
<span class="delivery-status">🔴</span>
<div class="delivery-info">
<div class="delivery-name">엘보 4인치 x 20EA</div>
<div class="delivery-date">지연 - 09/12 → 09/18</div>
</div>
</div>
</div>
</div>
</div>
<!-- Follow-up 리스트 (하단) -->
<div class="followup-section">
<h3>Follow-up 리스트</h3>
<div class="followup-list">
<div class="followup-item priority-high">
<div class="followup-priority">🔴 긴급</div>
<div class="followup-content">
<div class="followup-title">밸브 A 납기 지연 대응</div>
<div class="followup-description">주 공급업체 생산 지연으로 대체 업체 검토 필요</div>
<div class="followup-meta">
<span class="followup-responsible">김구매</span>
<span class="followup-date">등록: 09/10 | 예상해결: 09/17</span>
</div>
</div>
<div class="followup-status">진행중</div>
</div>
<div class="followup-item priority-medium">
<div class="followup-priority">🟡 높음</div>
<div class="followup-content">
<div class="followup-title">용접 검사 일정 조정</div>
<div class="followup-description">고객사 일정 변경으로 검사일 재조정 필요</div>
<div class="followup-meta">
<span class="followup-responsible">최품질</span>
<span class="followup-date">등록: 09/12 | 예상해결: 09/20</span>
</div>
</div>
<div class="followup-status">검토중</div>
</div>
</div>
</div>
</div>
<!-- 입고 검수 페이지 -->
<div id="incoming-inspection" class="page">
<div class="page-header">
<h2>입고 검수 & 보관 관리</h2>
<p class="page-description">발주 정보 연동을 통한 입고 처리 및 보관 관리</p>
</div>
<!-- 발주 연동 대시보드 (상단) -->
<div class="purchase-dashboard">
<h3>발주 연동 입고 대시보드</h3>
<div class="purchase-list">
<div class="purchase-item status-pending">
<div class="purchase-info">
<div class="purchase-header">
<span class="po-number">PO-2024-0156</span>
<span class="purchase-status status-pending">입고대기</span>
</div>
<div class="purchase-details">
<div class="item-name">스테인리스 파이프 4인치 SCH40</div>
<div class="item-meta">수량: 50EA | 공급업체: 대한파이프 | 담당: 김구매</div>
<div class="item-dates">발주일: 2024-09-01 | 예정일: 2024-09-15</div>
</div>
</div>
<button class="btn btn-sm btn-primary">검수 시작</button>
</div>
<div class="purchase-item status-inspecting">
<div class="purchase-info">
<div class="purchase-header">
<span class="po-number">PO-2024-0157</span>
<span class="purchase-status status-inspecting">검수중</span>
</div>
<div class="purchase-details">
<div class="item-name">게이트밸브 2인치 150LB</div>
<div class="item-meta">수량: 10EA | 공급업체: 코리아밸브 | 담당: 김구매</div>
<div class="item-dates">발주일: 2024-09-05 | 예정일: 2024-09-16</div>
</div>
</div>
<button class="btn btn-sm btn-warning">검수 진행중</button>
</div>
</div>
</div>
<div class="inspection-layout">
<!-- 검수 프로세스 (좌측) -->
<div class="inspection-process">
<h3>입고 검수 프로세스</h3>
<div class="process-steps">
<div class="step completed">
<div class="step-number">1</div>
<div class="step-content">
<h4>입고 확인</h4>
<ul class="checklist">
<li class="checked">✅ 납품서 확인</li>
<li class="checked">✅ 검사성적서 확인</li>
<li class="checked">✅ 포장 상태 체크</li>
</ul>
</div>
</div>
<div class="step active">
<div class="step-number">2</div>
<div class="step-content">
<h4>검수 진행</h4>
<ul class="checklist">
<li class="checked">✅ 수량 검수 (10/10 EA)</li>
<li class="checked">✅ 외관 검사</li>
<li class="active">🔄 규격 검사 진행중</li>
<li>📷 사진 촬영 대기</li>
</ul>
</div>
</div>
<div class="step pending">
<div class="step-number">3</div>
<div class="step-content">
<h4>검수 결과</h4>
<div class="result-options">
<button class="btn btn-success btn-sm">✅ 합격</button>
<button class="btn btn-danger btn-sm">❌ 불합격</button>
<button class="btn btn-warning btn-sm">📝 조건부 합격</button>
</div>
</div>
</div>
</div>
</div>
<!-- 보관 위치 관리 (우측) -->
<div class="storage-management">
<h3>보관 위치 관리</h3>
<div class="warehouse-zones">
<div class="zone-item">
<div class="zone-header">
<span class="zone-name">A구역 (파이프류)</span>
<span class="zone-capacity">75/100</span>
</div>
<div class="zone-shelves">
<div class="shelf available">A-1</div>
<div class="shelf occupied">A-2</div>
<div class="shelf available">A-3</div>
<div class="shelf occupied">A-4</div>
<div class="shelf available">A-5</div>
</div>
</div>
<div class="zone-item">
<div class="zone-header">
<span class="zone-name">B구역 (밸브류)</span>
<span class="zone-capacity">45/80</span>
</div>
<div class="zone-shelves">
<div class="shelf available">B-1</div>
<div class="shelf available">B-2</div>
<div class="shelf occupied">B-3</div>
<div class="shelf available">B-4</div>
</div>
</div>
</div>
<div class="storage-actions">
<div class="selected-location">
<span class="label">선택된 위치:</span>
<span class="location">B-2-중단</span>
</div>
<button class="btn btn-primary">📍 위치 지정 완료</button>
<button class="btn btn-secondary">🏷️ QR코드 라벨 출력</button>
</div>
</div>
</div>
<!-- 인수인계 현황 -->
<div class="handover-status">
<h3>인수인계 현황</h3>
<div class="handover-list">
<div class="handover-item">
<div class="item-info">
<span class="item-name">파이프 4인치</span>
<span class="item-location">A-3-상단</span>
</div>
<div class="quantity-info">
<span class="total">전체: 50EA</span>
<span class="handed">인수: 30EA</span>
<span class="remaining">잔량: 20EA</span>
</div>
<span class="handover-status-badge status-partial">부분인수</span>
</div>
</div>
</div>
</div>
<!-- 생산팀 작업 관리 페이지 -->
<div id="production-work" class="page">
<div class="page-header">
<h2>생산팀 작업 관리</h2>
<p class="page-description">김그룹장 - 용접팀 일일 작업 현황</p>
</div>
<div class="work-layout">
<!-- 일일 작업 현황 (좌측) -->
<div class="daily-work">
<h3>일일 작업 현황 입력</h3>
<div class="work-form">
<div class="form-section">
<h4>기본 정보</h4>
<div class="form-grid">
<div class="form-group">
<label>프로젝트</label>
<select class="form-select">
<option selected>TK-2024-015 (ABC 공장 배관공사)</option>
<option>TK-2024-016 (DEF 플랜트)</option>
</select>
</div>
<div class="form-group">
<label>작업 인원</label>
<input type="number" value="5" class="form-input">
</div>
<div class="form-group">
<label>작업 내용</label>
<input type="text" value="메인 라인 파이프 용접" class="form-input">
</div>
<div class="form-group">
<label>진행률</label>
<div class="progress-input">
<input type="range" min="0" max="100" value="75" class="progress-slider">
<span class="progress-value">75%</span>
</div>
</div>
</div>
</div>
<div class="form-section">
<h4>이슈 사항</h4>
<div class="issue-list">
<div class="issue-item">
<div class="issue-header">
<span class="issue-time">14:30</span>
<span class="issue-type type-material">자재부족</span>
<span class="issue-urgency urgency-high">높음</span>
</div>
<div class="issue-content">
<div class="issue-description">엘보 4인치 10EA 부족으로 작업 중단</div>
<div class="issue-solution">구매팀에 긴급 요청, 대체재 검토</div>
</div>
</div>
<div class="issue-item">
<div class="issue-header">
<span class="issue-time">10:15</span>
<span class="issue-type type-quality">품질이슈</span>
<span class="issue-urgency urgency-medium">보통</span>
</div>
<div class="issue-content">
<div class="issue-description">용접부 기공 발견, 재작업 필요</div>
<div class="issue-solution">해당 부위 그라인딩 후 재용접</div>
</div>
</div>
</div>
<button class="btn btn-secondary"> 새 이슈 등록</button>
</div>
</div>
</div>
<!-- 자재 확인 (우측) -->
<div class="material-check">
<h3>자재 확인 기능</h3>
<div class="material-search">
<div class="search-input">
<input type="text" placeholder="Job No. 입력 (TK-2024-015)" class="form-input">
<button class="btn btn-primary">🔍 BOM 조회</button>
</div>
</div>
<div class="material-list">
<div class="material-item status-available">
<div class="material-info">
<div class="material-name">파이프 4인치 SCH40</div>
<div class="material-details">필요: 50EA | 위치: A-3-상단</div>
</div>
<div class="material-status">
<span class="status-badge status-available">🟢 사용가능</span>
<span class="material-qty">45EA</span>
</div>
</div>
<div class="material-item status-ordered">
<div class="material-info">
<div class="material-name">엘보 4인치 150LB</div>
<div class="material-details">필요: 20EA | 구매 진행 중</div>
</div>
<div class="material-status">
<span class="status-badge status-ordered">🟠 발주중</span>
<span class="material-date">입고예정: 09/18</span>
</div>
</div>
<div class="material-item status-not-requested">
<div class="material-info">
<div class="material-name">플랜지 4인치 150LB</div>
<div class="material-details">필요: 15EA | 설계팀 구매 요청 대기</div>
</div>
<div class="material-status">
<span class="status-badge status-not-requested">⚫ 미요청</span>
<span class="material-note">사양 확정 대기</span>
</div>
</div>
<div class="material-item status-ready">
<div class="material-info">
<div class="material-name">밸브 2인치 150LB</div>
<div class="material-details">필요: 5EA | 위치: B-2-중단</div>
</div>
<div class="material-status">
<span class="status-badge status-ready">🟡 입고완료</span>
<button class="btn btn-sm btn-primary">인수 처리</button>
</div>
</div>
</div>
<div class="material-actions">
<div class="action-note">
<p><strong>⚠️ 중요:</strong> 생산팀은 자재 요청을 하지 않습니다.</p>
<p>부족한 자재 발견시 → 데일리 체크에 이슈 등록</p>
</div>
<button class="btn btn-warning">📝 데일리 체크에 기록</button>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>