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

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

시연 준비: 간단하고 직관적인 프로젝트 등록 시스템 완성

demo/index.html

@@ -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="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>고객사 *</label>
-                                <input type="text" value="ABC 케미칼" class="form-input">
+                                        <label>EPC / 실제 고객사</label>
+                                        <input type="text" id="epc-customer" placeholder="예: 대한엔지니어링 (선택사항)" class="form-input">
                                     </div>
-                            <div class="form-group">
-                                <label>계약금액</label>
-                                <input type="text" value="150,000,000원" class="form-input">
                                 </div>
+                            </div>
+                            
+                            <div class="delivery-section">
+                                <div class="form-row">
                                     <div class="form-group">
                                         <label>납기일 *</label>
-                                <input type="date" value="2024-03-30" class="form-input">
+                                        <input type="date" id="delivery-date" class="form-input" required>
                                     </div>
                                     <div class="form-group">
-                                <label>납품방식</label>
-                                <select class="form-select">
-                                    <option value="현장납품" selected>현장납품</option>
+                                        <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 class="form-group">
-                                <label>제작방식</label>
-                                <select class="form-select">
-                                    <option value="자체제작" selected>자체제작</option>
-                                    <option value="외주제작">외주제작</option>
-                                </select>
                                 </div>
-                        </form>
+                            </div>
                             
                             <div class="auto-generated">
-                            <div class="generated-item">
-                                <span class="label">자동 생성된 Job No.</span>
-                                <span class="value">TK-2024-015</span>
+                                <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>
                             
-                        <button class="btn btn-primary">✅ 프로젝트 승인 완료</button>
+                            <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>
                 
-                <!-- 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>
-                                <div class="info-item">
-                                    <span class="info-label">참석자</span>
-                                    <span class="info-value">김영업, 이PM, 박설계, 최고객</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="decisions">
-                                <h5>주요 결정사항</h5>
-                                <ul>
-                                    <li>압력등급 150LB로 확정</li>
-                                    <li>재질 SS316L로 변경</li>
-                                </ul>
+                                <div class="request-status">
+                                    <span class="status-badge status-completed">승인완료</span>
+                                    <span class="job-no">TK-2024-015</span>
                                 </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-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 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>
+                                <div class="request-status">
+                                    <span class="status-badge status-pending">검토중</span>
+                                    <span class="job-no">대기중</span>
                                 </div>
                             </div>
                             
-                        <button class="btn btn-secondary">📝 세부사양 업데이트</button>
+                            <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>

demo/scripts/main.js

@@ -355,15 +355,147 @@ function initializePage(pageId) {
 function initializeProjectRegistration() {
     console.log('프로젝트 등록 페이지 초기화');
     
-    // 자동 생성된 Job No. 애니메이션
-    const jobNoValue = document.querySelector('.generated-item .value');
-    if (jobNoValue) {
+    // 폼 이벤트 리스너 설정
+    setupProjectForm();
+    
+    // Job No. 미리보기 업데이트
+    updateJobNoPreview();
+    
+    // 요청 리스트 애니메이션
+    animateElements('.request-item');
+}
+
+// 프로젝트 폼 설정
+function setupProjectForm() {
+    const form = document.querySelector('.project-form');
+    if (!form) return;
+    
+    // 폼 제출 이벤트
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        handleProjectSubmission();
+    });
+    
+    // 입력 필드 변경시 Job No. 미리보기 업데이트
+    const inputs = form.querySelectorAll('input, select');
+    inputs.forEach(input => {
+        input.addEventListener('input', updateJobNoPreview);
+    });
+}
+
+// 프로젝트 제출 처리
+function handleProjectSubmission() {
+    const form = document.querySelector('.project-form');
+    const formData = new FormData(form);
+    
+    // 입력값 검증
+    const projectName = document.getElementById('project-name').value;
+    const endUser = document.getElementById('end-user').value;
+    const deliveryDate = document.getElementById('delivery-date').value;
+    const deliveryMethod = document.getElementById('delivery-method').value;
+    
+    if (!projectName || !endUser || !deliveryDate || !deliveryMethod) {
+        showNotification('필수 항목을 모두 입력해주세요.', 'warning');
+        return;
+    }
+    
+    // 제출 버튼 상태 변경
+    const submitBtn = document.getElementById('submit-btn');
+    const originalText = submitBtn.textContent;
+    submitBtn.textContent = '📤 요청 중...';
+    submitBtn.disabled = true;
+    
+    // 가상 제출 처리 (2초 후 완료)
     setTimeout(() => {
-            jobNoValue.style.transform = 'scale(1.1)';
+        // 새로운 Job No. 생성
+        const newJobNo = generateJobNo();
+        
+        // 성공 메시지
+        showNotification(`프로젝트 등록 요청이 완료되었습니다! (예상 Job No: ${newJobNo})`, 'success');
+        
+        // 요청 리스트에 새 항목 추가
+        addNewRequestToList(projectName, endUser, deliveryDate, deliveryMethod);
+        
+        // 폼 초기화
+        clearForm();
+        
+        // 버튼 복원
+        submitBtn.textContent = originalText;
+        submitBtn.disabled = false;
+        
+    }, 2000);
+}
+
+// Job No. 생성
+function generateJobNo() {
+    const year = new Date().getFullYear();
+    const randomNum = Math.floor(Math.random() * 900) + 100; // 100-999
+    return `TK-${year}-${randomNum}`;
+}
+
+// Job No. 미리보기 업데이트
+function updateJobNoPreview() {
+    const projectName = document.getElementById('project-name')?.value;
+    const previewElement = document.getElementById('preview-job-no');
+    
+    if (!previewElement) return;
+    
+    if (projectName && projectName.length > 0) {
+        const year = new Date().getFullYear();
+        const nextNum = String(Math.floor(Math.random() * 900) + 100);
+        previewElement.textContent = `TK-${year}-${nextNum}`;
+        previewElement.style.color = 'var(--dt-primary)';
+    } else {
+        previewElement.textContent = 'TK-2024-XXX';
+        previewElement.style.color = 'var(--dt-gray-500)';
+    }
+}
+
+// 새 요청을 리스트에 추가
+function addNewRequestToList(projectName, endUser, deliveryDate, deliveryMethod) {
+    const requestList = document.querySelector('.request-list');
+    if (!requestList) return;
+    
+    const epcCustomer = document.getElementById('epc-customer')?.value;
+    const customerText = epcCustomer ? `${endUser} / ${epcCustomer}` : endUser;
+    
+    const newItem = document.createElement('div');
+    newItem.className = 'request-item status-pending';
+    newItem.innerHTML = `
+        <div class="request-info">
+            <div class="request-title">${projectName}</div>
+            <div class="request-details">
+                <span class="customer">${customerText}</span>
+                <span class="delivery">${deliveryMethod}</span>
+                <span class="date">납기: ${deliveryDate}</span>
+            </div>
+        </div>
+        <div class="request-status">
+            <span class="status-badge status-pending">검토중</span>
+            <span class="job-no">대기중</span>
+        </div>
+    `;
+    
+    // 리스트 맨 위에 추가
+    requestList.insertBefore(newItem, requestList.firstChild);
+    
+    // 애니메이션
+    newItem.style.opacity = '0';
+    newItem.style.transform = 'translateY(-20px)';
+    
     setTimeout(() => {
-                jobNoValue.style.transform = 'scale(1)';
-            }, 200);
-        }, 500);
+        newItem.style.transition = 'all 0.3s ease';
+        newItem.style.opacity = '1';
+        newItem.style.transform = 'translateY(0)';
+    }, 100);
+}
+
+// 폼 초기화
+function clearForm() {
+    const form = document.querySelector('.project-form');
+    if (form) {
+        form.reset();
+        updateJobNoPreview();
     }
 }
 
@@ -637,5 +769,6 @@ window.showPage = showPage;
 window.showModal = showModal;
 window.hideModal = hideModal;
 window.showNotification = showNotification;
+window.clearForm = clearForm;
 
 console.log('TK Project Demo JavaScript 로드 완료');

demo/styles/devonthink.css

@@ -382,6 +382,199 @@ body {
     }
 }
 
+/* 프로젝트 등록 컨테이너 */
+.project-registration-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    max-width: 1200px;
+}
+
+@media (max-width: 1000px) {
+    .project-registration-container {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* 프로젝트 폼 */
+.project-form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.customer-section, .delivery-section {
+    padding: 20px;
+    background-color: var(--dt-gray-50);
+    border-radius: 8px;
+    border: 1px solid var(--dt-gray-200);
+}
+
+.customer-section h4, .delivery-section h4 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--dt-gray-800);
+    margin-bottom: 16px;
+}
+
+.customer-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+@media (max-width: 600px) {
+    .customer-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+@media (max-width: 600px) {
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* 자동 생성 미리보기 */
+.generated-preview {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.generated-preview .label {
+    font-size: 14px;
+    color: var(--dt-gray-600);
+    font-weight: 500;
+}
+
+.generated-preview .value {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--dt-gray-500);
+    font-family: 'Monaco', 'Menlo', monospace;
+}
+
+.generation-rule {
+    font-size: 12px;
+    color: var(--dt-gray-500);
+    font-style: italic;
+}
+
+/* 폼 액션 */
+.form-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+    padding-top: 20px;
+    border-top: 1px solid var(--dt-gray-200);
+}
+
+@media (max-width: 600px) {
+    .form-actions {
+        flex-direction: column;
+    }
+}
+
+/* 요청 리스트 */
+.request-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.request-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border: 1px solid var(--dt-gray-200);
+    border-radius: 8px;
+    background-color: var(--dt-gray-50);
+    transition: all 0.2s ease;
+}
+
+.request-item:hover {
+    background-color: white;
+    box-shadow: var(--dt-shadow);
+}
+
+.request-item.status-approved {
+    border-left: 4px solid var(--dt-success);
+}
+
+.request-item.status-pending {
+    border-left: 4px solid var(--dt-warning);
+}
+
+.request-item.status-review {
+    border-left: 4px solid var(--dt-danger);
+}
+
+.request-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--dt-gray-800);
+    margin-bottom: 6px;
+}
+
+.request-details {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    font-size: 12px;
+    color: var(--dt-gray-600);
+}
+
+.request-details span {
+    padding: 2px 8px;
+    background-color: white;
+    border-radius: 12px;
+    border: 1px solid var(--dt-gray-200);
+}
+
+.request-status {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+}
+
+.job-no {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--dt-primary);
+    font-family: 'Monaco', 'Menlo', monospace;
+}
+
+/* 상태별 스타일 */
+.status-warning {
+    background-color: var(--dt-danger);
+    color: white;
+}
+
+@media (max-width: 600px) {
+    .request-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+    
+    .request-status {
+        align-items: flex-start;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+    }
+}
+
 /* 자동 생성 정보 */
 .auto-generated {
     margin: 20px 0;