카페에 꼭 필요한 서비스 ! 메뉴 주문 및 카페 운영 관리 서비스 Cafe-in입니다. 🐰

Cafe-in의 프로젝트 진행 방식 및 과정은 Wiki 페이지에서 확인할 수 있습니다.

💛 Cafe-in 사용 해보기

• 시작 페이지의 고양이 발 🐾을 클릭하면 관리자 로그인 페이지로 이동합니다. 로그인 비밀번호는 0716입니다.

• 모두가 접속할 수 있는 서비스이기 때문에, 불건전한 테스트는 삼가해주시길 바랍니다. 🥰

강지윤 FE	안유진 FE	오소민 FE

💡 프로젝트 주제 : 메뉴 주문 및 카페 운영 관리 서비스

🏃🏻‍♂️ 프로젝트 구현 기간 : 2023.07.16 ~ 2023.08.22

🖼 디자인 시안 : Cafe-in Figma

• 카테고리 별로 메뉴를 조회할 수 있고, 특정 카테고리는 메뉴 선택 시 옵션을 추가할 수 있습니다.
• 메뉴별 옵션 및 수량을 선택할 수 있습니다.
• 유저는 결제 시에, 포인트 적립과 포인트 사용이 가능합니다.

• 서비스 관리자는 카테고리, 메뉴를 추가 및 수정, 삭제할 수 있습니다.
• 카테고리 별 옵션 추가 가능 여부, 재고 상태를 관리할 수 있습니다.

• 서비스 관리자는 카페 운영 상황에 따라 대기 가능과 대기 마감을 선택할 수 있습니다.
• 대기 가능 시, 사용자는 대기 신청을 할 수 있습니다.
• 서비스 관리자는 대기 상황을 보며 대기 취소, 착석완료를 설정할 수 있고 대기 명단을 확인할 수 있습니다.

1. 메뉴 조회 및 메뉴 주문
2. 포인트 적립 및 포인트 사용
3. 대기 신청

1. 메뉴 및 카테고리 관리
2. 대기 관리
3. 주문 관리
4. 매출 내역 조회
5. 포인트 내역 조회
6. 테마 및 색상 설정

▶ 시연 영상 보러가기

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"
	}