팜 컴어스 👩‍🌾🥕

온라인 농산물 직거래 플랫폼

카테고리

Application	Domain	Language	Framework
✅ Desktop Web	🔲 AI	✅ JavaScript	🔲 Vue.js
✅ Mobile Web	🔲 Big Data	🔲 TypeScript	✅ React
✅ Responsive Web	🔲 Blockchain	🔲 C/C++	🔲 Angular
🔲 Android App	🔲 IoT	🔲 C#	🔲 Node.js
🔲 iOS App	🔲 AR/VR/Metaverse	🔲 Python	🔲 Flask/Django
🔲 Desktop App	🔲 Game	✅ Java	✅ Spring/Springboot
		🔲 Kotlin

프로젝트 소개

✏ 프로젝트명

• 팜컴어스

✨ 서비스 특징

• 웹/모바일(웹 기술)을 활용한 온라인 농산물 직거래 라이브 커머스 서비스

👤 서비스 대상

• 농산물 생산자, 소비자

☝🏻 주요 기능

• 회원 관리
• 스마트 스토어
• 농산물 라이브 직거래
• 라이브 채팅
• 농산물 상품 결제

👑 주요 기술

• WebRTC
• WebSocket
• JWT Authentication
• OAuth2.0 기반 회원 인증
• REST API

🧵 기술 스택

• 프론트엔드 : React.js 18.2.0 / Redux 8.0.5 / SASS 1.57.1 / JavaScript
  
• 백엔드 : Java 11 / JPA 2.7.6 / Spring Boot 2.7.7
  
• DB : MySQL 8.0.31 / S3
  
• Infra : EC2 Ubuntu 20.04 / Docker 23.0.0 / Nginx 1.18.0 / Jenkins

🎠 배포 환경

• URL : https://i8b103.p.ssafy.io/
• 테스트 계정 : ID - myfarm, PW - asd12345!
• 포팅 메뉴얼

🗓 진행 일정

• 23.01.02 ~ 23.02.17 (총 7주)

팀 소개 - 일이삼사오🎉

김지희	차현경	이지은	이정현	김성중	김태영
팀장, BE, 회원 인증 개발, 회원 및 스토어 API 담당	BE 리더, 상품 및 라이브 API, CI/CD, 인프라, 배포 담당	팀원, BE, 결제 시스템 서버 및 클라이언트 개발 담당	FE 리더, 디자인, 와이어프레임 설계, WebRTC 개발	FE, 기획 및 화면 설계, 개발	FE, 화면 설계, UCC 담당

프로젝트 상세 설명

🥕 팜컴어스는 농가와 소비자를 바로 이어 유통 과정에서 발생하는 마진과 상품 손상을 방지하여
🥕 소비자에게 합리적인 가격에 신선한 작물을 제공해주는 라이브 플랫폼입니다.

서비스 설명/주요 기능

1. 라이브 커머스 중 목표 판매 재고를 실시간으로 확인 (생동감 있는 라이브 판매 시각화)
2. 가입부터 결제까지 매끄럽게 이어지는 UX 흐름, 판매자 입장을 고려한 쉬운 라이브 등록, 소비자 입장을 고려한 간편한 상품 구매
3. 카카오 로그인 API, 카카오 결제 API 사용으로 손쉬운 로그인 및 결제 가능

기획/설계

🛠 아키텍처

💾 ERD

🎨 와이어 프레임

⛓ 파일 구조

• Frontend

├── App.css
├── App.js
├── components
│   ├── broadcast
│   │   ├── ChatItem.js
│   │   ├── ChatList.js
│   │   ├── LiveChat.js
│   │   ├── LiveHeader.js
│   │   └── LiveInfo.js
│   ├── common
│   │   ├── Badge.js
│   │   ├── Button.js
│   │   ├── Card.js
│   │   ├── CardSlider.js
│   │   ├── Header.js
│   │   ├── ImageButton.js
│   │   ├── ImageButtonList.js
│   │   ├── ImageSlider.js
│   │   ├── Input.js
│   │   ├── MiniCard.js
│   │   ├── Navigation.js
│   │   ├── SideMenu.js
│   │   └── SubTab.js
│   ├── create
│   │   ├── MyStoreImageForm.js
│   │   └── MyStoreInfoForm.js
│   ├── live
│   │   ├── LiveInfo.js
│   │   ├── LiveItem.js
│   │   └── LiveList.js
│   ├── mypage
│   │   ├── MyPageHeader.js
│   │   ├── MyReceiptItem.js
│   │   ├── MyReceiptList.js
│   │   ├── StoreLikeItem.js
│   │   └── StoreLikeList.js
│   ├── mystore
│   │   ├── MyStoreHeader.js
│   │   ├── MyStoreLiveItem.js
│   │   ├── MyStoreLiveList.js
│   │   ├── MyStoreNoData.js
│   │   ├── MyStoreProductItem.js
│   │   ├── MyStoreProductList.js
│   │   ├── MyStoreReceiptItem.js
│   │   └── MyStoreReceiptList.js
│   ├── product
│   │   ├── Category.js
│   │   ├── ProductItem.js
│   │   └── ProductList.js
│   └── store
│       ├── StoreHeader.js
│       ├── StoreLiveItem.js
│       ├── StoreLiveList.js
│       ├── StoreNoData.js
│       ├── StoreProductItem.js
│       └── StoreProductList.js
├── index.css
├── index.js
├── pages
│   ├── BroadCast.js
│   ├── Cart.js
│   ├── Home.js
│   ├── Login.js
│   ├── Signup.js
│   ├── create
│   │   ├── CreateLive.js
│   │   └── CreateProduct.js
│   ├── live
│   │   ├── Live.js
│   │   ├── RunningLive.js
│   │   └── SheduledLive.js
│   ├── mypage
│   │   ├── MyPageInfo.js
│   │   ├── MyReceipt.js
│   │   ├── MyReceiptDetail.js
│   │   ├── Mypage.js
│   │   └── StoreLike.js
│   ├── mystore
│   │   ├── MyStore.js
│   │   ├── MyStoreAddLive.js
│   │   ├── MyStoreAddProduct.js
│   │   ├── MyStoreInfo.js
│   │   ├── MyStoreLive.js
│   │   ├── MyStoreProducts.js
│   │   ├── MyStoreReceipt.js
│   │   └── MyStoreReceiptDetail.js
│   ├── product
│   │   ├── Payment.js
│   │   ├── ProductDetail.js
│   │   └── Products.js
│   └── store
│       ├── Store.js
│       ├── StoreLive.js
│       └── StoreProducts.js

• Backend

C:.
├─java
│  └─com
│      └─ssafy
│          └─farmcu
│              ├─api
│              │  ├─controller
│              │  │  ├─live
│              │  │  ├─member
│              │  │  ├─order
│              │  │  └─store
│              │  ├─dto
│              │  │  ├─live
│              │  │  ├─member
│              │  │  ├─order
│              │  │  └─store
│              │  ├─entity
│              │  │  ├─live
│              │  │  ├─member
│              │  │  ├─order
│              │  │  │  └─pay
│              │  │  └─store
│              │  ├─repository
│              │  └─service
│              │      ├─image
│              │      ├─kakao
│              │      ├─live
│              │      ├─member
│              │      ├─order
│              │      └─store
│              ├─config
│              │  └─properties
│              ├─exception
│              ├─oauth
│              │  ├─dto
│              │  ├─filter
│              │  ├─handler
│              │  ├─Info
│              │  ├─repository
│              │  ├─service
│              │  └─token
│              └─utils
└─resources

서비스 구현 내용

🎁 메인 페이지

📱 마이 페이지

🥗 마이 스토어