🏆 SSAFY 특화프로젝트 우수상

🏆 SSAFY UCC 경진대회 전국 2위

🏆 2023 미래산업 인재육성 컨퍼런스 VALUE UP 프로젝트 공모전 금상

💖 NFT 헌혈증서 플랫폼 💖

💕지금 체험하기!

💕 HERE 소개

HERE는 헌혈증서를 블록체인 기술을 이용하여 NFT 형식으로 발행하고 이용하는 플랫폼입니다.

이제 더 이상 종이로 된 헌혈증서를 분실하거나 재발급 받는 일은 없습니다.

HERE에서 발행된 헌혈증서는 안전하게 저장되며, 언제 어디서든 손쉽게 확인할 수 있습니다.

또한, 헌혈증서를 소유한 사용자는 여러 가지 혜택과 보상도 받을 수 있습니다.

HERE를 통해 헌혈증서의 미래를 경험해보세요.

🎥 소개 영상 보기 : UCC 링크

💕 실행 (포팅매뉴얼)

💕 프로젝트 일정

📅 2023-02-20(월) ~ 2023-04-07(금) (7주)

💕 HERE 기획배경

헌혈증이란?

• 혈액원이 헌혈자로부터 헌혈을 받았을 때 발급해주는 카드 형태의 서류

용도

• 헌혈 사실 증명
  • 대학 입시 봉사활동 가산점 획득
  • 공공기관에서의 직원 공가 처리
  • 군가산점 & 예비군 조기 퇴소
• 수혈 비용 공제
  • 헌혈증서 개수만큼 본인부담금 전액 공제
  • 타인에게 무료로 양도 및 기부 가능

기존 ‘종이’ 헌혈증의 문제

• 직접 인증 기관에 방문하여 헌혈증을 제출해야 하는 번거로움
• 분실 등으로 인한 보관 및 관리의 힘듦
• 인증 기관에서의 복잡한 증명 확인 절차
• 헌혈증서 위변조로 혜택을 받기 위한 악용 사례 발생
• 불편한 기부 방식
• 2019년 기준 미사용 헌혈증서 87% (대한적십자사)

왜 NFT 헌혈증인가?

• 헌혈증 관리 용이성 증가
  • 종이 헌혈증들을 서류로 관리 ⇒ 한 눈에 확인하고 관리할 수 있는 헌혈 데이터
• 헌혈 증명 절차 간소화
  • 헌혈 사실 증명을 위한 복잡한 절차 ⇒ 원클릭으로 손쉬운 제출, 증명 절차
• 헌혈증서의 보안 및 투명성 제고
  • 헌혈증서 위변조 등 악용 위험의 존재 ⇒ 블록체인을 통한 투명한 관리
• 헌혈증서 기부 활성화
  • 실물 증서를 직접 전달해야 하는 기부 방식 ⇒ 온라인으로 가능한 간편한 기부

🎁 기대효과

• 발급 및 인증 절차 간소화
• 위변조 방지 투명성
• 기부 문화 활성화
• 헌혈 장려

💕 HERE 기능

1. 제출해요

• NFT 헌혈증서를 이용한 헌혈 기록 인증 및 제출
• 기관 제출
  • 내 이름으로 발행한 NFT 해시값 제출 ⇒ 블록체인 네트워크 NFT 진위 여부 확인
• 병원 제출
  • 내 NFT + 양도받은 NFT 해시값 제출 ⇒ 블록체인 네트워크 NFT 진위 여부 확인
• 자동 선택
  • 원클릭으로 간편하게 헌혈증 제출
    • 1순위 : 타인에게 양도받은 NFT
    • 2순위 : 발행일이 오래된 NFT

2. 나의 NFT

• 헌혈 후 NFT 헌혈증서 발급 (적십자)
• 발급받은 NFT 헌혈증서 확인
• 나의 NFT 이미지 저장
• 기존의 종이 헌혈증서 등록
  • QR 코드 인식 ⇒ 바코드 등록

3. 기부해요

• 헌혈증서 양도 커뮤니티
  • 쉽고 빠르게 헌혈증서 양도

4. 헌혈해요

• 나의 헌혈기록 보기
• 최근 헌혈일, 다음 헌혈 가능일 안내
• 헌혈 스탬프
• 헌혈의 집 지도 정보 제공

5. 알림

• 기관, 병원 진위 여부 확인 시 제출자에게 인증 확인 알림
• 헌혈증서 양도 시 글 작성자에게 양도 확인 알림
• 병원에서 헌혈증서 수납 시 최초발행자에게 현황 알림
• 글 마감 시 모든 기부자들에게 마감 알림

💕 개발 환경

🤖 프론트엔드

• React: 18.2.0
• Next.js: 13.2.3
• react-query: 3.39.3
• Redux Toolkit: 1.9.3
• Typescript: 4.9.5
• Tailwind CSS: 3.2.7
• Web3: 1.8.2

🍭 백엔드

• java : openJDK version 11.0.18
• mySQL : 8.0.31
• springBoot : 2.7.10
• spring Swagger : 2.9.2
• queryDsl : 5.0.0

🕶 블록체인

• truffle : 5.4.33
• solidity : 0.8.4
• ipfs : 0.10.0

🚋 인프라

• docker : 23.0.1
• docker-compose : 1.29.2
• Jenkins : 2.387.19

💕 사용 기술

아키텍처

MSA ⇒ 모놀리틱 방식의 한계점을 보완 및 해결하기 위해 MSA 방식 도입

SSE

Smart Contract ⇒ 블록체인 개발 환경 구축

자동배포

SSR ⇒ 빈 화면 노출을 막아 사용자 경험을 향상시킴 (Next.js)

반응형 웹 디자인 ⇒ 데스크톱에서도 모바일에서도 편안하게 사용 가능

로그 관리 ⇒ MM에 에러 로그를 기록하여 프론트 ↔ 백 소통 원활화

💕 산출물

와이어프레임

Web

Mobile

ERD

• ERD 변경 이력

  

기능명세서

API명세서

📁 프로젝트 구조

❤ Backend

HERE-Auth, Board, NFT, Notification

📦here
 ┣ 📂src
 ┃ ┣ 📂main
 ┃ ┃ ┣ 📂java
 ┃ ┃ ┃ ┗ 📂com
 ┃ ┃ ┃ ┃ ┗ 📂ssafy
 ┃ ┃ ┃ ┃ ┃ ┗ 📂hereboard
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂config
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂controller
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂{HERE-name}
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂common
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂entity
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂enumeration
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂response
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂errorhandling
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂exception
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂service
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂resolver
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂mattermost
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂repository
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂service
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂util
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜HereBoardApplication.java
 ┃ ┃ ┗ 📂resources
 ┃ ┃ ┃ ┣ 📜application-dev.yml
 ┃ ┃ ┃ ┣ 📜application-local.yml
 ┃ ┃ ┃ ┗ 📜application.yml
 ┣ 📜.gitignore
 ┣ 📜build.gradle
 ┣ 📜Dockerfile
 ┣ 📜gradlew
 ┣ 📜gradlew.bat
 ┗ 📜settings.gradle

❤ Frontend

📦here-front
 ┣ 📂public
 ┃ ┣ 📂banners
 ┃ ┣ 📂favicon
 ┃ ┣ 📂icons
 ┃ ┣ 📂images
 ┃ ┣ 📂lottieJson
 ┃ ┣ 📂mainBanner
 ┃ ┣ 📂mainItems
 ┃ ┣ 📂signup
 ┃ ┣ 📂stamp
 ┃ ┣ 📂test
 ┣ 📂src
 ┃ ┣ 📂apis
 ┃ ┃ ┣ 📂alarm
 ┃ ┃ ┣ 📂blockchain
 ┃ ┃ ┣ 📂blood
 ┃ ┃ ┣ 📂donate
 ┃ ┃ ┣ 📂member
 ┃ ┃ ┣ 📂my-nft
 ┃ ┃ ┣ 📂organization
 ┃ ┃ ┣ 📂redcross
 ┃ ┃ ┣ 📂register
 ┃ ┃ ┗ 📂submit
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📂fonts
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂Alarm
 ┃ ┃ ┣ 📂Background
 ┃ ┃ ┣ 📂Banner
 ┃ ┃ ┣ 📂Bar
 ┃ ┃ ┣ 📂Button
 ┃ ┃ ┣ 📂Card
 ┃ ┃ ┣ 📂Footer
 ┃ ┃ ┣ 📂Header
 ┃ ┃ ┣ 📂MemberCard
 ┃ ┃ ┣ 📂Pagination
 ┃ ┃ ┣ 📂Register
 ┃ ┃ ┗ 📂Tag
 ┃ ┣ 📂constants
 ┃ ┣ 📂enum
 ┃ ┣ 📂features
 ┃ ┃ ┣ 📂Alarm
 ┃ ┃ ┣ 📂Blood
 ┃ ┃ ┣ 📂Donate
 ┃ ┃ ┣ 📂Home
 ┃ ┃ ┣ 📂MyNFT
 ┃ ┃ ┣ 📂Organization
 ┃ ┃ ┣ 📂RedCross
 ┃ ┃ ┗ 📂Submit
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂organization
 ┃ ┃ ┗ 📂redcross
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂blood
 ┃ ┃ ┣ 📂donate
 ┃ ┃ ┣ 📂member
 ┃ ┃ ┣ 📂my-nft
 ┃ ┃ ┣ 📂organization
 ┃ ┃ ┣ 📂redcross
 ┃ ┃ ┣ 📂register
 ┃ ┃ ┣ 📂submit
 ┃ ┣ 📂stores
 ┃ ┃ ┣ 📂alarm
 ┃ ┃ ┣ 📂donate
 ┃ ┃ ┣ 📂header
 ┃ ┃ ┣ 📂member
 ┃ ┃ ┣ 📂myNFT
 ┃ ┃ ┣ 📂organization
 ┃ ┃ ┣ 📂submit
 ┃ ┃ ┗ 📜store.ts
 ┃ ┣ 📂types
 ┃ ┣ 📂utils
 ┃ ┗ 📜index.css
 ┣ 📜.eslintrc.json
 ┣ 📜.gitignore
 ┣ 📜.prettierrc.json
 ┣ 📜ca.crt
 ┣ 📜ca.key
 ┣ 📜cert.crt
 ┣ 📜cert.key
 ┣ 📜Dockerfile
 ┣ 📜Jenkinsfile
 ┣ 📜next.config.js
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜postcss.config.js
 ┣ 📜README.md
 ┣ 📜server.js
 ┣ 📜tailwind.config.js
 ┣ 📜tsconfig.json
 ┗ 📜withTwin.js

❤ BlockChain

📦here-blockchain
 ┣ 📂build
 ┃ ┗ 📂contracts
 ┣ 📂contracts
 ┃ ┣ 📂access
 ┃ ┣ 📂token
 ┃ ┃ ┣ 📂ERC20
 ┃ ┃ ┃ ┣ 📂extensions
 ┃ ┃ ┃ ┃ ┗ 📜IERC20Metadata.sol
 ┃ ┃ ┃ ┣ 📜ERC20.sol
 ┃ ┃ ┃ ┣ 📜IERC20.sol
 ┃ ┃ ┃ ┗ 📜README.adoc
 ┃ ┃ ┗ 📂ERC721
 ┃ ┃ ┃ ┣ 📂extensions
 ┃ ┃ ┃ ┃ ┣ 📜ERC721Enumerable.sol
 ┃ ┃ ┃ ┃ ┣ 📜IERC721Enumerable.sol
 ┃ ┃ ┃ ┃ ┗ 📜IERC721Metadata.sol
 ┃ ┃ ┃ ┣ 📜ERC721.sol
 ┃ ┃ ┃ ┣ 📜IERC721.sol
 ┃ ┃ ┃ ┣ 📜IERC721Receiver.sol
 ┃ ┃ ┃ ┗ 📜README.adoc
 ┃ ┣ 📂utils
 ┃ ┃ ┣ 📂introspection
 ┃ ┃ ┃ ┣ 📜ERC165.sol
 ┃ ┃ ┃ ┗ 📜IERC165.sol
 ┃ ┃ ┣ 📂math
 ┃ ┃ ┃ ┗ 📜SafeMath.sol
 ┃ ┃ ┣ 📜Address.sol
 ┃ ┃ ┣ 📜Context.sol
 ┃ ┃ ┣ 📜Counters.sol
 ┃ ┃ ┗ 📜Strings.sol
 ┃ ┣ 📜HereNFT.sol
 ┃ ┣ 📜Migrations.sol
 ┃ ┣ 📜SaleFactory.sol
 ┃ ┗ 📜SsafyToken.sol
 ┣ 📂migrations
 ┃ ┗ 📜1_initial_migration.js
 ┣ 📂test
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜truffle-config.js

💕 협업 환경

• Gitlab
  • 원격 저장소
  • 코드 버전 관리
• Mattermost
  • Mattermost를 이용하여 Log관리
  • 팀원 모두가 편하게 에러 체크 가능
• JIRA
  • Epic, Story 지정해서 매주 Sprint 진행
• 회의
  • 매주 일요일 오후 9시 Discord 팀 회의 진행
  • 필요 시 프론트, 백엔드 회의 진행
  • 매일 아침 팀 전체 데일리스크럼 진행 (당일 목표 작업 브리핑)
  • 파트 별 코드 리뷰 진행 (플립 이용)
• Notion

💕 화면 구성

메인 페이지

나의 NFT

헌혈증서

제출해요

병원제출

알림

기부해요

헌혈해요

💕 팀 소개

💕 소감