윙챗(아이테크)간편 송금·출금 거래와 회원·포인트 운영 관리를 지원하는 핀테크 서비스
TypeScript
React
Vite
TanStack Query
TanStack Table
Zustand
Redux Toolkit
23.07 - 24.04
구분
경력
기간
Jul 1, 2023 → Apr 30, 2024
주요 스택
TypeScript
React
Vite
TanStack Query
TanStack Table
Zustand
Redux Toolkit
한 줄 소개
간편 송금·출금 거래와 회원·포인트 운영 관리를 지원하는 핀테크 서비스
대표 여부
대표 여부
status
Published
slug
wingchat
역할 및 기여세부 경험1. 포인트·거래 운영 화면의 처리 흐름 정리2. 기존 윙챗 운영 콘솔의 Vite 전환3. 반복 조회 화면의 테이블·필터 구조 정리4. 윙챗 내부 관리 콘솔의 모달 중앙 관리 구조 적용
역할 및 기여
- 프론트엔드 5명, 백엔드 4명 규모의 팀에서 기획자에게 요구사항을 전달받고 백엔드 개발자와 API 흐름을 협의했습니다.
- 기존 윙챗 운영 콘솔의 회원·포인트·거래 화면을 개발·유지보수했으며 개발과 빌드 대기 시간을 줄이기 위해 CRA/webpack 환경의 Vite 전환을 제안하고 구현했습니다.
- 신규 윙챗 내부 관리 콘솔에서는 Vite·TypeScript 설정부터 라우팅, 레이아웃, API·쿼리 계층, 공통 테이블·필터·모달 구조까지 프론트엔드 기반을 설계했습니다. 요구사항 확인부터 구현, QA, 배포 후 유지보수까지 참여했습니다.
세부 경험
1. 포인트·거래 운영 화면의 처리 흐름 정리
거래 상태별 승인·취소·환불 요구사항을 기획자에게 전달받고 백엔드 개발자와 API 요청값과 처리 흐름을 협의했습니다.
출금 내역에서는 거래가 대기 중이고 처리 권한이 있을 때만 승인·취소 조치를 노출했습니다. 취소 시 환불 여부를 함께 선택하고 해당 값이 처리 요청에 포함되도록 연결해 운영자가 가능한 조치만 수행할 수 있게 했습니다.
2. 기존 윙챗 운영 콘솔의 Vite 전환
기존 윙챗 운영 콘솔은 CRA/webpack 기반으로 개발 서버 시작과 로컬 빌드가 느려 작업을 전환할 때마다 대기 시간이 누적됐습니다.
기존 구조와 사용 방식을 유지하는 범위에서 Vite 전환을 제안하고 구현했습니다. 전환 전후 커밋을 같은 로컬 환경에서 한 차례 재현해 비교한 결과, 개발 서버 시작은 약 18초에서 1초로, 로컬 빌드는 약 30초에서 16초로 줄었습니다.
3. 반복 조회 화면의 테이블·필터 구조 정리
윙챗 내부 관리 콘솔에는 회원·포인트·파일·공지·정책 등 목록 화면이 많아 검색·날짜 필터·새로고침·페이지네이션이 반복 구현되고 있었습니다.
TanStack Table 기반 공통 테이블에서 컬럼과 행 상태를 관리하고 필터와 페이지네이션을 별도 컴포넌트로 분리했습니다. 화면별 쿼리 훅은 날짜·상태 필터를 API 요청 형식으로 변환하도록 책임을 나눴습니다.
이를 포인트 로그, 외부 결제 로그, 일일 거래 통계 등에 적용해 신규 조회 화면도 같은 구조로 구현할 수 있게 했습니다.
4. 윙챗 내부 관리 콘솔의 모달 중앙 관리 구조 적용
기존 운영 콘솔에서는 화면마다 모달 상태와 렌더링 위치를 따로 관리해 관련 로직이 분산돼 있었습니다.
최상위 레이아웃의
ModalProvider와 Zustand 기반 modalStore에서 모달 호출과 종료를 관리하고, 각 모달은 필요한 시점에 지연 로딩했습니다.그 결과 화면 컴포넌트는 운영 조치와 데이터 전달에 집중하고 모달 표시와 종료는 공통 구조에서 일관되게 처리할 수 있었습니다.