플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 상품권 종류별로 핀 번호 형식(길이·구분자·자리수)이 다르므로, 종류에 따라 정규표현식 패턴을 동적으로 선택하는 파서 전략 설계가 필요합니다. - 대량 핀 번호 배치 입력 시 일부 핀이 유효하지 않을 때 전체 실패 vs 부분 처리 정책을 결정하고, Prisma 트랜잭션으로 원자성을 보장하는 구현이 필요합니다. - 매입 신청 상태가 외부 송금 API 응답에 의해 비동기적
프로젝트 성과
핀 번호 자동 추출 엔진 구현
클립보드 paste 이벤트를 가로채 상품권 종류별 정규표현식으로 유효한 핀 번호만 자동 파싱하는 엔진을 설계하여, 대량 핀 번호 입력 시 수작업 분리 없이 즉시 처리할 수 있는 UX를 구현합니다.
다단계 매입 신청 플로우 설계
상품권 선택 → 핀 번호 입력·파싱 → 예상 지급액 확인 → 계좌 입력의 단계별 플로우를 React useReducer로 상태 관리하고, 각 단계 유효성을 독립적으로 검증하는 구조를 구축합니다.
URL 동기화 매입 현황 조회 구현
URL 쿼리 파라미터와 React Query를 결합하여 대기·처리중·완료·반려 상태 필터를 URL에 동기화함으로써 새로고침·공유 후에도 동일 뷰를 유지하는 조회 시스템을 구현합니다.
Prisma 트랜잭션 기반 원자적 저장
핀 번호 배열 배치 처리 시 Prisma 트랜잭션을 적용하여 일부 핀 번호 저장 실패 시 전체 롤백이 보장되는 데이터 무결성 구조로 API를 설계합니다.
모바일 퍼스트 반응형 UI 구성
Tailwind CSS의 반응형 브레이크포인트를 활용해 사이드바·카드·테이블이 모바일에서 자동 재배치되는 레이아웃을 구현하여 PC·모바일 모두에서 동일한 사용 경험을 제공합니다.
핵심 기능
홈 대시보드
사용자 매입 현황 요약, 빠른 신청 CTA, 최근 거래 내역을 한눈에 확인할 수 있는 메인 화면을 구현합니다
진행 단계
핀 번호 파서 알고리즘 설계
2026.04
상품권 종류별 정규표현식 패턴 정의 및 파싱 엔진 구현, 대량 입력 처리 로직 설계
프로젝트 상세
1) 포트폴리오 소개 상품권 보유자가 핀 번호를 입력하면 자동 파싱·검증 후 즉시 현금으로 환급받을 수 있는 모바일 반응형 매입 플랫폼 MVP입니다. 정규표현식 기반 핀 번호 자동 추출 엔진, 단계별 매입 신청 플로우, 실시간 처리 현황 조회를 구현합니다. 2) 작업 범위 - 홈 대시보드: 사용자 매입 현황 요약, 빠른 신청 CTA, 최근 거래 내역을 한눈에 확인할 수 있는 메인 화면을 구현합니다.
