PlayDapp MarketPlace

Marketplace 개발팀 · 2020.10 ~ 2022.08

Next.jsTypeScriptReduxTanStack QueryEmotionweb3-react

PlayDapp 생태계의 블록체인 NFT C2C 마켓플레이스 서비스 리뉴얼 및 고도화를 진행했습니다.

멀티 체인 분리로 인한 운영 효율성 저하 — Polygon 마켓과 Ethereum 마켓이 완전히 별도의 프로젝트 구조로 분리 운영되어, 기능 추가 및 유지보수 시 리소스가 2배로 낭비되는 비효율적인 아키텍처였습니다.
JS 레거시 환경의 낮은 개발 안정성 — 프로젝트 전체가 JavaScript 기반 CRA(Create React App)로 작성되어 데이터 구조 파악이 어렵고, 신규 기능 추가 시 잠재적 런타임 에러에 쉽게 노출되는 한계가 있었습니다.
글로벌 유저 타겟을 위한 SEO 및 마케팅 확장성 필요 — 마켓플레이스 특성상 검색 엔진 노출(SEO)이 중요했으나 CSR 환경으로 한계가 있었고, 글로벌 IP 협업에 신속히 대응할 유연한 UI 아키텍처가 부재했습니다.

Next.js & TypeScript 기반 전면 리뉴얼 — 레거시 JS/CRA 환경을 Next.js·TypeScript·Emotion 스택으로 재구축하여 타입 안정성을 확보하고, SSR 도입으로 검색 엔진 최적화(SEO) 성능 개선
체인 통합 파이프라인 설계 — 별개로 관리되던 멀티 체인 마켓 인프라를 하나의 코드베이스로 통합 관리할 수 있도록 프론트엔드 비즈니스 로직 최적화

NFT Detail 페이지 — getServerSideProps에서 react-query prefetchQuery로 item detail을 prefetch해 클라이언트에 전달하고, 구매(buy)는 redux에 order 정보를 담아 market SDK 거래 reducer를 호출하며 event state에 따라 modal로 진행 단계를 노출 (불필요한 SDK 재초기화·API 호출 로직 제거)
Offer 파이프라인 — 판매(sell)·makeOffer 등록 취소 로직을 useListingCancel 훅(isCancelListing·handleCancelListing 반환)으로 공통화해 반복 코드를 제거하고, My Offers(Offer Table·OfferAccept 모달)로 Offer 승인 기능 구현
NFT metadata refresh — NFT metadata가 비어 있을 때 useToastMessage 훅(position·duration 옵션)으로 refresh 진행 상태를 안내

Email 인증 페이지 — react-hook-form register로 입력 유효성을 검증하고, 인증 결과 페이지는 getStaticPaths·getStaticProps로 결과·에러 값을 동적 라우팅 경로로 받아 렌더링해 페이지별 중복 작성을 제거
대외 협업 (OOZ 티징) — IPX(라인프렌즈)와 협업하여 OOZ NFT 티징 페이지를 원페이지 스크롤 UI로 제작 → 신규 유저 유입 확대