pray4skylark
16 KiB
16 KiB
화면 설계 명세서 (UI & Screen Specification)
프론트엔드: Next.js 14+ (App Router), TypeScript, Tailwind CSS, Pinia
1. 전역 레이아웃 (Global Layout)
┌─────────────────────────────────────────────────┐
│ GNB (Global Navigation Bar) │
│ ┌──────┬─────────────────────────────────┬──┐ │
│ │ Logo │ (검색/제목) │🔔│👤│ │
│ └──────┴─────────────────────────────────┴──┘ │
├──────┬──────────────────────────────────────────┤
│ LNB │ Content Area │
│ │ │
│ Menu │ (Page Component Rendering) │
│ 1 │ │
│ │ │
│ Menu │ │
│ 2 │ │
│ │ │
│ Menu │ │
│ 3 │ │
│ │ │
└──────┴──────────────────────────────────────────┘
GNB (Global Navigation Bar)
- 알림 뱃지(🔔):
GET /api/v1/notifications/unread폴링 — 0개면 숨김 - 프로필:
GET /api/v1/employees/me— 사용자명 및 권한 표시
LNB (Left Navigation Bar) — RBAC 기반 동적 메뉴
| 메뉴 | EMPLOYEE | MANAGER | ADMIN |
|---|---|---|---|
| 내 포트폴리오 | ✅ | ❌ | ❌ |
| SR 티켓 관리 | ✅ | ✅ | ✅ |
| 업무 보고서 | ✅ | ✅ | ✅ |
| 교육 현황 | ✅ | ✅ | ✅ |
| 프로젝트 관리 | ❌ | ✅ | ✅ |
| 장비 자산 관리 | ❌ | ✅ | ✅ |
| 직원 관리 | ❌ | ❌ | ✅ |
| 공통 코드 관리 | ❌ | ❌ | ✅ |
2. SR 티켓 칸반 보드 (TicketBoardView.vue)
UI 구조
┌─────────────────────────────────────────────────────────┐
│ [필터 영역] │
│ 카테고리: [BUG ▼] 우선순위: [HIGH ▼] 검색: [________] │
├─────────┬──────────┬──────────┬──────────┬──────────────┤
│ OPEN │ ASSIGNED │ IN_PROG │ RESOLVED │ CLOSED │
│ (3) │ (2) │ (5) │ (8) │ (12) │
├─────────┼──────────┼──────────┼──────────┼──────────────┤
│ ┌─────┐ │ ┌─────┐ │ ┌─────┐ │ ┌─────┐ │ │
│ │Bug │ │ │High │ │ │Supp │ │ │Bug │ │ │
│ │DB │ │ │API │ │ │배포 │ │ │튜닝 │ │ │
│ │튜닝 │ │ │에러 │ │ │지원 │ │ │완료 │ │ │
│ │🔴⚠️ │ │ │ │ │ │ │ │ │ │ │ │
│ └─────┘ │ └─────┘ │ └─────┘ │ └─────┘ │ │
│ ┌─────┐ │ │ ┌─────┐ │ │ │
│ │Feat │ │ │ │Bug │ │ │ │
│ │화면 │ │ │ │SQL │ │ │ │
│ │개발 │ │ │ │튜닝 │ │ │ │
│ └─────┘ │ │ └─────┘ │ │ │
└─────────┴──────────┴──────────┴──────────┴──────────────┘
핵심 로직
- 칸반 컬럼: 상태별 4단 (상단에 컬럼별 카운트)
- 기한 임박:
dueDate - now < 24h→ 카드 좌상단 🔴 경고 레이블 + 애니메이션 - 드래그 앤 드롭: 상태 전환 시
PUT /api/v1/tickets/{id}/status?status=NEW_STATUS - 티켓 카드 클릭: 라우터 push →
/tickets/{ticketId}(상세 페이지)
3. SR 티켓 상세/타임라인 (TicketDetailView.vue)
UI 구조
┌─────────────────────────────────────────────────────────┐
│ [← 뒤로] [삭제] [상태 변경: IN_PROGRESS ▼] │
├─────────────────────────────────────────────────────────┤
│ 📋 티켓 정보 │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 제목: 오라클 쿼리 튜닝 필요 │ │
│ │ 상태: OPEN | 우선순위: HIGH | 카테고리: BUG │ │
│ │ 요청자: 김개발 | 담당자: 미배정 | SLA: 2026-05-22 │ │
│ │ 설명: 실행 계획 상 Full Scan 발생 중... │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ 📎 첨부파일 │
│ ┌──────────────────────────────────────────────────┐ │
│ │ [execution_plan.png] [error_log.txt] │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ 💬 타임라인 │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 2026-05-21 14:32 ｜ 김개발 │ │
│ │ 오라클 실행 계획 첨부합니다. │ │
│ │ 📎 [execution_plan.png] │ │
│ ├──────────────────────────────────────────────────┤ │
│ │ 2026-05-21 15:10 ｜ 이튜너 (본사) │ │
│ │ 인덱스 힌트 사용해보세요: /*+ INDEX() */ │ │
│ ├──────────────────────────────────────────────────┤ │
│ │ 2026-05-21 16:00 ｜ 김개발 │ │
│ │ 힌트 적용 후 3초→0.5초로 개선되었습니다! ✅ │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 댓글 입력: [________________________________] 📎 │ │
│ │ [등록] │ │
│ └──────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
핵심 로직
- 댓글 등록:
POST /api/v1/tickets/{id}/comments→ 타임라인 최하단 prepend - 파일 업로드:
<input type="file">→ S3/서버 업로드 → URL 반환 → 댓글 첨부 - 상태 전환 버튼: 현재 상태에 따라 다음 가능한 액션 버튼 노출 (OPEN→ASSIGNED→IN_PROGRESS→RESOLVED→CLOSED)
- 종료된 티켓 봉인:
status == CLOSED시 입력폼 비활성화 + 뱃지 표시
4. 장비 인벤토리 (EquipmentInventoryView.vue)
UI 구조
┌─────────────────────────────────────────────────────────┐
│ 📊 장비 현황 요약 │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │전체 │ │가용 │ │사용중 │ │수리중 │ │폐기 │ │
│ │45 │ │12 │ │28 │ │3 │ │2 │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │
│ │
│ [필터: LAPTOP ▼] [제조사: Apple ▼] [검색: ____________] │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 자산코드 ｜ 모델명 ｜ 시리얼 ｜ 상태 ｜ 액션 │ │
│ ├──────────────────────────────────────────────────┤ │
│ │HQ-LP-001｜MacBook ｜F2G8... ｜IN_USE ｜[반납] │ │
│ │HQ-LP-002｜MacBook ｜H3J9... ｜AVAILABLE｜[지급] │ │
│ │HQ-MO-001｜LG 27UN880｜L7K2... ｜IN_USE ｜[반납] │ │
│ └──────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
--- 지급 모달 ---
┌──────────────────────────────────────────┐
│ 장비 지급: HQ-LP-002 MacBook Pro M3 │
│ │
│ 대상자 검색: [김_______] │
│ ┌──────────────────────────────────┐ │
│ │ 김코딩 (BACKEND, 파견중) │ │
│ │ 김개발 (DBA, 파견중) │ │
│ └──────────────────────────────────┘ │
│ │
│ 지급 상태 코멘트: [미개봉 신품________] │
│ [취소] [지급 확정] │
└──────────────────────────────────────────┘
핵심 로직
- 상태 요약 카드: 각 상태별 장비 카운트 →
GET /api/v1/equipment/summary - 조건부 액션 버튼:
AVAILABLE→ [지급],IN_USE→ [반납],REPAIRING→ [수리 완료] - 사원 검색 자동완성:
GET /api/v1/employees/search?keyword=+ 300ms 디바운싱 - 낙관적 락 충돌: 지급 시
version불일치 → 409 → 토스트 "다른 사용자가 먼저 처리했습니다"
5. 업무 보고서 (WorkReportView.vue)
UI 구조
┌─────────────────────────────────────────────────────────┐
│ 📝 업무 보고서 작성 │
│ │
│ 보고 유형: [WEEKLY ▼] 기준일자: [2026-05-21] │
│ │
│ ✅ 완료 실적 (SR 자동 연동) │
│ ┌──────────────────────────────────────────────────┐ │
│ │ SR-2026-042: 오라클 인덱스 튜닝 (RESOLVED) │ │
│ │ SR-2026-043: 배포 파이프라인 오류 수정 (CLOSED) │ │
│ │ ※ 해당 주차 해결 완료한 SR 내역 자동 바인딩 │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ 완료 실적: [________________________________________] │
│ 차기 계획: [________________________________________] │
│ 특이사항: [_________________________________________] │
│ 본사 지원 요청: [___________________________________] │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 관리자 피드백 (김매니저): 수고하셨습니다. ✅ │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ [임시저장] [제출하기] │
└─────────────────────────────────────────────────────────┘
결재 상태 흐름
DRAFT ── [제출] ──> SUBMITTED ── [승인] ──> APPROVED
│
└── [반려] ──> DRAFT (관리자 피드백 필요)
핵심 로직
- SR 자동 연동: 페이지 진입 시
GET /api/v1/reports/sr-auto-complete?targetDate=...→ 해당 주차 해결 SR 바인딩 - 임시저장 vs 제출: DRAFT → SUBMITTED 전환 전 벨리데이션 (필수 항목 체크)
- 결재 피드백:
REJECTED상태에서 관리자 피드백 박스 조건부 렌더링
6. 상태 천이 다이어그램
SR 티켓
OPEN ──[담당자 배정]──> ASSIGNED ──[처리시작]──> IN_PROGRESS ──[해결]──> RESOLVED ──[확인종료]──> CLOSED
│ │ │
└──[취소/삭제]──────────┴───────────────────────┴── (Soft Delete)
업무 보고서
DRAFT ──[제출]──> SUBMITTED ──[승인]──> APPROVED
│
└──[반려]──> DRAFT (+ 피드백)
장비
AVAILABLE ──[지급]──> IN_USE ──[반납]──> AVAILABLE
│ │
└──[고장접수]──> REPAIRING ──[수리완료]──> AVAILABLE
│
└──[폐기]──> RETIRED