🔍 구글 스타일 프로젝트 선택기로 전면 개편
핵심 변경사항: ✅ 구글 검색창 스타일의 깔끔한 프로젝트 관리 페이지 완성 - 복잡한 카드 리스트 → 중앙 집중식 드롭다운 선택기 - 미니멀한 디자인으로 사용성 대폭 개선 🎯 구글 스타일 드롭다운 시스템 - 중앙 배치된 둥근 검색창 스타일 드롭다운 - 클릭 시 부드러운 확장 애니메이션 (둥근→사각형) - 내장된 실시간 검색 기능 (프로젝트명/Job No./고객사) - 외부 클릭 시 자동 닫힘 🎨 DevonThink 미니멀 디자인 - 중앙 정렬된 대형 'TK Project' 타이틀 (48px, 얇은 폰트) - 충분한 여백과 깔끔한 레이아웃 (80vh 중앙 배치) - 회색/파란색 위주의 절제된 색상 팔레트 - 부드러운 그림자와 호버 효과 📋 스마트 프로젝트 정보 표시 - 드롭다운 옵션: 프로젝트명 + Job No. + 고객사 + 상태 - 선택 후 상세 정보 카드 자동 표시 (fadeInUp 애니메이션) - 프로젝트별 맞춤 액션 버튼 (상태에 따른 활성화/비활성화) - 세션 스토리지 자동 저장 ⚡ 인터랙티브 기능 - 드롭다운 열기 시 검색창 자동 포커스 - 실시간 필터링 (타이핑과 동시에 옵션 필터링) - 키보드 네비게이션 지원 (Enter, Escape) - 상태별 버튼 동적 업데이트 🔄 상태별 버튼 로직 - 계획 단계: 생산회의록 비활성화 - 진행중: 모든 기능 활성화 - 제작중: 생산회의록 + 프로젝트 관리 활성화 - 완료: 모든 버튼 '(완료)' 표시로 변경 📊 하단 통계 표시 - 간소화된 4개 통계 (전체/진행중/제작중/지연) - 중앙 정렬된 깔끔한 배치 - 큰 숫자 + 작은 라벨 구조 💾 하드코딩 데이터 구조화 - getProjectData() 함수로 중앙 관리 - 4개 프로젝트 완전한 정보 (고객사, 납기, PM, 상태 등) - 상태별 클래스와 진행률 포함 🎭 애니메이션 효과 - 페이지 로드 시 순차적 fade-in - 드롭다운 화살표 회전 (180도) - 프로젝트 정보 카드 fadeInUp - 호버 시 그림자 확대 시연 준비: 구글 수준의 직관적이고 깔끔한 프로젝트 선택 시스템 완성
This commit is contained in:
Hyungi Ahn
350
demo/index.html
350
demo/index.html
@@ -70,247 +70,133 @@
|
||||
<div class="main-content">
|
||||
<!-- 프로젝트 관리 페이지 -->
|
||||
<div id="project-management" class="page active">
|
||||
<div class="page-header">
|
||||
<h2>프로젝트 관리</h2>
|
||||
<p class="page-description">진행 중인 프로젝트를 선택하여 세부 관리를 시작합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="project-management-container">
|
||||
<!-- 프로젝트 필터 및 검색 -->
|
||||
<div class="project-filters">
|
||||
<div class="filter-section">
|
||||
<div class="search-box">
|
||||
<input type="text" placeholder="프로젝트명 또는 Job No. 검색..." class="search-input">
|
||||
<button class="search-btn">🔍</button>
|
||||
</div>
|
||||
<div class="filter-buttons">
|
||||
<button class="filter-btn active" data-filter="all">전체</button>
|
||||
<button class="filter-btn" data-filter="planning">계획</button>
|
||||
<button class="filter-btn" data-filter="in-progress">진행중</button>
|
||||
<button class="filter-btn" data-filter="production">제작중</button>
|
||||
<button class="filter-btn" data-filter="completed">완료</button>
|
||||
<div class="project-selector-container">
|
||||
<div class="project-selector-header">
|
||||
<h1>TK Project</h1>
|
||||
<p class="selector-description">프로젝트를 선택하여 관리를 시작하세요</p>
|
||||
</div>
|
||||
|
||||
<div class="project-selector-main">
|
||||
<div class="project-dropdown-container">
|
||||
<div class="project-dropdown" onclick="toggleProjectDropdown()">
|
||||
<div class="dropdown-display">
|
||||
<span class="dropdown-text" id="selected-project-text">프로젝트를 선택하세요</span>
|
||||
<span class="dropdown-arrow">▼</span>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="project-dropdown-menu">
|
||||
<div class="dropdown-search">
|
||||
<input type="text" placeholder="프로젝트 검색..." class="dropdown-search-input" onkeyup="filterProjects(this.value)">
|
||||
</div>
|
||||
<div class="dropdown-options" id="dropdown-options">
|
||||
<div class="dropdown-option" data-job-no="TK-2024-015" onclick="selectProjectFromDropdown('TK-2024-015')">
|
||||
<div class="option-main">
|
||||
<span class="option-title">ABC 공장 배관공사</span>
|
||||
<span class="option-job-no">TK-2024-015</span>
|
||||
</div>
|
||||
<div class="option-details">
|
||||
<span class="option-customer">ABC 케미칼</span>
|
||||
<span class="option-status status-production">제작중</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-option" data-job-no="TK-2024-016" onclick="selectProjectFromDropdown('TK-2024-016')">
|
||||
<div class="option-main">
|
||||
<span class="option-title">DEF 플랜트 배관 설치</span>
|
||||
<span class="option-job-no">TK-2024-016</span>
|
||||
</div>
|
||||
<div class="option-details">
|
||||
<span class="option-customer">DEF 화학</span>
|
||||
<span class="option-status status-planning">계획</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-option" data-job-no="TK-2024-017" onclick="selectProjectFromDropdown('TK-2024-017')">
|
||||
<div class="option-main">
|
||||
<span class="option-title">GHI 정유 공장 개보수</span>
|
||||
<span class="option-job-no">TK-2024-017</span>
|
||||
</div>
|
||||
<div class="option-details">
|
||||
<span class="option-customer">GHI 정유 / 한국엔지니어링</span>
|
||||
<span class="option-status status-in-progress">진행중</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-option" data-job-no="TK-2024-012" onclick="selectProjectFromDropdown('TK-2024-012')">
|
||||
<div class="option-main">
|
||||
<span class="option-title">JKL 화학 공장 신설</span>
|
||||
<span class="option-job-no">TK-2024-012</span>
|
||||
</div>
|
||||
<div class="option-details">
|
||||
<span class="option-customer">JKL 화학</span>
|
||||
<span class="option-status status-completed">완료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">12</span>
|
||||
<span class="stat-label">전체 프로젝트</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">8</span>
|
||||
<span class="stat-label">진행중</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">3</span>
|
||||
<span class="stat-label">제작중</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">1</span>
|
||||
<span class="stat-label">지연</span>
|
||||
|
||||
<!-- 선택된 프로젝트 정보 -->
|
||||
<div class="selected-project-info" id="selected-project-info" style="display: none;">
|
||||
<div class="project-info-card">
|
||||
<div class="project-info-header">
|
||||
<h3 id="info-project-title">프로젝트명</h3>
|
||||
<span class="info-job-no" id="info-job-no">Job No.</span>
|
||||
</div>
|
||||
|
||||
<div class="project-info-details">
|
||||
<div class="info-row">
|
||||
<span class="info-label">고객사</span>
|
||||
<span class="info-value" id="info-customer">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납기일</span>
|
||||
<span class="info-value" id="info-deadline">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납품방식</span>
|
||||
<span class="info-value" id="info-delivery">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">담당 PM</span>
|
||||
<span class="info-value" id="info-pm">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">진행상태</span>
|
||||
<span class="info-value">
|
||||
<span class="status-badge" id="info-status">-</span>
|
||||
<span id="info-progress">0%</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<button class="btn btn-primary" id="btn-project-detail" onclick="goToProjectDetail()">📊 프로젝트 세부관리</button>
|
||||
<button class="btn btn-secondary" id="btn-production-meeting" onclick="showPage('production-meeting')">🏭 생산회의록</button>
|
||||
<button class="btn btn-secondary" id="btn-incoming-inspection" onclick="showPage('incoming-inspection')">📦 입고 검수</button>
|
||||
<button class="btn btn-secondary" id="btn-production-work" onclick="showPage('production-work')">🔧 생산팀 작업</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 프로젝트 리스트 -->
|
||||
<div class="project-list">
|
||||
<div class="project-card status-production" data-job-no="TK-2024-015">
|
||||
<div class="project-header">
|
||||
<div class="project-title">
|
||||
<h3>ABC 공장 배관공사</h3>
|
||||
<span class="job-no">TK-2024-015</span>
|
||||
</div>
|
||||
<div class="project-status">
|
||||
<span class="status-badge status-production">제작중</span>
|
||||
<span class="progress-text">75%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">고객사</span>
|
||||
<span class="info-value">ABC 케미칼</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납기일</span>
|
||||
<span class="info-value">2024-03-30</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납품방식</span>
|
||||
<span class="info-value">현장납품</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">담당 PM</span>
|
||||
<span class="info-value">이PM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 75%"></div>
|
||||
</div>
|
||||
<div class="progress-stages">
|
||||
<div class="stage completed">설계</div>
|
||||
<div class="stage completed">구매</div>
|
||||
<div class="stage active">제작</div>
|
||||
<div class="stage">검사</div>
|
||||
<div class="stage">납품</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<button class="btn btn-primary" onclick="selectProject('TK-2024-015')">📊 프로젝트 관리</button>
|
||||
<button class="btn btn-secondary" onclick="showPage('production-meeting')">🏭 생산회의록</button>
|
||||
</div>
|
||||
<!-- 프로젝트 통계 -->
|
||||
<div class="project-stats-simple">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">12</span>
|
||||
<span class="stat-label">전체 프로젝트</span>
|
||||
</div>
|
||||
|
||||
<div class="project-card status-planning" data-job-no="TK-2024-016">
|
||||
<div class="project-header">
|
||||
<div class="project-title">
|
||||
<h3>DEF 플랜트 배관 설치</h3>
|
||||
<span class="job-no">TK-2024-016</span>
|
||||
</div>
|
||||
<div class="project-status">
|
||||
<span class="status-badge status-planning">계획</span>
|
||||
<span class="progress-text">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">고객사</span>
|
||||
<span class="info-value">DEF 화학</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납기일</span>
|
||||
<span class="info-value">2024-04-15</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납품방식</span>
|
||||
<span class="info-value">공장인도</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">담당 PM</span>
|
||||
<span class="info-value">박PM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 25%"></div>
|
||||
</div>
|
||||
<div class="progress-stages">
|
||||
<div class="stage active">설계</div>
|
||||
<div class="stage">구매</div>
|
||||
<div class="stage">제작</div>
|
||||
<div class="stage">검사</div>
|
||||
<div class="stage">납품</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<button class="btn btn-primary" onclick="selectProject('TK-2024-016')">📊 프로젝트 관리</button>
|
||||
<button class="btn btn-secondary disabled">🏭 생산회의록</button>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">8</span>
|
||||
<span class="stat-label">진행중</span>
|
||||
</div>
|
||||
|
||||
<div class="project-card status-in-progress" data-job-no="TK-2024-017">
|
||||
<div class="project-header">
|
||||
<div class="project-title">
|
||||
<h3>GHI 정유 공장 개보수</h3>
|
||||
<span class="job-no">TK-2024-017</span>
|
||||
</div>
|
||||
<div class="project-status">
|
||||
<span class="status-badge status-in-progress">진행중</span>
|
||||
<span class="progress-text">60%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">고객사</span>
|
||||
<span class="info-value">GHI 정유 / 한국엔지니어링</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납기일</span>
|
||||
<span class="info-value">2024-05-20</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납품방식</span>
|
||||
<span class="info-value">부분납품</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">담당 PM</span>
|
||||
<span class="info-value">최PM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress-stages">
|
||||
<div class="stage completed">설계</div>
|
||||
<div class="stage active">구매</div>
|
||||
<div class="stage">제작</div>
|
||||
<div class="stage">검사</div>
|
||||
<div class="stage">납품</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<button class="btn btn-primary" onclick="selectProject('TK-2024-017')">📊 프로젝트 관리</button>
|
||||
<button class="btn btn-secondary" onclick="showPage('incoming-inspection')">📦 입고 검수</button>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">3</span>
|
||||
<span class="stat-label">제작중</span>
|
||||
</div>
|
||||
|
||||
<div class="project-card status-completed" data-job-no="TK-2024-012">
|
||||
<div class="project-header">
|
||||
<div class="project-title">
|
||||
<h3>JKL 화학 공장 신설</h3>
|
||||
<span class="job-no">TK-2024-012</span>
|
||||
</div>
|
||||
<div class="project-status">
|
||||
<span class="status-badge status-completed">완료</span>
|
||||
<span class="progress-text">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">고객사</span>
|
||||
<span class="info-value">JKL 화학</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납기일</span>
|
||||
<span class="info-value">2024-02-28</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납품방식</span>
|
||||
<span class="info-value">현장납품</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">담당 PM</span>
|
||||
<span class="info-value">김PM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 100%"></div>
|
||||
</div>
|
||||
<div class="progress-stages">
|
||||
<div class="stage completed">설계</div>
|
||||
<div class="stage completed">구매</div>
|
||||
<div class="stage completed">제작</div>
|
||||
<div class="stage completed">검사</div>
|
||||
<div class="stage completed">납품</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<button class="btn btn-secondary" onclick="selectProject('TK-2024-012')">📋 프로젝트 보기</button>
|
||||
<button class="btn btn-success">✅ 완료됨</button>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">1</span>
|
||||
<span class="stat-label">지연</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user