BilliG

💁‍♀️ 안녕하세요! 빌려주고 빌리는 BilliG 입니다 🙆

1. 서비스 소개

서비스 도메인

https://billig-front.vercel.app/

기술 스택

웹서비스 개요

- "아이디어 회의를 통해 잠깐 쓸 물건을 구매하기엔 부담되고,
사고싶은 물건을 구매하기전에 빌려서 사용하면 좋겠다 그리고 물건을 빌려주면서 수익을 얻을 수 있으면 어떨까?
라는 아이디어에서 <물품 대여 서비스> 를 기획하게 되었습니다."

페르소나

💡 주수태 (30세, zustand) : "한번 쓸 제품을 구매하는게 부담스러워요. 중고 제품을 사는게 아니라 제품을 대여하고 싶어요."

2. 주요 기능 설명

웹서비스의 유용성, 편의성 및 시각화의 실용성에 대한 설명

• 주요 기능 (주된 활용성) 및 서브 기능 소개
  1. 카테고리별 조회
  2. 검색 기능
  3. 빌려주기/빌리기 게시물 내 거래 프로세스
  4. 채팅 기능
     
• 프로젝트만의 차별점, 기대 효과
  1. 사용자간의 자유로운 거래가 가능하다.

3. 서비스 구성도

서비스 구조도

WORKFLOW (figjam)

와이어프레임

UI 작성 (figma)

API 명세

• 유저 관련

• 공지사항 및 채팅

• 신고 관련

• 카테고리 관련

• 게시물 관련

* 페이지별 상세 설명

1. 메인화면, 홈 화면, 카테고리별 보기, 검색

기능	설명
메인화면	빌리지가 제공하는 서비스를 설명합니다.
홈	카테고리 별 최신상품을 조회합니다.
카테고리 별 조회	pagination을 통해 카테고리별 게시글들을 조회합니다.
검색	등록된 게시물 기준 인기있는 해시태그를 제공하고, 해시태그 기반으로 검색 결과를 제공합니다.

시연영상

메인화면	홈 화면
카테고리 별 조회	검색 화면

2. 사용자 회원가입, 로그인

기능	설명
회원가입	회원정보를 입력하여 가입할 수 있습니다.
로그인	이메일과 비밀번호를 통해 로그인할 수 있습니다.

시연영상

회원가입, 로그인

2-1. 비로그인 유저

기능	설명
비로그인 유저	로그인 권한이 필요할 경우 로그인 화면으로 이동합니다.

시연영상

비로그인 유저 플로우

3. 게시글 작성/조회/수정/삭제

기능	설명
게시글 작성/조회	사용자는 빌려주기 게시물, 빌리기 게시물을 작성할 수 있습니다. 원하는 이미지를 등록한 후 에디터를 이용해서 상세설명을 작성할 수 있고, 해시태그를 등록할 수 있습니다.
게시글 수정/삭제	작성자에 한해서 수정/삭제 버튼이 보이고, 거래 전일때만 게시글을 수정하거나 삭제할 수 있습니다 .

시연영상

게시글 작성/조회	게시글 수정
게시글 삭제	거래중 상태에선 수정/삭제 불가

3-1. 게시글 내 거래 프로세스

기능	설명
거래하기	채팅을 통해 전달받은 대여인/차용인의 이메일을 적어 대여인/차용인, 대여기간을 등록할 수 있습니다.
수령완료	차용인이 대여물품을 수령하면 누르는 버튼입니다. 수령완료 버튼을 눌러야지만 대여인이 반납완료(거래종료)처리를 할 수 있습니다.
반납완료(거래종료)	대여인이 대여해준 물품을 다시 받은 후 거래종료 상태를 만드는 버튼입니다. 차용인이 수령완료 처리를 하지 않으면 반납을 할 수 없습니다.

시연영상

빌려주기

거래하기	수령완료
반납완료

빌리기

거래하기	수령완료
반납완료

4. 채팅

기능	설명
채팅하기/채팅방	다른 사람과 실시간 대화가 가능하며, room을 구현하여 사용자별 1대1 채팅할 수 있습니다. 대여 물품 상세페이지에서 채팅하기 버튼을 통해 접근하여 최초 채팅방을 생성하며, 이후 메인 화면 우측 하단의 채팅 아이콘으로 접근할 수도 있습니다.

시연영상

채팅

5. 마이 페이지

기능	설명
개인정보 수정	회원 정보를 수정합니다.
비밀번호 변경/탈퇴	비밀번호를 수정하고, 탈퇴가 가능합니다.
내 활동 조회	사용자가 올린 게시물(빌려주기/빌리기)을 확인할 수 있습니다.
내 거래 조회	사용자가 대여인/차용인으로 등록되어 있는 글들을 거래 현황에 따라 볼 수 있습니다.

시연영상

개인정보 수정	비밀번호 변경/탈퇴
내 활동 조회	내 거래 조회

6. 공지사항

기능	설명
공지사항	공지사항 조회가 가능합니다.

시연영상

공지사항 조회

7. 관리자

기능	설명
회원 관리	회원 조회, 신고내역 확인, 회원 정지가 가능합니다.
게시물 관리	게시한 모든 글의 조회, 삭제가 가능합니다.
카테고리 관리	카테고리 추가, 수정, 삭제가 가능합니다.
공지사항 관리	공지사항 글 작성, 삭제, 조회가 가능합니다.

시연영상

공지사항 작성, 조회	신고내역 삭제 가능
신고내역 확인 후 계정 정지

8. 404

기능	설명
404 Not found	해당 서버 내에서 파일을 찾지 못했을 때 나오는 페이지입니다.

시연화면

404 Not Found

4. 프로젝트 팀원 역할 분담

이름	담당 업무
🐳 한대근	팀장/프론트엔드 개발
🐰 권민영	프론트엔드 개발
🔆 오승연	프론트엔드 개발
❄️ 권규리	프론트엔드 개발
🔥 손병진	백엔드 개발
🔨 유의석	백엔드 개발

멤버별 responsibility

1. 한대근: 팀장/프론트엔드 담당

• 기획 단계: UI 디자인, workflow 작성, Basic/Advanced 기능 구체화
• 개발 단계: 프로젝트 초기셋팅, SubMain, Mypage, SearchPage, 로그인유지 구현
• 수정 단계: 기획/스크럼 진행, 팀 Task 관리(칸반보드), 발표준비

2. 권규리: 프론트엔드 담당

• 기획 단계: figma ui 디자인, workflow 작성, 대여 프로세스 구체화
• 개발 단계: socket.io 채팅 기능 구현, nav, footer ui 구현
• 수정 단계: socket.io 채팅 에러 수정 및 추가 기능 도입 및 진행

3. 권민영: 프론트엔드 담당

• 기획 단계: figma UI 디자인, workflow 작성
• 개발 단계: 게시글 작성, 조회, 수정, 삭제 구현/빌리지 로고 구현
• 수정 단계: 게시글 작성 시 에디터 적용

4. 오승연: 프론트엔드 담당

• 기획 단계: UI 디자인, workflow 작성
• 개발 단계: 메인화면 UI, 카테고리별 게시물 목록, 관리자 페이지, 로그인/회원가입 UI, 이미지 디자인
• 수정 단계: 발표 자료 준비, 채팅창 CSS 수정 작업

5. 손병진: 백엔드 담당

• 기획 단계: 디비 구조 정리 및 역할 분담
• 개발 단계: 유저, 채팅 관련 작업 진행
• 수정 단계: 가상머신, 클라우드타입을 활용한 배포

6. 유의석: 백엔드 담당

• 기획 단계: 디비 구조 정리 및 역할 분담
• 개발 단계: 상품, 배포 관련 작업 진행
• 수정 단계: ec2, ssl 인증을 활용한 https 배포

5. 제작 환경

1. SCRUM

• 평일 13시 스크럼 진행
• 필요시 수시로 프론트/백엔드/전체 스크럼 잡아서 진행

2. 커밋메시지 컨벤션

• git commit -m "kind : Content"
• feat : 새로운 기능 추가
• fix : 버그 수정 (이슈 존재 시 #number)
• docs : README 수정 시 사용,
• test : 테스트 코드 관련,
• update : 빌드 업무 수정, 패키지 매니저 수정

6. 실행 방법

- 프론트엔드:

실행방법(Execution method)

```
git clone https://kdt-gitlab.elice.io/sw_track/class_03/web_project_2/team14/initialization.git
yarn install
yarn start
```

.env 설정(.env setting)

```
MONGODB_URL = {YOUR_MONGODB_URL}
PORT = {PORT}

REACT_APP_KAKAO_MAP_KEY = {YOUR_KAKAO_MAP_KEY}
REACT_APP_AWS_EC2 = {AWS_EC2}
```

- 백엔드:

1. mongodb 실행
2. yarn start (혹은 npm start)

7. 버전

• 0.0.3