NFT 멤버십 어드민 웹
2025.02 ~ 재직 중단일 최다 기여자로 프론트엔드 공통 기반(API 통신 래퍼·서버 상태 캐시·폼/스키마/타입/훅 패턴)을 주도해 구축. 회원·그룹·NFT·포인트·푸시 발송 등 운영 도메인을 화면부터 API 연동까지 구현했습니다.
단일 최다 기여자공통 아키텍처인증·권한TanStack Query
01
기술 스택
core
TypeScriptNext.jsReactReact Native
state · data
TanStack QueryZustandZodreact-hook-form
style
Tailwind CSSNativeWind
etc
ethers v6SentryMSWNestJS (학습)PHP (레거시)
02
프로젝트
하이브리드 WebView 앱 (웹 영역)
2026.01 ~ 2026.06Next.js WebView 웹과 React Native가 브릿지로 통신하는 하이브리드 구조에서 웹을 담당. 네이티브 토큰 기반 인증, 웹↔네이티브 모달 연동, NFT 전송 온체인 사전 검증, MSW 테스트 인프라를 구축했습니다.
인증 아키텍처WebView 브릿지블록체인MSW
레거시 풀스택 · 관리자 페이지 & 운영
~ 2024사내 PHP MVC 프레임워크로 실사용자 서비스의 관리자 페이지를 유지보수하고 1년 넘게 CS 운영을 병행. 게임 도메인은 서명 검증·멱등성·DB 트랜잭션으로 점수 정산을 원자적으로 처리했습니다.
PHP MVC 풀스택DB 트랜잭션운영·CS
03
트러블슈팅
문제 → 원인 → 해결의 과정으로 다룬 사례입니다.
모노레포 React 중복으로 인한 "Invalid hook call"
코드 변경 없이 앱이 화이트 스크린에서 멈추던 문제. 공유 패키지에 React 사본이 중복 유입된 것이 원인임을 직접 진단하고, Metro blockList로 단일 인스턴스에 수렴시켜 해결했습니다.
교차 도메인 캐시 정합성 (TanStack Query)
화면 간 연관 데이터가 stale하게 어긋나 보이던 문제. 단순 무효화 대신 도메인 간 의존 관계를 명시해, 조회 시점에 상대 도메인 캐시를 교차 무효화하는 방식으로 구조적으로 해결했습니다.
WebView 모달 dim이 네이티브 탭바를 못 덮는 문제
웹 CSS로는 WebView 경계 밖을 그릴 수 없는 구조적 한계. 전체 동기화는 ROI가 낮다고 판단해 폐기하고, 필요한 모달만 선별적으로 네이티브 전환해 회귀 위험을 최소화했습니다.