Skip to content

Food-Bridge/Front-end

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

목차

  1. 프로젝트 소개
  2. 개발 기간 및 개발 환경
  3. 주요 기능
  4. 기술 특이점
  5. 설계 문서
  6. 협업 및 컨벤션

1. 프로젝트 소개

푸드브릿지는 전국의 배달음식점과 소비자를 연결하는 웹사이트입니다.
기존의 배달 앱에 커뮤니티 기능을 추가하여 사용자 상호작용 중심의 배달 서비스 플랫폼을 만들었습니다.


👩‍🔧 팀원 소개

정은선 프로필 신지수 프로필
정은선 신지수

🤴 역할

역할


2. 개발 기간 및 개발 환경

📆개발 기간

1차 개발

24. 01. 21 ~ 24. 04. 05
● 기획 및 피그마 활용 디자인
● 페이지 구현 및 axios 활용 서버 연결

2차 개발

24. 04. 06 ~ 24. 04. 22
● 배포 후 서비스 운영
● 사용자 피드백 반영
● Lighthouse 점수 최적화


📋 기술 스택

- React
- ReactRouter
- JavaScript
- Axios

- Redux

- scss
- figma
- ESLint
- Prettier

3. 주요 기능

1. 메인 페이지

메인 페이지에서는 사이트의 전반적인 정보를 알 수 있습니다. 이벤트 및 음식점 리스트, 커뮤니티, 할인 쿠폰 페이지 등으로 이동이 가능합니다.

2. 회원가입/로그인 페이지

사이트의 주요 기능 이용을 위해 회원가입 및 로그인이 필요합니다.
자체 로그인 외에도 카카오, 구글 소셜 로그인이 가능합니다.

3. 배달 / 포장 페이지

배달 / 포장 페이지에서는 카테고리별로 음식점 목록을 볼 수 있습니다.
음식점 이름, 별점, 최소주문금액 및 배달팁 등 기본적인 음식점 정보를 제공합니다.

4. 음식점 상세 / 메뉴 옵션 페이지

음식점 상세 페이지에서는 음식점의 세부 정보와 메뉴를 볼 수 있고 각 메뉴 버튼을 누르면 옵션 페이지로 넘어가 장바구니에 메뉴를 추가할 수 있습니다.

5. 장바구니 / 결제 페이지

장바구니 페이지에서는 음식점에서 담은 메뉴의 추가, 삭제 및 수량 변경, 배달 / 포장 선택이 가능합니다.
주문하기 버튼을 누르면 결제페이지로 넘어가 주소 입력, 요청사항, 할인쿠폰 선택 후 최종 결제가 됩니다.

6. 커뮤니티 페이지

커뮤니티 페이지에서는 주간 인기 글, 일간 인기 글, 최신 글을 각각 2개씩 모아볼 수 있으며 글쓰기 페이지로 넘어갈 수 있습니다.
각 게시물을 누르면 해당 글 전체를 확인할 수 있습니다.

7. 사용자 프로필 페이지

사용자 프로필 페이지에서는 프로필 사진 및 닉네임 변경, 로그아웃이 가능하며 마이데이터를 모아볼 수 있습니다.

8. 주문내역 / 리뷰 / 찜 페이지

주문내역 페이지에서는 각 주문의 상세 내용을 확인하고 주문 3일 내에 리뷰를 작성할 수 있습니다.
리뷰 페이지에서는 내가 각 음식점에 작성한 리뷰를 모아볼 수 있으며 내가 쓴 리뷰 별점의 평균을 확인할 수 있습니다.
찜 페이지에서는 내가 하트를 누른 음식점을 모아볼 수 있습니다.

9. 검색 페이지

검색 페이지에서는 인기 검색어 순위를 확인할 수 있고 검색 시 관련된 음식점 목록을 볼 수 있습니다.


4. 기술 특이점

사용자 친화적인 사이트를 만들기 위해 성능 개선표를 작성해 페이지별 성능과 접근성 등을 개선했습니다

5. 설계 문서

🎨 Figma


💻 서비스 아키텍처


6. 협업 및 컨벤션

🛠 협업 도구

- Notion
- git
- Discord
- Figma

📢 커밋 컨벤션

Type

태그 이름 설명
Feat 새로운 기능 구현
Add Feat 이외의 부수적인 코드 추가, 라이브러리 추가
Fix 버그, 오류 수정
Hotfix issue나 QA에서 급한 버그 수정
Design CSS 및 레이아웃 작업
Refactor 프로덕션 코드 리팩토링(기능은 바꾸지 않되, 코드의 구조를 변경)
Style 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
Chore 프로덕션 코드 외 빌드 부분 혹은 패키지 매니저 수정사항
Test 테스트 코드 추가, 테스트 코드 리팩토링
Docs 문서 수정
Merge 다른 브랜치를 merge 할 때 사용

Title

  • type: lowercase
  • format: type: title (#issueNumber) (ex. feat: 게시글 삭제 (#10))
  • 제목은 50자 이내
  • 변경사항이 “무엇”인지 명확히 작성
  • 끝에 마침표 금지

Body (Optional)

  • 제목과 본문의 분리를 위해 한 줄 띄기
  • “어떻게”보다 “무엇을”, “왜”에 맞춰 작성
    • 무엇을 추가/변경했는지와 그 이유를 작성
  • 구체적인 내용이 없다면 생략 가능
  • 여러 줄의 메시지를 작성할 땐 “-”로 구분
  • 한 줄은 72자 이내

⚙브랜치 전략

  • main
    • 현재 제일 좋은 모델로 합니다
    • 언제든지 즉시 배포(Production)가 가능한 상태여야 합니다.
  • dev
    • feat에서 온 레포를 이전 버전과 합치는 과정입니다.
    • 실행 가능한 코드 단위이어야 합니다.
    • dev 브랜치로 들어오는 모든 코드는 리뷰를 거치게 됩니다.
  • feat
    • 기능 단위로 개발을 진행하는 브랜치입니다.
    • 브랜치 네이밍은 아래 양식을 지켜주세요 🙏
      • feat {기능 이름}
      • ex) feat modeling, feat eda, feat preprocess

About

Food-Bridge(Front-end)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 5

Languages