- NFCOFFEE는 기존 중앙집중식 서버 시스템의 한계를 해결하기 위한 블록체인 기반 모바일 오더 시스템입니다.
- NFT 발급을 활용하여 조직 내 신원 확인 기능을 제공합니다.
- 스마트 컨트랙트를 통해 안전하고 투명한 거래를 보장합니다.
| 이민규 | 이지인 | 박정진 | 장철희 | 조성열 |
|---|---|---|---|---|
 @2mingyu |
 @20massalia |
 @JeongjinP |
 @jang-namu |
 @Choseongyul |
- Front : React-Native(App), React(Block-explorer)
- Backend : springboot, node.js(web3)
- Blockchain: Solidity, go-ethereum
- 버전 및 이슈관리 : Github, Github Issues
- 협업 툴 : Notion
- 디자인 : Figma
- 프로젝트 구조 : // todo
- Go-ethereum
- Ethereum의 smart contract를 구동할 수 있는 Go language로 개발된 클라이언트
- Geth를 통한 블록의 트랜잭션을 검증하고 실행 가능
- web3.js
- ABI 파일로 생성된 메타데이터로 Geth 네트워크 상 배포된 스마트-컨트랙트 호출(mintAndTransfer)
- NFT 민팅 및 토큰 전송 API 제공
- Java-mail-sender
- 이메일 인증 서비스 구현, SMTP 사용
- Dockerize
- jib 라이브러리 이용, Docker Image 형태로 프로젝트 빌드 및 배포
- React-Native
- 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
- 유저 배너, 상단과 하단 배너 등 중복되어 사용되는 부분이 많아 컴포넌트화를 통해 리소스 절약이 가능했습니다.
- styled-component
- props를 이용한 조건부 스타일링을 활용하여 상황에 알맞은 스타일을 적용시킬 수 있었습니다.
- 빌드될 때 고유한 클래스 이름이 부여되어 네이밍 컨벤션을 정하는 비용을 절약할 수 있었습니다.
- S dot naming을 통해 일반 컴포넌트와 스타일드 컴포넌트를 쉽게 구별하도록 했습니다.
- main 브랜치와 feature 보조 브랜치만으로 최대한 간결하게 유지하려 했습니다.
- main, Feat 브랜치로 나누어 개발을 하였습니다.
- main 개발이 완료된 기능은 PR을 올려 main에 머지
- feat 개발 기능 단위로 feature 브랜치 분리
- Web3
- Geth 이용 Clique(PoA) 기반 Private Network 구성
- Solidity 언어로 smart contracts 코드 작성 및 배포
- 기능
- nft 민팅 및 소유 확인
- token 요청
- token을 소모하여 음료 주문
- 논문
- 논문 작성 및 수정
- FrontEnd
- UI/UX 설계 및 디자인
- 전체적인 컴포넌트 구성 및 기능 구현
- 기능
- 메인화면, 주문화면, 트랜잭션 기록 및 설정 화면
- FrontEnd
- UI/UX 설계 및 디자인
- 전체적인 컴포넌트 구성 및 기능 구현
- 기능
- 회원가입, 로그인, 핀 설정
- web3 계정 생성 및 관리
- Backend
- node.js: nft minting - smart contarct 호출 API 제공
- Spring: 이메일 기반 회원인증 및 가입, nft 민팅 API 호출
- 기능
- 회원가입, 스마트-컨트랙트 호출
- 전체 개발 기간 : 2024-03-04 ~ 2024-05-31
- 기획 및 아키텍처 설계 : 2024-03-04 ~ 2024-03-18
- UI 구현 : 2024-03-18 ~ 2024-04-01
- 기능 구현 : 2024-04-01 ~ 2024-05-31
- GitHub Organzation에서 파트별 Projects, Issues를 사용하여 진행 상황을 공유했습니다.
- 매주 월요일 주간회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 Figma와 노션에 회의 내용을 기록했습니다.
| Figma | Swagger |
|---|---|
 |
 |
-
fetch를 axios로
개발 도중, 네트워크 오류로 fetch가 올바르게 작동하지 않는 이슈가 발생했다.
다양한 방법을 통해 fetch를 import해보기도 했으나, 이 참에 조금 더 직관적인 axios로 바꾸자!
싶은 마음에 api 호출 코드를 모두 fetch에서 axios로 변경하게 되었다. -
로그인을 유지하는 방법?
로그인 후 개인키를 저장해두어 사용하는데 있어서 문제가 발생했다. 그것은 바로… React Native로 로그인을 유지하는 법을 몰랐던 것이다! 😰
네비게이션 과정에서 페이지 간에 개인키를 계속 넘기려니 네비게이션 관리가 복잡해지고 코드의 가독성이 떨어지는 탓에...
전체 수정을 각오하고 Context API를 코드에 도입하여 사용했다.
이 덕에 개인키의 관리가 한결 수월해졌고, 보관 과정에서 개인키의 암호화까지 성공! -
request body 오류
회원가입 과정 중에, web3 account의 address를 생성하여 서버로 전송하는 API 호출에서 자꾸만 오류가 났다.
콘솔에 로그를 찍어보니 분명 address는 올바르게 형성이 됐는데… 왜 자꾸 서버에서 500이 돌아오는 걸까.
이는 코드에 너무 익숙해졌던 나머지 Post 과정에서 ‘wallet’으로 보내야 할 address를 자꾸 ‘address’에 보내고 있었음을 깨닫지 못했던 것.
키 값이 잘못됐으니 값이 올바른들 보내질 리가 있나. ㅠㅠ -
main 브랜치 소실
깃과 깃허브에 익숙하지 않았던 팀원의 실수가 몇 차례 있었다.
그 중 가장 심각했던 사건은… 프론트 레포지토리의 메인 브랜치에서 2달치 커밋이 날아간 것.
pull을 하지 않은 상태로 메인 브랜치에 push를 시도했고, 이 과정에서 (당연하게도) 오류가 발생하니 강제로 push를 해버린 것.
다행히 복구는 했지만 정말 심장이 철렁 내려앉은 일이었다. 소중한 작업물을 지킬 수 있게 깃은 꼭 마스터하도록 하자. 😅
- 어플리케이션 접속 초기화면입니다.
- 로컬 스토리지에 암호화된 private key가 존재할 경우 : PIN 입력 후 Main 화면으로
- 로컬 스토리지에 암호화된 private key가 존재하지 않을 경우 : 로그인 및 회원가입이 가능한 초기화면
| 초기화면 |
|---|
 |
- 서비스 제공 조직의 데이터베이스와 연동하여, 사번(학번)으로 중복 가입을 방지하며, 이메일로 조직원 인증 후 가입합니다.
| 회원가입 | 메일 인증 |
|---|---|
 |
 |
- 로컬 스토리지에서 private key를 암호화/복호화 할 때 사용할 PIN 번호를 사용자에게 입력받습니다.
- web3.js 라이브러리를 이용해 블록체인 네트워크의 계정을 생성합니다.
- 계정의 주소를 백엔드로 보내면, NFT를 발급받게 됩니다.
| 계정 생성 |
|---|
 |
-
상단 : NFT 보유 여부, 보유중인 PLZ 토큰 수량, PLZ 토큰 수령 버튼을 배치했습니다.
-
중단 : 퀵 오더에서 메뉴 이름을 선택하면, 해당 메뉴를 바로 주문할 수 있도록 Order 페이지로 이동합니다.
-
하단 : 최근 트랜잭션 기록을 간략히 표시합니다.
-
24시간에 한번 씩 토큰을 수령할 수 있습니다.
-
한번에 받을 수 있는 토큰의 수량은 조직에서 스마트 컨트랙트를 이용해 설정 가능합니다.
| Main | 토큰 수령 |
|---|---|
 |
 |
- 주문 가능한 메뉴들을 표시합니다.
- 품목을 선택한 후 주문하기 버튼을 클릭 시, 주문 내용이 블록체인 네트워크로 전송되며 토큰이 차감됩니다.
| Order | 주문 |
|---|---|
 |
 |
- 사용자의 트랜잭션 기록이 전체 해시와 함께 표시됩니다.
| History |
|---|
 |
- 자체 블록 탐색기를 개발하여 모든 트랜잭션 기록을 확인할 수 있게 했습니다.
| Block Explorer |
|---|
 |
