My Idol NFT Ticket

목차

1. 웹 서비스 소개
2. 개발 기간 및 일정
3. 기술 스택
4. 주요 기능
5. 서비스 아키텍처
6. MINT 서비스 화면
7. 개발 팀 소개
8. 와이어 프레임
9. 요구사항 정의서
10. 기능 명세서
11. 개체-관계 모델(ERD)
12. 협업
13. 실행 방법

💁 웹 서비스 소개

---

🗯 Hyperledger Besu(Permissioned Blockchain Network)로 구성된 SSAFY Network 환경에서 개발되었습니다.

MINT 는 콘서트 티켓을 NFT로 발급해주는 서비스입니다.

콘서트를 예매하면 해당 콘서트를 입장할 수 있는 티켓을 NFT로 발급해줍니다.

콘서트가 시작된 후 NFT티켓에 담겨있는 콘텐츠를 확인해 볼 수 있습니다. 원한다면 판매도 진행할 수 있는 거래 플랫폼도 이용할 수 있습니다.

데모 영상

SSAFY Wallet이 있다면 누구든 사용가능합니다.

📅 개발 기간

---

2022.03.07 ~ 2022.04.08

🛠 기술 스택

---

Front-end

HTML5	CSS3	React	MUI	Web3.js

Back-end

Java	Spring-Boot	MySQL

Blockchain

Solidity	Hardhat	OpenZeppelin

DevOps

NGiNX	aws	Jenkins	docker

💡 주요 기능

---

• 콘서트 티켓 예매시 NFT로 발급
• 콘서트 티켓 결제는 ERC20을 구현한 Ssafy Token을 이용(단위 : SSF)
• 양면 NFT 티켓 (앞면은 티켓 입장권, 뒷면은 포토 카드)
• 티켓에 3D 애니메이션 제공
• NFT 포토 카드 사용자 간 거래 서비스 제공

📂 서비스 아키텍처

---

🎥 MINT 서비스 화면

---

콘서트 예매

3D NFT 티켓 조회(콘서트 시작 전)

내가 가진 NFT 티켓 목록 조회

거래 가능한 NFT 티켓 구매

거래 가능한 NFT 티켓 목록

예매한 콘서트 취소

메인 화면(콘서트 목록)

지갑 연동

외부 앱(SSAFY WALLET) 이용 방법 안내

👪 개발 팀 소개

---

이주현 (Front-end & 팀장)	오재문 (Back-end)	김정빈 (Front-end)	박창현 (Front-end)	정채은 (Blockchain)

이름	역할	개발 내용
이주현	Front-end 팀장	Web3 트랜젝션 기능 개발 NFT 토큰 발급 및 삭제 기능 개발 NFT 토큰 거래 기능 개발 메인페이지 개발 알림창 생성 함수 개발 IPFS 서버 연동
오재문	Back-end	AWS 서버 배포 백엔드 API 개발
김정빈	Front-end	3D 모델링 마크업, UI/UX 설계 검색, 콘서트 예매 기능 개발
박창현	Front-end	NFT 토큰 조회 기능 개발 백엔드 API 개발
정채은	Blockchain	스마트 컨트랙트 작성 web3.js 연동 테스트

🎨 와이어 프레임

---

📃 요구사항 정의서

---

🗂 기능 명세서

---

📐 개체-관계 모델(ERD)

---

👨‍👨‍👦‍👦 협업

---

Gitlab

• 메인 브랜치는 dev입니다.
• 각자 작업시에는 {이름}/{작업내용} 의 브랜치를 생성하고, 깃랩으로 푸시한 후 dev 브랜치로 머지하여 사용했습니다.
• 노션에 작성한 코드 컨벤션, 깃 컨벤션을 따라 작업했습니다.

JIRA

• 일정, 작업을 관리하기 위해 지라를 사용했습니다.
• 매주 월요일 오전에 회의를 통해 한 주동안 진행해야 할 계획을 정하고, 정한 이슈들을 스프린트로 등록했습니다.
• 스프린트는 일주일 단위로 진행했고, 스토리 포인트는 1시간에 1포인트로 두었습니다.
• 기능 명세서의 대분류를 Epic, 중분류를 Story로 해서 이슈를 생성했습니다.

Notion

• 회의록, 팀 공지사항 등 매일 확인할 사항을 관리했습니다.
• 각자 공부하거나 참고할만한 자료를 올려 다함께 공유했습니다.
• 팀 규칙, 코드 컨벤션, 깃 컨벤션을 노션에 작성하여 규칙을 바로 확인할 수 있게 했습니다.

Mattermost

• gitlab으로 코드를 push, branch merge 등을 하거나 젠킨스 빌드 성공 여부를 메시지 알림으로 받았습니다.
• jira 변경 사항에 대한 알림을 메시지로 받게 해서 활용했습니다.

💻 실행 방법

---

Front-end

git clone [레포지토리]

cd front

npm install

npm run start

Back-end

gradlew.bat 파일 실행

radlew clean build 

build/libs 폴더로 이동

java -jar backend-0.0.1-SNAPSHOT.jar