SellerBox 웹 콘솔은 모바일 앱 기능을 웹으로 확장한 서비스입니다. 셀러가 상품·주문·배송·통계·결제·모니터링까지 한 화면에서 다루도록 만들어져 있습니다.

제가 프론트엔드를 메인으로 맡아 개발해 왔고, 결제 시스템과 크롬 확장 연동, 모니터링 기능, 인증 플로우, CI/CD, 설문조사·마켓 연동 같은 사이드 플로우까지 대부분의 영역을 다뤘습니다.

맡은 부분

카드결제 · 카카오페이 · 멤버십 결제

기존 마켓 구독을 웹으로 확장하면서 결제 전 구간을 새로 만들었습니다. 결제 승인·실패·환불·카드 변경·구독 취소까지 셀러가 웹에서 자율적으로 처리할 수 있도록, 카드결제와 카카오페이 흐름을 각각의 승인·취소·변경 페이지로 나눠서 한 번에 쌓았습니다.

크롬 확장 연동 모니터링 기능

크롬 확장에서 저장한 추천 키워드를 웹 콘솔과 동기화하는 브릿지를 짰습니다. 확장에서 웹 로그인을 띄울 때는 autoclose / redirect 쿼리파람으로 끊김 없이 이어지도록 처리했고, 토큰 저장·동기화도 훅 레벨에서 통일했습니다.

그 위에 모니터링 상품 리스트·상세·키워드 관리 다이얼로그, 추천 키워드 초기 연동, 상품 수 초과 안내, 크롬 확장 설치 감지·안내 다이얼로그, 튜토리얼 오버레이까지 모니터링 기능 전반을 담당했습니다. 확장과 웹을 오가는 셀러가 상태 끊김 없이 이용할 수 있도록 만드는 게 초점이었습니다.

인증 플로우 안정화

로그인 후 토큰 저장 타이밍에서 reload vs navigate 중 어느 쪽을 택해야 실수가 없는지 한 번씩 교체해 가며 안정화했고, 401 에러는 한 지점에서 처리하도록 모아 stale-token 요청이 루프 도는 문제를 없앴습니다. useLocalStorage 훅으로 접근 경로도 일원화했습니다.

실시간 테이블 UX

상품·주문·배송·모니터링 키워드 테이블은 필터·정렬·컬럼 호버 하이라이트·필러 컬럼·말줄임 툴팁·고정폭 처리·리스트↔상세 전환 시 스크롤 리셋까지 하나씩 다듬었습니다. 셀러가 대량 데이터에서 원하는 조합으로 빠르게 조회할 수 있도록 만드는 게 목적이었습니다.

토큰 암호화 저장

로그인 토큰을 AES256으로 암호화해 로컬에 저장하고, 쓸 때 복호화하는 구조를 뒀습니다. 보안은 가져가면서 재로그인 스트레스는 줄이는 방향으로 맞췄습니다.

설문조사·마켓 연동·FAQ

공개 설문조사 페이지(UI·비즈니스 로직·응답 포맷 통일·필수 항목 검증), 토스쇼핑 연동 가이드 개선, 마켓 등록·비밀번호 변경 페이지의 sticky 레이아웃, FAQ 아코디언 sticky 헤더 처리 같은 사이드 플로우도 담당했습니다.

배포 인프라

AWS S3 + CloudFront 정적 배포 위에 GitHub Actions 워크플로를 붙이고 Slack 알림을 엮어서 배포 상태를 팀에서 바로 볼 수 있게 만들었습니다. 빌드 메모리 한도 조정, 배포 실패 시 알림, 커밋 메시지·SHA 동적 처리 같은 실전 이슈는 운영하면서 붙여 나갔습니다.

라우트 상수 중앙화

내부 라우트 경로를 하드코드된 문자열로 흩어져 있던 걸 상수로 모아서 route drift를 막았습니다.

스택

React, Vite, TypeScript, Recoil, Redux Toolkit, React Query, React Hook Form + Zod, Radix UI, Tailwind CSS, React Table, AES256, AWS S3, CloudFront, GitHub Actions, Slack, Chrome Extension.