-
-
-
- 프로젝트 관리
-진행 중인 프로젝트를 선택하여 세부 관리를 시작합니다.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ TK Project
+프로젝트를 선택하여 관리를 시작하세요
+
+
+
-
+
+ 프로젝트를 선택하세요
+ ▼
+
+
+
+
+
+
+
+
+
+
+
+ ABC 공장 배관공사
+ TK-2024-015
+
+
+ ABC 케미칼
+ 제작중
+
+
+
+
+
+ DEF 플랜트 배관 설치
+ TK-2024-016
+
+
+ DEF 화학
+ 계획
+
+
+
+
+
+ GHI 정유 공장 개보수
+ TK-2024-017
+
+
+ GHI 정유 / 한국엔지니어링
+ 진행중
+
+
+
+
+ JKL 화학 공장 신설
+ TK-2024-012
+
+
+ JKL 화학
+ 완료
+
+
-
- 12
- 전체 프로젝트
-
-
- 8
- 진행중
-
-
- 3
- 제작중
-
-
- 1
- 지연
+
+
+
-
-
+
+
+
+
+ 프로젝트명
+ Job No. +
+
+
+
+ 고객사
+ -
+
+
+ 납기일
+ -
+
+
+ 납품방식
+ -
+
+
+ 담당 PM
+ -
+
+
+ 진행상태
+
+ -
+ 0%
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- ABC 공장 배관공사
- TK-2024-015 -
- 제작중
- 75%
-
-
-
-
-
- 고객사
- ABC 케미칼
-
-
- 납기일
- 2024-03-30
-
-
- 납품방식
- 현장납품
-
-
- 담당 PM
- 이PM
-
-
-
-
-
-
-
-
-
- 설계
- 구매
- 제작
- 검사
- 납품
-
-
-
-
+
+
+
+ 12
+ 전체 프로젝트
-
-
-
-
-
-
-
- DEF 플랜트 배관 설치
- TK-2024-016 -
- 계획
- 25%
-
-
-
-
-
- 고객사
- DEF 화학
-
-
- 납기일
- 2024-04-15
-
-
- 납품방식
- 공장인도
-
-
- 담당 PM
- 박PM
-
-
-
-
-
-
-
-
-
- 설계
- 구매
- 제작
- 검사
- 납품
-
-
-
-
+
+ 8
+ 진행중
-
-
-
diff --git a/demo/scripts/main.js b/demo/scripts/main.js
index a96899c..b31ec8d 100644
--- a/demo/scripts/main.js
+++ b/demo/scripts/main.js
@@ -359,146 +359,211 @@ function initializePage(pageId) {
function initializeProjectManagement() {
console.log('프로젝트 관리 페이지 초기화');
- // 프로젝트 카드 애니메이션
- animateElements('.project-card');
+ // 드롭다운 외부 클릭 이벤트 설정
+ setupDropdownOutsideClick();
- // 필터 버튼 이벤트 설정
- setupProjectFilters();
-
- // 검색 기능 설정
- setupProjectSearch();
+ // 애니메이션 효과
+ animateElements('.project-selector-header');
+ animateElements('.project-dropdown-container');
+ animateElements('.project-stats-simple');
}
-// 프로젝트 필터 설정
-function setupProjectFilters() {
- const filterButtons = document.querySelectorAll('.filter-btn');
-
- filterButtons.forEach(btn => {
- btn.addEventListener('click', function() {
- // 활성 버튼 변경
- filterButtons.forEach(b => b.classList.remove('active'));
- this.classList.add('active');
-
- // 필터 적용
- const filter = this.getAttribute('data-filter');
- filterProjects(filter);
- });
+// 드롭다운 외부 클릭 설정
+function setupDropdownOutsideClick() {
+ document.addEventListener('click', function(e) {
+ const dropdown = document.querySelector('.project-dropdown');
+ const dropdownMenu = document.getElementById('project-dropdown-menu');
+ const dropdownDisplay = document.querySelector('.dropdown-display');
+
+ if (!dropdown.contains(e.target)) {
+ dropdownMenu.classList.remove('active');
+ dropdownDisplay.classList.remove('active');
+ }
});
}
-// 프로젝트 검색 설정
-function setupProjectSearch() {
- const searchInput = document.querySelector('.search-input');
- const searchBtn = document.querySelector('.search-btn');
+// 프로젝트 드롭다운 토글
+function toggleProjectDropdown() {
+ const dropdownMenu = document.getElementById('project-dropdown-menu');
+ const dropdownDisplay = document.querySelector('.dropdown-display');
- if (searchInput && searchBtn) {
- searchBtn.addEventListener('click', performSearch);
- searchInput.addEventListener('keypress', function(e) {
- if (e.key === 'Enter') {
- performSearch();
+ 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() {
- const searchInput = document.querySelector('.search-input');
- const query = searchInput.value.toLowerCase().trim();
+// 드롭다운에서 프로젝트 선택
+function selectProjectFromDropdown(jobNo) {
+ const projectData = getProjectData(jobNo);
+ 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;
}
- const projectCards = document.querySelectorAll('.project-card');
- 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);
- }
+ showNotification('프로젝트 세부 관리 페이지는 추후 구현 예정입니다.', 'info');
}
// 프로젝트 등록 페이지 초기화
@@ -921,5 +986,9 @@ window.hideModal = hideModal;
window.showNotification = showNotification;
window.clearForm = clearForm;
window.selectProject = selectProject;
+window.toggleProjectDropdown = toggleProjectDropdown;
+window.selectProjectFromDropdown = selectProjectFromDropdown;
+window.filterProjects = filterProjects;
+window.goToProjectDetail = goToProjectDetail;
console.log('TK Project Demo JavaScript 로드 완료');
diff --git a/demo/styles/devonthink.css b/demo/styles/devonthink.css
index a735702..ae67aff 100644
--- a/demo/styles/devonthink.css
+++ b/demo/styles/devonthink.css
@@ -590,197 +590,240 @@ body {
}
}
-/* 프로젝트 관리 컨테이너 */
-.project-management-container {
+/* 프로젝트 선택기 컨테이너 */
+.project-selector-container {
display: flex;
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;
- flex-wrap: wrap;
- gap: 20px;
+ justify-content: center;
+ min-height: 80vh;
+ padding: 40px 20px;
+ gap: 40px;
}
-.filter-section {
- display: flex;
- 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 {
+/* 프로젝트 선택기 헤더 */
+.project-selector-header {
text-align: center;
}
-.stat-number {
- display: block;
- font-size: 24px;
- font-weight: 700;
- color: var(--dt-primary);
- line-height: 1;
+.project-selector-header h1 {
+ font-size: 48px;
+ font-weight: 300;
+ color: var(--dt-gray-800);
+ margin-bottom: 16px;
+ letter-spacing: -1px;
}
-.stat-label {
- font-size: 12px;
+.selector-description {
+ font-size: 18px;
color: var(--dt-gray-600);
- font-weight: 500;
+ font-weight: 400;
}
-/* 프로젝트 리스트 */
-.project-list {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
- gap: 24px;
+/* 프로젝트 선택기 메인 */
+.project-selector-main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 32px;
+ width: 100%;
+ max-width: 600px;
}
-@media (max-width: 800px) {
- .project-list {
- grid-template-columns: 1fr;
- }
+/* 프로젝트 드롭다운 컨테이너 */
+.project-dropdown-container {
+ 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;
- border-radius: 12px;
- box-shadow: var(--dt-shadow);
- border: 1px solid var(--dt-gray-200);
- padding: 24px;
- transition: all 0.2s ease;
+ border: 2px solid var(--dt-gray-200);
+ border-radius: 50px;
cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: var(--dt-shadow);
+ font-size: 16px;
}
-.project-card:hover {
- transform: translateY(-2px);
+.dropdown-display:hover {
+ border-color: var(--dt-primary);
box-shadow: var(--dt-shadow-lg);
}
-.project-card.status-production {
- border-left: 4px solid var(--dt-primary);
+.dropdown-display.active {
+ border-color: var(--dt-primary);
+ border-radius: 20px 20px 0 0;
}
-.project-card.status-planning {
- border-left: 4px solid var(--dt-gray-400);
+.dropdown-text {
+ color: var(--dt-gray-700);
+ font-weight: 500;
}
-.project-card.status-in-progress {
- border-left: 4px solid var(--dt-warning);
+.dropdown-arrow {
+ color: var(--dt-gray-500);
+ font-size: 12px;
+ transition: transform 0.2s ease;
}
-.project-card.status-completed {
- border-left: 4px solid var(--dt-success);
+.dropdown-display.active .dropdown-arrow {
+ 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;
justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 20px;
+ align-items: center;
+ margin-bottom: 8px;
}
-.project-title h3 {
- font-size: 18px;
+.option-title {
+ font-size: 16px;
font-weight: 600;
color: var(--dt-gray-800);
- margin-bottom: 4px;
}
-.project-title .job-no {
+.option-job-no {
font-size: 12px;
font-weight: 700;
color: var(--dt-primary);
font-family: 'Monaco', 'Menlo', monospace;
}
-.project-status {
+.option-details {
display: flex;
+ justify-content: space-between;
align-items: center;
- gap: 8px;
}
-.progress-text {
+.option-customer {
font-size: 14px;
- font-weight: 600;
color: var(--dt-gray-600);
}
-/* 프로젝트 정보 */
-.project-info {
- margin-bottom: 20px;
+.option-status {
+ font-size: 11px;
+ 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 {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 6px 0;
+ padding: 12px 0;
border-bottom: 1px solid var(--dt-gray-100);
}
@@ -789,114 +832,104 @@ body {
}
.info-label {
- font-size: 12px;
+ font-size: 14px;
color: var(--dt-gray-600);
font-weight: 500;
}
.info-value {
- font-size: 13px;
+ font-size: 14px;
color: var(--dt-gray-800);
font-weight: 600;
-}
-
-/* 프로젝트 진행률 */
-.project-progress {
- margin-bottom: 20px;
-}
-
-.progress-stages {
display: flex;
- justify-content: space-between;
- margin-top: 12px;
-}
-
-.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);
+ align-items: center;
+ gap: 8px;
}
/* 프로젝트 액션 */
.project-actions {
- display: flex;
- gap: 8px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
}
.project-actions .btn {
- flex: 1;
- font-size: 12px;
- padding: 8px 12px;
+ font-size: 14px;
+ padding: 12px 16px;
+ border-radius: 8px;
}
-.btn.disabled {
- opacity: 0.5;
- cursor: not-allowed;
- pointer-events: none;
+/* 간단한 프로젝트 통계 */
+.project-stats-simple {
+ display: flex;
+ 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) {
- .project-filters {
- flex-direction: column;
- align-items: stretch;
+ .project-selector-header h1 {
+ font-size: 36px;
}
- .filter-section {
- justify-content: center;
+ .selector-description {
+ font-size: 16px;
}
- .search-input {
- width: 100%;
- max-width: 300px;
+ .project-selector-main {
+ max-width: 100%;
}
- .project-stats {
- justify-content: center;
+ .dropdown-display {
+ padding: 14px 18px;
+ font-size: 15px;
}
- .project-card {
- padding: 20px;
- }
-
- .project-header {
- flex-direction: column;
- gap: 12px;
+ .project-info-card {
+ padding: 24px;
}
.project-actions {
- flex-direction: column;
+ grid-template-columns: 1fr;
+ }
+
+ .project-stats-simple {
+ gap: 24px;
+ }
+
+ .stat-number {
+ font-size: 24px;
}
}
-
-
-
-
- GHI 정유 공장 개보수
- TK-2024-017 -
- 진행중
- 60%
-
-
-
-
-
- 고객사
- GHI 정유 / 한국엔지니어링
-
-
- 납기일
- 2024-05-20
-
-
- 납품방식
- 부분납품
-
-
- 담당 PM
- 최PM
-
-
-
-
-
-
-
-
-
- 설계
- 구매
- 제작
- 검사
- 납품
-
-
-
-
+
+ 3
+ 제작중
-
-
-
-
-
-
-
- JKL 화학 공장 신설
- TK-2024-012 -
- 완료
- 100%
-
-
-
-
-
- 고객사
- JKL 화학
-
-
- 납기일
- 2024-02-28
-
-
- 납품방식
- 현장납품
-
-
- 담당 PM
- 김PM
-
-
-
-
-
-
-
-
-
- 설계
- 구매
- 제작
- 검사
- 납품
-
-
-
-
+
+ 1
+ 지연