feat(quant): WBS-FE-BE-100 complete Vue3 Vite8 SPA & .NET10 FastEndpoints refactoring
Validators (Pushes and Pull Requests) / validate-ui-and-storage (push) Failing after 13s
Validators (Pushes and Pull Requests) / validate-core (push) Failing after 19s

This commit is contained in:
2026-07-22 15:14:28 +09:00
parent fd8ff3d51e
commit 2fe4cb288f
100 changed files with 7975 additions and 804 deletions
+82
View File
@@ -191,6 +191,88 @@
- **현장감 & 기술 부채**: 빌드 경고 및 사용되지 않는 쓰레기 코드를 즉각적으로 해결하여 **기술 부채**의 누적을 원천 차단한다. 실제 OpenAPI 응답 레이턴시, 스레드 병목 현상 및 어드민 DB 현황 조회 시 발생하는 트래픽을 로컬 및 E2E 실증 데이터로 직접 모니터링하여 **현장감** 있는 실전 최적화를 구현한다.
- **패턴화 & 표준화 & 구조화**: 명명 규칙, 디자인 패턴(예: Repository, Factory 등) 및 뷰 엔진 레이아웃은 합의된 양식을 엄격히 준수하도록 **표준화**하고, 핵심 퀀트 리팩토링 단계마다 빌드 무결성을 보증하도록 아키텍처를 **구조화**한다.
## 5d. 실무 운영 분석 및 수행 표준 지침 (Operational Execution & Analysis Harness Guidelines)
- **사전 정의 의무**: 모든 작업 분석 및 수행 시 `목적`, `입력`, `출력`, `제약조건`, `성공 기준`을 최우선으로 정의하고, `확인된 사실`, `가정`, `미확인 사항`을 구체적으로 분리하여 제시한다.
- **우선순위 가치**: 정확성, 데이터 정합성, 단순성, 안정성, 유지보수성을 최우선으로 하되 과도한 추상화와 불필요한 고도화(Over-engineering)는 피한다.
- **위험도 및 효과 기반 4단계 작업 분류**:
1. `즉시 수정`
2. `우선 개선`
3. `단계적 개선`
4. `현재는 보류`
- **구속력 있는 답변 및 보고서 7단계 작성 양식**:
1. `현재 상태와 핵심 문제` (결론 및 핵심 판단 우선 제시)
2. `핵심 판단과 우선순위`
3. `권장 접근법`
4. `구체적인 변경 내용` (전체 코드 대신 변경 지점과 이유 중심 서술)
5. `데이터 정합성 및 안정성 검토`
6. `테스트와 재현 절차` (실제 검증하지 않은 결과의 성공 단정 엄금)
7. `위험, 롤백, 남은 기술부채`
## 5e. 표준 기본 기술 스택 명세 (Standard Technology Stack Specification)
모든 시스템 설계, 리팩토링, 모듈 추가 및 프론트/백엔드 개발 시 아래 표준 기술 스택을 최우선 구속력으로 준수한다:
- **Core Architecture & Runtime**: `.NET 10` / `ASP.NET Core 10`
- **Architecture Pattern**: `Modular Monolith` / `Vertical Slice Architecture`
- **API Framework & Routing**: `FastEndpoints` / `Swashbuckle.AspNetCore` (Swagger/OpenAPI)
- **Database & Data Access**: `PostgreSQL` / `Npgsql` / `Dapper`
- **Migration & Schema Management**: `DbUp` (서비스 기동 영향 완전 격리)
- **Task Scheduler & Background Jobs**: `Hangfire`
- **Real-time Communication**: `SignalR`
- **Reliable Messaging & Event Consistency**: `Outbox + Inbox Pattern`
- **Frontend Stack & Build Tool**: `Vue 3` / `Vite 8` / `pnpm`
- **State Management & Data Fetching**: `TanStack Query` (Vue Query) / `Pinia`
- **Form Validation & Schema**: `vee-validate` / `Zod`
- **UI Components & Data Grid**: `PrimeVue` / `AG Grid` (또는 Tabler SSR 참조 모델)
- **Testing & E2E Framework**: `xUnit` (.NET) / `Vitest` (Frontend) / `Playwright` (E2E)
- **CI/CD Automation Pipeline**: `Gitea Actions`
- **Logging, Telemetry & Alerts**: `Serilog` / `OpenTelemetry` / `Telegram Notification`
- **HTTP Client**: `axios`
- **Routing**: `vue-router`
- **Security & Resiliency**: `BCrypt.Net-Next` / `Polly` (Fault Handling)
## 5f. 더존 회계시스템 기준 UX/AX 디자인 & 인터랙션 표준 명세 (Douzone ERP Accounting UX/AX Standard Specification)
어드민 웹 UI/UX 및 AX(AI Experience) 설계 시 더존 회계시스템(Smart A / Amaranth 10)의 전문성과 실무 직관성을 최우선 표준으로 적용한다:
- **키보드 중심 초고속 입력 (Keyboard-Centric Interaction)**:
- `Enter` 키로 다음 입력 필드 이동(Focus Traversal), `Tab` / `Shift+Tab` 행 간 이동, `F2` 조회를 일관되게 지원하여 마우스 없이 키보드만으로 거래/설정 입력이 완결되도록 한다.
- Grid 내에서는 `Arrow Keys` (상하좌우 셀 이동) 및 `Esc` 입력 취소를 제공한다.
- **마우스 & 핫키 상호보완 (Mouse & Hotkey Synergy)**:
- 마우스 클릭 시 행(Row) 전체 즉시 선택 및 우클릭 맥락 메뉴(Context Menu) 지원.
- 마우스 휠 스크롤 시 대용량 데이터 그리드의 Virtual Scroll(무한 스크롤) 적용.
- **화면 배치 및 레이아웃 구조 (Layout Architecture)**:
- **3단 분할 레이아웃 표준**: `상단 검색조건 헤더 바` + `중앙 메인 데이터 그리드 (Grid)` + `하단 상세/전표 summary & 핫키 안내 바`.
- 좌측 상단에는 핵심 필터, 우측 상단에는 `조회(F3)`, `저장(F4)`, `삭제(F5)`, `엑셀다운(F7)` 표준 버튼 배치.
- **컴포넌트 & 템플릿 표준 (Component & Template Standard)**:
- **Data Grid**: AG Grid / PrimeVue Grid 기반의 고밀도(High-Density) 그리드 사용 (열 넓이 자동 조절, 컬럼 고정, 합계/수량 Footer Row 필수 제공).
- **Modal & Lookup**: Code Lookup 모달 대화상자 적용 (검색 키워드 입력 즉시 자동 필터링).
- **색상 및 시각 정책 (Color & Visual Policy)**:
- **눈의 피로도 최소화 채도**: 더존 트레이드마크인 **Soft Navy/Slate Gray (`#2C3E50`, `#34495E`)** 메인 테마 적용.
- **상태 구분 Chips 정책**:
- `Success / 옥색`: 정상, 승인, PASS (`#2ECC71`, `#1ABC9C`)
- `Warning / 앰버`: 경고, 검토, LIMIT (`#F39C12`)
- `Error / 다크레드`: 차단, 오류, FAIL (`#E74C3C`)
- **입력 필드 상태**: Focus 시 Blue Border Highlight, 읽기 전용(Disabled/Read-Only) 시 Light Gray Background (`#ECF0F1`).
## 5g. 더존 회계시스템 기준 6대 표준 화면 타입 및 입력 컴포넌트 템플릿 정책 (Douzone Standard Screen Types & Input Template Policy)
화면 구현 시 임의의 레이아웃 작성을 전면 금지하며, 아래 6대 표준 화면 타입과 컴포넌트 마스크 정책만 사용하도록 구속한다:
- **6대 표준 화면 타입**:
1. `Type 1: 단일 그리드 전표형 (Single Grid View)`: 대용량 데이터 조회/관리 전용 (상단 검색 + AG Grid + 하단 안내 바).
2. `Type 2: Master-Detail 2단 스플릿형 (Master-Detail Split View)`: 30% 좌측 목록 그리드 : 70% 우측 세부 입력 폼.
3. `Type 3: 좌우 5:5 대칭 분할형 (5:5 Split View)`: 원천 vs 파생 데이터 대조 및 괴리율 분석 전용.
4. `Type 4: 고밀도 다층 폼 입력형 (High-Density Form View)`: 2열/3열 고밀도 테이블 입력 폼.
5. `Type 5: 팝업 룩업 대화상자형 (Code Lookup Modal)`: `F2` 종목/팩터 룩업 모달 (키워드 자동 필터링 + Enter 선택).
6. `Type 6: 종합 대시보드 KPI형 (Executive Dashboard)`: 펀드 자산 Status Chips + 4분할 차트 Widget.
- **고밀도 컴포넌트 & 입력 마스크 규격**:
- `Label (라벨)`: `width: 120px; font-weight: 700; color: #2C3E50; 우측 정렬;` 필수 항목 `*` 표시.
- `Text Input`: Focus 시 Blue Highlight (`#2980B9`), `Enter` 키로 다음 필드 포커스 자동 이동.
- `Combo / Select`: `Alt + Down` 드롭다운 펼치기, `Enter` 키 선택 확정.
- `Number / Currency (마스크)`: Right Align, 천단위 콤마 자동 서식 (`1,000,000`), 음수 다크레드, 문자 입력 차단.
- `Date Input (마스크)`: YYYY-MM-DD 마스크 (`2026-07-22`), 숫자 8자리 입력 시 자동 하이픈 생성 (`20260722``2026-07-22`).
- `Code Lookup`: `F2` 돋보기 버튼 결합 룩업 모달 자동 구동.
- **동적 스플릿 바(Resizable Splitter Bar) 분할 원칙**:
- `DataComparisonView.vue`(Type 3) 및 `DatabaseView.vue`(Type 2) 등 좌/우, 상/하로 분할되는 모든 화면은 고정 크기가 아닌 **동적 스플릿 바(Resizable Splitter Bar)**를 기본 탑재하여 사용자가 마우스 드래그로 분할 비율(5:5, 3:7, 7:3 등)을 자유롭게 조절하도록 구속한다.
- **과도한 상하 스크롤 배제 및 단일 화면(1-Viewport Grid/Tab) 정책**:
- 화면 전체를 상하 수직 박스로 길게 늘어뜨려 **과도한 상하 스크롤을 유발하는 레이아웃 구성은 실무 가독성 저해로 절대 금지**한다.
- 모든 메인 뷰는 **단일 화면(1-Viewport)** 안에서 완결되도록 설계하며, 추가 정보는 상하 스크롤이 아닌 **`상단 탭(Tab) 전환`**을 통해 한눈에 파악할 수 있도록 직관적 뷰를 구성한다.
## 6. 검증 규칙
- `python tools/validate_specs.py`
- `python tools/validate_golden_coverage_100.py`