🧩 https://nftselly.com/

PC환경으로 제작되었습니다. 반응형 페이지가 적용되어 있습니다.

Notion / Figma / UCC

기업 연계 프로젝트

최근 유행하고 있는 아트테크(Art-Tech) 플랫폼의 NFT 버전으로,
판매자가 직접 NFT를 올리고 NFT를 여러 사람이 나누어서 공동으로 소유하고 소유 지분을 재판매 할 수 있는 플랫폼

누구나 쉽게 만나는 예술

NFT 민팅, 분할, 거래를 Selly에서 경험해보세요.

일정 및 팀원 소개 (대전 1반 2팀)

📌 일정 : 2022.10.11 ~ 2022.11.21 (6주)

👨‍💻 팀원 소개 : 총 6명

• 박재경[FE]: 팀장
• 양지호[BE]: 부팀장
• 김지영[FE]: 팀원
• 박성배[BE/BC]: 팀원
• 이윤경[FE/BC]: 팀원
• 황상윤[FE]: 팀원

⚡ 기술 스택

Frontend	Blockchain	Backend
VisualStudio Code (1.73.1)	Visual Studio Code (1.73.1)	IntelliJ IDE
React (18.2.0)	Truffle	Java JDK (oracle 11.0.15)
Redux (3.7.0)	Ganache / Goerli	SpringBoot (2.7.4)
Redux RTK (1.8.6)		Spring Data JPA
StoryBook/react (6.5.13)		MariaDB (10.8.3)
SASS (1.55.0)		NodeJS (16.16.0)
postCSS (8.4.18)		Gradle (7.5.1)
TypeScript (4.8.4)		Jenkins
		Doker

🏗️ 백엔드 아키텍쳐

📀ERD

🎨 디자인 시스템

🔖 주요 기능

✅ Home

NFT Article Top 10

• 가장 인기 있는 10개의 NFT 작품을 캐러셀로 보여준다.

NFT Artists Top 10

• 가장 인기 있는 10명의 작가를 Trend(NFT 거래 수)/Follow 기준으로 보여준다.

NFT Category

• NFT의 카테고리를 확인할 수 있다.
• 클릭 시 해당 카테고리의 Explore 탭으로 이동한다.

Selly Statistics

• Selly의 서비스 이용 현황을 보여준다.

✅ Create

• 이미지와 제목, 설명 등을 작성하여 NFT를 민팅할 수 있다.
• create 버튼을 클릭하면 이미지가 ipfs 서버에 올라가고, ipfs 주소를 받아 메타데이터에 저장한 후 메타데이터 주소를 서버에 보내 민팅한다.

✅ Sell

• 사용자가 소유한 NFT를 Selly에 판매 등록할 수 있다.
• 원하는 NFT와 카테고리를 선택하고, 조각 이름, 조각 개수, 조각 당 가격을 입력하여 판매 등록한다.

• 총 4단계의 과정을 거쳐 판매 등록이 이루어진다.
• 금고 생성하기: NFT의 조각을 생성하기 위해서 NFT를 보관할 금고를 생성한다.
• 금고 승인하기: 생성된 금고가 NFT를 보관할 수 있도록 승인한다.
• 조각 생성하기: 준비된 금고에 NFT를 옮기고 조각을 생성한다. (지분 분할)
• 판매 등록하기: 생성된 조각을 Selly에 판매 등록한다.

✅ Explore

• Explore는 카테고리 별로 판매 등록된 모든 NFT를 볼 수 있다.
• 정렬은 등록일 순, 등록일 역순, 낮은 가격 순, 높은 가격 순으로 이루어져 있다.
• 각각의 NFT 카드에는 현재 조각 시세와 전날 가격에 대한 가격 변동률을 확인할 수 있다.
• NFT를 클릭하면 해당 NFT의 상세 페이지로 이동한다.

✅ NFT detail

• NFT의 제목, 이미지, 메타 데이터 정보, 컨트렉트 주소, 총 조각 개수 등이 있다.
• 해당 NFT 작품을 즐겨찾기, 외부(카카오)에 공유할 수 있다.
• 현재 다른 유저가 판매 중인 조각(지분)이 있다면 조각을 구매할 수 있다.
• 현재 보유한 조각(지분)이 있다면 조각을 원하는 가격에 판매할 수 있다.
• 판매 현황에서 내가 올린 조각을 볼 수 있다.
• 거래 history를 통해 거래 기록을 확인할 수 있다.

✅ Profile

• 내 프로필에서 나의 총 자산과 투자 원금, 총 손익, 수익률을 볼 수 있다.

• 나를 팔로우한 유저와 내가 팔로잉한 유저를 볼 수 있다.

• 총 5가지의 탭이 있다.

  • Fractions: 조각(지분) 보유한 NFT와 조각 개수, 해당 조각 수익률을 확인할 수 있다.
  • Created: Selly에서 민팅한 NFT를 확인할 수 있다.
  • ForSale: 현재 내가 조각(지분)을 소유하고 조각(지분)을 판매 등록을 한 NFT를 확인할 수 있다.
  • Collected: 내가 소유하고 있는 NFT를 확인할 수 있다.
  • Bookmark: 내가 즐겨찾기한 NFT를 확인할 수 있다.

• 다른 유저의 프로필에서 좋아하는 유저를 팔로우 할 수 있다.

✅ Settings

• 닉네임, 자기소개, 프로필 이미지, 배너 이미지를 편집하여 개인정보를 수정 할 수 있다.
• 유효성 검사(비속어/닉네임 중복/최소 글자 수/특수 문자)를 실시하여 통과하지 못했을 경우 개인 정보를 수정 할 수 없다.
• 수정이 완료되면 내 프로필로 이동한다.

✅ 반응형

• 375 * 667 사이즈까지 반응형을 구현 하였다.

📖 문서

Docs	Link
기업 명세서	링크
기능 명세서	링크
포팅 매뉴얼	링크
QA	링크
1차 발표자료	링크
중간 발표자료	링크
최종 발표자료	링크
시연 시나리오	링크

🎉 Special thanks to...

배포 도우미 박시원