MeerKat AI

0. 실행 방법

git clone https://github.com/your-repository-url/capstone-project-team7.git
cd capstone-project-team7/front
npm install
npm run dev

서비스 바로가기

---

1. 프로젝트 개요

MeerKat AI는 무인 점포의 CCTV 영상을 실시간으로 분석하여 절도, 방화, 쓰러짐 등 이상 행동을 감지하고 사용자에게 알림을 제공하는 웹 서비스입니다. 사용자는 이 서비스를 통해 원격으로 점포의 보안을 관리하고, 이상 상황 발생 시 신속하게 대응할 수 있습니다.

프로젝트 시연 영상

프로젝트 설명

---

2. 팀원 소개

• 팀장: [박유한] - [백엔드]
• 팀원: [김하경] - [백엔드]
• 팀원: [박세윤] - [프론트엔드]
• 팀원: [김승기] - [AI]

---

3. 주요 기능

• 실시간 이상 행동 감지 및 알림

  • CCTV 영상 스트림을 분석하여 전도, 파손, 방화, 흡연, 유기, 절도, 폭행 등 7가지 유형의 이상 행동을 실시간으로 감지합니다.
  • 이상 행동이 감지되면 사용자에게 이메일 알림을 전송하여 신속한 대응을 돕습니다.

• 감지 영상 관리

  • 이상 행동이 감지된 영상은 날짜 및 유형별로 분류되어 저장됩니다.
  • 사용자는 날짜 및 이상 행동 유형 필터링을 통해 원하는 영상을 쉽게 검색하고 조회할 수 있습니다.
  • 영상 목록에서 썸네일을 클릭하여 모달 창에서 영상을 즉시 재생할 수 있습니다.
  • 불필요한 영상은 선택하여 삭제할 수 있습니다.

• 캘린더 뷰

  • 월별 캘린더를 통해 특정 날짜에 어떤 유형의 이상 행동이 몇 건 발생했는지 한눈에 파악할 수 있습니다.

• CCTV 관리

  • 사용자는 자신의 CCTV를 등록하고 관리할 수 있습니다.
  • CCTV 이름, IP 주소, 스트림 경로 등의 정보를 등록하고 수정할 수 있으며, 실시간 스트리밍을 활성화/비활성화할 수 있습니다.

• 마이페이지

  • 사용자 정보(이름, 이메일)를 확인하고 수정할 수 있습니다.
  • 이메일 알림 수신 여부를 설정할 수 있습니다.
  • 할당된 저장 공간과 현재 사용량을 확인할 수 있습니다.
  • 비밀번호를 변경하거나 서비스를 탈퇴할 수 있습니다.

• 사용자 경험

  • 신규 사용자를 위한 온보딩 튜토리얼을 제공하여 서비스의 주요 기능을 쉽게 익힐 수 있도록 돕습니다.
  • 이용 가이드 페이지를 통해 서비스의 모든 기능을 상세하게 안내합니다.

---

4. 기술 스택 (프론트엔드)

• Core: React, Vite
• Routing: react-router-dom
• State Management: React Context
• Styling: Scss

---

5. 프로젝트 구조

src
├── apis/ # API 요청 함수 모음
│ ├── cctvApi.js
│ ├── client.js
│ ├── mainApi.js
│ └── userApi.js
├── assets/ # 정적 자원
│ ├── images/
│ └── styles/
├── components/ # 공통 컴포넌트
│ ├── authBox/
│ ├── commonButton/
│ ├── commonCheckbox/
│ ├── header/
│ ├── layout/
│ ├── menuItem/
│ ├── modal/
│ ├── sideMenu/
│ └── ...
├── pages/ # 페이지별 컴포넌트
│ ├── authPage/
│ ├── calendarPage/
│ ├── cctvPage/
│ ├── guidePage/
│ ├── mainPage/
│ ├── myPage/
│ └── tutorialPage/
├── stores/ # 전역 상태 관리
│ └── UserContext.jsx
├── App.jsx # 라우팅 설정
└── main.jsx # 애플리케이션 진입점