목차
1. 프로젝트 개요
| 항목 |
내용 |
| 프로젝트명 |
Marketplace Frontend |
| 유형 |
NFT/암호화폐 거래 및 투표 기반 커뮤니티 마켓플레이스 |
| 역할 |
프론트엔드 개발 |
| 기간 |
2025.01 ~ 2025.02 |
| 팀 구성 |
FE: 2, BE: 1, 기획 & 디자인: 2 |
프로젝트 소개
NFT 마켓플레이스와 암호화폐 거래 기능을 통합한 커뮤니티 플랫폼입니다. 사용자는 NFT 컬렉션을 관리하고, 암호화폐 입출금을 수행하며, 커뮤니티 투표에 참여할 수 있습니다. OKX WebSocket을 통한 실시간 시세 연동과 Firebase 인증을 포함합니다.
2. 기술 스택
Frontend Core
| 기술 |
버전 |
선택 이유 |
| React |
18.3.1 |
안정적인 최신 버전, 컴포넌트 기반 UI 구성 |
| TypeScript |
5.6.2 |
대규모 코드베이스 타입 안정성, 런타임 에러 방지 |
| Vite |
6.0.1 |
빠른 HMR, ES 모듈 기반 개발 서버 |
상태 관리
| 기술 |
용도 |
| Zustand |
클라이언트 상태 관리 (인증 토큰, 모달 상태) |
| React Query (TanStack) |
서버 상태 관리 (캐싱, 동기화, 페이지네이션) |
스타일링
| 기술 |
용도 |
| styled-components |
CSS-in-JS 기반 컴포넌트 스타일링 |
| 반응형 미디어 쿼리 |
mobile/tablet/desktop 대응 |
외부 연동
| 기술 |
용도 |
| Firebase |
인증 시스템, 소셜 로그인 |
| OKX WebSocket |
실시간 암호화폐 시세 연동 |
| socket.io |
실시간 양방향 통신 |
기타 주요 라이브러리
| 기술 |
용도 |
| Axios |
HTTP 클라이언트 + 인터셉터 기반 토큰 관리 |
| React Router 7 |
라우팅 및 보호된 라우트 |
| Swiper |
캐러셀/슬라이더 UI |
| decimal.js |
암호화폐 정밀 소수점 계산 |
| qrcode.react |
입금 주소 QR코드 생성 |
3. 폴더 구조
src/
├── assets/ # 정적 파일
│ ├── icon/ # SVG 아이콘
│ ├── image/ # 이미지 파일
│ └── logo/ # 로고 에셋
│
├── components/ # 재사용 컴포넌트 (30개)
│ ├── layout/ # Header, Footer 레이아웃
│ ├── main/ # 메인 페이지 섹션 컴포넌트
│ ├── voting/ # 투표 카드, 리스트, 랭킹
│ ├── myPage/ # 입출금, 지갑 컴포넌트
│ ├── table/ # 데이터 테이블
│ └── loading/ # 로딩 애니메이션
│
├── page/ # 페이지 컴포넌트 (25개)
│ ├── auth/ # 로그인, 회원가입
│ ├── voting/ # 투표 목록, 상세
│ ├── myPage/ # 지갑, 이력, NFT, 프로필
│ └── ...
│
├── modal/ # 모달 컴포넌트
│ ├── alert/ # 알림 모달
│ ├── auth/ # 인증 모달
│ ├── otp/ # OTP 인증
│ ├── voting/ # 투표 모달
│ ├── myWallet/ # 지갑 관련 모달
│ └── index.tsx # ModalWrapper 중앙 관리
│
├── service/ # API 쿼리 훅 (12개)
│ ├── useAuthQueries.ts # 인증 API
│ ├── useUserQueries.ts # 사용자 정보
│ ├── useVotingQueries.ts # 투표 API
│ ├── useAssetsQueries.ts # 자산 조회
│ ├── useWithdrawQueries.ts # 출금 API
│ └── ...
│
├── store/ # Zustand 상태 관리
│ ├── authStore.ts # 인증 토큰 저장
│ └── modalStore.ts # 모달 상태 관리
│
├── lib/ # 라이브러리 설정
│ ├── api.ts # Axios 인스턴스 + 인터셉터
│ ├── queryClient.ts # React Query 설정
│ ├── firebase/ # Firebase 초기화
│ └── socket/ # WebSocket 연결
│
├── utils/ # 유틸리티
│ ├── routes/ # 라우팅 설정
│ ├── theme.ts # 반응형 브레이크포인트
│ └── color.ts # 색상 상수
│
├── types/ # TypeScript 타입 정의
└── hook/ # 커스텀 훅