EZL Culturepass(앱형 사용자 서비스와 운영 백오피스)

주요 업무

인증과 회원 여정

웹에 스택 내비게이션이 없어 Stackflow를 직접 찾아 도입하고 로그인과 회원가입, 카카오와 애플 소셜 로그인, NICE 본인인증, Coocon 주소 검증 기반 경기도민 인증, 14세 미만 분기, 계정 잠금, 자동 로그인을 Activity로 이었습니다.

지도 탐색

Naver Map 기반 내 주변 화면에서 위치 권한과 현재 지도 영역을 API 요청에 반영하고 마커 선택, 바텀시트, 최근 검색어, 목록과 상세 사이의 복귀 상태를 처리했습니다.

네이티브 브릿지

Flutter 앱이 보내는 앱 재개, 위치와 푸시 권한, 딥링크, FCM 등록 이벤트를 화면 이동과 데이터 갱신에 연결했습니다.

화면 재구성

초기 화면 기준을 참고하되 요구사항과 API 흐름에 맞게 홈, 혜택, 콘텐츠, 알림, 마이페이지 화면 구조와 상호작용을 다시 짰습니다. 정적 마크업을 그대로 옮기지 않고 인증, 권한, 예외 처리, 브릿지, 데이터 갱신을 얹어 서비스 수준으로 완성했습니다.

목록과 캐시

컬처 혜택, 댓글, 알림, 컬처마일처럼 긴 목록은 API 호출 시점과 캐시 동기화, 스크롤 성능을 함께 맞춰야 했습니다. 목록, 상세, 좋아요, 신청, 댓글을 React Query 캐시로 잇고 긴 목록은 @tanstack/react-virtual로 그리며 스크롤 컨테이너 상태를 동기화했습니다. 입력 폼은 React Hook Form으로 처리했습니다.

개발 기반과 API 변경

Swagger 기반 API 갱신 스크립트, Stackflow Activity 생성 스크립트, 이미지와 폰트 경로 정리 스크립트, 환경 변수 흐름을 초기에 정리했습니다. 백엔드 Swagger 변경이 잦아 스펙 갱신과 에러 코드, 응답 변경을 계속 반영했습니다.

백오피스 구조

후임 2명이 맡은 React Router 7 기반 백오피스의 메뉴와 정보 구조, 공통 폼, 테이블, 검색 패턴 방향을 잡아 주며 리딩했습니다.