[기획서] ModeTour Playground 통합 E2E 테스트베드 & QA 대시보드

Playground GUI 원클릭 제어

복잡한 CLI 터미널 명령어 대신 웹 브라우저에서 타겟 도메인과 테스트 시나리오를 선택하여 즉시 실행합니다.

개인 .env.local 기반 보안 격리

테스트 계정/비밀번호는 Git에 올리지 않고 각자 로컬 환경변수에서 주입하며, 누락 시 자동 감지 오류 모달을 제공합니다.

실시간 리포트 & 결함 Trace 분석

진행 상황 스트리밍, 실패 시 화면 자동 스크린샷 캡처 및 Playwright Trace Viewer 연동으로 디버깅 시간을 90% 단축합니다.

Architecture & Data Pipeline

전체 엔드투엔드(E2E) 시스템 실행 흐름도

사용자 액션부터 백엔드 브릿지, Playwright 엔진, 라이브 대상 사이트 검증까지의 전체 파이프라인

GUI 액션 ENV 검증 분기 브라우저 검증

1 Control Plane (GUI)

Playground 테스트베드 대시보드

개발자/QA 담당자 조작 화면

타겟 도메인 지정

• www.modetour.dev

• m.modetour.dev

• onbp-www.modetour.dev

시나리오 태그 필터

• @auth (로그인/토큰)

• @mypage (예약/가상계좌)

• @vendor (TOPAS/인증)

실행 트리거 버튼

Headless / Headed 모드 선택 후 [Run Suite] 클릭

HTTP POST /api/testbed/run (Params: target, tags, mode)

2 Security Pre-Check

환경변수(.env.local) 사전 검증

민감 계정 누락 여부 자동 감지

검증 통과 (ENV OK)

E2E_TEST_USER_ID 및 PW 정상 로드 → 3단계(Playwright 엔진)로 즉시 실행 전달.

누락 시 차단 분기 (Fail)

실행 즉시 중단 → "설정 가이드 팝업 모달" 렌더링.

Node.js Child Process Spawn (pnpm exec playwright test)

3 Test Execution Engine

Playwright 러너 & 브라우저 엔진

Headless Chromium / Mobile Safari

Page Object Model (POM)

로그인 폼, 마이페이지 리스트, 팝업 인터랙션 추상화 실행

Network Mocking

KCB 본인인증 팝업, TOPAS PG 결제창 인터셉트 및 가상 성공 응답

Artifacts Capture

DOM 스냅샷, 실패 시점 스크린샷, Trace 파일 생성

Live HTTP/HTTPS Interaction & DOM Verification

4 Live Target Endpoints

실제 배포 도메인 (B2C/BP/ONBP)

Multi-Channel Web Apps

B2C Channels

• www.modetour.dev (PC)

• m.modetour.dev (MO)

BP Partner Channels

• bp-www.modetour.dev (PC)

• bp-m.modetour.dev (MO)

ONBP WhiteLabel

• onbp-www.modetour.dev

• onbp-m.modetour.dev

WebSocket Realtime Output & JSON Test Results

5 Realtime Reporting

결과 분석 및 대시보드 리포트

Playground 화면 실시간 렌더링

실시간 성공률 (Pass Rate)

전체 / 통과 / 실패 건수 및 수행 시간 집계

실패 스크린샷 뷰어

Assertion 실패 시점의 실제 렌더링 캡처 팝업 확인

Playwright Trace Viewer

네트워크 타임라인, 콘솔 로그, DOM 스냅샷 완벽 탐색

Featured End-to-End User Journey

대표 시나리오: 패키지 상품 검색 → 예약 신청 → 마이페이지 확인

실제 사용자가 패키지 상품을 탐색하고 본인인증을 거쳐 예약을 완료한 후 마이페이지에서 평문 확인까지의 전 과정

Scenario ID: BOOK-PKG-01 5 Steps E2E

패키지 검색 결과 진입 및 상품 선택

/package/search-result

검색창에 '다낭' 입력 또는 검색 결과 페이지로 직접 이동하여 첫 번째 패키지 상품 카드를 클릭합니다.

탐색 단계

// 1. 상품 검색 결과 진입 & 첫 번째 카드 클릭

await page.goto('/package/search-result?keyword=다낭');

await page.locator('[data-testid="package-card"]').first().click();

await expect(page).toHaveURL(/\/package\/detail\//);

상세 페이지 일정 확인 및 [예약하기] 클릭

/package/detail/[id]

상세 페이지에서 출발일자 및 성인 1명 옵션을 확인한 후 [예약하기] 버튼을 클릭하여 예약 작성 페이지로 진입합니다.

옵션 선택

// 2. 예약하기 버튼 클릭 및 예약 페이지 전환 확인

await page.locator('button:has-text("예약하기")').click();

await expect(page).toHaveURL(/\/package\/reservation\//);

await expect(page.locator('[data-testid="reservation-form"]')).toBeVisible();

예약자 정보 입력 & KCB 본인인증 Mocking 완료

ISMS 핵심 검증

본인인증 팝업 호출 시 Playwright가 /api/auth/self-cert/decrypt 응답을 가로채어 유효한 인증값(이름/전화번호)을 폼에 자동 바인딩합니다.

BFF 복호화 연동

// 3. KCB 본인인증 BFF 응답 인터셉트 Mocking & 여행자 정보 입력

await page.route('**/api/auth/self-cert/decrypt', async (route) => {

await route.fulfill({ json: { isOK: true, result: { name: '홍길동', cellPhone: '01012345678' } } });

});

await page.locator('button:has-text("본인인증")').click();

await expect(page.locator('input[name="bookerName"]')).toHaveValue('홍길동');

약관 동의 & [예약 신청하기] 제출

예약 완료 팝업

필수 여행 약관 전체 동의를 체크하고 최종 [예약 신청하기] 버튼을 누른 후, 화면에 생성된 주문번호(OrderNo)를 캡처합니다.

예약 생성

// 4. 약관 동의 체크 및 예약 완료 팝업 내 주문번호 추출

await page.locator('#agree-all-terms').check();

await page.locator('button:has-text("예약 신청하기")').click();

const orderNo = await page.locator('[data-testid="complete-order-no"]').innerText();

expect(orderNo).toMatch(/^[0-9A-Z]{8,}$/);

마이페이지 이동 후 신규 예약 내역 평문 확인

최종 Assertion

마이페이지 예약 내역(`/mypage/reservation-history`)으로 이동하여 방금 생성된 주문번호의 예약 내역이 암호화 깨짐 없이 정상 노출되는지 확인합니다.

최종 완료 검증

// 5. 마이페이지 예약 리스트 평문 렌더링 검증

await page.goto('/mypage/reservation-history');

const latestItem = page.locator('[data-testid="reservation-list-item"]').first();

await expect(latestItem).toContainText(orderNo);

await expect(latestItem.locator('.guest-name')).toHaveText('홍길동');

환경변수(ENV) 자율 관리 및 보안 아키텍처

ISMS 규정에 따른 계정 정보 소스코드 격리 및 실행 전 자동 검증 정책

Git 커밋 금지: 테스트용 계정 ID, 패스워드, PNR 등 민감값은 .gitignore된 core/apps/playground/.env.local에만 작성합니다.
사전 무결성 검증 (Pre-Flight Validation): 사용자가 대시보드에서 [Run Suite]를 누르면, 브라우저를 띄우기 전에 로컬 환경변수 파일 유효성을 먼저 확인합니다.
누락 시 차단 & 가이드 모달: 필수 키가 누락되었을 경우 불필요한 테스트 실패나 타임아웃을 유발하지 않고 즉시 설정 가이드 모달을 띄웁니다.

ENV 검증 분기 플로우 다이어그램

정상 분기 (Success Flow) Exit Code: 0

필수 환경변수가 모두 정의된 경우

E2E_TEST_USER_ID & E2E_TEST_USER_PW 값 존재 확인

→ Playwright 브라우저 인스턴스 정상 기동 및 E2E 테스트 시작

정상 테스트 러너로 파라미터 전달

누락 분기 (Error Flow) Missing Key Detected

필수 환경변수가 없거나 비어있는 경우

.env.local 미생성 또는 키 값 누락 감지

→ 테스트 프로세스 실행 중단 및 오류 모달 자동 팝업

환경변수 상세 스펙 명세

환경변수 키 (Key)	구분	설명 및 목적	예시값	누락 시 시스템 동작
E2E_TEST_USER_ID	필수	마이페이지 예약/결제 내역 및 개인정보수정 테스트 계정	qa_tester_01	실행 전면 차단 & 오류 모달 팝업
E2E_TEST_USER_PW	필수	테스트 계정 로그인 및 비밀번호 확인 팝업 검증용 PW	Modetour1234!@	실행 전면 차단 & 오류 모달 팝업
E2E_NON_MEMBER_PNR	선택	TOPAS 항공 비회원 예약조회 테스트용 PNR 번호	ABC123XYZ	해당 시나리오만 안전하게 Skip
E2E_TARGET_BASE_URL	기본값	기본 타겟 URL (Playground GUI에서 라디오버튼으로 오버라이드 가능)	https://www.modetour.dev	GUI 선택값 우선 적용

Playground E2E Control Center (실제 화면 프로토타입)

Playground 웹 대시보드에서 직접 타겟과 시나리오를 선택하여 테스트를 실행하고 리포트를 확인합니다.

1. 타겟 도메인 & 채널

B2C Desktop (PC)

https://www.modetour.dev

1920x1080

B2C Mobile (MO)

https://m.modetour.dev

iPhone 14

BP Partner (PC)

https://bp-www.modetour.dev

1920x1080

ONBP WhiteLabel (PC)

https://onbp-www.modetour.dev

WhiteLabel

2. 테스트 시나리오 그룹

@auth (인증 & 토큰)

로그인, Silent Refresh, 비밀번호 변경

3 tests

@mypage (마이페이지)

예약목록, 상세, 가상계좌번호 평문

4 tests

@vendor (외부 제휴/BFF)

SelfCert 본인인증, TOPAS 마일리지

3 tests

@isms (개인정보/GA)

개인정보신청 조회, GA 해시 적재

2 tests

3. 실행 옵션 & 환경 상태

브라우저 실행 모드

Trace 녹화 및 스크린샷 캡처

ENV 연결 상태: 정상

E2E_TEST_USER_ID 로드 완료

대기 중 (준비 완료) 0%

테스트 케이스 실행 현황 Total: 12 tests

[AUTH-01] 사용자 로그인 및 세션 토큰 발급

대기

[AUTH-02] 백그라운드 토큰 갱신 (Silent Refresh)

대기

[AUTH-03] 비밀번호 검증 팝업 평문 요청

대기

[RES-01] 마이페이지 예약 목록 평문 렌더링

대기

[RES-02] 예약 상세 대표/동반 여행자 정보 조회

대기

[RES-03] 가상계좌 입금 계좌번호 마스킹/복호화 확인

대기

[VEND-01] KCB 본인인증 팝업 완료 후 BFF 복호화 바인딩

대기

[VEND-02] TOPAS 항공 마이페이지 예약/취소 내역 조회

대기

[VEND-03] TOPAS 비회원 예약조회 서버 암호화 전송

대기

[VEND-04] TOPAS 투어마일리지 사용 BFF 포맷팅 & postMessage

대기

[PRIV-01] 개인정보 이용내역/열람신청 BFF 복호화 조회

대기

[ETC-01] Google Analytics GTM 데이터레이어 해시 적재

대기

Playwright Live Execution Output

[System] Testbed Ready. Click "테스트 전체 실행" to begin.

통합 E2E 테스트 시나리오 전체 매트릭스 (12종)

실제 사용자 관점의 브라우저 클릭/입력 이벤트부터 네트워크 요청, 응답 복호화 결과 렌더링까지 검증하는 시나리오 정의입니다.

시나리오 ID	분류	검증 시나리오 및 주요 동작	E2E 자동화 검증 포인트 (Assertion)	대상 채널
AUTH-01	인증	로그인 페이지 진입 → ID/PW 입력 → 로그인 완료	헤더에 사용자명 노출, `accessToken` 쿠키 저장 확인	PC / MO
AUTH-02	인증	토큰 만료 시점 시뮬레이션 → 마이페이지 이동	`POST /api/auth/refresh` 호출 확인 및 재로그인 팝업 없이 렌더링	PC / MO
AUTH-03	인증	개인정보수정 진입 → 비밀번호 검증 팝업 입력	클라이언트 Crypto 암호화 없이 평문 요청 및 200 OK 수신	PC / MO
RES-01	마이페이지	마이페이지 예약 내역 리스트 조회	주문번호, 상품명, 결제금액이 Base64 암호화 문자열이 아닌 평문으로 렌더링	B2C / ONBP
RES-02	마이페이지	패키지 예약 상세 조회 및 여행자 정보 팝업	대표 예약자명, 동반자 이름/생년월일 평문 렌더링	B2C / ONBP
RES-03	결제	가상계좌 결제 예약건 상세 진입	입금 계좌번호 마스킹 및 평문 노출 확인	B2C / ONBP
VEND-01	외부제휴	KCB 본인인증 팝업 완료 트리거	`/api/auth/self-cert/decrypt` 응답값(이름/전화번호)이 폼에 정상 바인딩	전 채널
VEND-02	TOPAS	항공 마이페이지 예약/취소 내역 진입	서버 암복호화(`fetchTopasReservation`) 거쳐 정상 PNR 리스트 반환	B2C / ONBP
VEND-03	TOPAS	비회원 항공 예약조회 폼 입력 후 제출	`/api/topas/non-member-reservation` 서버 암호화 후 백엔드 조회 성공	B2C / ONBP
VEND-04	TOPAS	마일리지 결제 팝업 → 사용 금액 입력 후 적용	`/api/topas/mileage/format-apply` 거쳐 부모창에 `APPLY_MILEAGE` postMessage 전송	B2C / ONBP

Playground E2E Testbed & QA Dashboard

Playground GUI 원클릭 제어

개인 .env.local 기반 보안 격리

실시간 리포트 & 결함 Trace 분석

전체 엔드투엔드(E2E) 시스템 실행 흐름도

Playground 테스트베드 대시보드

환경변수(.env.local) 사전 검증

Playwright 러너 & 브라우저 엔진

실제 배포 도메인 (B2C/BP/ONBP)

결과 분석 및 대시보드 리포트

대표 시나리오: 패키지 상품 검색 → 예약 신청 → 마이페이지 확인

패키지 검색 결과 진입 및 상품 선택

상세 페이지 일정 확인 및 [예약하기] 클릭

예약자 정보 입력 & KCB 본인인증 Mocking 완료

약관 동의 & [예약 신청하기] 제출

마이페이지 이동 후 신규 예약 내역 평문 확인

환경변수(ENV) 자율 관리 및 보안 아키텍처

ENV 검증 분기 플로우 다이어그램

필수 환경변수가 모두 정의된 경우

필수 환경변수가 없거나 비어있는 경우

환경변수 상세 스펙 명세

Playground E2E Control Center (실제 화면 프로토타입)

1. 타겟 도메인 & 채널

2. 테스트 시나리오 그룹

3. 실행 옵션 & 환경 상태

통합 E2E 테스트 시나리오 전체 매트릭스 (12종)

구현 단계별 세부 로드맵

Phase 1: Playwright 엔진 및 Playground API 브릿지 구축

Phase 2: ISMS 핵심 시나리오 스펙 작성 (12개 시나리오)

Phase 3: Playground Dashboard GUI 제어 패널 및 실시간 리포터 완성

Phase 4: 멀티 채널(B2C/BP/ONBP PC & MO) 실서비스 검증 및 CI 파이프라인 연계

Playground GUI 원클릭 제어

개인 .env.local 기반 보안 격리

실시간 리포트 & 결함 Trace 분석

전체 엔드투엔드(E2E) 시스템 실행 흐름도

Playground 테스트베드 대시보드

환경변수(.env.local) 사전 검증

Playwright 러너 & 브라우저 엔진

실제 배포 도메인 (B2C/BP/ONBP)

결과 분석 및 대시보드 리포트

대표 시나리오: 패키지 상품 검색 → 예약 신청 → 마이페이지 확인

패키지 검색 결과 진입 및 상품 선택

상세 페이지 일정 확인 및 [예약하기] 클릭

예약자 정보 입력 & KCB 본인인증 Mocking 완료

약관 동의 & [예약 신청하기] 제출

마이페이지 이동 후 신규 예약 내역 평문 확인

환경변수(ENV) 자율 관리 및 보안 아키텍처

ENV 검증 분기 플로우 다이어그램

필수 환경변수가 모두 정의된 경우

필수 환경변수가 없거나 비어있는 경우

환경변수 상세 스펙 명세

Playground E2E Control Center (실제 화면 프로토타입)

1. 타겟 도메인 & 채널

2. 테스트 시나리오 그룹

3. 실행 옵션 & 환경 상태

통합 E2E 테스트 시나리오 전체 매트릭스 (12종)

구현 단계별 세부 로드맵

Phase 1: Playwright 엔진 및 Playground API 브릿지 구축

Phase 2: ISMS 핵심 시나리오 스펙 작성 (12개 시나리오)

Phase 3: Playground Dashboard GUI 제어 패널 및 실시간 리포터 완성

Phase 4: 멀티 채널(B2C/BP/ONBP PC & MO) 실서비스 검증 및 CI 파이프라인 연계

환경변수(.env.local) 설정 오류