상품권 안심 구매 플랫폼

사용자가 카테고리·가격대·브랜드 조건으로 상품권을 필터링하고 검색해 탐색할 수 있는 메인 화면. React Query 기반 카드 그리드 + debounce 검색 + URL 쿼리 동기화 필터 상태 관리.

• Intersection Observer 기반 무한스크롤 카드 그리드 구현
• Debounced 검색 입력 + 필터 조건 URL 쿼리 동기화로 결과 공유 가능
• React Query staleTime 분리로 상품 목록 캐싱 전략 설계

상품 탐색 상태(검색어·필터·정렬)를 URL과 동기화하는 구조를 설계하여 새로고침·공유 시에도 탐색 맥락이 유지되도록 구현합니다.

계좌이체·신용카드·휴대폰·토스 간편결제 중 선택해 결제를 진행하는 화면. 결제 수단별 한도(카드·휴대폰 100만원) 검증 + 클라이언트-서버 금액 대조 미들웨어.

• 결제 수단별 요청 스키마를 분리한 어댑터 패턴으로 API 연동 구조 설계
• 주문 생성 시점 금액과 결제 요청 금액을 서버에서 재대조하는 검증 계층 구현
• 가상계좌 발급 시 PG 웹훅 서명 검증 후 입금 상태 비동기 반영 처리

결제 요청 금액을 클라이언트 값이 아닌 서버 주문 원장 기준으로 재계산·대조하여 금액 위변조 시도를 결제 승인 이전 단계에서 차단하는 구조를 구현합니다.

비승인·카드승인·승인·비즈 4단계 회원등급에 따라 구매 가능 범위와 상품권 확인 권한이 달라지는 마이페이지 화면. 로그인 시 알림톡 기반 OTP 인증 + 역할 기반 접근제어(RBAC) 미들웨어.

• 4단계 회원등급을 역할(role) 클레임으로 JWT에 포함해 라우트별 권한 검증
• 로그인 시 알림톡 OTP 인증 플로우 구현, 인증 실패 시 재발송 제한 적용
• 비밀번호 정책(특수문자 포함 8자리 이상) 검증 및 아이디/비밀번호 찾기 플로우 구현

회원등급 배지를 UI에 노출해 현재 권한 범위(구매 가능 상품권·확인 가능 여부)를 시각적으로 표시하고, API 단에서도 동일 등급 기준을 재검증하는 이중 권한 체계를 구현합니다.

관리자가 상품권 재고를 등록·소진 추적하고, 저장된 상품권 번호는 암호화된 마스킹 상태로만 조회할 수 있는 화면. 상품권 번호 컬럼 암호화 저장 + 관리자 조회 시에만 복호화하는 접근 계층 분리.

• 상품권 번호를 AES 기반으로 암호화 저장, 목록 화면에서는 마스킹된 값만 노출
• 재고 소진 시 자동 품절 처리 + 임계 수량 미만 시 관리자 알림 트리거
• 발권 API 연동을 고려한 재고 소스(수동 등록/API 연동) 구분 필드 설계

상품권 번호는 저장 단계부터 암호화되어 SQL 인젝션·웹쉘 공격이 발생해도 평문이 노출되지 않는 구조로 설계하며, 관리자 화면에는 암호화 상태를 나타내는 잠금 배지를 표시합니다.