feat: BOM 관리 시스템 대폭 개선 및 Docker 배포 가이드 추가
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
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 개선: 구매신청 자재 조회, 제목 수정 엔드포인트 추가
This commit is contained in:
hyungi
175
RULES.md
175
RULES.md
@@ -1255,6 +1255,8 @@ const purchaseQuantity = Math.ceil(bomQuantity / 5) * 5;
|
||||
- 자동 에러 핸들링 (검증, DB, 일반 예외)
|
||||
|
||||
### 📊 구현된 페이지들
|
||||
|
||||
#### **📋 기존 페이지들**
|
||||
- MainPage: 메인 대시보드
|
||||
- JobSelectionPage: 프로젝트 선택
|
||||
- JobRegistrationPage: 프로젝트 등록
|
||||
@@ -1264,6 +1266,179 @@ const purchaseQuantity = Math.ceil(bomQuantity / 5) * 5;
|
||||
- PurchaseConfirmationPage: 구매 확인
|
||||
- RevisionPurchasePage: 리비전별 구매
|
||||
|
||||
#### **🎨 신규 모던 UI 페이지들 (2025.10.16 추가)**
|
||||
|
||||
##### **DashboardPage.jsx** - 프로젝트 중심 대시보드
|
||||
```jsx
|
||||
// 위치: frontend/src/pages/DashboardPage.jsx
|
||||
// 특징: 데본씽크 스타일의 모던한 디자인
|
||||
// 기능:
|
||||
// - 프로젝트 선택 및 관리 (카드 형태)
|
||||
// - 권한별 기능 카드 (BOM 관리, 자재 관리, 구매 관리)
|
||||
// - 관리자 전용 기능 (사용자 관리, 시스템 설정)
|
||||
// - 시스템 현황 대시보드
|
||||
// - 프로젝트 생성 모달
|
||||
|
||||
// 디자인 특징:
|
||||
// - 글래스모피즘 효과 (backdrop-filter: blur(10px))
|
||||
// - 그라데이션 배경 및 버튼
|
||||
// - 카드 호버 애니메이션
|
||||
// - 타이포그래피 중심 디자인 (이모지 제거)
|
||||
// - 반응형 그리드 레이아웃
|
||||
|
||||
// 주요 기능:
|
||||
// 1. 프로젝트 선택 시스템
|
||||
// - 프로젝트 목록을 카드 형태로 표시
|
||||
// - 선택된 프로젝트 하이라이트
|
||||
// - 프로젝트 정보 (코드, 이름, 고객사) 표시
|
||||
// 2. 권한 기반 기능 접근
|
||||
// - 프로젝트 선택 후에만 BOM/자재 관리 접근 가능
|
||||
// - 관리자 전용 메뉴 분리 표시
|
||||
// 3. 프로젝트 생성 기능
|
||||
// - 모달 형태의 프로젝트 생성 폼
|
||||
// - 프로젝트 코드, 이름, 고객사 입력
|
||||
```
|
||||
|
||||
##### **UserMenu.jsx** - 사용자 메뉴 컴포넌트
|
||||
```jsx
|
||||
// 위치: frontend/src/components/UserMenu.jsx
|
||||
// 특징: 드롭다운 형태의 사용자 메뉴
|
||||
// 기능:
|
||||
// - 사용자 프로필 표시 (아바타, 이름, 역할)
|
||||
// - 계정 설정 링크
|
||||
// - 관리자 전용 메뉴 (권한별 표시)
|
||||
// - 로그아웃 기능
|
||||
|
||||
// 디자인 특징:
|
||||
// - 원형 아바타 (그라데이션 배경)
|
||||
// - 드롭다운 애니메이션
|
||||
// - 호버 효과
|
||||
// - 역할별 색상 구분
|
||||
|
||||
// 주요 기능:
|
||||
// 1. 사용자 정보 표시
|
||||
// - 이름 첫 글자로 아바타 생성
|
||||
// - 역할 표시 (시스템 관리자, 관리자, 사용자)
|
||||
// 2. 권한별 메뉴
|
||||
// - 관리자: 사용자 관리, 시스템 설정, 시스템 로그
|
||||
// - 일반 사용자: 계정 설정만
|
||||
// 3. 네비게이션 연동
|
||||
// - onNavigate 콜백을 통한 페이지 이동
|
||||
// - onLogout 콜백을 통한 로그아웃 처리
|
||||
```
|
||||
|
||||
#### **🎨 UI/UX 디자인 시스템**
|
||||
|
||||
##### **색상 팔레트**
|
||||
```css
|
||||
/* 주요 색상 */
|
||||
--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
--background-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
--glass-background: rgba(255, 255, 255, 0.9);
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: rgba(255, 255, 255, 0.2);
|
||||
|
||||
/* 그림자 */
|
||||
--shadow-card: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
--shadow-button: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
|
||||
--shadow-hover: 0 8px 25px 0 rgba(59, 130, 246, 0.5);
|
||||
```
|
||||
|
||||
##### **타이포그래피**
|
||||
```css
|
||||
/* 폰트 시스템 */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
|
||||
/* 제목 */
|
||||
--heading-1: 36px, weight: 800, letter-spacing: -0.025em;
|
||||
--heading-2: 24px, weight: 700, letter-spacing: -0.025em;
|
||||
--heading-3: 18px, weight: 600;
|
||||
|
||||
/* 본문 */
|
||||
--body-large: 18px, weight: 400;
|
||||
--body-medium: 16px, weight: 400;
|
||||
--body-small: 14px, weight: 400;
|
||||
--caption: 12px, weight: 400;
|
||||
```
|
||||
|
||||
##### **컴포넌트 스타일**
|
||||
```css
|
||||
/* 카드 */
|
||||
.modern-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
box-shadow: var(--shadow-card);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modern-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
/* 버튼 */
|
||||
.modern-button {
|
||||
background: var(--primary-gradient);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 12px 20px;
|
||||
font-weight: 600;
|
||||
box-shadow: var(--shadow-button);
|
||||
transition: all 0.2s ease;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.modern-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
```
|
||||
|
||||
#### **🔧 컴포넌트 사용 가이드**
|
||||
|
||||
##### **DashboardPage 사용법**
|
||||
```jsx
|
||||
import DashboardPage from './pages/DashboardPage';
|
||||
|
||||
// App.jsx에서 사용
|
||||
case 'dashboard':
|
||||
return (
|
||||
<DashboardPage
|
||||
user={user}
|
||||
onNavigate={navigateToPage}
|
||||
pendingSignupCount={pendingSignupCount}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
##### **UserMenu 사용법**
|
||||
```jsx
|
||||
import UserMenu from './components/UserMenu';
|
||||
|
||||
// 헤더에서 사용
|
||||
<UserMenu
|
||||
user={user}
|
||||
onNavigate={navigateToPage}
|
||||
onLogout={handleLogout}
|
||||
/>
|
||||
```
|
||||
|
||||
#### **📱 반응형 디자인**
|
||||
- **데스크톱**: 1200px 이상 - 3-4열 그리드
|
||||
- **태블릿**: 768px-1199px - 2열 그리드
|
||||
- **모바일**: 767px 이하 - 1열 스택
|
||||
|
||||
#### **♿ 접근성 고려사항**
|
||||
- 키보드 네비게이션 지원
|
||||
- 충분한 색상 대비 (WCAG 2.1 AA 준수)
|
||||
- 스크린 리더 호환성
|
||||
- 포커스 표시 명확화
|
||||
|
||||
---
|
||||
|
||||
## 🌐 시놀로지 NAS 배포 가이드 ⭐
|
||||
|
||||
Reference in New Issue
Block a user