Files
TK-BOM-Project/frontend
hyungi f1e1fb6475
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
🔧 피팅 분류 및 표시 개선 완료
 주요 개선사항:
• 엘보 90도/45도 각도 표시 개선 (ELBOW 90° LR BW 형태)
• RL/SL (Long/Short Radius) 표시 추가
• 엘보 서브타입 분류 로직 강화 (90DEG_LONG_RADIUS, 90DEG_SHORT_RADIUS)
• REDUCING FLANGE 분류 개선 (RED 키워드 제거로 피팅 오분류 방지)
• 구매신청 엑셀 중복 생성 문제 해결

🎯 분류기 개선:
• fitting_classifier.py: 엘보 조합 키워드 우선 확인 로직 추가
• integrated_classifier.py: FITTING 키워드에서 RED 제거
• NewMaterialsPage.jsx: 엘보 상세 표시 로직 개선

📊 테스트 완료:
• 엘보 각도 및 반경 정보 정확 표시
• REDUCING FLANGE → FLANGE 분류 확인
• 구매신청 엑셀 단일 생성 확인
2025-10-16 06:52:38 +09:00
..
2025-10-16 06:52:38 +09:00

TK-MP BOM 관리 시스템 - 프론트엔드

React + Material-UI 기반의 BOM(Bill of Materials) 관리 시스템 프론트엔드입니다.

🚀 기능

  • 대시보드: 프로젝트 현황 및 통계 확인
  • 프로젝트 관리: 프로젝트 생성, 수정, 삭제
  • 파일 업로드: 드래그&드롭으로 Excel 파일 업로드
  • 자재 목록: 검색, 필터링, 정렬이 가능한 자재 테이블

🛠️ 기술 스택

  • React 18 - 컴포넌트 기반 UI 라이브러리
  • Material-UI (MUI) - 현대적인 UI 컴포넌트
  • Vite - 빠른 개발 서버 및 빌드 도구
  • React Dropzone - 드래그&드롭 파일 업로드
  • MUI DataGrid - 고성능 데이터 테이블

📦 설치 및 실행

# 의존성 설치
npm install

# 개발 서버 실행 (http://localhost:3000)
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 미리보기
npm run preview

🔗 백엔드 연동

백엔드 서버가 http://localhost:8000에서 실행되고 있어야 합니다.

# 백엔드 서버 실행 (별도 터미널)
cd ../backend
source venv/bin/activate
uvicorn app.main:app --reload

📁 프로젝트 구조

frontend/
├── src/
│   ├── components/
│   │   ├── Dashboard.jsx       # 대시보드
│   │   ├── FileUpload.jsx      # 파일 업로드
│   │   ├── MaterialList.jsx    # 자재 목록
│   │   └── ProjectManager.jsx  # 프로젝트 관리
│   ├── App.jsx                 # 메인 앱
│   ├── main.jsx               # 엔트리 포인트
│   └── index.css              # 전역 스타일
├── package.json
└── vite.config.js

🎯 주요 컴포넌트

Dashboard

  • 프로젝트 통계 및 현황 표시
  • 최근 활동 목록
  • 실시간 데이터 업데이트

FileUpload

  • 드래그&드롭 인터페이스
  • Excel 파일 검증
  • 업로드 진행률 표시
  • 배치 파일 처리

MaterialList

  • 페이지네이션이 있는 데이터 그리드
  • 실시간 검색 및 필터링
  • CSV 내보내기
  • 정렬 및 컬럼 관리

ProjectManager

  • 프로젝트 CRUD 작업
  • 카드 형태의 프로젝트 표시
  • 모달 기반 편집

📱 반응형 디자인

  • 모바일, 태블릿, 데스크톱 지원
  • Material-UI의 Grid 시스템 활용
  • 적응형 네비게이션

🔧 개발 도구

  • ESLint - 코드 품질 검사
  • Vite HMR - 빠른 핫 리로드
  • React DevTools - 디버깅 지원

🚀 성능 최적화

  • 컴포넌트 지연 로딩
  • 메모이제이션 적용
  • 번들 크기 최적화
  • API 요청 최적화