2025-05-03 대시보드-공사관리 통합 및 상단 탭메뉴 구현

2025-05-03 대시보드-공사관리 통합 및 상단 탭메뉴 구현

[!note] 수정이력 | 2025-05-03 15:30, 분홍 (hermes)

1. 배경 및 문제

• 대시보드에는 하드코딩된 건수(발주전5/공사중3/정산중2/완료2)가 표시되었으나, 실제 DB 프로젝트는 12건이었음.
• “공사 관리” 메뉴(/projects)에서는 프로젝트 목록이 0건으로 표시됨.
• 대시보드와 공사관리가 같은 데이터를 보여야 하는데 숫자가 달랐음.
• 새로고침(F5) 시 공사관리 페이지가 0건으로 돌아가는 버그 존재.

2. 원인 분석

2.1 회사 ID 불일치

• users 테이블: minihero@naver.com → company_id = 4c636431-733c-431b-aec4-e83564a6501b
• projects 테이블: 12건 모두 company_id = 9df3ea2d-5887-4b60-b5a6-1d0ca78b6fa2
• 즉, 사용자 회사 ≠ 프로젝트 소속 회사 → 필터링 시 0건

2.2 API 경로 trailing slash 차이

• 대시보드: api.get('/projects') → 정상
• 공사관리: api.get('/projects/') → FastAPI 307 redirect → Axios Authorization 헤더 유실 → 401 → 0건

2.3 Auth store 초기화 버그

• token은 localStorage에서 복원됨 (OK)
• user는 ref(null)로 시작 → 새로고침 시 companyId = '' (빈 문자열)
• API 호출: /projects?company_id= → 필터 불일치 → 0건

2.4 Dashboard 하드코딩

• DashboardView.vue에 const companyId = '9df3ea...' 하드코딩 → auth store 미연동

3. 해결 조치

3.1 DB 데이터 통합 (단일 회사)

UPDATE projects SET company_id = '4c636431-733c-431b-aec4-e83564a6501b';
UPDATE project_types SET company_id = '4c636431-733c-431b-aec4-e83564a6501b';

• 12개 프로젝트 + 3개 공사유형 모두 사용자 회사로 이전

3.2 DashboardView.vue 수정

• 하드코딩 제거 → auth.companyId || auth.user?.company_id || ''
• useAuthStore import 및 const auth = useAuthStore() 추가

3.3 ProjectListView.vue 수정

• api.get('/projects/') → api.get('/projects') (trailing slash 제거)

3.4 auth.js 수정 (localStorage persistence)

// 초기화 시 localStorage에서 복원
const storedUser = localStorage.getItem('erp_user')
const user = ref(storedUser ? JSON.parse(storedUser) : null)

// login / fetchMe / setAuth 시 저장
localStorage.setItem('erp_user', JSON.stringify(userData))

// logout 시 삭제
localStorage.removeItem('erp_user')

• 이제 새로고침해도 user + company_id 유지

3.5 App.vue 상단 탭메뉴 추가

• 메인 4개 메뉴를 상단 탭바로 노출
• 현재 라우트에 따라 자동 활성화
• 사이드바에는 부가 메뉴(작업유형관리, 설정) 유지

구현 방식:

<!-- 첫 번째 앱바: 로고 + 유저정보 -->
<v-app-bar color="primary" density="compact"> ... </v-app-bar>

<!-- 두 번째 앱바: 탭메뉴 -->
<v-app-bar color="surface" elevation="1" density="compact" height="48">
  <v-tabs grow>
    <v-tab>대시보드</v-tab>
    <v-tab>공사관리</v-tab>
    <v-tab>자재관리</v-tab>
    <v-tab>완료보드</v-tab>
  </v-tabs>
</v-app-bar>

• Vuetify extension 슬롯은 density="compact"와 충돌 → 별도 앱바로 구현

4. 테스트 결과

항목	결과
대시보드 건수	12건 (DB 실제 데이터)
공사관리 목록	12건
새로고침(F5) 후 공사관리	12건 (auth store 복원 OK)
상세→뒤로가기	12건 유지
상단 탭메뉴 노출	✅ 대시보드/공사관리/자재관리/완료보드
탭 클릭 이동	✅ 정상
현재 페이지 활성화 표시	✅ 파란색 언더라인

5. 다음 단계 (미결)

• 공사관리 상세/등록/수정 폼 기능 점검
• 버그 리그레션 테스트 (내일 예정)

6. 관련 파일

• frontend/src/views/DashboardView.vue
• frontend/src/views/projects/ProjectListView.vue
• frontend/src/stores/auth.js
• frontend/src/App.vue