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

- 파이프 수량 계산 로직 수정 (단관 개수가 아닌 실제 길이 기반 계산)
- UI 전면 개편 (DevonThink 스타일의 간결하고 세련된 디자인)
- 자재별 그룹핑 로직 개선:
  * 플랜지: 동일 사양별 그룹핑, WN 스케줄 표시, ORIFICE 풀네임 표시
  * 피팅: 상세 타입 표시 (니플 길이, 엘보 각도/연결, 티 타입, 리듀서 타입 등)
  * 밸브: 동일 사양별 그룹핑, 타입/연결방식/압력 표시
  * 볼트: 크기/재질/길이별 그룹핑 (8SET → 개별 집계)
  * 가스켓: 동일 사양별 그룹핑, 재질/상세내역/두께 분리 표시
  * UNKNOWN: 원본 설명 전체 표시, 동일 항목 그룹핑
- 전체 카테고리 버튼 제거 (표시 복잡도 감소)
- 카테고리별 동적 컬럼 헤더 및 레이아웃 적용

frontend/src/api.js

@@ -21,6 +21,20 @@ export const api = axios.create({
 const MAX_RETRIES = 3;
 const RETRY_DELAY = 1000; // 1초
 
+// 요청 인터셉터: 토큰 자동 추가
+api.interceptors.request.use(
+  config => {
+    const token = localStorage.getItem('access_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
 // 재시도 함수
 const retryRequest = async (config, retries = MAX_RETRIES) => {
   try {
@@ -35,7 +49,7 @@ const retryRequest = async (config, retries = MAX_RETRIES) => {
   }
 };
 
-// 공통 에러 핸들링 (예시)
+// 응답 인터셉터: 에러 처리 및 자동 로그아웃
 api.interceptors.response.use(
   response => response,
   error => {
@@ -47,7 +61,18 @@ api.interceptors.response.use(
       message: error.message
     });
     
-    // 필요시 에러 로깅/알림 등 추가
+    // 401/403 에러 시 자동 로그아웃
+    if (error.response?.status === 401 || error.response?.status === 403) {
+      const token = localStorage.getItem('access_token');
+      if (token) {
+        console.log('토큰이 유효하지 않습니다. 자동 로그아웃 처리합니다.');
+        localStorage.removeItem('access_token');
+        localStorage.removeItem('user_data');
+        // 페이지 새로고침으로 로그인 페이지로 이동
+        window.location.reload();
+      }
+    }
+    
     return Promise.reject(error);
   }
 );
@@ -65,9 +90,9 @@ export function uploadFile(formData, options = {}) {
   return retryRequest(config);
 }
 
-// 예시: 자재 목록 조회
+// 예시: 자재 목록 조회 (신버전 API 사용)
 export function fetchMaterials(params) {
-  return api.get('/files/materials', { params });
+  return api.get('/files/materials-v2', { params });
 }
 
 // 예시: 자재 요약 통계
@@ -82,7 +107,7 @@ export function fetchFiles(params) {
 
 // 파일 삭제
 export function deleteFile(fileId) {
-  return api.delete(`/files/${fileId}`);
+  return api.delete(`/files/delete/${fileId}`);
 }
 
 // 예시: Job 목록 조회