fb9b550040d946d45b0242f8b37c02e4d670172f
AI 캐릭터 관리자 웹
React, TypeScript, Vite 기반 독립 관리자 SPA입니다.
Requirements
- Node.js 24.12.0
- npm 11.7.0+
Setup
npm ci
npx playwright install chromium
Environment
Vite mode별 API base URL은 아래 파일에 둡니다.
.env.development:https://test-api.sodalive.net.env.production:https://api.sodalive.netserver mode:VITE_API_MODE=server이며 기본 개발 서버가 실제 개발 API를 사용합니다.mock mode:VITE_API_MODE=mock이며 개발 전용 browser MSW fixture로 제공 계약 범위만 미리 봅니다.mock data reset: mock data는 browser storage에 영구 저장하지 않고 새 mock store/session이 시작될 때 seed 기준으로 초기화됩니다.production:VITE_API_MODE=mock은 production build에서 거부됩니다.no-auto-fallback: server mode의 404 또는 network error를 mock mode로 자동 전환하지 않습니다.
Scripts
npm run dev (VITE_API_MODE=server vite --host 127.0.0.1 --port 8888 --strictPort): 실제 개발 API를 쓰는 기본 개발 서버입니다.npm run dev:mock (VITE_API_MODE=mock vite --host 127.0.0.1 --port 8889 --strictPort): 개발 전용 mock preview 서버입니다.npm run build:dev: development mode build입니다.npm run build:prod: production mode build입니다.npm run build:build:prod별칭입니다.npm run typecheck: TypeScript project reference typecheck입니다.npm run lint: ESLint 검사입니다.npm run test: Vitest watch입니다.npm run test:run: Vitest 단발 실행입니다.npm run e2e (VITE_API_MODE=server playwright test): server mode Playwright입니다. 대상 spec은playwright.config.ts의 server modetestMatch가 제한하며, 추가 file filter를 넘기면 교집합만 실행합니다.npm run e2e:mock: mock mode Playwright입니다. 인자 없이 실행하면 Chromium/mobile Chrome matrix를 분할 실행하고, file filter나--project인자를 넘기면playwright.config.ts의 mock modetestMatch와 교집합만 실행합니다.
Browser Support
- 지원 기준: 데스크톱 Chrome과 모바일 Chrome입니다.
- 로컬 자동 검증은 Playwright Chromium/mobile Chrome project로 수행합니다.
Mock Preview Ownership
- Phase 2 mock preview는 auth shell과 제공 계약 기반 공통 fixture까지만 포함합니다.
- 후속 도메인 Phase는 자기 domain handler, fixture, mock E2E를 같은 Phase에서 추가하고 검증합니다.
- mock mode 통과는 최종 UI 확인 증거이며 실제 server integration 완료 증거가 아닙니다.
Known Backend Constraints
- 원작 lookup과 장르 lookup은 OpenAPI 2.3.0의 v2 계약으로 구현됐습니다. 이전 후보 endpoint는 이력 문서에만 보존합니다.
- FanTalk 답변 수정·팬 원글 삭제, Comments CRUD, Community pagination은 Phase 10에서 구현됐습니다. FanTalk 별도 상세·filter/sort·중복 오류 계약은 제품 범위 밖이며, active-only 반환 보장은 실제 개발 API 수동 QA에서 분리 확인합니다.
- price 최대값은
99999이며, 파일 용량·MIME 등은 backend가 동일 검증합니다. 이미지 비율·crop 결과는 client가 보장하고 backend는 검증하지 않습니다. - OpenAPI 밖의 도메인별 오류는
알 수 없는 오류가 발생했습니다.로 처리합니다. - 현재 server mode E2E allowlist는 shell/auth/server-boundary 검증 중심입니다. 도메인별 mock E2E 통과를 실제 개발 API integration 완료로 해석하지 않습니다.
Description
Languages
TypeScript
98.6%
JavaScript
0.8%
CSS
0.6%