hyungi/TK-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝 프로젝트 등록 페이지 간소화 및 개선

Browse Source 
핵심 변경사항:
✅ 간단한 프로젝트 등록 요청 시스템으로 변경
- 복잡한 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)

시연 준비: 간단하고 직관적인 프로젝트 등록 시스템 완성
This commit is contained in:
Hyungi Ahn
2025-09-15 11:43:43 +09:00
parent d1d52e4f50
commit b83654ba25
4 changed files with 425 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
demo/index.html
View File

@@ -67,114 +67,125 @@
<!-- 프로젝트 등록 페이지 -->
<div id="project-registration" class="page active">
<div class="page-header">
<h2>프로젝트 정보 등록</h2>
<p class="page-description">새로운 프로젝트를 등록하고 기본 정보를 입력합니다.</p>
<h2>프로젝트 등록 요청</h2>
<p class="page-description">새로운 프로젝트의 기본 정보를 입력하여 등록을 요청합니다.</p>
</div>
<div class="content-grid">
<!-- 1단계: 기본 정보 -->
<div class="project-registration-container">
<div class="card">
<div class="card-header">
<h3>1단계: 프로젝트 생성</h3>
<span class="status-badge status-active">진행중</span>
<h3>프로젝트 기본 정보</h3>
<span class="status-badge status-active">신규 등록</span>
</div>
<div class="card-content">
<form class="form-grid">
<form class="project-form">
<div class="form-group">
<label>프로젝트명 *</label>
<input type="text" value="ABC 공장 배관공사" class="form-input">
<input type="text" id="project-name" placeholder="예: ABC 공장 배관공사" class="form-input" required>
</div>
<div class="form-group">
<label>고객사 *</label>
<input type="text" value="ABC 케미칼" class="form-input">
<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="form-group">
<label>계약금액</label>
<input type="text" value="150,000,000원" class="form-input">
<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="form-group">
<label>납기일 *</label>
<input type="date" value="2024-03-30" class="form-input">
<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-group">
<label>납품방식</label>
<select class="form-select">
<option value="현장납품" selected>현장납품</option>
<option value="공장인도">공장인도</option>
<option value="부분납품">부분납품</option>
</select>
</div>
<div class="form-group">
<label>제작방식</label>
<select class="form-select">
<option value="자체제작" selected>자체제작</option>
<option value="외주제작">외주제작</option>
</select>
<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 class="auto-generated">
<div class="generated-item">
<span class="label">자동 생성된 Job No.</span>
<span class="value">TK-2024-015</span>
</div>
</div>
<button class="btn btn-primary">✅ 프로젝트 승인 완료</button>
</div>
</div>
<!-- 2단계: 세부 사양 -->
<!-- 등록 요청 현황 -->
<div class="card">
<div class="card-header">
<h3>2단계: 세부 사양 입력</h3>
<span class="status-badge status-optional">선택적</span>
<h3>최근 등록 요청 현황</h3>
</div>
<div class="card-content">
<div class="info-section">
<h4>킥오프 미팅 결과</h4>
<div class="info-grid">
<div class="info-item">
<span class="info-label">미팅 일자</span>
<span class="info-value">2024-01-20</span>
<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="info-item">
<span class="info-label">참석자</span>
<span class="info-value">김영업, 이PM, 박설계, 최고객</span>
<div class="request-status">
<span class="status-badge status-completed">승인완료</span>
<span class="job-no">TK-2024-015</span>
</div>
</div>
<div class="decisions">
<h5>주요 결정사항</h5>
<ul>
<li>압력등급 150LB로 확정</li>
<li>재질 SS316L로 변경</li>
</ul>
<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>
<div class="info-section">
<h4>기술 사양서</h4>
<div class="spec-grid">
<div class="spec-item">
<span class="spec-label">설계기준</span>
<span class="spec-value">ASME B31.3</span>
<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="spec-item">
<span class="spec-label">사용압력</span>
<span class="spec-value">10 bar</span>
</div>
<div class="spec-item">
<span class="spec-label">사용온도</span>
<span class="spec-value">80°C</span>
</div>
<div class="spec-item">
<span class="spec-label">유체</span>
<span class="spec-value">화학용매</span>
<div class="request-status">
<span class="status-badge status-warning">추가정보 필요</span>
<span class="job-no">보류</span>
</div>
</div>
</div>
<button class="btn btn-secondary">📝 세부사양 업데이트</button>
</div>
</div>
</div>