Skip to content

Latest commit

 

History

History
187 lines (132 loc) · 8.47 KB

README.md

File metadata and controls

187 lines (132 loc) · 8.47 KB

🍋🍎 나도땀 (과일 체험 농장 예약 서비스)

과일을 땀 흘려 수확하고 농부가 되어보자!

풍년으로 인한 과일값 하락과 인력 부족으로 수확을 포기하는 농민들이 늘고 있다는 뉴스를 보고
직접 수확하고 과일을 가져가는 체험 상품을 판매한다면 농민과 소비자 모두 이득이지 않을까 생각했습니다.
또한 농장 체험을 예약하는 서비스가 부재하기 때문에 만든다면 수요가 있을 것이라 판단했습니다.
그렇게 '나도땀'은 농민과 소비자의 상생을 목표로 시작되었습니다!


✅ 시연 영상

회원가입, 로그인
홈화면 - 무한스크롤, 찜하기
일반 회원 - 예약&리뷰 CRUD
일반 회원 - 회원 정보 RUD
농장 회원 - 농장 정보 RUD
농장 회원 - 체험시간 CRUD
농장 회원 - 예약 CRUD & 후기 R

✅ 페이지별 화면
mainPage registerPage
메인 페이지 회원가입
loginPage detailPage(1)
로그인 상세페이지(1)
detailPage(2) paypage
상세페이지(2) 결제
memgerInfo memberReserve
일반회원 - 정보 관리 일반 회원 - 예약 관리
memberReview farmerAdd
일반 회원 - 후기 관리 농장주 - 농장 정보 등록
farmerInfo farmerTime
농장주 - 농장 정보 관리 농장주 - 체험시간표 관리
farmerReserve farmerReview
농장주 - 예약 관리 농장주 - 후기 조회

💡 배포링크

http://kdt-sw3-team01.elicecoding.com/


💡 시연 가능 계정

이메일 비밀번호
일반 회원 test@naver.com test123!
농장 회원 farmer1@gmail.com !!abcd1234

✅ 기술 스택

image

💡 프론트엔드

  1. Languges: Javascript, React
  2. 상태관리: ReactRedux Tookit
  3. Styles: styled components, react-icons, bootstrap
  4. 비동기 통신: axios
  5. 이외
    • 주소 입력: 다음 도로명 주소 API
    • 주소 표시: 카카오 지도 API
    • 로그인/ 회원가입/ 정보수정: React hook form
    • 리스트 날짜 필터링: moment
    • 달력: react-calendar, react-datepicker
    • 무한 스크롤: react-infinite-scroll-component, react-sticky-box
    • 모달 내용 관리: react-modal

💡 백엔드

  1. Languges: node js / express
  2. DB: MySQL
  3. aws
  4. amazon S3
  5. Sequelize

✅ 기획

💡 프론트엔드

  1. 와이어 프레임
  2. IA 정보구조도
  3. 요구사항 정의서

💡 백엔드

  1. ERD
    image
  2. API 명세서

✅ 서비스 주요 기능

1.홈 화면 - 무한 스크롤, 찜 기능

2. 예약 시스템

  • 날짜 / 타임 / 인원을 선택해 예약 가능
  • 결제 시, 서버와의 통신을 통해 예약 가능한 인원 확인 후 처리

3. 카카오 지도 API

  • 카카오 지도 API를 사용하여 입력받은 주소를 위도, 경도로 변경하고 지도로 표시

4. Multer & S3 이미지 업로드

  • 농장 정보와 이미지 정보를 formData로 한 번에 서버에 전달하여 API 호출 횟수를 줄임

5. 스켈레톤 UI

  • 로딩시 사용자의 이탈을 막기 위해 스켈레톤 UI 구현

6. 커서 기반의 페이지네이션

  • 필요한 데이터만 주고 받아 네트워크의 오버헤드 줄임으로서 대량의 데이터를 처리할때 빠른 속도와 좋은 성능을 갖도록 함

7. 모달 컴포넌트 재사용

  • 모든 페이지에서 하나의 모달 컴포넌트를 사용하며 redux tookit으로 모달의 열림 여부를 전역적으로 관리

8. 디자인 시스템

  • 전체적으로 css 라이브러리를 사용하지 않고, 공통적으로 사용되는 타이틀과 버튼 등을 공통 컴포넌트로 만들어서 디자인 시스템을 구현해서 사용

9. DB 작업을 쉽게 할 수 있도록 도와주는 ORM 라이브러리인 Sequelize사용

  • 관계가 맺어진 테이블 사이에서 sequelize의 함수를 사용하여 보다 적은 쿼리문을 사용하고 효율성 높임

10. Cron

  • Cron 스케줄러의 정규 표현식을 이용하여 매일 12시 5분 경에 배치작업으로 인한 모든 예약의 상태를 확인하여 체험 날짜가 지날 시 상태가 변경되도록 함

✅ 폴더 구조

  • 프론트: src/client 폴더
  • 백엔드: src/server 폴더
  • 실행: 프론트, 백 동시에 express로 실행

✅ 제작자

이름 담당 업무
송주혜 팀장 BE / 유저 API, 예약 API, 리뷰 API, 찜하기 API
곽지우 FE / 로그인, 회원가입, 농장 정보 CRUD, 농장예약조회
박지혜 FE / 예약상세페이지, 지도api, 농장의 체험시간표CRUD 및 리뷰 조회
정지훈 FE / 홈 화면, 헤더 검색, 찜하기 CRD
조가영 FE / 레이아웃(헤더, 푸터), 유저정보 RUD, 유저리뷰 CRUD, 유저예약 RD
허혜실 FE / 결제, 예약정보 RU, 결제정보 CU, 농장등록
최필성 BE / 유저 API, 농장 API, 체험시간테이블 API