MFR → 페이지 매핑

Feature를 화면으로 변환

MFR 구조를 기반으로 PDA 에이전트가 UI 페이지 정의서를 생성하는 시나리오.

언제 사용하나?

흐름도

MFR 구조 (confirmed Features)
         │
         ▼
  ┌─────────────────┐
  │   PDA 에이전트    │
  │  (페이지 분석)    │
  └────────┬────────┘
           │
     ┌─────┴─────┐
     ▼           ▼
  Feature →    페이지 간
  Page 매핑    네비게이션 정의
     │           │
     └─────┬─────┘
           ▼
  ┌─────────────────────────┐
  │  페이지 정의서 생성       │
  │  - 와이어프레임           │
  │  - 컴포넌트 매핑          │
  │  - 상태 관리             │
  │  - 데이터 흐름            │
  │  - 네비게이션 규칙        │
  └─────────────────────────┘
           │
           ▼
  Feature ↔ Page 양방향 참조 설정

구체적 예시: 중고차 거래 앱

Feature → Page 매핑

Feature: 차량 등록 ──────→ Page 05: 차량 등록 화면
Feature: 차량 검수 ──────→ Page 05: 차량 등록 화면 (같은 페이지에 통합)
Feature: 가격 책정 ──────→ Page 10: 차량 상세 화면
Feature: 구매 신청 ──────→ Page 10: 차량 상세 화면
Feature: 인증/인가 ──────→ Page 02: 로그인 화면

생성되는 페이지 정의서 예시: Page 05 (차량 등록)

MFR 참조

FeatureRequirement상태
차량 등록차량 기본정보 입력confirmed
차량 등록차량 사진 업로드confirmed
차량 검수AI 차량 상태 분석confirmed

와이어프레임

┌─────────────────────────────────┐
│  [← 뒤로]    차량 등록           │
├─────────────────────────────────┤
│                                 │
│  제조사  [          ▼]          │
│  모델명  [            ]         │
│  연식    [    ▼]  주행거리 [   ] │
│  가격    [            ] 만원     │
│  차대번호 [            ]        │
│                                 │
│  ┌─────┐ ┌─────┐ ┌─────┐      │
│  │ +   │ │     │ │     │      │
│  │ 추가 │ │     │ │     │      │
│  └─────┘ └─────┘ └─────┘      │
│  사진 최대 10장 (JPEG/PNG)      │
│                                 │
│  ┌─────────────────────────┐   │
│  │  AI 검수 결과            │   │
│  │  등급: B                 │   │
│  │  외관 손상: 좌측 범퍼     │   │
│  └─────────────────────────┘   │
│                                 │
│       [ 차량 등록하기 ]          │
│                                 │
└─────────────────────────────────┘

컴포넌트 매핑

UI 요소컴포넌트Requirement
차량 정보 폼VehicleInfoForm차량 기본정보 입력
사진 업로더PhotoUploader차량 사진 업로드
AI 검수 결과InspectionResultAI 차량 상태 분석
등록 버튼SubmitButton—

데이터 흐름

[사용자] 정보 입력 → VehicleInfoForm
    │
    ▼
[사용자] 사진 업로드 → PhotoUploader → POST /api/uploads
    │
    ▼
[사용자] 등록 클릭 → POST /api/vehicles
    │
    ▼
[서버] AI 분석 요청 → 외부 API
    │
    ▼
[서버] 분석 결과 반환 → InspectionResult 표시
    │
    ▼
[네비게이션] 차량 상세 화면 (Page 10)으로 이동

디렉터리/파일 구조

{mfr_root}/
├── _pages/
│   ├── 00_index.md
│   ├── 01_main.md
│   ├── auth/
│   │   └── 02_login.md
│   ├── vehicle/
│   │   └── 05_registration.md    ← 위 예시 내용
│   └── trade/
│       └── 10_detail.md

양방향 참조

Page 파일 (05_registration.md):

related_features:
  - vehicle/registration
  - vehicle/inspection

Feature 파일 (vehicle/registration/00_feature.md):

pages:
  - _pages/vehicle/05_registration

관련 에이전트

관련 페이지

← MFR → Task 파생