🧩 여행 조각

목차

1. 웹 서비스 소개
2. 버전 기록
3. 기술 스택
4. 주요 기능
5. 프로젝트 구성도
6. 데모 영상
7. 개발 팀 소개
8. 개발 기간 및 일정
9. 실행 방법

---

🧩 웹 서비스 소개

여행에 조각을 더하다, NFT Sticker + READ, WRITE, SELL ✈️

대한민국 방방곡곡을 돌아다녀보세요.🚶🏻‍♀️🚶🏻

특별한 지역의 QR을 읽고 특별한 NFT 스티커를 발급받고, 나만의 여행 다이어리를 쓸 수 있어요.

사용하지 않는 NFT는 마켓에서 팔아보세요

📌 버전 기록

버전	업데이트 내용	업데이트 날짜
v1.0.0	여행 조각 서비스 오픈	22.10.09

🛠 기술 스택

Front-end 기술 스택
Back-end 기술 스택
Solidity 기술 스택
Server 기술 스택
배포	🧩 여행 조각
노션	👉 노션 바로가기

💡 주요 기능

화면	기능
	NFT 스티커 발급 QR 인식을 통해 여행지의 NFT 스티커를 발급받을 수 있습니다.
	여행 등록 여행지와 여행일정을 등록하면 여행 티켓이 생성됩니다.
	다이어리 작성 여행지에서 하루의 다이어리를 작성하고 오늘의 사진을 등록할 수 있습니다.
	다이어리 꾸미기 및 프레임 공유 발급받은 NFT 스티커로 다이어리를 꾸미고 스티커 프레임을 공유할 수 있습니다.
	스티커 발급 가능 지역 조회 GPS 기반의 내 주변 또는 원하는 지역의 스티커 발급 장소를 확인할 수 있습니다.
	공유 프레임 조회 공유된 스티커 프레임을 지역 별로 조회하고 원하는 프레임을 저장할 수 있습니다.
	NFT 스티커 조회 공유된 프레임의 스티커를 클릭하면 NFT 마켓에서 해당 스티커를 조회합니다.
	NFT 마켓 NFT 스티커를 마켓에서 거래할 수 있습니다.

📂 프로젝트 구성도

아키텍쳐(Archtecture)
개체-관계 모델 (ERD)

🎥 데모 영상

UCC 영상	시연 영상

👨‍👩‍👧‍👦 개발 팀 소개

유지연 (Front-end & 팀장)	남은열 (Front-end)	임상빈 (Front-end)	박지원 (Back-end & Solidity)	이현규 (Back-end & Solidity)	허설 (Back-end & Solidity)

이름	역할	개발 내용
유지연	Front-end 팀장	- web3,web3-react를 이용한 메타마스크 지갑 연결, 지갑주소, 잔액 조회 - 로그인 · 로그아웃 기능 - 사용자 정보 조회, 닉네임 수정 기능 - NFT 스티커, 공유프레임 조회 기능 - 스크랩한 프레임 클릭시 프레임 공유 상세 페이지 연결 - QR코드 리더 기능, 정규식을 이용한 QR URL링크 판별 - Recoil, React-Query를 이용한 상태관리
남은열	Front-end	- 여행 일정 등록 · 수정 · 삭제 · 조회 기능 - 여행 다이어리 작성 · 수정 · 삭제 · 조회 기능 - GPS 기반 위치 정보 조회, 날씨, 다이어리 글씨, 다이어리 글 작성, 사진 업로드 - NFT 스티커 기반 다이어리 꾸미기 - 스티커 프레임 스크린샷 및 프레임 공유 - 스티커 프레임 꾸미기 - 공유 프레임 조회 기능 - 전체 및 지역별 조회 - 프레임 상세 페이지 스티커 렌더링 - 스티커 위치에 따른 tooltip 방향 제어 - 스티커 tooltip 클릭 시 마켓 연결 - 'Recoil', 'React-Query'를 이용한 상태 관리 - 'Mock Service Worker'를 이용해 목업 API 구현 및 API 테스트 진행
임상빈	Front-end	- 홈 / 네비게이션 바 / 스티커지도 레이아웃 구현 - 티켓 / 지도 제작 - 프로젝트 내 사용되는 스티커 일러스트 제작 - 랜딩페이지 내 삽입되는 소개페이지 디자인 / 버튼 구현
박지원	Back-end Solidity	Back-end - DB 설계 - Frame, Place, Qrlog CRUD API 작성 - 배치 스케쥴러를 통한 자동 QR 생성 및 이미지 업로드 - QR이미지 이메일 전송 서비스 Solidity - NFT 등록 및 전송 스마트 컨트랙트 작성 Front - 홈, 메뉴, 발급가능지역 API 연결 - Admin 페이지 (장소 등록, NFT 생성) 레이아웃 및 스마트 컨트랙트 연결 - GPS 연결 작업 - 전체적인 CSS 디자인
이현규	Back-end Solidity	Back-end - DB 설계 - 회원 로그인 · 조회 · 수정 · 기능 API 작성 - JWT 인증 방식 구현 - Access Token, Refresh Token 재발급 API 작성 Solidity - NFT 마켓 등록 · 구매 · 삭제 기능 컨트랙트 작생 Front - 마켓 조회 · 등록 · 삭제 기능 API 연결 - 마켓 조회 · 등록 · 삭제 기능 이더리움 네트워크 연결
허설	Back-end Solidity	Back-end - 여행 일정 등록 · 수정 · 삭제 · 조회 기능API 작성 - 여행 다이어리 작성 · 수정 · 삭제 · 조회 기능API 작성 - 다이어리 스티커 프레임 등록 · 삭제 · 조회 기능 API 작성 - 마켓 스티커 등록, 조회 검색 및 필터링 기능API 작성 Solidity - 사용자별 자신이 가지고 있는 보유 스티커 조회 작성 Frontend - 관리자페이지 레이아웃 - 공유프레임 레이아웃

📅 개발 기간

22.10.06. ~ 운영 관리 중

💻 실행 방법

Client 실행

1. 원격 저장소 복제

$ git clone https://lab.ssafy.com/s07-blockchain-nft-sub2/S07P22A607.git

2. 프로젝트 폴더로 이동

$ cd frontend

3. 필요한 node_modules 설치

$ yarn install

4. 개발 서버 실행

$ yarn start

Server 실행

Solidity 실행

🦊 git convention

Emoji	Code	기능	Description
✨	:sparkles:	Feat	새 기능
♻️	:recycle:	Refactor	코드 리팩토링
🔧	:wrench:	Chore	리소스 수정/삭제
🐛	:bug:	Fix	버그 수정
📝	:memo:	Docs	문서 추가/수정
💄	:lipstick:	Style	UI/스타일 파일 추가/수정
🎉	:tada:	Init	프로젝트 시작 / Init
✅	:white_check_mark:	Test	테스트 추가/수정
⏪	:rewind:	Rewind	변경 사항 되돌리기
🔀	:twisted_rightwards_arrows:	Merge	브랜치 합병
🗃	:card_file_box:	DB	데이터베이스 관련 수정
💡	:bulb:	Comment	주석 추가/수정
🚀	:rocket:	Deploy	배포