악보 판매 등록부터 연주 영상 공유까지!
악보 거래 플랫폼, 악보의 정원

악보의 정원은 프론트엔드 개발자 3명이 함께하는 팀 프로젝트입니다.
TypeScript와 React를 기반으로 하고, DB와 백엔드는 Firebase를 사용하였습니다.
또한 Atomic Design Pattern을 활용하여 컴포넌트 기반의 개발을 위해 노력하였습니다.🤔

🏠 배포 페이지 바로가기 →

🎨 Figma 바로가기 →

🛠 Stacks

🧸 팀원 소개

Ethan Jeong	starplanter93	seungmin2ee
Front	Front	Front

🔍 악보 공유 / 판매 서비스 소개

자신이 만든 악보를 자유롭게 공유 혹은 판매할 수 있는 서비스입니다.

메인페이지	메인페이지 무한스크롤

1. 그리드 형식의 메인페이지에서 등록된 악보들을 곡 별로 한 눈에 볼 수 있습니다.

• 곡 당 최대 3개의 악보리스트가 표시되고, 곡 옆의 더보기 버튼을 눌러 곡 상세페이지로 이동 후, 해당 곡으로 등록된 모든 악보들 조회할 수 있습니다.

악기페이지	악기 상세페이지

2. 헤더의 악기 탭을 통해 악기페이지에 접근하여 내가 원하는 악기로 등록된 모든 악보를 볼 수 있습니다.

악보 상세페이지	장바구니

3. 원하는 악보 게시글을 클릭하여 악보 상세페이지에 접근하고, 악보가 마음에 들면 장바구니에 담을 수 있습니다.

• 악보 상세페이지에서 작성자가 설정한 악보의 가격과 제목, 상세 정보, Youtube영상을 확인할 수 있습니다.
• 자신의 게시글이라면 수정과 삭제가 가능합니다.
• 장바구니는 파이어베이스의 해당 회원 DB와 연동되어 있기 때문에, 로그아웃을 하더라도 유지됩니다.
• 헤더의 장바구니 버튼을 눌러 장바구니 모달을 열면 내가 담은 악보와 총 가격을 확인할 수 있습니다.
• 언제든지 원하는 악보를 추가하고 뺄 수 있습니다.
• 장바구니의 결제버튼을 클릭하게 되면, 사용자의 캐시 잔액에서 해당 장바구니에 담긴 악보 총 가격이 차감되어 빠져나갑니다.

곡 상세페이지	마이페이지

4. 곡 상세페이지의 악기 탭을 통해 내가 원하는 곡의 원하는 악기로 등록된 모든 악보를 쉽게 조회할 수 있습니다.

닉네임 수정	프로필사진 수정

5. 마이페이지를 통해 내정보와 악보들을 쉽게 확인할 수 있습니다.

• 마이페이지의 등록한악보, 구매한 악보 탭을 통해 내가 등록한 악보와 구입한 악보를 확인할 수 있습니다.
• 등록한 악보의 경우, 수정하기 버튼을 통해 해당 게시글을 수정할 수 있습니다.
• 구입한 악보의 경우, 다운로드 버튼을 통해 해당 악보를 다운로드 받을 수 있습니다.
• 닉네임과 프로필 사진을 바로 수정할 수 있습니다.
• 회원탈퇴가 가능합니다.

악보 등록페이지	악보 수정페이지

곡 저작권 정보 검색	악보 파일 업로드

6. 악보등록페이지를 통해 내가 등록하고 싶은 악보를 쉽게 등록할 수 있습니다.

• 악기종류, 난이도, 악보종류를 선택할 수 있습니다.
• Spotify api를 활용한 저작권 검색을 통해 내가 등록하고 싶은 악보의 곡을 빠르고 정확하게 찾아낼 수 있습니다.
• 내가 만든 악보pdf파일을 같이 업로드할 수 있습니다.
• 연주에 참고될 Youtube링크를 첨부하면 게시글에 Youtube영상이 같이 업로드 됩니다.

로그인 페이지	구글 OAuth 로그인

회원가입 페이지	로그아웃

7. 로그인 회원가입 로그아웃 기능

• 기본적인 로그인 회원가입 로그아웃 기능을 모두 지원합니다.
• 악보 조회의 경우, 로그인을 하지않더라도 가능하지만, 장바구니기능, 마이페이지기능, 악보등록기능을 이용하기 위해 로그인이 필요합니다.
• google Oauth를 통해 구글 아이디로 쉽게 회원가입과 로그인이 가능합니다.

8. 모바일 반응형 구현

• 모바일에서도 사용할 수 있도록 각 페이지에 모바일 반응형 css 구현하였습니다.

🧭 유저 플로우

Figjam 확인하기

👩‍💻 Firestore DB

1. Firebase authentication 을 사용하여 유저가 입력한 이메일과 비밀번호 또는 Google 계정으로 계정을 만들 수 있습니다.
2. 회원가입을 완료하면 Firestore user 컬렉션 필드의 해당 유저의 UID를 key값으로 하는 document가 생성이되고 초기값인 'cash' , 'isActive' , 'cartItems' 필드가 생성됩니다.

User collection

3. 로그인을 한 유저는 악보를 업로드 할 수 있습니다. "곡 제목 - 가수" 를 키 값으로 music 컬렉션에 document가 생성되고, 입력받은 인풋들로 이루어진 필드가 생성됩니다. 마찬가지로 instrument 컬렉션에 해당 악보의 악기에 맞춰서 'Drum' , 'Bass' , 'Guitar' , 'Piano' , 'Electric' document의 scores 배열 필드로 들어갑니다.

• 게시글에 .pdf파일을 첨부할 때 해당 파일을 Firebase Storage에 저장하고 다운로드 url을 악보가 저장되는 시점에 'downloadURL' 이라는 필드의 값으로 넘겨줍니다.
• 게시글 CRUD는 해당 게시글의 id를 바탕으로 전부 3개의 컬렉션을 순회하여 데이터를 컨트롤합니다.

Music collection

4. 유저가 장바구니에 악보를 추가하거나 결제를 할 경우, 마이페이지에서 해당 업데이트 내용을 받기위해 user 컬렉션의 cartItems 필드 또는 purchasedScores 필드가 업데이트 됩니다.
5. 회원 탈퇴시 유저가 업로드한 모든 작성글의 isOptout 값이 true가 되어 사이트내에서 확인이 불가능하게 만들어 줬습니다. 이미 구매한 유저들을 위해서 구매한 내역에는 그대로 남아있어 여전히 악보파일을 다운로드 받을 수 있습니다.

OptOut

6. 회원 탈퇴시 해당 authentication 정보를 완전히 삭제하지 않고 그 유저가 다시 로그인을 한다면 탈퇴한 회원임을 알려줍니다.

회원 탈퇴

🚀 프로젝트 실행 방법

레포지토리를 클론 한 후, client 디렉토리에서

npm install
npm start

📍 단, spotify api를 이용해야하기 때문에 게시글 작성에서 저작권 검색기능은 배포 주소에서만 확인할 수 있습니다.

💎 CI / CD 파이프라인

1. 각 브랜치에서 원격 레포지토리로 push가 이루어질 때마다 github action을 통해 자동으로 chromatic에 스토리북 파일 배포

• 팀원이 PR을 승인하기 전에 chromatic으로 해당 PR의 스토리북을 바로 열람하고 확인 가능합니다.

2. dev와 main 브랜치에 push가 이루어지면 github action을 통해 자동으로 aws S3에 배포

• 먼저 dev브랜치에서 분기한 각 팀원의 브랜치가 PR승인을 받고 머지되면 자동으로 배포가 되고, 사전에 설정한 dev도메인을 통해 배포결과를 확인할 수 있습니다.
• push 시, 로컬에 저장된 환경변수의 경우 예외처리되어 원격 레포지토리에는 들어가지 않으며, 환경변수가 반드시 필요한 경우에는 github secret을 통해 저장하고, github action이 저장된 secret을 참조하여 배포하도록 하였습니다.
• dev도메인에서 문제가 발생하지 않는다면 dev브랜치를 main브랜치로 머지하여, 설정한 메인 도메인에 자동으로 최종 배포가 되도록 하였습니다.