diff --git a/demo/styles/devonthink.css b/demo/styles/devonthink.css index 365b3e5..140b169 100644 --- a/demo/styles/devonthink.css +++ b/demo/styles/devonthink.css @@ -46,6 +46,178 @@ body { overflow: hidden; } +/* 워크플로우 상세 페이지용 스타일 */ +.workflow-detail-page { + width: 100%; + min-height: 100vh; + overflow-y: auto; + padding: 20px; + display: block; +} + +/* 워크플로우 페이지일 때 body 스타일 재정의 */ +body.workflow-page { + height: auto !important; + overflow: visible !important; + display: block !important; +} + +/* 캘린더 스타일 */ +.calendar-container { + background: white; + border-radius: 12px; + padding: 30px; + box-shadow: var(--dt-shadow); + margin: 20px 0; + max-width: 800px; +} + +.calendar-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.calendar-nav-btn { + background: var(--dt-gray-200); + border: none; + border-radius: 6px; + padding: 8px 12px; + cursor: pointer; + font-size: 16px; + color: var(--dt-gray-700); + transition: background-color 0.2s; +} + +.calendar-nav-btn:hover { + background: var(--dt-gray-300); +} + +.calendar-title { + font-size: 1.2em; + font-weight: 600; + color: var(--dt-gray-800); + margin: 0; +} + +.calendar-month { + width: 100%; +} + +.calendar-table { + width: 100% !important; + border-collapse: collapse !important; + background: white; + border-radius: 8px; + overflow: hidden; + box-shadow: var(--dt-shadow-sm); + display: table !important; +} + +.calendar-table th { + background: var(--dt-gray-100); + color: var(--dt-gray-700); + font-weight: 600; + padding: 12px 8px; + text-align: center; + font-size: 14px; + border-bottom: 2px solid var(--dt-gray-200); +} + +.calendar-table td { + width: 14.28%; + height: 50px; + text-align: center; + vertical-align: middle; + border: 1px solid var(--dt-gray-200); + cursor: pointer; + transition: all 0.2s; + position: relative; + font-size: 14px; + color: var(--dt-gray-800); + background: var(--dt-gray-50); +} + +.calendar-table td:hover { + background: var(--dt-gray-100); +} + +.calendar-table td.other-month { + color: var(--dt-gray-400); + background: var(--dt-gray-100); +} + +.calendar-table td.has-event { + background: var(--dt-gray-500) !important; + color: white; + font-weight: 600; + border: 2px solid var(--dt-gray-600); +} + +.calendar-table td.has-event:hover { + background: var(--dt-gray-600) !important; + transform: scale(1.05); +} + +.calendar-table td.has-event::before { + content: "●"; + position: absolute; + top: 3px; + right: 5px; + color: var(--dt-warning); + font-size: 10px; +} + +.calendar-table td.has-event::after { + content: attr(data-event); + position: absolute; + bottom: -35px; + left: 50%; + transform: translateX(-50%); + background: var(--dt-gray-800); + color: white; + padding: 6px 10px; + border-radius: 6px; + font-size: 11px; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s; + z-index: 100; + box-shadow: var(--dt-shadow-lg); +} + +.calendar-table td.has-event:hover::after { + opacity: 1; +} + +.calendar-legend { + display: flex; + justify-content: center; + margin-top: 20px; + gap: 20px; +} + +.legend-item { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + color: var(--dt-gray-600); +} + +.legend-color { + width: 16px; + height: 16px; + border-radius: 4px; +} + +.legend-color.has-event { + background: var(--dt-gray-500); + border: 2px solid var(--dt-gray-600); +} + /* 사이드바 */ .sidebar { width: 280px; diff --git a/demo/workflow-stage-1.html b/demo/workflow-stage-1.html index 57b80ec..478c23b 100644 --- a/demo/workflow-stage-1.html +++ b/demo/workflow-stage-1.html @@ -7,28 +7,271 @@ - +
- ← 워크플로우로 돌아가기 + ← 프레젠테이션으로 돌아가기

🚀 1단계: 준비 단계

프로젝트 등록 및 각 부서별 업무 분기 단계

-

📋 프로젝트 등록

-
-
-

수주에 따른 Job No. 부여

-

담당자: 영업 또는 PM

+

📋 프로젝트 등록 (간소화)

+
+

✅ Job No. 부여 및 기본 정보 등록 - 별도 시스템에서 처리

+
+
+ +
+

📐 표준 스펙 관리 시스템

+

핵심 개념: 회사 표준 스펙을 기반으로 프로젝트별 맞춤 스펙을 효율적으로 관리

+ +
+
+

🏢 1단계: 회사 표준 스펙 활용

+
+

목적: 매번 새로 작성하지 않고 검증된 표준 스펙을 재사용

+
    +
  • 배관 표준 스펙: 파이프, 밸브, 피팅 표준 사양
    • +
  • 용접 표준 스펙: 용접 절차, 검사 기준
    • +
  • 도장 표준 스펙: 표면처리, 도장 사양
    • +
+
+ 💡 효과: 스펙 작성 시간 80% 단축, 품질 일관성 확보 +
+
-
-

업무 내용

-
    -
  • 관련 정보 업로드 (관련 자료 + 담당자 정리본)
    • -
  • 일정을 고려한 외주 & 자체제작 여부 확정
    • -
+ +
+

🎯 2단계: 고객 요구사항 반영

+
+

목적: 표준 스펙에서 고객사별 특수 요구사항만 추가/변경

+
+
📋 변경 예시 (ABC 공장 프로젝트)
+
    +
  • 파이프 재질: STS304 → STS316L (고온 환경 대응)
    • +
  • 밸브 압력 등급: 150LB → 300LB (운전 압력 상승)
    • +
  • 도장 색상: 표준 회색 → 고객사 지정 파란색
    • +
+
+
+ 💡 효과: 변경사항만 관리하여 실수 방지, 이력 추적 가능 +
+
+
+ +
+

📁 3단계: 문서 통합 관리

+
+

목적: 고객사 원본 문서와 우리 스펙을 통합하여 최종 스펙서 생성

+
+
📤 고객사 PDF 업로드
+
→
+
📋 표준 스펙 적용
+
→
+
✏️ 변경사항 추가
+
→
+
📄 최종 스펙서 생성
+
+
+ 💡 효과: 모든 관련 문서가 하나로 통합, 다운로드/공유 간편 +
+
+
+
+ +
+

🎯 핵심 가치

+
+
+
⚡
+
+
효율성 극대화
+

표준 스펙 재사용으로 작성 시간 대폭 단축

+
+
+
+
🎯
+
+
품질 일관성
+

검증된 표준을 기반으로 한 안정적 품질

+
+
+
+
📋
+
+
변경 이력 관리
+

모든 변경사항과 사유를 체계적으로 기록

+
+
+
+
🔗
+
+
문서 통합
+

분산된 문서들을 하나의 최종 스펙서로 통합

+
+
+
+
+
+ +
+

🏭 외주 vs 자체제작 결정 시스템

+

핵심 개념: 프로젝트 특성과 회사 역량을 분석하여 최적의 제작 방식 결정

+ +
+
+

📊 1단계: 프로젝트 분석

+
+
+
+
🎯 기술적 요소
+
    +
  • 기술 난이도: 고난이도 → 외주, 표준 사양 → 자체제작
    • +
  • 특수 공법: 특수 용접, 도금 등 → 외주 전문업체
    • +
  • 품질 요구사항: 초고압, 특수재질 → 외주
    • +
+
+
+
⏰ 일정적 요소
+
    +
  • 납기 여유: 촉박한 납기 → 외주 (병렬 진행)
    • +
  • 생산팀 일정: 포화 상태 → 외주
    • +
  • 긴급도: 긴급 프로젝트 → 외주
    • +
+
+
+
💰 경제적 요소
+
    +
  • 물량 규모: 대량 → 자체제작, 소량 → 외주
    • +
  • 수익성: 고수익 → 자체제작
    • +
  • 자재비 비중: 높은 자재비 → 자체제작
    • +
+
+
+
+
+ +
+

⚖️ 2단계: 의사결정 매트릭스

+
+
+
📋 ABC 공장 배관공사 예시
+
+
+
평가 항목
+
가중치
+
외주
+
자체제작
+
결과
+
+
+
기술 난이도
+
30%
+
8점
+
6점
+
외주 우세
+
+
+
납기 여유
+
25%
+
6점
+
8점
+
자체 우세
+
+
+
비용 효율성
+
25%
+
5점
+
9점
+
자체 우세
+
+
+
품질 관리
+
20%
+
7점
+
8점
+
자체 우세
+
+
+
총점
+
100%
+
6.5점
+
7.8점
+
자체제작 선택
+
+
+
+
+
+ +
+

📝 3단계: 결정 사항 문서화

+
+
+
+
+ 🏭 +
최종 결정: 자체제작
+
+
+

결정 근거:

+
    +
  • 표준 배관 사양으로 기술적 난이도 적정
    • +
  • 충분한 납기 여유 (8주)
    • +
  • 대량 물량으로 자체제작 시 원가 절감 효과 큼
    • +
  • 생산팀 일정 여유 있음
    • +
+
+
+ +
+
🏢 외주 시 고려사항
+
    +
  • 추천 업체: 대한배관, 코리아파이프 (기존 협력업체)
    • +
  • 예상 비용: 자체제작 대비 15% 증가
    • +
  • 납기: 6주 (2주 단축 가능)
    • +
  • 품질 리스크: 중간 (업체 품질 관리 필요)
    • +
+
+
+
+
+
+ +
+

🎯 결정에 따른 후속 조치

+
+
+
+ 🏭 +
자체제작 선택 시
+
+
+
    +
  • 설계팀: 상세 도면 작성 및 BOM 생성
    • +
  • 구매팀: 자재 구매 신청 및 발주
    • +
  • 생산팀: 제작 일정 수립 및 인력 배치
    • +
  • 품질팀: 공정별 검사 계획 수립
    • +
+
+
+ +
+
+ 🏢 +
외주 선택 시
+
+
+
    +
  • 설계팀: 외주용 도면 패키지 준비
    • +
  • 구매팀: 외주업체 견적 및 발주
    • +
  • 생산팀: 일정 여유 확보, 다른 프로젝트 집중
    • +
  • 품질팀: 외주업체 품질 관리 계획
    • +
+
+
diff --git a/demo/workflow-stage-2.html b/demo/workflow-stage-2.html index 024bab3..9871a12 100644 --- a/demo/workflow-stage-2.html +++ b/demo/workflow-stage-2.html @@ -7,10 +7,10 @@ - +
- ← 워크플로우로 돌아가기 + ← 프레젠테이션으로 돌아가기

🔄 2단계: 프로젝트 진행 단계 (발주)

외주 및 자체제작 프로세스 관리

diff --git a/demo/workflow-stage-3.html b/demo/workflow-stage-3.html index 7ed687b..3f764f8 100644 --- a/demo/workflow-stage-3.html +++ b/demo/workflow-stage-3.html @@ -7,10 +7,10 @@ - +
- ← 워크플로우로 돌아가기 + ← 프레젠테이션으로 돌아가기

🛠️ 3단계: 제작 단계

외주 및 자체제작 생산 관리

diff --git a/demo/workflow-stage-4.html b/demo/workflow-stage-4.html index d6b4e19..4f2a5c5 100644 --- a/demo/workflow-stage-4.html +++ b/demo/workflow-stage-4.html @@ -7,15 +7,227 @@ - +
- ← 워크플로우로 돌아가기 + ← 프레젠테이션으로 돌아가기

🏢 4단계: 생산회의

프로젝트 진행 현황 통합 관리

+
+

📅 프로젝트 일정 캘린더

+

자재 입고 및 제작 일정을 한눈에 확인

+ +
+
+ +

2024년 8월

+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
일월화수목금토
28293031123
45678910
11121314151617
18192021222324
25262728293031
+
+ + + + + + + +
+
+
+ 자재 입고 예정 +
+
+
+
+

📊 생산회의 주요 기능

@@ -68,5 +280,55 @@
+ + diff --git a/presentation.html b/presentation.html index e1d9ece..6fae11f 100644 --- a/presentation.html +++ b/presentation.html @@ -95,11 +95,17 @@ border-left: 5px solid #4299e1; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); + cursor: pointer; + text-decoration: none; + color: inherit; + display: block; } .workflow-step:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); + text-decoration: none; + color: inherit; } .step-number { @@ -383,26 +389,26 @@

🔄 전체 워크플로우

-
+
1
📋 준비 단계
수주 → Job No. 부여 → 담당자 배정
외주/자체제작 결정 → 각 부서 일정 수립
-
-
+ +
2
🚀 프로젝트 진행 (발주)
외주: 도면 → 견적 → 발주 → 관리
자체: BOM → 구매신청 → 발주 → 입고
-
-
+ +
3
🛠️ 제작 단계
외주: 업체 공정표 관리 + NCR 처리
자체: 생산팀 공정관리 + 자재 인수인계
-
-
+ +
4
🏢 생산회의
제작 전/중 현황 관리
공정표 표시 개선 + 실시간 모니터링
-
+
5
📦 납품 (출하전 보고서)