내가 먹은 맛있는 한 끼를 다른 사람에게도 나눌 수 있는
지도 기반 음식 기부 플랫폼 Meal To Meal 입니다
- 유저는 지도에서 가게명 또는 주소, 카테고리로 가게를 검색할 수 있어요
- 기부자는 원하는 메뉴를 고르고 장바구니에 담아 기부할 수 있어요
- 기부를 받는 사람은 음식을 주문하고 가게에 가서 내역을 보여주면 식사를 할 수 있어요
- 기부를 받는 사람은 음식을 먹고나서 리뷰를 작성하여 감사를 표현할 수 있어요
- 유저는 내가 기부한 음식 내역과, 작성한 리뷰를 모아볼 수 있어요
- 사장님이라면 음식점을 등록하고 기부/주문 내역을 확인할 수 있어요
- 회원 가입, 로그인, 로그아웃, 회원탈퇴
- 이메일 중복 체크, 닉네임 중복 체크
- 회원 정보 조회, 회원 정보 수정
- 휴대폰 인증
- 이메일 인증
- 카카오 로그인
- 유저 토큰 인증
- 메뉴 등록, 조회, 삭제
- 리뷰 등록, 조회
- 가게 등록, 조회, 수정, 삭제
- 아임포트 결제 내역 생성
- 기부하기
- 결제 API 호출 성공 시 기부 내역 생성
- 가게의 메뉴별 기부 주문 수량 증가
- 유저의 기부 횟수를 메뉴 단위로 업데이트
- 유저의 총 기부액을 업데이트
- 기부 내역 조회
- 주문 내역 생성
- 휴대폰 인증된 사용자만 주문 가능
- 한 번에 한 메뉴만 주문 가능
- 하루에 한 번만 주문 가능
- 실방문 후 리뷰를 작성해야 다음 주문 가능
- 가게의 사장님은 해당 가게 메뉴 주문 불가
- 주문 성공 시 해당 메뉴의 기부된 수량 차감
- 주문 내역 조회
- 주문 내역은 하나씩만 조회 가능
- 키워드로 가게 검색
Works
SR
- RESTful API 문서 작성
- 와이어프레임
- 워크 플로우 작성
- DB Schema 작성
- System Architecture 작성
Frontend
- Google Maps API
- 지도를 화면에 랜더링
- 가게 카테고리에 맞게 지도에 마커 띄우기
- 카카오 소셜 로그인
- 클라이언트에서 토큰 받아오고 리다이렉트 시키는 기능 구현
- StoreInfo 가게 정보 페이지
- 페이지 구성 및 css 반응형
- 가게 정보 조회 기능 구현
- 리뷰 내역 조회 기능 구현
- ShareCart 나눔카트 페이지
- 페이지 구성 및 css 반응형
- 나눔카트 정보 조회 기능 구현
- Policy 이용약관 모달
- 페이지 구성 및 css 반응형
- Withdrawal 회원탈퇴 페이지
- 페이지 구성 및 css 반응형
- 회원탈퇴 기능 구현
- ReviewUploadModal 리뷰 등록 모달
- 페이지 구성 및 css 반응형
- 리뷰 등록 기능 구현
- MyPage 마이페이지
- 리뷰 내역 조회 기능 구현
- 휴대폰 인증 모달 구성 및 css 반응형
- 휴대폰 인증 등록 기능 구현
- 휴대폰 인증 상태 유지
- Management 사장님 가게 페이지
- 사장님 가게 등록 기능 구현
- 사장님 가게 수정 기능 구현
- 사장님 가게 삭제 기능 구현
- UserMeal 페이지
- css 반응형
- 주문내역이 없을 시의 조회 기능 구현
- MyDonation 페이지
- 페이지 구성 및 css 반응형
- 기부 내역 조회 기능 구현
Works
SR
- RESTful API 문서 작성
- 와이어프레임
- 워크 플로우 작성
- DB Schema 작성
- System Architecture 작성
Server
- 배포
- AWS Route53 과 CloudFront 를 이용한 Https 배포 환경 작성
- EC2를 이용한 서버 배포
- S3로 이용한 정적 웹사이트 빌드 및 배포
- S3로 이용한 이미지 업로드 기능 구현
- RDS로 DB 구축
- 결제 시스템
- 결제 페이지 데이터 전송
- 결제 정보 검증 및 검증 성공, 실패시 DB 저장되는 로직 구현
- Review 컨트롤러
- 리뷰 등록 구현
- Menu 컨트롤러
- 메뉴 등록 구현
- 메뉴 삭제 구현
- Store 컨트롤러
- 가게 신규등록 및 등록시 메뉴까지 같이 추가하게 변경
- 가게 정보 수정 구현 및 가게 정보 수정시 가게정보와 메뉴정보도 같이 수정할수있게 구현
- 가게 삭제 구현
- 카카오 소셜로그인
- 카카오 소셜로그인 회원가입 구현
- 정보 제공동의에서 이메일을 제공하지 않을때의 일반회원과 구분하여 로그인 하는 기능 구현
- Seed 작성
- 유저 Seed 작성
- 가게 Seed 작성
- 메뉴 Seed 작성
- 가게 Review Seed 작성
Works
SR
- RESTful API 문서 작성
- 와이어프레임
- 워크 플로우 작성
- DB Schema 작성
- System Architecture 작성
Backend
- 구조 작성
- 라우터, 컨트롤러 구성
- sequelizerc 설정, migrations, models, seeders 구성, associations 설정
- auth 컨트롤러
- jwt를 사용한 토큰 검증
- kakao oauth 소셜 로그인
- twilio를 사용한 휴대폰 인증
- 카트 컨트롤러
- 카트 등록
- 카트 조회
- 메뉴 컨트롤러
- 메뉴 조회
- 리뷰 컨트롤러
- 리뷰 등록
- 리뷰 조회
- 서치 컨트롤러
- 지도 서치바에서 가게명, 주소, 카테고리로 검색 기능
- 스토어 컨트롤러
- 가게 조회
- 사장님 페이지 가게 조회
- 사장님 페이지 가게 수정 시 메뉴 삭제
- 유저 컨트롤러
- 회원가입, 로그인, 로그아웃, 회원탈퇴
- 마이 페이지
- 이메일, 닉네임 중복 검사
- 비밀번호 수정, 닉네임 수정
- 유저밀(예약내역) 컨트롤러
- 유저밀 등록
- 유저밀 조회
- 이벤트 스케줄러
- 유저 today_used 컬럼 자정에 초기화되게 이벤트 스케줄러 등록
FrontEnd
- React-S3로 클라이언트 사이드에서 s3 버킷에 이미지 업로드
- 이미지 조회
- 이미지 삭제
Works
SR
- RESTful API 문서 작성
- 와이어프레임
- 워크 플로우 작성
- DB Schema 작성
Frontend
- Google Maps API
- WindowInfo 디자인 및 기능 구현
- 등록된 가게 좌표를 이용한 마커 렌더
- 마커 클릭 시 zoom 및 화면 이동
- Alert
- 디자인 및 표시될 메시지를 변경시켜 사용할 수 있도록 구현
- 상황에 맞는 Alert 애니메이션 변경(성공, 실패, 자신의 가게에서 먹기 버튼을 누를 경우, 결제 감사)
- 로그인 및 회원가입
- 로그인, 회원가입 모달 디자인 및 반응형 레이아웃
- 로그인, 회원가입 유효성 검사 구현
- 로그인, 회원가입 서버 연결
- 이미지 업로드
- 이미지 업로드 시 미리보기 구현
- SharaCart 나눔카트 페이지
- 페이지 디자인 및 반응형 레이아웃
- 장바구니 상품 추가 및 수량 조절, 삭제 구현
- 장바구니가 비어 있을 때 애니메이션 추가
- AddStore 가게 등록 페이지
- 페이지 디자인 및 반응형 레이아웃
- 카카오 API를 이용한 주소 검색기능
- FIxStore 가게 수정 페이지
- 페이지 디자인 및 반응형 레이아웃
- 카카오 API를 이용한 주소 검색 기능
- Landing 페이지
- 페이지 디자인 및 반응형 레이아웃
- Management 사장님 페이지
- 페이지 디자인 및 반응형 레이아웃
- 가게 정보 서버 연결
- Maps 지도 페이지
- 가게 검색 Input 기능 구현 및 디자인
- 가게 검색 Sidebar 디자인
- 가게 검색 기능 구현
- 검색된 가게 클릭 시 해당 가게로 화면 이동 및 zoom
- MyDonation 나의 기부내역 페이지
- 페이지 디자인 및 반응형 레이아웃
- 기부 현황, 내 기부내역 서버 연결
- MyPage 내 정보 페이지
- 페이지 디자인 및 반응형 레이아웃
- 회원 정보 수정 유효성 검사 구현
- 회원 정보 수정 토글 디자인 및 기능 구현
- NotFound 404 페이지
- 페이지 디자인 및 반응형 레이아웃
- StoreInfo 가게 상세정보 페이지
- 페이지 디자인 및 반응형 레이아웃
- 가게 정보 서버 연결
- UserMeal 페이지
- 페이지 디자인 및 반응형 레이아웃
- 예약된 가게 정보와 주문한 유저 정보 서버 연결
- 음식점 리뷰 모달 창 디자인 및 반응형 레이아웃
- Withdrawal 회원 탈퇴 페이지
- 페이지 디자인 및 반응형 레이아웃
- Footer
- 디자인 및 반응형 레이아웃
- Header Sidebar
- 로그인 상황에 따른 Sidebar 구현 및 디자인
- Header 디자인 및 반응형 레이아웃
- Loading
- 페이지 디자인 및 반응형 레이아웃
- 결제 시스템
- 결제 시스템 데이터 전송
- 모바일 내비게이션
- 디자인 및 모바일 버전일 때에만 렌딩
- 스와이프 기능 구현
- 디자인 요소
- 버튼 및 Input 반응 이벤트 구현
- 검색 혹은 렌딩된 요소의 상태(ex: 검색 결과가 없을 때)에 따른 애니메이션 컴포넌트 구현
- 팀 로고 및 프로젝트 로고 디자인