64fd9ad3d2
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
- 🎨 UI/UX 개선: 데본씽크 스타일 모던 디자인 적용 - 📁 컴포넌트 구조 개선: 폴더별 체계적 관리 (common/, bom/, materials/) - 🔧 BOM 관리 페이지 리팩토링: NewMaterialsPage → BOMManagementPage + 카테고리별 컴포넌트 분리 - 💾 구매신청 기능 개선: 선택된 자재 비활성화, 제목 편집, 엑셀 다운로드 - 📊 자재 표시 개선: 타입/서브타입 컬럼 정리, 상세 정보 복원 - 🐛 CSS 빌드 오류 수정: NewMaterialsPage.css 문법 오류 해결 - 📚 문서화: PAGES_GUIDE.md 추가, README에 Docker 캐시 문제 해결 가이드 추가 - 🔄 API 개선: 구매신청 자재 조회, 제목 수정 엔드포인트 추가
220 lines
7.2 KiB
JavaScript
220 lines
7.2 KiB
JavaScript
import React, { useState } from 'react';
|
||
|
||
const UserMenu = ({ user, onNavigate, onLogout }) => {
|
||
const [showUserMenu, setShowUserMenu] = useState(false);
|
||
|
||
return (
|
||
<div style={{ position: 'relative' }}>
|
||
<button
|
||
onClick={() => setShowUserMenu(!showUserMenu)}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px',
|
||
background: '#f8f9fa',
|
||
border: '1px solid #e9ecef',
|
||
borderRadius: '8px',
|
||
padding: '8px 12px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
fontWeight: '500',
|
||
color: '#495057',
|
||
transition: 'all 0.2s ease'
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.target.style.background = '#e9ecef';
|
||
e.target.style.borderColor = '#dee2e6';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.target.style.background = '#f8f9fa';
|
||
e.target.style.borderColor = '#e9ecef';
|
||
}}
|
||
>
|
||
<div style={{
|
||
width: '32px',
|
||
height: '32px',
|
||
borderRadius: '50%',
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: 'white',
|
||
fontSize: '14px',
|
||
fontWeight: '600'
|
||
}}>
|
||
{(user?.name || user?.username || 'U').charAt(0).toUpperCase()}
|
||
</div>
|
||
<div style={{ textAlign: 'left' }}>
|
||
<div style={{ fontSize: '14px', fontWeight: '600', color: '#2d3748' }}>
|
||
{user?.name || user?.username}
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: '#6c757d' }}>
|
||
{user?.role === 'system' ? '시스템 관리자' :
|
||
user?.role === 'admin' ? '관리자' : '사용자'}
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
fontSize: '12px',
|
||
color: '#6c757d',
|
||
transform: showUserMenu ? 'rotate(180deg)' : 'rotate(0deg)',
|
||
transition: 'transform 0.2s ease'
|
||
}}>
|
||
▼
|
||
</div>
|
||
</button>
|
||
|
||
{/* 드롭다운 메뉴 */}
|
||
{showUserMenu && (
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: '100%',
|
||
right: 0,
|
||
marginTop: '8px',
|
||
background: 'white',
|
||
border: '1px solid #e2e8f0',
|
||
borderRadius: '8px',
|
||
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
|
||
zIndex: 1000,
|
||
minWidth: '200px'
|
||
}}>
|
||
<div style={{ padding: '8px 0' }}>
|
||
<div style={{ padding: '8px 16px', borderBottom: '1px solid #f1f3f4' }}>
|
||
<div style={{ fontSize: '14px', fontWeight: '600', color: '#2d3748' }}>
|
||
{user?.name || user?.username}
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: '#6c757d' }}>
|
||
{user?.email || '이메일 없음'}
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => {
|
||
onNavigate('account-settings');
|
||
setShowUserMenu(false);
|
||
}}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px 16px',
|
||
border: 'none',
|
||
background: 'none',
|
||
textAlign: 'left',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px',
|
||
':hover': { background: '#f8f9fa' }
|
||
}}
|
||
onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
|
||
onMouseLeave={(e) => e.target.style.background = 'none'}
|
||
>
|
||
⚙️ 계정 설정
|
||
</button>
|
||
|
||
{user?.role === 'admin' && (
|
||
<>
|
||
<button
|
||
onClick={() => {
|
||
onNavigate('user-management');
|
||
setShowUserMenu(false);
|
||
}}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px 16px',
|
||
border: 'none',
|
||
background: 'none',
|
||
textAlign: 'left',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
}}
|
||
onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
|
||
onMouseLeave={(e) => e.target.style.background = 'none'}
|
||
>
|
||
👥 사용자 관리
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => {
|
||
onNavigate('system-settings');
|
||
setShowUserMenu(false);
|
||
}}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px 16px',
|
||
border: 'none',
|
||
background: 'none',
|
||
textAlign: 'left',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
}}
|
||
onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
|
||
onMouseLeave={(e) => e.target.style.background = 'none'}
|
||
>
|
||
🔧 시스템 설정
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => {
|
||
onNavigate('system-logs');
|
||
setShowUserMenu(false);
|
||
}}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px 16px',
|
||
border: 'none',
|
||
background: 'none',
|
||
textAlign: 'left',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
}}
|
||
onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
|
||
onMouseLeave={(e) => e.target.style.background = 'none'}
|
||
>
|
||
📊 시스템 로그
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
<div style={{ borderTop: '1px solid #f1f3f4', marginTop: '4px' }}>
|
||
<button
|
||
onClick={() => {
|
||
onLogout();
|
||
setShowUserMenu(false);
|
||
}}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px 16px',
|
||
border: 'none',
|
||
background: 'none',
|
||
textAlign: 'left',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
color: '#dc3545',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
}}
|
||
onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
|
||
onMouseLeave={(e) => e.target.style.background = 'none'}
|
||
>
|
||
🚪 로그아웃
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UserMenu;
|