feat: 자재 관리 페이지 대규모 개선

- 파이프 수량 계산 로직 수정 (단관 개수가 아닌 실제 길이 기반 계산) - UI 전면 개편 (DevonThink 스타일의 간결하고 세련된 디자인) - 자재별 그룹핑 로직 개선: * 플랜지: 동일 사양별 그룹핑, WN 스케줄 표시, ORIFICE 풀네임 표시 * 피팅: 상세 타입 표시 (니플 길이, 엘보 각도/연결, 티 타입, 리듀서 타입 등) * 밸브: 동일 사양별 그룹핑, 타입/연결방식/압력 표시 * 볼트: 크기/재질/길이별 그룹핑 (8SET → 개별 집계) * 가스켓: 동일 사양별 그룹핑, 재질/상세내역/두께 분리 표시 * UNKNOWN: 원본 설명 전체 표시, 동일 항목 그룹핑 - 전체 카테고리 버튼 제거 (표시 복잡도 감소) - 카테고리별 동적 컬럼 헤더 및 레이아웃 적용
2025-09-09 09:24:45 +09:00
parent 4f8e395f87
commit 83b90ef05c
101 changed files with 10841 additions and 4813 deletions
--- a/frontend/src/components/PersonalizedDashboard.jsx
+++ b/frontend/src/components/PersonalizedDashboard.jsx
@@ -0,0 +1,482 @@
+import React, { useState, useEffect } from 'react';
+import { api } from '../api';
+
+const PersonalizedDashboard = () => {
+    const [user, setUser] = useState(null);
+    const [dashboardData, setDashboardData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [recentActivities, setRecentActivities] = useState([]);
+
+    useEffect(() => {
+        loadUserData();
+        loadDashboardData();
+        loadRecentActivities();
+    }, []);
+
+    const loadUserData = () => {
+        const userData = localStorage.getItem('user_data');
+        if (userData) {
+            setUser(JSON.parse(userData));
+        }
+    };
+
+    const loadDashboardData = async () => {
+        try {
+            // 실제 API에서 대시보드 데이터 로드
+            const response = await api.get('/dashboard/stats');
+            if (response.data && response.data.success) {
+                // API 데이터와 목 데이터를 병합 (quickActions 등 누락된 필드 보완)
+                const mockData = generateMockDataByRole();
+                const mergedData = {
+                    ...mockData,
+                    ...response.data.stats,
+                    // quickActions가 없으면 목 데이터의 것을 사용
+                    quickActions: response.data.stats.quickActions || mockData?.quickActions || []
+                };
+                setDashboardData(mergedData);
+            } else {
+                // API 실패 시 목 데이터 사용
+                console.log('대시보드 API 응답이 없어 목 데이터를 사용합니다.');
+                const mockData = generateMockDataByRole();
+                setDashboardData(mockData);
+            }
+        } catch (error) {
+            console.log('대시보드 API가 구현되지 않아 목 데이터를 사용합니다:', error.response?.status);
+            // 에러 시 목 데이터 사용
+            const mockData = generateMockDataByRole();
+            setDashboardData(mockData);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadRecentActivities = async () => {
+        try {
+            // 실제 API에서 활동 이력 로드
+            const response = await api.get('/dashboard/activities?limit=5');
+            if (response.data.success && response.data.activities.length > 0) {
+                setRecentActivities(response.data.activities);
+            } else {
+                // API 실패 시 목 데이터 사용
+                const mockActivities = generateMockActivitiesByRole();
+                setRecentActivities(mockActivities);
+            }
+        } catch (error) {
+            console.log('활동 이력 API가 구현되지 않아 목 데이터를 사용합니다:', error.response?.status);
+            // 에러 시 목 데이터 사용
+            const mockActivities = generateMockActivitiesByRole();
+            setRecentActivities(mockActivities);
+        }
+    };
+
+    const generateMockDataByRole = () => {
+        if (!user) return null;
+
+        const baseData = {
+            admin: {
+                title: "시스템 관리자",
+                subtitle: "전체 시스템을 관리하고 모니터링합니다",
+                metrics: [
+                    { label: "전체 프로젝트 수", value: 45, icon: "📋", color: "#667eea" },
+                    { label: "활성 사용자 수", value: 12, icon: "👥", color: "#48bb78" },
+                    { label: "시스템 상태", value: "정상", icon: "🟢", color: "#38b2ac" },
+                    { label: "오늘 업로드", value: 8, icon: "📤", color: "#ed8936" }
+                ],
+                quickActions: [
+                    { title: "사용자 관리", icon: "👤", path: "/admin/users", color: "#667eea" },
+                    { title: "시스템 설정", icon: "⚙️", path: "/admin/settings", color: "#48bb78" },
+                    { title: "백업 관리", icon: "💾", path: "/admin/backup", color: "#ed8936" },
+                    { title: "활동 로그", icon: "📊", path: "/admin/logs", color: "#9f7aea" }
+                ]
+            },
+            manager: {
+                title: "프로젝트 매니저",
+                subtitle: "팀 프로젝트를 관리하고 진행상황을 모니터링합니다",
+                metrics: [
+                    { label: "담당 프로젝트", value: 8, icon: "📋", color: "#667eea" },
+                    { label: "팀 진행률", value: "87%", icon: "📈", color: "#48bb78" },
+                    { label: "승인 대기", value: 3, icon: "⏳", color: "#ed8936" },
+                    { label: "이번 주 완료", value: 5, icon: "✅", color: "#38b2ac" }
+                ],
+                quickActions: [
+                    { title: "프로젝트 생성", icon: "➕", path: "/projects/new", color: "#667eea" },
+                    { title: "팀 관리", icon: "👥", path: "/team", color: "#48bb78" },
+                    { title: "진행 상황", icon: "📊", path: "/progress", color: "#38b2ac" },
+                    { title: "승인 처리", icon: "✅", path: "/approvals", color: "#ed8936" }
+                ]
+            },
+            designer: {
+                title: "설계 담당자",
+                subtitle: "BOM 파일을 관리하고 자재를 분류합니다",
+                metrics: [
+                    { label: "내 BOM 파일", value: 15, icon: "📄", color: "#667eea" },
+                    { label: "분류 완료율", value: "92%", icon: "🎯", color: "#48bb78" },
+                    { label: "검증 대기", value: 7, icon: "⏳", color: "#ed8936" },
+                    { label: "이번 주 업로드", value: 12, icon: "📤", color: "#9f7aea" }
+                ],
+                quickActions: [
+                    { title: "BOM 업로드", icon: "📤", path: "/upload", color: "#667eea" },
+                    { title: "자재 분류", icon: "🔧", path: "/materials", color: "#48bb78" },
+                    { title: "리비전 관리", icon: "🔄", path: "/revisions", color: "#38b2ac" },
+                    { title: "분류 검증", icon: "✅", path: "/verify", color: "#ed8936" }
+                ]
+            },
+            purchaser: {
+                title: "구매 담당자",
+                subtitle: "구매 요청을 처리하고 발주를 관리합니다",
+                metrics: [
+                    { label: "구매 요청", value: 23, icon: "🛒", color: "#667eea" },
+                    { label: "발주 완료", value: 18, icon: "✅", color: "#48bb78" },
+                    { label: "입고 대기", value: 5, icon: "📦", color: "#ed8936" },
+                    { label: "이번 달 금액", value: "₩2.3M", icon: "💰", color: "#9f7aea" }
+                ],
+                quickActions: [
+                    { title: "구매 확정", icon: "🛒", path: "/purchase", color: "#667eea" },
+                    { title: "발주 관리", icon: "📋", path: "/orders", color: "#48bb78" },
+                    { title: "공급업체", icon: "🏢", path: "/suppliers", color: "#38b2ac" },
+                    { title: "입고 처리", icon: "📦", path: "/receiving", color: "#ed8936" }
+                ]
+            },
+            user: {
+                title: "일반 사용자",
+                subtitle: "할당된 업무를 수행하고 프로젝트에 참여합니다",
+                metrics: [
+                    { label: "내 업무", value: 6, icon: "📋", color: "#667eea" },
+                    { label: "완료율", value: "75%", icon: "📈", color: "#48bb78" },
+                    { label: "대기 중", value: 2, icon: "⏳", color: "#ed8936" },
+                    { label: "이번 주 활동", value: 12, icon: "🎯", color: "#9f7aea" }
+                ],
+                quickActions: [
+                    { title: "내 업무", icon: "📋", path: "/my-tasks", color: "#667eea" },
+                    { title: "프로젝트 보기", icon: "👁️", path: "/projects", color: "#48bb78" },
+                    { title: "리포트 다운로드", icon: "📊", path: "/reports", color: "#38b2ac" },
+                    { title: "도움말", icon: "❓", path: "/help", color: "#9f7aea" }
+                ]
+            }
+        };
+
+        return baseData[user.role] || baseData.user;
+    };
+
+    const generateMockActivitiesByRole = () => {
+        if (!user) return [];
+
+        const activities = {
+            admin: [
+                { type: "system", message: "새 사용자 3명이 등록되었습니다", time: "30분 전", icon: "👥" },
+                { type: "backup", message: "일일 백업이 완료되었습니다", time: "2시간 전", icon: "💾" },
+                { type: "alert", message: "시스템 리소스 사용률 85%", time: "4시간 전", icon: "⚠️" },
+                { type: "update", message: "데이터베이스 인덱스가 최적화되었습니다", time: "6시간 전", icon: "🔧" }
+            ],
+            manager: [
+                { type: "approval", message: "냉동기 프로젝트 구매 승인 완료", time: "1시간 전", icon: "✅" },
+                { type: "meeting", message: "주간 팀 미팅 일정이 등록되었습니다", time: "3시간 전", icon: "📅" },
+                { type: "progress", message: "BOG 시스템 프로젝트 90% 진행", time: "5시간 전", icon: "📈" },
+                { type: "task", message: "김설계님에게 새 업무가 할당되었습니다", time: "1일 전", icon: "👤" }
+            ],
+            designer: [
+                { type: "upload", message: "다이아프램 펌프 BOM 파일을 업로드했습니다", time: "45분 전", icon: "📤" },
+                { type: "classify", message: "스테인리스 파이프 127개 자재 분류 완료", time: "2시간 전", icon: "🔧" },
+                { type: "revision", message: "드라이어 시스템 Rev.2 업데이트", time: "4시간 전", icon: "🔄" },
+                { type: "verify", message: "볼트 분류 검증 5건 완료", time: "1일 전", icon: "✅" }
+            ],
+            purchaser: [
+                { type: "purchase", message: "스테인리스 파이프 구매 확정", time: "20분 전", icon: "🛒" },
+                { type: "order", message: "ABC 공급업체에 발주서 전송", time: "1시간 전", icon: "📋" },
+                { type: "receive", message: "밸브 15개 입고 처리 완료", time: "3시간 전", icon: "📦" },
+                { type: "quote", message: "새 견적서 3건 접수", time: "5시간 전", icon: "💰" }
+            ],
+            user: [
+                { type: "task", message: "자재 검증 업무 2건 완료", time: "1시간 전", icon: "✅" },
+                { type: "view", message: "냉동기 프로젝트 진행상황 확인", time: "3시간 전", icon: "👁️" },
+                { type: "download", message: "월간 리포트 다운로드", time: "6시간 전", icon: "📊" },
+                { type: "help", message: "도움말 페이지 방문", time: "1일 전", icon: "❓" }
+            ]
+        };
+
+        return activities[user.role] || activities.user;
+    };
+
+    const handleQuickAction = (action) => {
+        // 실제 네비게이션 구현 (향후)
+        console.log(`네비게이션: ${action.path}`);
+        alert(`${action.title} 기능은 곧 구현될 예정입니다.`);
+    };
+
+    const handleLogout = () => {
+        localStorage.removeItem('access_token');
+        localStorage.removeItem('user_data');
+        window.location.reload();
+    };
+
+    if (loading || !user || !dashboardData) {
+        return (
+            <div style={{
+                minHeight: '100vh',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: '#f7fafc'
+            }}>
+                <div style={{ textAlign: 'center' }}>
+                    <div style={{ fontSize: '48px', marginBottom: '16px' }}>⏳</div>
+                    <div>대시보드를 불러오는 중...</div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{
+            minHeight: '100vh',
+            background: '#f7fafc',
+            fontFamily: 'Arial, sans-serif'
+        }}>
+            {/* 네비게이션 바 */}
+            <nav style={{
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                padding: '16px 24px',
+                color: 'white',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+            }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                    <span style={{ fontSize: '24px' }}>🚀</span>
+                    <div>
+                        <h1 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>TK-MP System</h1>
+                        <span style={{ fontSize: '12px', opacity: '0.9' }}>통합 프로젝트 관리</span>
+                    </div>
+                </div>
+                
+                <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                    <div style={{ textAlign: 'right' }}>
+                        <div style={{ fontSize: '14px', fontWeight: '600' }}>{user.name || user.username}</div>
+                        <div style={{ fontSize: '12px', opacity: '0.9' }}>
+                            {dashboardData.title}
+                        </div>
+                    </div>
+                    <button
+                        onClick={handleLogout}
+                        style={{
+                            padding: '8px 16px',
+                            background: 'rgba(255, 255, 255, 0.2)',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '6px',
+                            cursor: 'pointer',
+                            fontSize: '14px'
+                        }}
+                    >
+                        로그아웃
+                    </button>
+                </div>
+            </nav>
+
+            {/* 메인 콘텐츠 */}
+            <main style={{ padding: '32px 24px' }}>
+                <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
+                    {/* 개인별 맞춤 배너 */}
+                    <div style={{
+                        background: `linear-gradient(135deg, ${dashboardData.metrics[0].color}20 0%, ${dashboardData.metrics[1].color}20 100%)`,
+                        borderRadius: '16px',
+                        padding: '32px',
+                        marginBottom: '32px',
+                        border: `1px solid ${dashboardData.metrics[0].color}40`
+                    }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}>
+                            <div style={{ fontSize: '48px' }}>
+                                {user.role === 'admin' ? '👑' : 
+                                 user.role === 'manager' ? '👨‍💼' :
+                                 user.role === 'designer' ? '🎨' :
+                                 user.role === 'purchaser' ? '🛒' : '👤'}
+                            </div>
+                            <div>
+                                <h2 style={{ 
+                                    margin: '0 0 8px 0', 
+                                    fontSize: '28px', 
+                                    fontWeight: '700',
+                                    color: '#2d3748'
+                                }}>
+                                    안녕하세요, {user.name || user.username}님! 👋
+                                </h2>
+                                <p style={{ 
+                                    margin: '0', 
+                                    fontSize: '16px', 
+                                    color: '#4a5568',
+                                    fontWeight: '500'
+                                }}>
+                                    {dashboardData.subtitle}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 핵심 지표 카드들 */}
+                    <div style={{ 
+                        display: 'grid', 
+                        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', 
+                        gap: '24px',
+                        marginBottom: '32px'
+                    }}>
+                        {(dashboardData.metrics || []).map((metric, index) => (
+                            <div key={index} style={{
+                                background: 'white',
+                                borderRadius: '12px',
+                                padding: '24px',
+                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                                border: '1px solid #e2e8f0',
+                                transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                                cursor: 'pointer'
+                            }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.transform = 'translateY(-2px)';
+                                e.currentTarget.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.15)';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.transform = 'translateY(0)';
+                                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
+                            }}>
+                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                                    <div>
+                                        <div style={{ 
+                                            fontSize: '14px', 
+                                            color: '#718096', 
+                                            marginBottom: '8px',
+                                            fontWeight: '500'
+                                        }}>
+                                            {metric.label}
+                                        </div>
+                                        <div style={{ 
+                                            fontSize: '32px', 
+                                            fontWeight: '700', 
+                                            color: metric.color
+                                        }}>
+                                            {metric.value}
+                                        </div>
+                                    </div>
+                                    <div style={{ 
+                                        fontSize: '32px',
+                                        opacity: 0.8
+                                    }}>
+                                        {metric.icon}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    <div style={{ 
+                        display: 'grid', 
+                        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', 
+                        gap: '24px'
+                    }}>
+                        {/* 빠른 작업 */}
+                        <div style={{
+                            background: 'white',
+                            borderRadius: '12px',
+                            padding: '24px',
+                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                            border: '1px solid #e2e8f0'
+                        }}>
+                            <h3 style={{ 
+                                fontSize: '18px', 
+                                fontWeight: '600', 
+                                color: '#2d3748',
+                                margin: '0 0 20px 0'
+                            }}>
+                                ⚡ 빠른 작업
+                            </h3>
+                            <div style={{ display: 'grid', gap: '12px' }}>
+                                {(dashboardData.quickActions || []).map((action, index) => (
+                                    <button 
+                                        key={index} 
+                                        onClick={() => handleQuickAction(action)}
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '12px',
+                                            padding: '12px 16px',
+                                            background: 'transparent',
+                                            border: '1px solid #e2e8f0',
+                                            borderRadius: '8px',
+                                            cursor: 'pointer',
+                                            transition: 'all 0.2s ease',
+                                            fontSize: '14px',
+                                            color: '#4a5568',
+                                            textAlign: 'left'
+                                        }}
+                                        onMouseEnter={(e) => {
+                                            e.target.style.background = `${action.color}10`;
+                                            e.target.style.borderColor = action.color;
+                                        }}
+                                        onMouseLeave={(e) => {
+                                            e.target.style.background = 'transparent';
+                                            e.target.style.borderColor = '#e2e8f0';
+                                        }}
+                                    >
+                                        <span style={{ fontSize: '16px' }}>{action.icon}</span>
+                                        <span>{action.title}</span>
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* 최근 활동 */}
+                        <div style={{
+                            background: 'white',
+                            borderRadius: '12px',
+                            padding: '24px',
+                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                            border: '1px solid #e2e8f0'
+                        }}>
+                            <h3 style={{ 
+                                fontSize: '18px', 
+                                fontWeight: '600', 
+                                color: '#2d3748',
+                                margin: '0 0 20px 0'
+                            }}>
+                                📈 최근 활동
+                            </h3>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                                {recentActivities.map((activity, index) => (
+                                    <div key={index} style={{
+                                        display: 'flex',
+                                        alignItems: 'flex-start',
+                                        gap: '12px',
+                                        padding: '12px',
+                                        borderRadius: '8px',
+                                        background: '#f7fafc',
+                                        border: '1px solid #e2e8f0'
+                                    }}>
+                                        <span style={{ fontSize: '16px' }}>
+                                            {activity.icon}
+                                        </span>
+                                        <div style={{ flex: 1 }}>
+                                            <div style={{ 
+                                                fontSize: '14px', 
+                                                color: '#2d3748',
+                                                marginBottom: '4px'
+                                            }}>
+                                                {activity.message}
+                                            </div>
+                                            <div style={{ 
+                                                fontSize: '12px', 
+                                                color: '#718096'
+                                            }}>
+                                                {activity.time}
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default PersonalizedDashboard;