bnk-fin-dt-web-prototype

금융 DT 관점의 인증/기기/수취인/이체 플로우를 단일 페이지(SPA)로 연결한 웹 프로토타입이다.
백엔드 없이도 동작하도록 Mock API + Mock DB(JSON) 기반으로 사고 재현/상태 전이/로그 관점의 UI 흐름을 검증한다.

---

핵심 기능

• Login → Device Check → Beneficiary → Transfer Review → Auth → Result 플로우 연결
• Mock API 기반 상태 전이(정상/실패/차단/보류 케이스)
• Oracle DDL(34 tables) 정본 보관 및 문서화 경로 제공

---

실행 방법

옵션 A: VSCode Live Server (권장)

1. public/index.html 우클릭
2. Open with Live Server
3. 브라우저 주소가 http://... 로 시작하는지 확인
   • file:// 로 열면 모듈 로딩/라우팅이 깨질 수 있다.

옵션 B: Python 로컬 서버

루트에서 실행:

python -m http.server 5500
브라우저:

http://localhost:5500/public/index.html

주요 경로
Entry: public/index.html

App bootstrap: src/js/app.js

Router: src/js/router.js

Mock API: src/js/api.mock.js

Mock DB: data/mock-db.json

Styles: styles/tokens.css, styles/app.css

Oracle DDL: db/oracle/ddl/BNK_FIN_DT_DDL_v1.sql

폴더 구조
아래 트리는 “현재 구조 + 권장 확장 트리”를 포함한 기준안이다.

txt
코드 복사
bnk-fin-dt-web-prototype/
├─ data/                               # Mock DB 저장소(JSON)
│  └─ mock-db.json
├─ db/                                 # DB 스키마 산출물
│  └─ oracle/
│     ├─ ddl/                          # 정본 DDL
│     │  └─ BNK_FIN_DT_DDL_v1.sql
│     ├─ indexes/                      # 인덱스 분리 운용 시
│     └─ seed/                         # 초기 데이터 스크립트
├─ docs/                               # 협업/감사/포트폴리오 문서
│  ├─ database/
│  │  ├─ TABLE_SPEC.md                 # 테이블 명세서(협업/감사용)
│  │  ├─ CODE_DEFINITION.md            # 코드 정의서(상태/권한/전이 규칙)
│  │  └─ ERD.md                        # ERD/관계 요약
│  ├─ architecture/
│  │  ├─ ADR-0001-routing.md           # 라우팅/렌더링 구조 결정 기록
│  │  ├─ ADR-0002-mock-api.md          # Mock API/Mock DB 설계 결정 기록
│  │  └─ ADR-0003-ddl-versioning.md    # DDL 버전 관리 규칙
│  └─ ui/
│     ├─ flow.md                       # 사용자 플로우 정의(화면 전이)
│     └─ screens/                      # 캡처/시안 이미지
├─ scripts/
│  ├─ mock/
│  │  └─ generate-mock-db.js           # 선택: Mock DB 생성기
│  └─ db/
│     └─ validate-ddl.sql              # 선택: DDL 검증용 쿼리
├─ public/                             # 정적 엔트리
│  └─ index.html
├─ src/
│  ├─ assets/                          # 이미지/아이콘 등 리소스
│  └─ js/
│     ├─ pages/                        # 화면 단위(라우팅 대상)
│     ├─ components/                   # 재사용 UI 단위
│     ├─ api.mock.js                   # Mock API
│     ├─ app.js                        # 앱 부팅/라우팅 연결
│     ├─ router.js                     # 해시 라우터
│     ├─ shell.js                      # 레이아웃/네비 공통
│     └─ store.js                      # 상태 저장(세션/플로우)
├─ styles/                             # CSS 토큰/전역 스타일
│  ├─ tokens.css
│  └─ app.css
└─ .vscode/
   └─ settings.json                    # 선택: Live Server 포트/포맷팅 통일
상태/정책 설계 원칙
물리 삭제 금지: 상태값/이력으로 관리

인증/세션/로그/원장 분리

상태 코드는 UI 옵션이 아니라 업무 규칙의 결과값

사고 대응을 위해 request/session/device 등 추적 키를 유지

Git 커밋 규칙
Conventional Commits 사용:

feat: ... 기능

fix: ... 버그

docs: ... 문서

refactor: ... 리팩터링

chore: ... 설정/잡일

예시:

feat: connect transfer flow pages with mock API

fix: bind page events via mount hooks

로드맵
Mock API → 실제 API(Spring Boot) 로 교체

상태 전이 규칙 서버 강제(권한/한도/쿨링오프/리스크)

감사 로그/로그인 이벤트 대용량 처리 전략 분리(파티션/아카이빙)

DB 마이그레이션(Flyway/Liquibase) 도입