6c0fca22f3
- 앱 상태 관리 및 기본 렌더 함수 추가 (vanilla JS) - OpenAPI 스펙 빌더 초기 구현 (v3.1 대응) - 스텝별 렌더 함수 및 UI 구축
311 lines
15 KiB
JavaScript
311 lines
15 KiB
JavaScript
// 계좌이체 API 모의 데이터
|
|
// locked: true 인 필드는 게이트웨이가 자동 주입한 값(회색 + 자물쇠)
|
|
// locked: false / 미지정 인 필드는 사용자가 자유롭게 편집
|
|
|
|
window.SAMPLE_DATA = (function () {
|
|
return {
|
|
info: {
|
|
title: { value: '계좌이체 API', locked: false },
|
|
version: { value: '1.0.0', locked: false },
|
|
summary: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
termsOfService: { value: '', locked: false },
|
|
contact: {
|
|
name: { value: 'DJB API Team', locked: false },
|
|
email: { value: 'api@djb.co.kr', locked: false },
|
|
url: { value: '', locked: false }
|
|
},
|
|
license: {
|
|
name: { value: '', locked: false },
|
|
url: { value: '', locked: false }
|
|
}
|
|
},
|
|
|
|
tags: [
|
|
{ name: 'transfer', description: '계좌이체 관련 API' }
|
|
],
|
|
|
|
externalDocs: {
|
|
description: { value: '', locked: false },
|
|
url: { value: '', locked: false }
|
|
},
|
|
|
|
servers: [
|
|
{
|
|
url: { value: 'https://api-dev.djb.co.kr', locked: true },
|
|
env: 'development',
|
|
description: { value: '개발 환경', locked: false }
|
|
},
|
|
{
|
|
url: { value: 'https://api-stg.djb.co.kr', locked: true },
|
|
env: 'staging',
|
|
description: { value: '스테이징 환경', locked: false }
|
|
},
|
|
{
|
|
url: { value: 'https://api.djb.co.kr', locked: true },
|
|
env: 'production',
|
|
description: { value: '운영 환경', locked: false }
|
|
}
|
|
],
|
|
|
|
serverVariables: [
|
|
{
|
|
name: { value: 'basePath', locked: true },
|
|
default: { value: '/v1', locked: false },
|
|
enumStr: { value: '/v1,/v2', locked: false },
|
|
description: { value: 'API 버전 경로', locked: false }
|
|
}
|
|
],
|
|
|
|
operation: {
|
|
method: { value: 'POST', locked: true },
|
|
path: { value: '/v1/accounts/transfer', locked: true },
|
|
operationId: { value: 'transferAccount', locked: false },
|
|
summary: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
tags: { value: ['transfer'], locked: false },
|
|
deprecated: { value: false, locked: false }
|
|
},
|
|
|
|
// 파라미터 (Path/Query/Header/Cookie)
|
|
parameters: [
|
|
{
|
|
in: 'header',
|
|
name: { value: 'X-Request-Id', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: 'uuid', locked: false },
|
|
maxLength: { value: '', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '', locked: false }
|
|
}
|
|
],
|
|
|
|
// Request Body 스키마 (중첩 3단)
|
|
requestBody: {
|
|
mediaType: 'application/json',
|
|
required: { value: true, locked: true },
|
|
schema: [
|
|
{
|
|
name: { value: 'transactionId', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '40', locked: false },
|
|
pattern: { value: '^tx-[0-9a-zA-Z-]+$', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: 'tx-20260522-001', locked: false },
|
|
children: null
|
|
},
|
|
{
|
|
name: { value: 'sender', locked: true },
|
|
type: { value: 'object', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '송금인 정보', locked: false },
|
|
example: { value: '', locked: false },
|
|
children: [
|
|
{
|
|
name: { value: 'accountNumber', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '20', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '110-1234-567890', locked: false },
|
|
children: null
|
|
},
|
|
{
|
|
name: { value: 'bankCode', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '3', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '088', locked: false },
|
|
children: null
|
|
},
|
|
{
|
|
name: { value: 'holderName', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '60', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '김철수', locked: false },
|
|
children: null
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: { value: 'receiver', locked: true },
|
|
type: { value: 'object', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '수취인 정보', locked: false },
|
|
example: { value: '', locked: false },
|
|
children: [
|
|
{
|
|
name: { value: 'accountNumber', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '20', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '111-2345-678901', locked: false },
|
|
children: null
|
|
},
|
|
{
|
|
name: { value: 'bankCode', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '3', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '020', locked: false },
|
|
children: null
|
|
},
|
|
{
|
|
name: { value: 'holderName', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '60', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '이영희', locked: false },
|
|
children: null
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: { value: 'amount', locked: true },
|
|
type: { value: 'object', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '이체 금액', locked: false },
|
|
example: { value: '', locked: false },
|
|
children: [
|
|
{
|
|
name: { value: 'value', locked: true },
|
|
type: { value: 'integer', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: 'int64', locked: false },
|
|
maxLength: { value: '', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '50000', locked: false },
|
|
children: null
|
|
},
|
|
{
|
|
name: { value: 'currency', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: true, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '3', locked: false },
|
|
pattern: { value: '^[A-Z]{3}$', locked: false },
|
|
description: { value: 'ISO 4217 통화코드', locked: false },
|
|
example: { value: 'KRW', locked: false },
|
|
children: null
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: { value: 'memo', locked: true },
|
|
type: { value: 'string', locked: true },
|
|
required: { value: false, locked: true },
|
|
format: { value: '', locked: false },
|
|
maxLength: { value: '100', locked: false },
|
|
pattern: { value: '', locked: false },
|
|
description: { value: '', locked: false },
|
|
example: { value: '5월 회비', locked: false },
|
|
children: null
|
|
}
|
|
]
|
|
},
|
|
|
|
// 응답 스키마 (상태코드 별)
|
|
responses: {
|
|
'200': {
|
|
description: { value: '이체 성공', locked: false },
|
|
schema: [
|
|
{ name: { value: 'transactionId', locked: true }, type: { value: 'string', locked: true }, required: { value: true, locked: true }, format: { value: '', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: 'tx-20260522-001', locked: false }, children: null },
|
|
{ name: { value: 'status', locked: true }, type: { value: 'string', locked: true }, required: { value: true, locked: true }, format: { value: '', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: 'COMPLETED', locked: false }, children: null },
|
|
{ name: { value: 'completedAt', locked: true }, type: { value: 'string', locked: true }, required: { value: true, locked: true }, format: { value: 'date-time', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: '2026-05-22T10:00:00Z', locked: false }, children: null },
|
|
{
|
|
name: { value: 'balance', locked: true }, type: { value: 'object', locked: true }, required: { value: true, locked: true }, format: { value: '', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '잔액 정보', locked: false }, example: { value: '', locked: false },
|
|
children: [
|
|
{ name: { value: 'before', locked: true }, type: { value: 'integer', locked: true }, required: { value: true, locked: true }, format: { value: 'int64', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: '1000000', locked: false }, children: null },
|
|
{ name: { value: 'after', locked: true }, type: { value: 'integer', locked: true }, required: { value: true, locked: true }, format: { value: 'int64', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: '950000', locked: false }, children: null }
|
|
]
|
|
}
|
|
]
|
|
},
|
|
'400': {
|
|
description: { value: '잘못된 요청', locked: false },
|
|
schema: [
|
|
{
|
|
name: { value: 'error', locked: true }, type: { value: 'object', locked: true }, required: { value: true, locked: true }, format: { value: '', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: '', locked: false },
|
|
children: [
|
|
{ name: { value: 'code', locked: true }, type: { value: 'string', locked: true }, required: { value: true, locked: true }, format: { value: '', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: 'INVALID_AMOUNT', locked: false }, children: null },
|
|
{ name: { value: 'message', locked: true }, type: { value: 'string', locked: true }, required: { value: true, locked: true }, format: { value: '', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: '금액이 올바르지 않습니다', locked: false }, children: null },
|
|
{ name: { value: 'details', locked: true }, type: { value: 'array', locked: true }, required: { value: false, locked: true }, format: { value: '', locked: false }, maxLength: { value: '', locked: false }, pattern: { value: '', locked: false }, description: { value: '', locked: false }, example: { value: '', locked: false }, itemsType: { value: 'string', locked: false }, children: null }
|
|
]
|
|
}
|
|
]
|
|
},
|
|
'401': { description: { value: '인증 실패', locked: false }, schema: [] },
|
|
'500': { description: { value: '서버 오류', locked: false }, schema: [] }
|
|
},
|
|
|
|
// 보안 스킴
|
|
securitySchemes: [
|
|
{
|
|
key: 'ApiKeyAuth',
|
|
type: 'apiKey',
|
|
locked: true,
|
|
name: { value: 'X-API-Key', locked: true },
|
|
in: { value: 'header', locked: true },
|
|
description: { value: '', locked: false }
|
|
}
|
|
],
|
|
globalSecurity: ['ApiKeyAuth'],
|
|
|
|
// 예제
|
|
examples: {
|
|
request: {
|
|
'application/json': {
|
|
default: '{\n "transactionId": "tx-20260522-001",\n "sender": {\n "accountNumber": "110-1234-567890",\n "bankCode": "088",\n "holderName": "김철수"\n },\n "receiver": {\n "accountNumber": "111-2345-678901",\n "bankCode": "020",\n "holderName": "이영희"\n },\n "amount": {\n "value": 50000,\n "currency": "KRW"\n },\n "memo": "5월 회비"\n}'
|
|
}
|
|
},
|
|
response: {
|
|
'200': { body: '{\n "transactionId": "tx-20260522-001",\n "status": "COMPLETED"\n}', headers: [ { name: 'X-RateLimit-Remaining', type: 'integer', description: '남은 요청 횟수', example: '99' } ] }
|
|
}
|
|
},
|
|
|
|
// 문서 옵션
|
|
docOptions: {
|
|
theme: 'light',
|
|
lang: 'ko',
|
|
includeExamples: true,
|
|
tryItOut: true,
|
|
defaultExpandDepth: -1,
|
|
layout: 'BaseLayout',
|
|
tagFilter: [],
|
|
sideToc: true
|
|
}
|
|
};
|
|
})();
|