🔍 구글 스타일 프로젝트 선택기로 전면 개편
핵심 변경사항: ✅ 구글 검색창 스타일의 깔끔한 프로젝트 관리 페이지 완성 - 복잡한 카드 리스트 → 중앙 집중식 드롭다운 선택기 - 미니멀한 디자인으로 사용성 대폭 개선 🎯 구글 스타일 드롭다운 시스템 - 중앙 배치된 둥근 검색창 스타일 드롭다운 - 클릭 시 부드러운 확장 애니메이션 (둥근→사각형) - 내장된 실시간 검색 기능 (프로젝트명/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
328
demo/index.html
328
demo/index.html
@@ -70,28 +70,118 @@
|
|||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<!-- 프로젝트 관리 페이지 -->
|
<!-- 프로젝트 관리 페이지 -->
|
||||||
<div id="project-management" class="page active">
|
<div id="project-management" class="page active">
|
||||||
<div class="page-header">
|
<div class="project-selector-container">
|
||||||
<h2>프로젝트 관리</h2>
|
<div class="project-selector-header">
|
||||||
<p class="page-description">진행 중인 프로젝트를 선택하여 세부 관리를 시작합니다.</p>
|
<h1>TK Project</h1>
|
||||||
|
<p class="selector-description">프로젝트를 선택하여 관리를 시작하세요</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="project-management-container">
|
<div class="project-selector-main">
|
||||||
<!-- 프로젝트 필터 및 검색 -->
|
<div class="project-dropdown-container">
|
||||||
<div class="project-filters">
|
<div class="project-dropdown" onclick="toggleProjectDropdown()">
|
||||||
<div class="filter-section">
|
<div class="dropdown-display">
|
||||||
<div class="search-box">
|
<span class="dropdown-text" id="selected-project-text">프로젝트를 선택하세요</span>
|
||||||
<input type="text" placeholder="프로젝트명 또는 Job No. 검색..." class="search-input">
|
<span class="dropdown-arrow">▼</span>
|
||||||
<button class="search-btn">🔍</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-buttons">
|
<div class="dropdown-menu" id="project-dropdown-menu">
|
||||||
<button class="filter-btn active" data-filter="all">전체</button>
|
<div class="dropdown-search">
|
||||||
<button class="filter-btn" data-filter="planning">계획</button>
|
<input type="text" placeholder="프로젝트 검색..." class="dropdown-search-input" onkeyup="filterProjects(this.value)">
|
||||||
<button class="filter-btn" data-filter="in-progress">진행중</button>
|
</div>
|
||||||
<button class="filter-btn" data-filter="production">제작중</button>
|
<div class="dropdown-options" id="dropdown-options">
|
||||||
<button class="filter-btn" data-filter="completed">완료</button>
|
<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>
|
</div>
|
||||||
<div class="project-stats">
|
|
||||||
|
<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="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-stats-simple">
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<span class="stat-number">12</span>
|
<span class="stat-number">12</span>
|
||||||
<span class="stat-label">전체 프로젝트</span>
|
<span class="stat-label">전체 프로젝트</span>
|
||||||
@@ -110,210 +200,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 프로젝트 등록 페이지 -->
|
<!-- 프로젝트 등록 페이지 -->
|
||||||
|
|||||||
@@ -359,146 +359,211 @@ function initializePage(pageId) {
|
|||||||
function initializeProjectManagement() {
|
function initializeProjectManagement() {
|
||||||
console.log('프로젝트 관리 페이지 초기화');
|
console.log('프로젝트 관리 페이지 초기화');
|
||||||
|
|
||||||
// 프로젝트 카드 애니메이션
|
// 드롭다운 외부 클릭 이벤트 설정
|
||||||
animateElements('.project-card');
|
setupDropdownOutsideClick();
|
||||||
|
|
||||||
// 필터 버튼 이벤트 설정
|
// 애니메이션 효과
|
||||||
setupProjectFilters();
|
animateElements('.project-selector-header');
|
||||||
|
animateElements('.project-dropdown-container');
|
||||||
// 검색 기능 설정
|
animateElements('.project-stats-simple');
|
||||||
setupProjectSearch();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 프로젝트 필터 설정
|
// 드롭다운 외부 클릭 설정
|
||||||
function setupProjectFilters() {
|
function setupDropdownOutsideClick() {
|
||||||
const filterButtons = document.querySelectorAll('.filter-btn');
|
document.addEventListener('click', function(e) {
|
||||||
|
const dropdown = document.querySelector('.project-dropdown');
|
||||||
|
const dropdownMenu = document.getElementById('project-dropdown-menu');
|
||||||
|
const dropdownDisplay = document.querySelector('.dropdown-display');
|
||||||
|
|
||||||
filterButtons.forEach(btn => {
|
if (!dropdown.contains(e.target)) {
|
||||||
btn.addEventListener('click', function() {
|
dropdownMenu.classList.remove('active');
|
||||||
// 활성 버튼 변경
|
dropdownDisplay.classList.remove('active');
|
||||||
filterButtons.forEach(b => b.classList.remove('active'));
|
|
||||||
this.classList.add('active');
|
|
||||||
|
|
||||||
// 필터 적용
|
|
||||||
const filter = this.getAttribute('data-filter');
|
|
||||||
filterProjects(filter);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 프로젝트 검색 설정
|
|
||||||
function setupProjectSearch() {
|
|
||||||
const searchInput = document.querySelector('.search-input');
|
|
||||||
const searchBtn = document.querySelector('.search-btn');
|
|
||||||
|
|
||||||
if (searchInput && searchBtn) {
|
|
||||||
searchBtn.addEventListener('click', performSearch);
|
|
||||||
searchInput.addEventListener('keypress', function(e) {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
performSearch();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 프로젝트 드롭다운 토글
|
||||||
|
function toggleProjectDropdown() {
|
||||||
|
const dropdownMenu = document.getElementById('project-dropdown-menu');
|
||||||
|
const dropdownDisplay = document.querySelector('.dropdown-display');
|
||||||
|
|
||||||
|
dropdownMenu.classList.toggle('active');
|
||||||
|
dropdownDisplay.classList.toggle('active');
|
||||||
|
|
||||||
|
// 검색 입력창에 포커스
|
||||||
|
if (dropdownMenu.classList.contains('active')) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const searchInput = document.querySelector('.dropdown-search-input');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.focus();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 검색 실행
|
// 드롭다운에서 프로젝트 선택
|
||||||
function performSearch() {
|
function selectProjectFromDropdown(jobNo) {
|
||||||
const searchInput = document.querySelector('.search-input');
|
const projectData = getProjectData(jobNo);
|
||||||
const query = searchInput.value.toLowerCase().trim();
|
if (!projectData) return;
|
||||||
|
|
||||||
if (!query) {
|
// 드롭다운 닫기
|
||||||
showAllProjects();
|
const dropdownMenu = document.getElementById('project-dropdown-menu');
|
||||||
|
const dropdownDisplay = document.querySelector('.dropdown-display');
|
||||||
|
dropdownMenu.classList.remove('active');
|
||||||
|
dropdownDisplay.classList.remove('active');
|
||||||
|
|
||||||
|
// 선택된 프로젝트 텍스트 업데이트
|
||||||
|
const selectedText = document.getElementById('selected-project-text');
|
||||||
|
selectedText.textContent = `${projectData.name} (${jobNo})`;
|
||||||
|
|
||||||
|
// 프로젝트 정보 카드 표시
|
||||||
|
showProjectInfo(projectData);
|
||||||
|
|
||||||
|
// 전역 변수 업데이트
|
||||||
|
selectedProject = jobNo;
|
||||||
|
|
||||||
|
// 세션 스토리지에 저장
|
||||||
|
sessionStorage.setItem('selectedProject', JSON.stringify(projectData));
|
||||||
|
|
||||||
|
showNotification(`${projectData.name} 프로젝트가 선택되었습니다.`, 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 프로젝트 데이터 가져오기
|
||||||
|
function getProjectData(jobNo) {
|
||||||
|
const projectsData = {
|
||||||
|
'TK-2024-015': {
|
||||||
|
jobNo: 'TK-2024-015',
|
||||||
|
name: 'ABC 공장 배관공사',
|
||||||
|
customer: 'ABC 케미칼',
|
||||||
|
deadline: '2024-03-30',
|
||||||
|
delivery: '현장납품',
|
||||||
|
pm: '이PM',
|
||||||
|
status: '제작중',
|
||||||
|
statusClass: 'status-production',
|
||||||
|
progress: '75%'
|
||||||
|
},
|
||||||
|
'TK-2024-016': {
|
||||||
|
jobNo: 'TK-2024-016',
|
||||||
|
name: 'DEF 플랜트 배관 설치',
|
||||||
|
customer: 'DEF 화학',
|
||||||
|
deadline: '2024-04-15',
|
||||||
|
delivery: '공장인도',
|
||||||
|
pm: '박PM',
|
||||||
|
status: '계획',
|
||||||
|
statusClass: 'status-planning',
|
||||||
|
progress: '25%'
|
||||||
|
},
|
||||||
|
'TK-2024-017': {
|
||||||
|
jobNo: 'TK-2024-017',
|
||||||
|
name: 'GHI 정유 공장 개보수',
|
||||||
|
customer: 'GHI 정유 / 한국엔지니어링',
|
||||||
|
deadline: '2024-05-20',
|
||||||
|
delivery: '부분납품',
|
||||||
|
pm: '최PM',
|
||||||
|
status: '진행중',
|
||||||
|
statusClass: 'status-in-progress',
|
||||||
|
progress: '60%'
|
||||||
|
},
|
||||||
|
'TK-2024-012': {
|
||||||
|
jobNo: 'TK-2024-012',
|
||||||
|
name: 'JKL 화학 공장 신설',
|
||||||
|
customer: 'JKL 화학',
|
||||||
|
deadline: '2024-02-28',
|
||||||
|
delivery: '현장납품',
|
||||||
|
pm: '김PM',
|
||||||
|
status: '완료',
|
||||||
|
statusClass: 'status-completed',
|
||||||
|
progress: '100%'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return projectsData[jobNo];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 프로젝트 정보 표시
|
||||||
|
function showProjectInfo(projectData) {
|
||||||
|
const infoContainer = document.getElementById('selected-project-info');
|
||||||
|
|
||||||
|
// 정보 업데이트
|
||||||
|
document.getElementById('info-project-title').textContent = projectData.name;
|
||||||
|
document.getElementById('info-job-no').textContent = projectData.jobNo;
|
||||||
|
document.getElementById('info-customer').textContent = projectData.customer;
|
||||||
|
document.getElementById('info-deadline').textContent = projectData.deadline;
|
||||||
|
document.getElementById('info-delivery').textContent = projectData.delivery;
|
||||||
|
document.getElementById('info-pm').textContent = projectData.pm;
|
||||||
|
document.getElementById('info-progress').textContent = projectData.progress;
|
||||||
|
|
||||||
|
// 상태 배지 업데이트
|
||||||
|
const statusBadge = document.getElementById('info-status');
|
||||||
|
statusBadge.textContent = projectData.status;
|
||||||
|
statusBadge.className = `status-badge ${projectData.statusClass}`;
|
||||||
|
|
||||||
|
// 버튼 상태 업데이트
|
||||||
|
updateActionButtons(projectData);
|
||||||
|
|
||||||
|
// 정보 카드 표시
|
||||||
|
infoContainer.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 액션 버튼 상태 업데이트
|
||||||
|
function updateActionButtons(projectData) {
|
||||||
|
const buttons = {
|
||||||
|
meeting: document.getElementById('btn-production-meeting'),
|
||||||
|
inspection: document.getElementById('btn-incoming-inspection'),
|
||||||
|
work: document.getElementById('btn-production-work')
|
||||||
|
};
|
||||||
|
|
||||||
|
// 모든 버튼 활성화
|
||||||
|
Object.values(buttons).forEach(btn => {
|
||||||
|
btn.classList.remove('disabled');
|
||||||
|
btn.style.opacity = '1';
|
||||||
|
btn.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
|
||||||
|
// 상태에 따른 버튼 비활성화
|
||||||
|
switch (projectData.statusClass) {
|
||||||
|
case 'status-planning':
|
||||||
|
buttons.meeting.classList.add('disabled');
|
||||||
|
buttons.meeting.style.opacity = '0.5';
|
||||||
|
buttons.meeting.style.pointerEvents = 'none';
|
||||||
|
break;
|
||||||
|
case 'status-completed':
|
||||||
|
buttons.meeting.textContent = '🏭 생산회의록 (완료)';
|
||||||
|
buttons.inspection.textContent = '📦 입고 검수 (완료)';
|
||||||
|
buttons.work.textContent = '🔧 생산팀 작업 (완료)';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 드롭다운 프로젝트 필터링
|
||||||
|
function filterProjects(query) {
|
||||||
|
const options = document.querySelectorAll('.dropdown-option');
|
||||||
|
const searchQuery = query.toLowerCase().trim();
|
||||||
|
|
||||||
|
options.forEach(option => {
|
||||||
|
const title = option.querySelector('.option-title').textContent.toLowerCase();
|
||||||
|
const jobNo = option.querySelector('.option-job-no').textContent.toLowerCase();
|
||||||
|
const customer = option.querySelector('.option-customer').textContent.toLowerCase();
|
||||||
|
|
||||||
|
if (!searchQuery ||
|
||||||
|
title.includes(searchQuery) ||
|
||||||
|
jobNo.includes(searchQuery) ||
|
||||||
|
customer.includes(searchQuery)) {
|
||||||
|
option.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
option.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 프로젝트 세부 관리로 이동
|
||||||
|
function goToProjectDetail() {
|
||||||
|
if (!selectedProject) {
|
||||||
|
showNotification('프로젝트를 먼저 선택해주세요.', 'warning');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const projectCards = document.querySelectorAll('.project-card');
|
showNotification('프로젝트 세부 관리 페이지는 추후 구현 예정입니다.', 'info');
|
||||||
let visibleCount = 0;
|
|
||||||
|
|
||||||
projectCards.forEach(card => {
|
|
||||||
const title = card.querySelector('h3').textContent.toLowerCase();
|
|
||||||
const jobNo = card.querySelector('.job-no').textContent.toLowerCase();
|
|
||||||
const customer = card.querySelector('.info-value').textContent.toLowerCase();
|
|
||||||
|
|
||||||
if (title.includes(query) || jobNo.includes(query) || customer.includes(query)) {
|
|
||||||
card.style.display = 'block';
|
|
||||||
visibleCount++;
|
|
||||||
} else {
|
|
||||||
card.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
showNotification(`${visibleCount}개의 프로젝트를 찾았습니다.`, 'info');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 프로젝트 필터링
|
|
||||||
function filterProjects(filter) {
|
|
||||||
const projectCards = document.querySelectorAll('.project-card');
|
|
||||||
let visibleCount = 0;
|
|
||||||
|
|
||||||
projectCards.forEach(card => {
|
|
||||||
if (filter === 'all') {
|
|
||||||
card.style.display = 'block';
|
|
||||||
visibleCount++;
|
|
||||||
} else {
|
|
||||||
const hasStatus = card.classList.contains(`status-${filter}`);
|
|
||||||
if (hasStatus) {
|
|
||||||
card.style.display = 'block';
|
|
||||||
visibleCount++;
|
|
||||||
} else {
|
|
||||||
card.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 통계 업데이트
|
|
||||||
updateProjectStats(filter, visibleCount);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 모든 프로젝트 표시
|
|
||||||
function showAllProjects() {
|
|
||||||
const projectCards = document.querySelectorAll('.project-card');
|
|
||||||
projectCards.forEach(card => {
|
|
||||||
card.style.display = 'block';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 프로젝트 통계 업데이트
|
|
||||||
function updateProjectStats(filter, count) {
|
|
||||||
const filterName = {
|
|
||||||
'all': '전체',
|
|
||||||
'planning': '계획',
|
|
||||||
'in-progress': '진행중',
|
|
||||||
'production': '제작중',
|
|
||||||
'completed': '완료'
|
|
||||||
};
|
|
||||||
|
|
||||||
showNotification(`${filterName[filter]} 프로젝트: ${count}개`, 'info');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 프로젝트 선택
|
|
||||||
function selectProject(jobNo) {
|
|
||||||
selectedProject = jobNo;
|
|
||||||
|
|
||||||
// 프로젝트 정보 저장
|
|
||||||
const projectCard = document.querySelector(`[data-job-no="${jobNo}"]`);
|
|
||||||
if (projectCard) {
|
|
||||||
const projectName = projectCard.querySelector('h3').textContent;
|
|
||||||
const customer = projectCard.querySelector('.info-value').textContent;
|
|
||||||
|
|
||||||
// 세션 스토리지에 저장
|
|
||||||
sessionStorage.setItem('selectedProject', JSON.stringify({
|
|
||||||
jobNo: jobNo,
|
|
||||||
name: projectName,
|
|
||||||
customer: customer
|
|
||||||
}));
|
|
||||||
|
|
||||||
showNotification(`${projectName} (${jobNo}) 프로젝트가 선택되었습니다.`, 'success');
|
|
||||||
|
|
||||||
// 프로젝트 세부 관리 페이지로 이동 (현재는 알림만)
|
|
||||||
setTimeout(() => {
|
|
||||||
showNotification('프로젝트 세부 관리 기능은 추후 구현 예정입니다.', 'info');
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 프로젝트 등록 페이지 초기화
|
// 프로젝트 등록 페이지 초기화
|
||||||
@@ -921,5 +986,9 @@ window.hideModal = hideModal;
|
|||||||
window.showNotification = showNotification;
|
window.showNotification = showNotification;
|
||||||
window.clearForm = clearForm;
|
window.clearForm = clearForm;
|
||||||
window.selectProject = selectProject;
|
window.selectProject = selectProject;
|
||||||
|
window.toggleProjectDropdown = toggleProjectDropdown;
|
||||||
|
window.selectProjectFromDropdown = selectProjectFromDropdown;
|
||||||
|
window.filterProjects = filterProjects;
|
||||||
|
window.goToProjectDetail = goToProjectDetail;
|
||||||
|
|
||||||
console.log('TK Project Demo JavaScript 로드 완료');
|
console.log('TK Project Demo JavaScript 로드 완료');
|
||||||
|
|||||||
@@ -590,197 +590,240 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 프로젝트 관리 컨테이너 */
|
/* 프로젝트 선택기 컨테이너 */
|
||||||
.project-management-container {
|
.project-selector-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 프로젝트 필터 */
|
|
||||||
.project-filters {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: var(--dt-shadow);
|
|
||||||
border: 1px solid var(--dt-gray-200);
|
|
||||||
padding: 24px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
justify-content: center;
|
||||||
gap: 20px;
|
min-height: 80vh;
|
||||||
|
padding: 40px 20px;
|
||||||
|
gap: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-section {
|
/* 프로젝트 선택기 헤더 */
|
||||||
display: flex;
|
.project-selector-header {
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
padding: 8px 12px;
|
|
||||||
border: 1px solid var(--dt-gray-300);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
width: 300px;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn {
|
|
||||||
padding: 8px 12px;
|
|
||||||
border: none;
|
|
||||||
background-color: var(--dt-primary);
|
|
||||||
color: white;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-btn {
|
|
||||||
padding: 6px 16px;
|
|
||||||
border: 1px solid var(--dt-gray-300);
|
|
||||||
background-color: white;
|
|
||||||
color: var(--dt-gray-700);
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-btn:hover {
|
|
||||||
background-color: var(--dt-gray-50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-btn.active {
|
|
||||||
background-color: var(--dt-primary);
|
|
||||||
color: white;
|
|
||||||
border-color: var(--dt-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-stats {
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-number {
|
.project-selector-header h1 {
|
||||||
display: block;
|
font-size: 48px;
|
||||||
font-size: 24px;
|
font-weight: 300;
|
||||||
font-weight: 700;
|
color: var(--dt-gray-800);
|
||||||
color: var(--dt-primary);
|
margin-bottom: 16px;
|
||||||
line-height: 1;
|
letter-spacing: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.selector-description {
|
||||||
font-size: 12px;
|
font-size: 18px;
|
||||||
color: var(--dt-gray-600);
|
color: var(--dt-gray-600);
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 프로젝트 리스트 */
|
/* 프로젝트 선택기 메인 */
|
||||||
.project-list {
|
.project-selector-main {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
flex-direction: column;
|
||||||
gap: 24px;
|
align-items: center;
|
||||||
|
gap: 32px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
/* 프로젝트 드롭다운 컨테이너 */
|
||||||
.project-list {
|
.project-dropdown-container {
|
||||||
grid-template-columns: 1fr;
|
width: 100%;
|
||||||
}
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 프로젝트 카드 */
|
/* 프로젝트 드롭다운 */
|
||||||
.project-card {
|
.project-dropdown {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-display {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 20px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 12px;
|
border: 2px solid var(--dt-gray-200);
|
||||||
box-shadow: var(--dt-shadow);
|
border-radius: 50px;
|
||||||
border: 1px solid var(--dt-gray-200);
|
|
||||||
padding: 24px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: var(--dt-shadow);
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card:hover {
|
.dropdown-display:hover {
|
||||||
transform: translateY(-2px);
|
border-color: var(--dt-primary);
|
||||||
box-shadow: var(--dt-shadow-lg);
|
box-shadow: var(--dt-shadow-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card.status-production {
|
.dropdown-display.active {
|
||||||
border-left: 4px solid var(--dt-primary);
|
border-color: var(--dt-primary);
|
||||||
|
border-radius: 20px 20px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card.status-planning {
|
.dropdown-text {
|
||||||
border-left: 4px solid var(--dt-gray-400);
|
color: var(--dt-gray-700);
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card.status-in-progress {
|
.dropdown-arrow {
|
||||||
border-left: 4px solid var(--dt-warning);
|
color: var(--dt-gray-500);
|
||||||
|
font-size: 12px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card.status-completed {
|
.dropdown-display.active .dropdown-arrow {
|
||||||
border-left: 4px solid var(--dt-success);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-header {
|
/* 드롭다운 메뉴 */
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: white;
|
||||||
|
border: 2px solid var(--dt-primary);
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 20px 20px;
|
||||||
|
box-shadow: var(--dt-shadow-lg);
|
||||||
|
z-index: 1000;
|
||||||
|
display: none;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 드롭다운 검색 */
|
||||||
|
.dropdown-search {
|
||||||
|
padding: 16px;
|
||||||
|
border-bottom: 1px solid var(--dt-gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 1px solid var(--dt-gray-300);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: var(--dt-gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-search-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--dt-primary);
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 드롭다운 옵션들 */
|
||||||
|
.dropdown-options {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-option {
|
||||||
|
padding: 16px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
border-bottom: 1px solid var(--dt-gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-option:hover {
|
||||||
|
background-color: var(--dt-gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-option:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-title h3 {
|
.option-title {
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--dt-gray-800);
|
color: var(--dt-gray-800);
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-title .job-no {
|
.option-job-no {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--dt-primary);
|
color: var(--dt-primary);
|
||||||
font-family: 'Monaco', 'Menlo', monospace;
|
font-family: 'Monaco', 'Menlo', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-status {
|
.option-details {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-text {
|
.option-customer {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
|
||||||
color: var(--dt-gray-600);
|
color: var(--dt-gray-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 프로젝트 정보 */
|
.option-status {
|
||||||
.project-info {
|
font-size: 11px;
|
||||||
margin-bottom: 20px;
|
font-weight: 600;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 선택된 프로젝트 정보 */
|
||||||
|
.selected-project-info {
|
||||||
|
width: 100%;
|
||||||
|
animation: fadeInUp 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info-card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: var(--dt-shadow-lg);
|
||||||
|
border: 1px solid var(--dt-gray-200);
|
||||||
|
padding: 32px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info-header h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dt-gray-800);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-job-no {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dt-primary);
|
||||||
|
font-family: 'Monaco', 'Menlo', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info-details {
|
||||||
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-row {
|
.info-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 6px 0;
|
padding: 12px 0;
|
||||||
border-bottom: 1px solid var(--dt-gray-100);
|
border-bottom: 1px solid var(--dt-gray-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -789,114 +832,104 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
color: var(--dt-gray-600);
|
color: var(--dt-gray-600);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value {
|
.info-value {
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
color: var(--dt-gray-800);
|
color: var(--dt-gray-800);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
|
||||||
|
|
||||||
/* 프로젝트 진행률 */
|
|
||||||
.project-progress {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-stages {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
margin-top: 12px;
|
gap: 8px;
|
||||||
}
|
|
||||||
|
|
||||||
.stage {
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--dt-gray-500);
|
|
||||||
text-align: center;
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage.completed {
|
|
||||||
color: var(--dt-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage.active {
|
|
||||||
color: var(--dt-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -8px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--dt-gray-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage.completed::after {
|
|
||||||
background-color: var(--dt-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage.active::after {
|
|
||||||
background-color: var(--dt-primary);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 프로젝트 액션 */
|
/* 프로젝트 액션 */
|
||||||
.project-actions {
|
.project-actions {
|
||||||
display: flex;
|
display: grid;
|
||||||
gap: 8px;
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-actions .btn {
|
.project-actions .btn {
|
||||||
flex: 1;
|
font-size: 14px;
|
||||||
font-size: 12px;
|
padding: 12px 16px;
|
||||||
padding: 8px 12px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.disabled {
|
/* 간단한 프로젝트 통계 */
|
||||||
opacity: 0.5;
|
.project-stats-simple {
|
||||||
cursor: not-allowed;
|
display: flex;
|
||||||
pointer-events: none;
|
gap: 32px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
display: block;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dt-primary);
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--dt-gray-600);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 애니메이션 */
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 반응형 디자인 */
|
/* 반응형 디자인 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.project-filters {
|
.project-selector-header h1 {
|
||||||
flex-direction: column;
|
font-size: 36px;
|
||||||
align-items: stretch;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-section {
|
.selector-description {
|
||||||
justify-content: center;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.project-selector-main {
|
||||||
width: 100%;
|
max-width: 100%;
|
||||||
max-width: 300px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-stats {
|
.dropdown-display {
|
||||||
justify-content: center;
|
padding: 14px 18px;
|
||||||
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card {
|
.project-info-card {
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
}
|
|
||||||
|
|
||||||
.project-header {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-actions {
|
.project-actions {
|
||||||
flex-direction: column;
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-stats-simple {
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user