카페에 꼭 필요한 서비스 ! 메뉴 주문 및 카페 운영 관리 서비스 Cafe-in입니다. 🐰
Cafe-in의 프로젝트 진행 방식 및 과정은 Wiki 페이지에서 확인할 수 있습니다.
-
시작 페이지의
고양이 발 🐾을 클릭하면 관리자 로그인 페이지로 이동합니다. 로그인 비밀번호는0716입니다. -
모두가 접속할 수 있는 서비스이기 때문에, 불건전한 테스트는 삼가해주시길 바랍니다. 🥰
| 강지윤 FE | 안유진 FE | 오소민 FE |
|---|---|---|
 |
 |
 |
💡 프로젝트 주제 : 메뉴 주문 및 카페 운영 관리 서비스
🏃🏻♂️ 프로젝트 구현 기간 : 2023.07.16 ~ 2023.08.22
🖼 디자인 시안 : Cafe-in Figma
- 카테고리 별로 메뉴를 조회할 수 있고, 특정 카테고리는 메뉴 선택 시 옵션을 추가할 수 있습니다.
- 메뉴별 옵션 및 수량을 선택할 수 있습니다.
- 유저는 결제 시에, 포인트 적립과 포인트 사용이 가능합니다.
- 서비스 관리자는 카테고리, 메뉴를 추가 및 수정, 삭제할 수 있습니다.
- 카테고리 별 옵션 추가 가능 여부, 재고 상태를 관리할 수 있습니다.
- 서비스 관리자는 카페 운영 상황에 따라 대기 가능과 대기 마감을 선택할 수 있습니다.
- 대기 가능 시, 사용자는 대기 신청을 할 수 있습니다.
- 서비스 관리자는 대기 상황을 보며 대기 취소, 착석완료를 설정할 수 있고 대기 명단을 확인할 수 있습니다.
- 메뉴 조회 및 메뉴 주문
- 포인트 적립 및 포인트 사용
- 대기 신청
- 메뉴 및 카테고리 관리
- 대기 관리
- 주문 관리
- 매출 내역 조회
- 포인트 내역 조회
- 테마 및 색상 설정
LightHouse 기준 모든 페이지의 접근성, 권장사항, 검색엔진 점수를 100점으로 맞추었고 성능은 90점 이상이 나오도록 개선하였습니다.
- 키보드로 접근 가능하게 설정하고 색상 대비 (일반 텍스트의 경우 4.5:1, 대형 텍스트의 경우 3:1)을 맞추었습니다.
aria-*를 활용하여 웹 접근성을 높였습니다.React.memo,useMemo,useCallback을 활용하여 메모이제이션 작업을 통해 불필요한 렌더링을 줄였습니다.- 이미지 요소에
alt속성을 추가하였습니다.
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.38",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.26",
"eslint": "^8.45.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^5.0.0",
"firebase": "^10.1.0",
"prettier": "^3.0.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"react-scripts": "5.0.1",
"recoil": "^0.7.7",
"styled-components": "^6.0.4",
"styled-reset": "^4.5.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
}