Project2 HALP ME!!

HALP ME!!

BEB 05 Second Project Team 05

💡Project Intro

Web2.0에서 블록체인 인센티브 기반 커뮤니티 사이트를 개발.

• 목표 : 중앙화된 Web2.0 인센티브 기반 커뮤니티 구현.
• 기획 구분 : FE, BE, SmartContract.

Incentive Community ?

➡️ 인센티브 기반 ?

자체적인 토큰을 가지고 참여자를 유도하는 생태계 빌딩. 사용자가 어떤 행동을 했을 때 토큰을 인센티브로 지급하는 것.

프로젝트 구조

인센티브 기반 커뮤니티 구성 : FE, BE, SmartContract.

• 각 부분 마다 달성 Bare minimum 존재.

→ 웹페이지 설계 부분은 기본적인 가이드라인 제공.

기획

**인센티브 커뮤니티(;IC)**는 특정한 주제를 좋아하는 사람들이 모여서 게시글을 작성하는 곳. 특정 주제를 좋아하는 사람들이 모여서 정보와 일상을 나누며 활발한 웹페이지가 되는 것이 목표.

• 사용자가 커뮤니티에 게시글 작성할 때마다 IC 토큰을 보상으로 받는다.
• 해당 IC 토큰은 타인에게 전송 가능하다.
• IC 토큰을 사용하여 NFT 민팅을 할 수 있다.
• 해당 NFT는 유저가 원하는 사진으로 만든다.
• 마이페이지에서 내가 받은 IC 토큰의 개수와 내가 구입한 NFT를 확인할 수 있다.
• 마이페이지에서 내가 쓴 글을 볼 수 있다.
• 마이페이지에서 타인에게 내가 가진 토큰을 줄 수 있다.

→ 토큰 보상 유발 행위 : 게시글 작성. But, 게시글 작성 이외 다른 것을 해도 ㄱㅊ.

→ 기본적인 기획 이외의 추가할 기획이 있으면 추가해도 되지만, 기본적인 기획은 프로젝트에 반드시 포함.

프로젝트 요구사항

• 커뮤니티에 게시글을 작성(혹은 댓글을 다는 등, 자유롭게 설정)할 수 있고, 이에 따른 보상으로 ERC-20 토큰을 지급하는 기능 (핵심 feature)
  • ‘특정 주제’를 좋아하는 사람들의 모임을 활성화하기 위함
  • ‘특정 주제’는 자유롭게 설정이 가능함
• ERC-20 토큰을 ERC-721 토큰과 교환할 수 있는 기능
  • ERC-20의 경우, 서버 ↔ 사용자, 사용자 ↔ 사용자 둘 다 가능해야 함
• 회원가입 시 자동으로 지갑 주소를 부여받는 기능
• Daemon을 개발하여 트랜잭션을 트래킹할 수 있는 기능
• NFT를 민팅할 수 있는 기능
• 내 정보를 볼 수 있어야 함

---

🚨 팀 소개

BEB-05-02-05조

💡Project : HALP ME!!

• 팀명 : HALP ME!
• 팀장 : 홍유진
• 팀원 : 박수연, 이송영, 안병현
• Site Link :
• Date : 2022/08/17 - 2022/08/30

💡 HALP Project Intro

➡️ 질의응답 커뮤니티. 사용자는 질문에 대한 게시글을 작성하고, 다른 사용자들이 해당 게시글에 답변을 댓글로 작성한다. 질문을 한 사용자는 게시글에 달린 답변 댓글 중 가장 적합한 답변을 채택한다. 채택받은 댓글의 사용자는 IC토큰을 보상으로 받는다.

역할

이름	포지션
박수연	FE
이송영	FE
안병현	BE, SC
홍유진	BE, SC

💻 FE

웹의 View를 유저 플로우에 따라 구성할 수 있고, 개발하기.

💻 SC

스마트 컨트랙트 개발을 위해 솔리디티 언어를 다루고, 분석하고, 적용 가능. 기본으로 제공되는 ERC-20, ERC-721 스마트 컨트랙트 코드 외의 덧붙일 기능은 응용하여 코드 작성해야함.

→ 솔리디티로 작성된 ERC-20, ERC-721 코드를 파악하고, 응용할 수 있다.

💻 BE

백엔드에서 지갑 생성, 서명 및 전송 담당. 서버 구축, 지갑 생성 및 관리, 스마트 컨트랙트와 서버를 연동하여 사용. 동작 확인을 위해 실시간 트래킹.

저장소

팀 레포

https://github.com/codestates/BEB-05-HALPME

개인 레포

https://github.com/yu-uj/BEB-05-HALPME

---

기술 스택

Tech

Language	JavaScript	*
Server Framework	Node.js	*
Contract Language	Solidity	SC
Container	Ganache	SC
Web Library	React	FE
Database(DB)	MySQL	BE
Web Library	Redux	FE
Web Library	Babel	BE
Web Library	Bootstrap	FE
Web Framework	Express.js	BE
JavaScript Library	Web3.js	SC
Framework	Truffle	SC
Framework	OpenZepplin	SC

Position Tech

Position	기술 스택
Front-End	React, Redux, Bootstrap
Back-End	MySQL, Babel, Express
Smart-Contract	Solidity, Web3.js, Truffle, OpenZepplin

개발 환경

OS	MacOS, Ubuntu
IDE	VisualStudioCode
개발 도구	Git
개발 언어	JavaScript, Solidity
테스트 네트워크	Ganache(ETH)
지갑	MetaMask
문서 관리	Notion

---

구현 기능

🔗 주요 기능

▶️ 회원관리

• 사용자는 아이디와 패스워드를 입력하여 회원가입할 수 있다.
• 사용자는 아이디와 패스워드를 사용하여 로그인할 수 있다.

▶️ 게시글

• 사용자는 게시글을 작성할 수 있다.
• 사용자는 게시글 목록을 확인할 수 있다.
• 사용자는 게시글 상세 내용을 확인할 수 있다.
• 사용자는 게시글에 대한 댓글을 작성할 수 있다.
• 사용자는 자신의 게시글에 달린 댓글 중 하나의 댓글을 채택할 수 있다.

▶️ 마이페이지

• 사용자는 자신의 정보를 확인할 수 있다.
• 사용자는 자신이 소유한 NFT 목록을 확인할 수 있다.
• 사용자는 자신이 소유한 토큰의 개수를 확인할 수 있다.
• 사용자는 자신이 작성한 게시글을 확인할 수 있다.
• 사용자는 자신의 토큰을 다른 사용자에게 전송할 수 있다.

▶️ 토큰

• 사용자는 자신이 작성한 댓글이 채택됨으로, 토큰을 획득할 수 있다.

▶️ NFT

• 사용자는 NFT를 생성할 수 있다.

🔗 추가 기능

▶️ 게시글

• 사용자는 자신이 작성한 게시글을 수정할 수 있다.
• 사용자는 자신이 작성한 게시글을 삭제할 수 있다.
• 사용자는 자신이 작성한 댓글을 수정할 수 있다.
• 사용자는 자신이 작성한 댓글을 삭제할 수 있다.
• 사용자는 게시글에 좋아요를 표시할 수 있다.
• 사용자는 댓글에 좋아요를 표시할 수 있다.

🔗 Night Mare

• 사용자는 소유한 nft를 전송할 수 있다
• 사용자는 nft를 고정된 가격에 구매하거나 경매할 수 있다
• 사용자는 카테고리의 Explore에서 nft 조회 방식을 선택할 수 있다

시나리오

Home

• 기본 Index 화면.
• 왼쪽 상단의 사이트 로고 클릭시 홈(Home)으로 이동한다.

Navigation

• Home 화면 상단에 위치.
• Login / Sign 클릭시 login과 sign 선택 화면으로 이동한다.
• Market 클릭시 market 화면으로 이동한다.
• Create 클릭시 NFTcreate 화면으로 이동한다.
• My Page 클릭시 mypage 화면으로 이동한다.

Login / Sign up

• Home 화면 상단의 오른쪽에 위치.
• Sign 클릭시 회원가입 화면으로 이동한다.
• 회원가입에 필요한 Id, Password를 포함한 정보 기입 후, 회원가입 버튼을 클릭하여 가입한다.
• 회원가입에 실패하면 error message 송출한다.
• Login 클릭시 로그인 화면으로 이동한다.
• Id, Password 입력 후, 로그인 버튼 클릭으로 로그인한다.
• 로그인 실패시 error message 송출한다.
• 로그인에 성공하면 화면 오른쪽 상단의 Login 버튼이 Logout 으로 바뀐다.
• Logout 클릭시 사이트에서 로그아웃 된다.

Market

• 게시글 리스트의 게시글 클릭시, 게시글의 상세 페이지로 이동한다.
• 게시글 리스트의 상단에 위치한 게시글 작성 버튼을 누르면 게시글 작성 화면으로 이동한다.
• 클라이언트는 서버에 NFT 정보를 요청하고 서버는 DB에 저장된 NFT 정보를 응답한다.
• 클라이언트는 응답받은 정보를 marketplace 페이지에 보여준다.
• NFT 중 하나를 눌렀을 때 지갑연결이 되어있으면 구매 페이지로, 아니면 지갑 연결 페이지로 이동한다.

Create (NFT Create)

• 지갑 연결 [URClass eth연결]
  • 연결이 되지 않은 상황에오른쪽 위 지갑을 누르거나, 오른쪽 위 사용자를 누르거나, Explore에서 NFT를 눌렀을 때 이동한다.
  • 지갑을 클릭하면 MetaMask 지갑을 표시한다.
  • 지갑에 로그인하면 사이트에 로그인된다.
• 사용자는 자신이 보유한 IC토큰을 인증하고, NFT 생성을 위해 Create 버튼을 눌러 create 화면으로 이동한다.
• 클라이언트는 사용자에게 NFT CreationFrom을 제공한다.
• 사용자는 이미지와 정보를 입력하고 Create NFT 버튼을 클릭하여 NFT 정보를 IPFS에 업로드 요청한다.
• 이미지를 IPFS에 저장 후 이미지 IPFS URI를 입력한 정보에 추가하여 metadata.json 파일을 IPFS에 업로드한다.
• 업로드 완료 후, 업로드된 이미지는 My Page의 Minted List에서 확인할 수 있다.

My Page

• 로그인한 사용자의 상세 정보 확인.
• 사용자가 보유한 IC토큰을 확인.
• 사용자가 보유한 NFT 조회.
• 구매한 NFT 목록 조회 / 민팅한 NFT 목록 조회.
• 사용자가 작성한 게시글 확인.
• 사용자가 작성한 댓글 확인.

필수 구현

• 로그인 / 로그아웃
• 회원가입
• 게시글 읽기 및 작성
• 게시글에 대한 댓글 작성
• 게시글의 작성자가 댓글 채택
• 채택된 댓글의 작성자는 보상으로 IC토큰을 받음
• IC토큰을 민팅한 NFT 토큰으로 교환
• NFT Create를 하면 데이터베이스에 저장
• Minted List에서 데이터를 받아와서 보유 NFT 표시

추가 기능 구현

• 내 NFT 컬렉션 페이지 조회 기능.
• 사용자 NFT 페이지 조회 기능.
• 답변 채택이 완료된 게시글은 완료 리스트로 이동하기.
• 보유한 IC토큰과 NFT 전송 기능.
• 보유한 NFT 판매 기능.

Flow Chart

ER-Diagram

API

Installation

1. .env 추가

.env 파일을 생성하여 다음과 같이 환경 변수를 추가한다.

• client

REACT_APP_SECRET_KEY=
REACT_APP_SERVER_URL=http://127.0.0.1:8080

• server

PORT=8080
SERVER_BANNER=
DB_USER_NAME=root
DB_USER_PASSWORD=
DB_DATABASE_NAME=HALP_ME
DB_HOST=127.0.0.1
DB_DIALECT=mysql

• contract

SERVER_ADDRESS=가나슈 첫번째 계정
SERVER_SECRET_KEY=가나슈 첫번째 계정 비밀 키
CONTRACT_ADDRESS=내가 배포한 컨트랙트 주소
RPC_URL=http://127.0.0.1:7545/

2. 실행

# client
cd client
npm install
npm start

# server
cd server
npm install
npm start

3. contract deploy

# install truffle & ganache
npm install -g truffle
npm install -g ganache-cli

# 프롬프트 실행
truffle develop

# 컴파일
compile

# 배포
migrate

# 테스트
test

실행 화면

Home

Post

Post Create

Comments

Comments Selected

Market

My Page

---

회고

첫 프로젝트는 그나마 손에 익어있던 프론트엔드를 경험해봐서 두번째 프로젝트는 백엔드에 도전했다.
백엔드 포지션 팀원들이 다 경험자 혹은 무경험자이거나, 프론트엔드 포지션에 자리가 빈다면 그쪽으로 갈 생각이었으나.
프론트엔드에는 현업을 경험해본 분이 계셨고, 백엔드 지원한 분은 전공자셔서 많이 배워가보고자 도전했다.
민폐여도 파이널 이전에는 반드시 백엔드 프로세스를 경험해보고 싶었다.


첫 팀 회의를 하는데 역시나 내가 이해하고 있는 부분은 몇 없었다^^…
식은땀이 삐질삐질 나면서, 아 이거 그냥 프론트로 넘어가야 그나마 도움이 되지 않을까?ㅎ 싶었으나 말을 꺼낼 수 없었다.
마음은 급한데 맡은 테스크를 진행할 때 마다 나의 모자람과 무지함이 보였다. 그래서 더욱 가라앉았고 조급했다.


그래서 스마트 컨트랙트를 꼼꼼히 공부하고 배포하여 프로젝트 진행에 차질을 줄이려고 열심히 했다.
생소했던 truffle을 사용하여 ganache 네트워크에 배포하는 과정을 이제는 눈감고도 할 수 있을거 같다.
또한 내 장점을 살려 그때마다 문서 정리를 해두고, 팀 회의에 참석하여 진행 상황 전달을 했다.


프로젝트 진행동안 내 속에서는
‘내가 공부를 잘못한걸까?’
‘이 부분은 공부를 안했던걸까?’
‘다른 분들은 저렇게 능숙하게 작업을 하는데, 나만 못하는 건 내가 많이 부족했나?’
이런 끊임없는 의심뿐이었다.
도서관에서 책을 빌려서 보고, 유튜브와 내 정리 노션, 유어클래스, 구글을 다 뒤져가면서 공부해도 생소함이 가시지 않았다.
내 자신에 대한 의심이 계속해서 일어나니 기분이 점점 가라앉고 회피하고만 싶었다.
팀원분들이 잘 이끌어주지 않았다면 이번 프로젝트를 완성시키지 못했을거다.


마지막날, 팀원분과의 회의에서 서로 궁금한 점을 해소하다가 내가 아는 부분을 공유했다.
그리고 고심하다가 팀원분께 도움을 요청했다.
아직도 이해가 안가는 백엔드 로직과 순서에 대해 부끄럽지만 설명을 부탁했다.
나는 누군가에게 도움을 요청하는 것이 굉장히 힘들어서 레퍼런스를 찾고, 공부한 부분을 다시 복기했었는데.
팀원분의 설명은 그 모든 것을 넘어 내게 가장 도움이 되었다.
프로젝트에 대해서 누구보다 잘 이해하고, 직접 구현까지한 본인의 코드 리뷰와 로직 설명은 엄청난 효율이었다.
내가 차마 물어보지 못했던 것은 팀에 도움이 되지 못하는 것을 들키고 싶지 않았던거였다.
그리고 팀원분들이 나를 민폐로 여겨 귀찮아할거라는 섣부른 선입견이 존재했다.
이번 프로젝트로 소중한 교훈을 얻었다.
도움이 필요할 때는 자존심 때문에 혼자 해결하려 하지말고, 도움을 요청하는 것이 팀을 위한 효율이다.