🏢 프로젝트 관리 페이지 추가 - 워크플로우 시작점
핵심 구현사항: ✅ 전체 워크플로우의 시작점이 되는 프로젝트 관리 페이지 완성 - 사이드바에 '프로젝트 관리' 메뉴 추가 (최상단 배치) - 기본 페이지를 프로젝트 관리로 변경 🎯 프로젝트 선택 시스템 - 4개 샘플 프로젝트 (계획/진행중/제작중/완료 상태) - 각 프로젝트별 상세 정보 (고객사, 납기일, 납품방식, 담당PM) - 5단계 진행률 표시 (설계→구매→제작→검사→납품) - 상태별 색상 구분 및 진행률 바 🔍 검색 및 필터 기능 - 프로젝트명/Job No./고객사 통합 검색 - 상태별 필터 (전체/계획/진행중/제작중/완료) - 실시간 통계 표시 (전체 12개, 진행중 8개, 제작중 3개, 지연 1개) - 검색 결과 카운트 알림 🎨 카드 기반 UI 디자인 - DevonThink 스타일 프로젝트 카드 - 호버 효과 (lift-up 애니메이션) - 상태별 좌측 컬러 바 (파란색/회색/노랑/초록) - 반응형 그리드 레이아웃 (2열→1열) ⚡ 인터랙티브 기능 - 프로젝트 선택 시 세션 스토리지 저장 - 각 프로젝트별 맞춤 액션 버튼 - 제작중: '프로젝트 관리' + '생산회의록' - 계획중: '프로젝트 관리' + 비활성화된 '생산회의록' - 진행중: '프로젝트 관리' + '입고 검수' - 완료: '프로젝트 보기' + '완료됨' 📊 하드코딩 데이터 - TK-2024-015: ABC 공장 배관공사 (제작중 75%) - TK-2024-016: DEF 플랜트 배관 설치 (계획 25%) - TK-2024-017: GHI 정유 공장 개보수 (진행중 60%) - TK-2024-012: JKL 화학 공장 신설 (완료 100%) 🔄 워크플로우 연결 - 프로젝트 선택 → 각 기능 페이지로 연결 - 선택된 프로젝트 정보 전역 공유 - 다른 페이지에서 프로젝트 컨텍스트 유지 시연 준비: 전체 워크플로우의 중심이 되는 프로젝트 관리 시스템 완성
This commit is contained in:
Hyungi Ahn
@@ -560,6 +560,21 @@ body {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-planning {
|
||||
background-color: var(--dt-gray-400);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-production {
|
||||
background-color: var(--dt-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-in-progress {
|
||||
background-color: var(--dt-warning);
|
||||
color: var(--dt-gray-800);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.request-item {
|
||||
flex-direction: column;
|
||||
@@ -575,6 +590,316 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* 프로젝트 관리 컨테이너 */
|
||||
.project-management-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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--dt-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--dt-gray-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 프로젝트 리스트 */
|
||||
.project-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.project-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 프로젝트 카드 */
|
||||
.project-card {
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--dt-shadow-lg);
|
||||
}
|
||||
|
||||
.project-card.status-production {
|
||||
border-left: 4px solid var(--dt-primary);
|
||||
}
|
||||
|
||||
.project-card.status-planning {
|
||||
border-left: 4px solid var(--dt-gray-400);
|
||||
}
|
||||
|
||||
.project-card.status-in-progress {
|
||||
border-left: 4px solid var(--dt-warning);
|
||||
}
|
||||
|
||||
.project-card.status-completed {
|
||||
border-left: 4px solid var(--dt-success);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.project-title h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--dt-gray-800);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.project-title .job-no {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--dt-primary);
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
}
|
||||
|
||||
.project-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--dt-gray-600);
|
||||
}
|
||||
|
||||
/* 프로젝트 정보 */
|
||||
.project-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--dt-gray-100);
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: var(--dt-gray-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 13px;
|
||||
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);
|
||||
}
|
||||
|
||||
/* 프로젝트 액션 */
|
||||
.project-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.project-actions .btn {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.btn.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 반응형 디자인 */
|
||||
@media (max-width: 768px) {
|
||||
.project-filters {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.project-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.project-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.project-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* 자동 생성 정보 */
|
||||
.auto-generated {
|
||||
margin: 20px 0;
|
||||
|
||||
Reference in New Issue
Block a user