프로젝트 상세 페이지 상단 UI 정리

[!note] 수정이력 | 2025-05-04 13:17, 분홍 (hermes)

개요

프로젝트 상세 페이지(ProjectDetailView.vue) 최상단에 공사명 옆에 표시되던 단계(Stage) 칩과 승인상태(Status) 칩을 제거함.

스텝퍼(Stepper) UI가 이미 모든 단계를 한눈에 보여주므로, 공사명 옆에 또 단계 정보를 표시하는 것은 중복이었음. 요청에 따라 정리하여 UI를 깔끔하게 정리함.

AS-IS → TO-BE

최상단 헤더 영역

구분	내용
AS-IS	`[공사명]` + `[단계 칩]` + `[승인 상태 칩]` + `[수정/삭제 버튼]`
TO-BE	`[공사명]` + `[수정/삭제 버튼]` (단계/승인 칩 ❌ 제거!)

페이지 구조 정리

영역	내용
최상단	공사명 + 수정/삭제 버튼
스텝퍼	7단계 흐름 (접수→실사→설계→검토→진행→준공→완료)
공사 정보 카드	읽기 전용 (고객사, 계약금액, 소요일수, 공사유형 등)

수정 파일

파일: frontend/src/views/ProjectDetailView.vue
변경 내용: <v-row> 최상단에서 project.stage와 project.approval_status를 바인딩한 <v-chip> 두 개 제거
변경 전 코드 위치: 약 57~71라인 부근

<!-- 제거된 코드 -->
<v-col cols="auto" class="d-flex align-center gap-2">
  <v-chip :color="stageColor(project.stage)" size="small" class="text-white">
    {{ project.stage }}
  </v-chip>
  <v-chip :color="approvalStatusColor(project.approval_status)" size="small" class="text-white">
    {{ project.approval_status }}
  </v-chip>
</v-col>

배포

cd ~/projects/erp-construction
docker compose restart frontend

상태: ✅ 빌드 성공, Docker 재시작 완료
확인 방법: erp.pinksky.kr 접속 → 공사관리 → 상세 → 최상단 확인

다음 단계

향후 단계 / 승인 정보 변경은 스텝퍼(Stepper) 클릭 또는 별도 데이터 수정 기능으로 처리
상세 페이지 전체 UI 중복 요소 지속적으로 점검