미리보기

2020년에 입사하여 개발팀 소속으로 C2C NFT 마켓 플레이스 신규개발 및 유지 보수 그리고 서비스 리뉴얼 작업을 진행하였으며, 2022년 부터는 TF로 신설된 토너먼트 팀에 합류하여 플레이댑 토너먼트 서비스를 소프트 런칭에 기여한 뒤 정식으로 팀에 합류하여 서비스 기능 추가 및 개선을 진행하였습니다. 이후 EZPlay 라는 이름으로 새로 리뉴얼 작업을 진행하고 현재 서비스 개선을 하고 있습니다.

stack: typescript, react, next.js, ky, zustand, tailwindcss, react-query, wagmi

EZplay는 유저가 웹 게임을 쉽게 즐기도록 하기 위한 web3 미니 게임 플렛폼 입니다.

주요 역할 및 성과:

• 공통 컴포넌트 개발

  • Modal, Popup, Dropdown 등의 재사용 가능한 컴포넌트를 구현하여 개발 효율성을 높였습니다.

• 서버컴포넌트 내 data fetching 처리를 통한 네트워크 비용 감소

• 소셜 로그인 기능

  • Google, Apple 소셜 로그인 기능을 구현하여 사용자 접근성을 향상

• 지갑 연동 및 Web3 기능 지원

  • 지갑 연동 그리고, Web3 기능을 지원하기 위한 hook 및 유틸함수 생성

stack: typescript, react, next.js, rtk(redux-tooltik), react-query, web3-react, etherjs, wagmi

재화(Gold,Ticket) 소비를 통해 참여한 게임 플레이 순위 및 대결 결과에 따른 보상을 제공하는 BlockChain Game Platform 입니다. TF로 합류하여 서비스 소프트런칭에 기여하였으며 이후 정식으로 팀에 합류하여 서비스 개발 및 개선에 참여하였습니다.

주요 역할 및 성과:

- 프론트 개발환경 및 프로젝트 구조 설정

• iframe을 통한 game client 연동 및 postMessage를 활용한 이벤트 통신 작업

• 점검 페이지 노출

  • 페이지 접근시 점검 진행 중인 경우 nextjs의 middleware api 활용을 통한 점검페이지로 redirect 처리

• 프로젝트 번들 사이즈 최적화

  • bundle-analyzer 활용 프로젝트 번들 크기 분석을 통한 대체 가능 혹은 불필요 패키지 제거

  • 모달 혹은 상호작용시 노출이 필요 혹은 우선순위가 낮은 컴포넌트들에 대하여 code splitting 적용을 통한 초기 로드 시간 단축

• 가상화폐(ERC-20) 보상 출금 기능 추가

• Ticket NFT Convert 기능 구현

  • MarketPlace에서 구매한 Ticket NFT를 토너먼트내에서 사용 할 수 있게 하기 위한 기능으로 - contract abi의 burn 함수과 rest api호출을 통해 NFT 소각 및 지급되도록 구현 진행

• Paypal 티켓 구매 기능 추가

  • react-paypal-js를 사용하여 유저가 MarketPlace에서 NFT를 구매한 뒤 burn하는 과정 없이 Paypal 카드 결제를 통해 직접 티켓을 구매할 수 있도록 하여 편의성을 높였습니다.

• 출석 기능 및 플로우 구현

  • 유저가 로그인시 재화보상을 받을 수 있도록 하기 위한 출석 보드 및 출석 인증 모달 컴포넌트 작업 진행

  • 유저의 출석인지를 위한 도장 애니메이션 적용 작업

• 소셜(Google, Apple),게스트 로그인 기능 추가

  • Web3 환경에 익숙하지 않은 유저들도 서비스에 쉽게 접근 할 수 있도록 Social&Guest 로그인 지원

  • google,apple 로그인의 경우 각 각 @react-oauth/google와 react-apple-login 라이브러리 활용하였으며 공통적인 인자를 전달 받아 처리하기 위한 SocialLoginButton 컴포넌트 추가

• 유저 재화 Migration 기능 구현

• 유저 및 트래픽 분석을 위한 GA, Mixpanel 연동

• web3 지갑 연동 지원을 위한 web3-react, wagmi 적용

• WalletConnectV2 마이그레이션 작업

  기존 WalletConnectV1 서비스 종료로 V2로 마이그레이션을 진행해야 됐습니다. 진행하는데 있었던 문제점들은 다음과 같습니다:

  • web3-react를 통해 마이그레이션을 진행한다면 V8 버전으로 업데이트 해야되는데 해당 버전이 현재 사용하고 있는 V6와 완전 다른 구조와 사용 방법을 가지고 있어 부작용이 클거 같다고 생각이 들었으며 몇몇 지갑은 V8에서 지원이 안되고 있어 공식문서 에서 권장하고 있는 wagmi 를 활용하는 방법을 선택하게 되었습니다.

PlayDapp MarketPlace는 사용자가 NFT를 거래할 수 있는 C2C 마켓플레이스입니다.

stack: typescript, react, next.js, redux, emotion, react-query, web3-react, etherjs

주요 역할 및 성과:

- v1/v2 리뉴얼 프론트엔드 개발

• NFT 상세 페이지

  • NFT(ERC-721) 구매 기능 구현

  • Order(판매 제안) cancel 기능 구현

• My Offers 페이지

  • Offer(판매 제안) 승인 기능 구현

  • Offer Table, OfferAccept 모달 컴포넌트 구현

• Email 인증 페이지

  • email 인증 요청 기능 구현

    • react-hook-form 제공 register 함수를 통한 입력 값 유효성 체크 및 handleSubmit 함수를 활용하여 submit 요청에 대한 성공 및 에러 대한 처리를 진행하도록 구현

  • email 인증 결과 페이지

    • 각 결과에 대한 페이지를 별도 작성하는것이 아닌 getStaticPaths와 getStaticProps를 활용하여 인증 결과 및 에러 값을 동적 라우팅 경로로 전달받아 결과에 대한 페이지를 랜더링하여 보여주도록 구현

• OOZ 티징 페이지

  • 마켓내 등록될 IPX (라인프렌즈)의 OOZ NFT 관련 티징 페이지 작업으로 IPX 측 디자이너와 협업을 통해 개발한 페이지로 one page scroll 형식으로 한 번에 한 페이지 씩 노출되도록 구현 진행

• 멀티월렛 지원 확장을 위한, web3-react 도입

  • metamask, portis을 제외한 다른 월렛(walletLink, walletConnect) 로그인을 지원하기 위해 web3-react를 도입하였습니다.

Multihoming 2.0 버전 지원을 위한 ItemManager에 내구제 기능 적용 작업을 진행하였습니다. itemManager는 유저가 소유하고 있는 nft를 스테이킹 하고 게임내 일일임무, PvP 보상을 받아갈수 있도록 해주는 서비스 입니다

stack: typescript, react, recoil, emotion, react-query, web3-react

주요 역할 및 성과:

- Repair 기능 구현

• 유저가 itemManager에 스테이킹한 nft들에 대해서 PLA를 지불하여 내구도를 수리 할 수 있도록 로직을 구현하여 지속적으로 보상을 받아갈 수 있도록 하였습니다.

• 공통 컴포넌트 개발

  • 각 페이지에서 공통적으로 보여줘야 하는 내구도 게이지, 경고 메시지 등 컴포넌트들에 대해 모듈화를 진행하여 UI를 구성했습니다.

• 멀티 월렛 지원 - walletConnect

  • 기존에 portis 월렛을 통한 로그인 만 지원하는 경우 portis 월렛 제품 자체에서 에러가 발생하여 로그인이 안되는 이슈가 많아 walletConnect 월렛 로그인도 추가적으로 지원하여 유저가 다른 경로를 통해 로그인을 할 수 있도록 개선 하였습니다.

GEO.DOMAIN NFT 이벤트 프로모션 페이지 입니다

stack: typescript, react, next.js, emotion, react-i18n

주요 역할 및 성과:

• GEO.DOMAIN NFT 오픈 이벤트 프로모션 프로젝트 환경 구성 및 페이지 구현

• i18n 활용 영어, 한글 다국어 지원