프로젝트관리 (PM) — 와이어프레임

로우파이 데스크톱 와이어프레임 · Figma UI_Master 기준 재작성 (fileKey xFn4Tq2vnfAr42PpuxLbbP, SCR-PM-015 / 016 / 017) · 색·브랜딩 제외, 레이아웃·영역 배치만 표현.

← 와이어프레임 목록
회색 박스 = 실제 UI 컴포넌트의 자리표시(placeholder)입니다. 색·브랜딩·실데이터는 표현하지 않고 레이아웃·영역 배치만 담습니다. 필드·컬럼·상태값·예시 데이터는 Figma 목업(SCR-PM-015/016/017)을 그대로 옮긴 것입니다. Figma 미제공 상태(상세 오류·추가 모달)는 DE22-1 §06 기준을 유지하며 그 취지를 프레임에 표기했습니다.

화면 인덱스 (10 프레임 · SCR 3종)

SCR-PM-015프로젝트 목록/projects🎨 Figma: node 502:2132 (271:3538)
상단 KPI 카드 4종 + 탭·필터·목록을 한 카드에 담는다. 등록 진입은 타이틀 우측 버튼. 권한 ROLE_PM_VIEWER 이상.

진입 — 사이드바 1차 메뉴 [프로젝트] 클릭

  1. KPI 카드 4종 — 전체/내/관심/종료 프로젝트 건수를 상단 통계 카드로 보여준다. "전체" 카드는 강조(on) 스타일로 기본 선택 표시.
  2. + 프로젝트 등록 — 타이틀 우측 버튼. 클릭 시 SCR-PM-017 등록 화면으로 이동. 권한 ROLE_PM_EDITOR 이상만 노출.
  3. 상태 탭 — 전체/내 프로젝트/관심/종료. 목록 조회 범위를 좁히는 필터. 탭 전환 시 목록·페이지네이션 리셋.
  4. 검색 — 프로젝트명/현장주소 부분일치 검색.
  5. 종료된 프로젝트 토글 — 기본 OFF. ON 시 종료 상태 프로젝트도 목록에 포함.
  6. 상태 필터 드롭다운 — 예상/진행중/일시중단/완료/종료 5종 상태값으로 목록을 좁힌다.
  7. 목록 테이블 — ★/☆ 클릭으로 관심 등록·해제, 행 클릭 시 SCR-PM-016 상세로 이동.
  8. 페이지네이션 — 서버 페이징. 이전/다음 버튼 + 현재 페이지/전체 페이지 표시 + 페이지당 표시 개수 선택(20개/50개).
관련 API Swagger UI ↗
  • GET/api/pm/projects — 탭·상태·종료토글·검색 조건으로 목록 조회
  • GET/api/pm/projects/kpi — 상단 KPI 카드 4종(전체/내/관심/종료) 집계 조회
  • POST/api/pm/projects/{projectNo}/favorite — ☆ 클릭 시 관심 프로젝트 등록
  • DELETE/api/pm/projects/{projectNo}/favorite — ★ 클릭 시 관심 프로젝트 해제
프로젝트
CMD+K 검색
프로젝트 목록
2+ 프로젝트 등록
1전체 프로젝트
48
이번 달 +6
내 프로젝트
12
진행 9
관심 프로젝트
5
즐겨찾기
종료 프로젝트
14
아카이브
3전체내 프로젝트관심종료
4프로젝트명/현장 검색 검색 5종료된 프로젝트 6상태 전체 ↻
☆7프로젝트명현장주소발주처상태생성일
★A 아파트 창호서울 강남구 테헤란로 222번지 000빌딩대우건설진행중YYYY.MM.DD
☆B 오피스텔부산 해운대구 센텀중앙로 에이스하이테크21현대건설진행중YYYY.MM.DD
★C 타워 커튼월인천 연수구 송도국제대로 00타워GS건설진행중YYYY.MM.DD
☆D 복합몰 리뉴얼대전 유성구 엑스포로롯데건설예상YYYY.MM.DD
★E 물류 센터경기 용인시 처인구 000-00번지 000한화건설진행중YYYY.MM.DD
☆A 아파트 창호서울 강남구 테헤란로 222번지 000빌딩대우건설종료YYYY.MM.DD
‹81 / 5›20개/페이지
SCR-PM-015프로젝트 목록빈 상태 (empty)🎨 Figma: node 269:1461
결과 0건이면 KPI 카드·탭·필터는 유지하고, 목록 카드 안에 EmptyState + 등록 CTA 를 표시한다.

진입 — 사이드바 1차 메뉴 [프로젝트] 클릭 (목록 결과 0건)

  1. KPI 카드 4종(유지) — 결과 0건이어도 상단 통계 카드는 그대로 노출되어 전체 맥락을 잃지 않는다.
  2. 상태 탭(유지) — 필터 값은 유지된 채 카드 본문만 빈 상태로 바뀐다.
  3. 검색·필터바(유지) — 조건을 바꾸면 다시 목록 조회를 시도할 수 있다.
  4. 빈 상태 카드 — "등록된 프로젝트가 없습니다" 안내 문구 + 설명 노출.
  5. 등록 CTA 버튼 — 클릭 시 SCR-PM-017 등록 화면으로 이동.
관련 API Swagger UI ↗
  • GET/api/pm/projects — 필터 결과 0건 조회(빈 상태 트리거)
  • GET/api/pm/projects/kpi — 빈 상태에서도 유지되는 KPI 카드 조회
프로젝트
CMD+K 검색
프로젝트 목록
+ 프로젝트 등록
1전체 프로젝트
48
이번 달 +6
내 프로젝트
12
진행 9
관심 프로젝트
5
즐겨찾기
종료 프로젝트
14
아카이브
2전체내 프로젝트관심종료
3가상프로젝트000 검색 종료된 프로젝트 상태 전체 ↻
4등록된 프로젝트가 없습니다
새 프로젝트를 등록하여 프로젝트 관리를 시작하세요.
5+ 프로젝트 등록
로딩(skeleton)·4xx 목록 오류(인라인 배너) 상태는 같은 KPI·탭·필터 위에서 카드 본문만 대체한다 (Figma node 269:1164 loading · 271:3268 error 정합). 5xx 서버 오류는 §4.5 공통 규격에 따라 전면 error page(+[새로고침][홈])로 전환한다.
SCR-PM-016프로젝트 상세 · 기본정보 탭/projects/:projectNo🎨 Figma: node 108:140 (279:1870)
탭 바와 폼이 한 카드에 들어간다. 2열 폼(라벨 상단), 필수 = 프로젝트명 1종. 액션은 하단 가운데(삭제·취소·저장).

진입 — SCR-PM-015 [행 클릭] / SCR-PM-017 [등록] 완료 후 자동 이동 / 글로벌 검색 ⌘K 프로젝트 점프

  1. 탭바 — 기본정보/멤버/체크리스트/파일관리/도면/견적/발주/제조/실측/노트. 도면·견적·발주·제조·실측은 타 서브시스템(ES/OM/MF/FS)으로의 외부 링크.
  2. 목록으로 돌아가기 — SCR-PM-015 목록으로 복귀.
  3. 2열 폼(라벨 상단) — 프로젝트명만 필수(★). 나머지는 선택 입력.
  4. 상태 선택 — 진행중/견적중/예상/종료 등 프로젝트 진행 상태.
  5. 설명 — 자유 텍스트, 프로젝트 개요 기록.
  6. 삭제 버튼 — 예상(Prospect) 상태이면서 견적서가 없는 프로젝트만 활성화.
  7. 저장 버튼 — 변경된 기본정보를 반영.
관련 API Swagger UI ↗
  • GET/api/pm/projects/{projectNo} — 프로젝트 상세 로드
  • PUT/api/pm/projects/{projectNo} — 기본정보 저장
  • DELETE/api/pm/projects/{projectNo} — 예상+견적서없음 조건 충족 시 삭제
프로젝트  ›  A 아파트 창호공사
CMD+K 검색
A 아파트 창호공사
2목록으로 돌아가기
1기본정보멤버체크리스트파일관리 도면견적발주제조실측노트
3프로젝트 명 *프로젝트 명을 입력하세요.
고객사 명고객사 명을 입력하세요.
현장 주소현장 주소를 입력하세요.
설계사무소설계사무소를 입력하세요.
영업담당자영업담당자를 입력하세요.
시작일시작일을 선택하세요.
예상 종료일예상 종료일을 선택하세요.
4상태상태를 선택해주세요.
5설명프로젝트에 대한 설명을 입력하세요.
6삭제취소7저장
삭제 조건: 예상(Prospect) 상태이며 견적서가 없는 프로젝트만 가능 — 미충족 시 [삭제] 비활성.
SCR-PM-016프로젝트 상세 · 멤버 탭🎨 Figma: node 119:1841
탭 카드 아래 별도 카드에 안내 배너·필터·멤버 표·페이지네이션. 프로젝트 역할은 업무 분담 표시일 뿐 시스템 권한과 무관.

진입 — SCR-PM-015 [행 클릭] / SCR-PM-017 [등록] 완료 후 자동 이동 / 글로벌 검색 ⌘K 프로젝트 점프 → [멤버] 탭 전환

  1. 탭바(멤버 활성) — 프로젝트 상세 서브 화면 전환.
  2. 안내 배너 — 프로젝트 역할이 시스템 접근 권한과 무관한 업무 분담 표시임을 알림.
  3. 이름/사번 검색 — 멤버 표를 좁히는 검색 조건.
  4. 역할 필터 — 전체/PM/설계 담당/현장 담당 등 프로젝트 역할로 필터링.
  5. + 멤버 추가 버튼 — 클릭 시 멤버 추가 모달(프레임 5)을 연다.
  6. 멤버 표 — 이름·사번·부서·역할·참여 시작일·비고. "관리" 열에서 수정/제외.
  7. 페이지네이션 — 서버 페이징.
관련 API Swagger UI ↗
  • GET/api/pm/projects/{projectNo}/members — 이름/사번 검색·역할 필터로 멤버 목록 조회
  • PUT/api/pm/projects/{projectNo}/members/{memberId} — "수정" 클릭 시 역할·비고 수정
  • DELETE/api/pm/projects/{projectNo}/members/{memberId} — "제외" 클릭 시 멤버 제거
프로젝트  ›  A 아파트 창호공사
CMD+K 검색
A 아파트 창호공사
목록으로 돌아가기
기본정보1멤버체크리스트파일관리 도면견적발주제조실측노트
2프로젝트 역할은 업무 분담을 표시할 뿐, 시스템 접근 권한과 무관합니다.
3이름/사번 검색 4전체 역할 검색 5+ 멤버 추가
6이름사번부서프로젝트 역할참여 시작일비고관리
김영희U-2104영업1팀PMYYYY.MM.DD주관수정 제외
이성호U-2207설계1팀설계 담당YYYY.MM.DD-수정 제외
박지민U-2308현장팀현장 담당YYYY.MM.DD-수정 제외
‹71 / 1›총 3명
SCR-PM-016+ 멤버 추가 · 모달Figma 미제공 · DE22-1 §06 기준
멤버 탭 위에 뜨는 추가 모달. 사용자·프로젝트 역할·참여 시작일 필수.

진입 — SCR-PM-016 [멤버] 탭 [+ 멤버 추가] 버튼

  1. 사용자 검색·선택 — 이름/사번으로 검색해 대상 사용자를 선택. 필수.
  2. 프로젝트 역할 — PM/설계 담당/현장 담당 등 업무 분담 역할 선택. 필수.
  3. 참여 시작일 — 날짜 선택. 필수.
  4. 비고 — 자유 텍스트, 선택 입력.
  5. 추가 버튼 — 입력값을 멤버 표에 반영하고 모달을 닫는다.
관련 API Swagger UI ↗
  • POST/api/pm/projects/{projectNo}/members — 사용자·역할·참여시작일로 멤버 추가
  • GET/api/cm/users — "이름/사번 검색 후 선택" 사용자 목록 조회
모달 (dim 배경 위)
+ 멤버 추가
1사용자 *이름/사번 검색 후 선택
2프로젝트 역할 *PM
3참여 시작일 *2026-04-29
4비고선택 입력
취소5추가
SCR-PM-016프로젝트 상세 · 체크리스트 탭🎨 Figma: node 119:1842
진행률 바는 탭 바 우측에 함께 놓인다. 필터 우측에 지연 배지 + 항목 추가. 항목별 담당자·기한·상태 관리.

진입 — SCR-PM-015 [행 클릭] / SCR-PM-017 [등록] 완료 후 자동 이동 / 글로벌 검색 ⌘K 프로젝트 점프 → [체크리스트] 탭 전환

  1. 탭바(체크리스트 활성) — 프로젝트 상세 서브 화면 전환.
  2. 진행률 표시 — 탭바 우측. 완료건수/전체 건수 + 진행률 바.
  3. 상태 필터 — 전체/완료/진행중/일시중단/예상 등 상태값 필터.
  4. 담당자 필터 — 담당자별 필터링.
  5. 항목명 검색 — 부분일치 검색.
  6. 지연 배지 — 기한 경과 항목 수를 강조 표시.
  7. + 항목 추가 버튼 — 클릭 시 항목 추가 모달(프레임 7)을 연다.
  8. 체크리스트 표 — 항목명·이름·기한·상태·비고. 행별 수정/삭제.
관련 API Swagger UI ↗
  • GET/api/pm/projects/{projectNo}/checklists — 상태·담당자·항목명 필터로 체크리스트 목록·진행률 조회
  • PUT/api/pm/projects/{projectNo}/checklists/{checklistId} — "수정" 클릭 시 항목·상태 수정
  • DELETE/api/pm/projects/{projectNo}/checklists/{checklistId} — "삭제" 클릭 시 항목 제거
프로젝트  ›  A 아파트 창호공사
CMD+K 검색
A 아파트 창호공사
목록으로 돌아가기
기본정보멤버1체크리스트파일관리 도면견적발주제조실측노트
2진행률60% (6/10)
3전체 상태 4전체 담당자 5항목명 검색 6지연 1건 7+ 항목 추가
☑8항목명이름기한상태비고관리
☑현장 실측 완료김영희YYYY.MM.DD완료-수정 삭제
☑설계 도면 1차 검토이성호YYYY.MM.DD완료-수정 삭제
☐발주서 초안 작성박지민YYYY.MM.DD진행중-수정 삭제
☐고객 승인 회의홍길동YYYY.MM.DD지연기한 경과수정 삭제
☐착공 보고서 제출홍길동YYYY.MM.DD대기-수정 삭제
‹1 / 1›총 10건
SCR-PM-016+ 체크리스트 항목 추가 · 모달Figma 미제공 · DE22-1 §06 기준
체크리스트 탭 위에 뜨는 항목 추가 모달. 항목명·담당자·기한 필수.

진입 — SCR-PM-016 [체크리스트] 탭 [+ 항목 추가] 버튼

  1. 항목명 — 자유 텍스트. 필수.
  2. 담당자 — 목록에서 선택. 필수.
  3. 기한 — 날짜 선택. 필수.
  4. 상태 — 기본값 "대기". 선택 항목.
  5. 비고 — 자유 텍스트, 선택 입력.
  6. 추가 버튼 — 입력값을 체크리스트 표에 반영하고 진행률을 재계산한다.
관련 API Swagger UI ↗
  • POST/api/pm/projects/{projectNo}/checklists — 항목명·담당자·기한·상태로 체크리스트 항목 추가
모달 (dim 배경 위)
+ 체크리스트 항목 추가
1항목명 *예) 현장 실측 완료
2담당자 *김영희
3기한 *2026-05-10
4상태대기
5비고선택 입력
취소6추가
SCR-PM-016프로젝트 상세 · 파일관리 탭🎨 Figma: node 119:1843
가운데 드롭존 + 파일 표(행별 관리: 다운로드·미리보기·삭제). 도면은 [도면] 탭으로 분리.

진입 — SCR-PM-015 [행 클릭] / SCR-PM-017 [등록] 완료 후 자동 이동 / 글로벌 검색 ⌘K 프로젝트 점프 → [파일관리] 탭 전환

  1. 탭바(파일관리 활성) — 프로젝트 상세 서브 화면 전환. [도면] 탭은 ES 자원 도면 관리로 분리.
  2. 목록으로 돌아가기 — SCR-PM-015 목록으로 복귀.
  3. 드롭존 — 드래그&드롭으로 일반 문서(계약서·공문 등) 업로드. 도면 파일은 이 탭이 아닌 [도면] 탭에서 관리.
  4. 파일 표 — 파일명·유형·크기·업로드자·업로드일.
  5. 관리 액션 — 행별 다운로드·미리보기·삭제.
관련 API Swagger UI ↗
  • GET/api/pm/projects/{projectNo}/files — 파일 목록 조회
  • POST/api/pm/projects/{projectNo}/files/upload-direct — 드롭존 드래그&드롭 업로드
  • DELETE/api/pm/projects/{projectNo}/files/{fileId} — 파일 표 "삭제" 액션. 프로젝트 파일 삭제 (ProjectController.deleteFile)
  • GET/api/external/s3/presign/download?fileKey= — "다운로드"·"미리보기" 액션. 개별 파일 전용 다운로드 API 는 신설하지 않고 기존 S3 다운로드 URL 발급(S3PresignController, IF-EXT-S3-002)을 재사용한다. 파일 행의 S3 key 로 발급받아 내려받는다
프로젝트  ›  A 아파트 창호공사
CMD+K 검색
A 아파트 창호공사
2목록으로 돌아가기
기본정보멤버체크리스트1파일관리 도면견적발주제조실측노트
3파일을 여기에 드롭
4파일명유형크기업로드자업로드일5관리
설계도면_v2.dwgDWG12.4MB이성호YYYY.MM.DD다운로드 · 미리보기 · 삭제
발주서_초안.xlsxXLSX320KB김영희YYYY.MM.DD다운로드 · 미리보기 · 삭제
계약서_초안.pdfPDF1.2MB박지민YYYY.MM.DD다운로드 · 미리보기 · 삭제
SCR-PM-016프로젝트 상세에러 상태 (error)Figma 미제공 · DE22-1 §06 기준 (chrome만 Figma 정합)
상세 데이터 로드 실패(404·서버 오류) 시 안내 문구 + [목록으로 돌아가기]만 표시. 하단 삭제·취소·저장 미표시 (ISS-0148).

진입 — SCR-PM-015 [행 클릭] / SCR-PM-017 [등록] 완료 후 자동 이동 / 글로벌 검색 ⌘K 프로젝트 점프 (대상 데이터 로드 실패 시)

  1. 탭바(골격 유지) — 오류 시에도 탭 구조는 유지해 다른 탭 이동을 시도할 수 있게 한다(단, 상세 데이터는 로드 실패 상태).
  2. 상단 목록으로 돌아가기 버튼 — 타이틀 우측, SCR-PM-015로 복귀.
  3. 오류 안내 배너 — "데이터를 불러올 수 없습니다." 문구로 로드 실패를 알림.
  4. 본문 목록으로 돌아가기 버튼 — 저장·삭제 대상이 없으므로 유일한 액션으로 카드 중앙에 강조 배치.
관련 API Swagger UI ↗
  • GET/api/pm/projects/{projectNo} — 상세 로드 실패(404·5xx) 시 이 상태로 전환
프로젝트  ›  프로젝트 상세
CMD+K 검색
프로젝트 상세
2목록으로 돌아가기
1기본정보멤버체크리스트파일관리 도면견적발주제조실측노트
!3데이터를 불러올 수 없습니다.
4목록으로 돌아가기
하단 [삭제]·[취소]·[저장] 버튼은 미표시 (저장·삭제 대상 없음). ※ 상세 오류 상태는 Figma 미제공 — 골격은 Figma 정합, 본문은 DE22-1 §06 기준.
SCR-PM-017프로젝트 등록/projects/new🎨 Figma: node 360:1124 (360:2069)
신규 프로젝트를 등록한다. 가운데 정렬 2열 폼, 하단 가운데 [취소]·[등록]. projectNo 는 서버 자동 채번(입력 필드 없음). 권한 ROLE_PM_EDITOR.

진입 — SCR-PM-015 [+ 프로젝트 등록] 버튼 클릭 (목록/빈 상태 공통 CTA)

  1. 2열 폼(라벨 상단) — 프로젝트명만 필수(★, ISS-0192). 고객사명·현장주소·시작일은 선택 입력(PROSPECT 초기 미확정 허용). projectNo 입력란 없음(서버 자동 채번).
  2. 상태 선택 — 등록 시점 기본값은 "예상(Prospect)"로 추정.
  3. 설명 — 자유 텍스트, 선택 입력.
  4. 취소 버튼 — 입력을 버리고 목록으로 복귀.
  5. 등록 버튼 — 필수 4종 미충족 시 비활성. 완료 시 SCR-PM-016 상세로 이동.
관련 API Swagger UI ↗
  • POST/api/pm/projects — 프로젝트 등록(성공 시 상세로 이동)
프로젝트  ›  프로젝트 등록
CMD+K 검색
프로젝트 등록
1프로젝트 명 *프로젝트 명을 입력하세요.
고객사 명고객사 명을 입력하세요.
현장 주소현장 주소를 입력하세요.
설계사무소설계사무소를 입력하세요.
영업담당자영업담당자를 입력하세요.
시작일시작일을 선택하세요.
예상 종료일예상 종료일을 선택하세요.
2상태상태를 선택해주세요.
3설명프로젝트에 대한 설명을 입력하세요.
4취소5등록①
① 필수 = 프로젝트명 1종만 (ISS-0192 결정, 등록·상세 대칭) — 고객사명·현장주소·시작일은 PROSPECT 초기 미확정을 허용하는 선택 입력. 미충족 시 [등록] 비활성. 프로젝트 번호는 서버 자동 채번 — 입력 필드 없음.