뒤로 가기
프리랜스

NFT Voting & Marketplace

NFT를 기반 투표 시스템을 제공하고, 마켓플레이스를 활용하여 NFT를 거래할 수 있는 플랫폼입니다.

기간

2025.01 ~ 2025.02

역할

프론트엔드 개발

팀 규모

5

기술 스택

ReactTypeScriptViteReact QueryZustandstyled-componentsFirebase AuthSwiper

프로젝트 상세 소개

NFT 마켓플레이스와 암호화폐 거래 기능을 통합한 커뮤니티 플랫폼입니다. 사용자는 NFT 컬렉션을 관리하고, 암호화폐 입출금을 수행하며, 커뮤니티 투표에 참여할 수 있습니다.

주요 기능

  • 반응형 FE 구현 (25개 페이지)
  • NFT Voting System 화면 api 연동
  • 투표 목록 (진행중/예정/완료) 필터링
  • 캐러셀 기반 투표 카드 UI
  • 암호화폐 지갑 시스템

담당 업무

반응형 UI 시스템

  • 메인 홈 반응형 - Tablet/Mobile 대응 레이아웃 구현
  • Voting 시스템 반응형 - 투표 목록, 상세, Upcoming 페이지 전체 반응형
  • My Wallet 반응형 - 지갑, 입출금, 거래 이력 페이지 반응형
  • My Profile / Security 반응형 - 프로필 수정, 보안 설정 모달 반응형
  • 인증 페이지 반응형 - 로그인, 회원가입, 가입완료 페이지 반응형
  • Language 모달 반응형 - 다국어 선택 모달 반응형 대응

Header / Navigation 시스템

  • Header Drawer - 모바일용 햄버거 메뉴 Drawer 구현
  • Footer Navigation - 푸터 네비게이션 링크 추가
  • Drawer 내 로그인/회원가입 아이콘 수정

버그 수정

  • 로고 및 오타 수정
  • 메인 홈, FAQ, Coming Soon 모달 버그 수정
  • 로그인 시 권한 모달 창 이슈 해결
  • Header 스타일 버그 수정

코드 품질 개선

  • SVGR Plugin 설정 - SVG를 React 컴포넌트로 사용할 수 있도록 Vite 플러그인 추가
  • 이미지 중복 스타일 리팩토링 - 공통 스타일 컴포넌트로 추출
  • 불필요한 파일 삭제 및 코드 정리
  • 반복문 key prop 추가 (React 최적화)

프로젝트 구조

src/
src/
assets/
icon/
image/
logo/
components/
layout/
voting/
myPage/
table/
page/
auth/
voting/
myPage/
modal/
alert/
auth/
otp/
index.tsx
service/
store/
authStore.ts
modalStore.ts
lib/
api.ts
firebase/
socket/
utils/
routes/
theme.ts
types/
hook/