Safe Eye 프로젝트 프론트엔드

Safe Eye는 CCTV 카메라와 AI 기술을 활용하여 공간 안전을 강화하고자 만든 프로젝트입니다. 컴퓨터 비전 및 인공지능 기술을 통해 CCTV 영상을 실시간으로 분석하고, 잠재적인 위험 상황을 신속하게 감지하여 안전 관리자에게 알람을 전송합니다.

설치 방법

이 프로젝트를 로컬 환경에서 실행하려면 다음 단계를 따르세요:

1. 이 레포지토리를 클론합니다.
2. npm install을 실행하여 필요한 종속성을 설치합니다.
3. npm run dev를 실행하여 개발 서버를 시작합니다.

주요 기능

Safe Eye 프로젝트는 다음과 같은 주요 기능을 제공합니다:

• 실시간 이상 행동 감지: CCTV 영상에서 사람들의 행동을 실시간으로 분석하여 이상 행동을 감지합니다.
• 상세 분석 화면: 선택한 카메라 또는 영역의 고해상도 비디오 피드를 제공합니다.
• 경고 및 알람 설정: 경고 및 알람 수준에 따른 특정 작업을 설정할 수 있습니다.
• 통계 및 보고 기능: 기간별 이벤트에 대한 상세 보고서를 생성합니다.
• 사용자 관리 및 설정: 사용자 프로필 정보를 업데이트하고 알림 기본 설정을 변경할 수 있습니다.

기술 스택

이 프로젝트는 다음 기술을 사용하여 개발되었습니다:

• 프론트엔드: Next.js, Vercel, Tanstack/React-query, Tanstack/React-table, Tailwind CSS, Twin.macro with Styled components, Date-fns
• 백엔드: Django

라이선스

이 프로젝트는 MIT 라이선스 하에 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

주요 기능

Safe Eye 프로젝트는 다음과 같은 주요 기능을 제공할 예정입니다:

1. 실시간 이상 행동 감지

   • CCTV 영상에서 사람들의 행동을 실시간으로 분석하여 이상 행동을 감지합니다.
   • 폭력, 절도, 기물 파손 등 다양한 유형의 이상 행동을 인식할 수 있습니다.
   • 이상 행동 발생 시 즉각적인 알람을 발송하여 신속한 대응을 촉진합니다.

2. 상세 분석 화면

   • 선택한 카메라 또는 영역의 고해상도 비디오 피드를 제공합니다.
   • 감지된 이벤트 목록과 상세 정보를 확인할 수 있습니다.
   • 사용자 메모 및 설명을 추가할 수 있는 기능을 제공합니다.
   • 비디오 클립, 스크린샷, 이벤트 데이터를 내보낼 수 있습니다.

3. 경고 및 알람 설정

   • 경고 및 알람 수준에 따른 특정 작업을 설정할 수 있습니다.
   • 생성형 AI 모델을 활용하여 맥락에 적합한 경고 및 알람 메시지를 자동으로 생성합니다.
   • 사용자가 알림 메시지와 수신자 목록을 사용자 정의할 수 있습니다.
   • 정기적인 테스트와 훈련을 예약할 수 있는 기능을 제공합니다.

4. 통계 및 보고 기능

   • 기간별 이벤트에 대한 상세 보고서를 생성합니다.
   • 이벤트 데이터를 필터링하고 정렬할 수 있는 옵션을 제공합니다.
   • 통계 데이터, 이벤트 로그, 보고서를 내보낼 수 있습니다.
   • 자동으로 보고서를 생성하고 전달하도록 예약할 수 있습니다.

5. 사용자 관리 및 설정

   • 사용자 프로필 정보를 업데이트하고 알림 기본 설정을 변경할 수 있습니다.
   • 시스템 상태를 모니터링하고 진단할 수 있는 도구를 제공합니다.
   • 각 사용자의 상태에 따라 알람을 분류합니다.

기술 스택

다음과 같은 기술 스택을 활용하여 개발되고 있습니다:

• 프론트엔드:

• Next.js

  • React 기반의 Next.js 프레임워크를 사용하여 사용자 친화적인 인터페이스를 개발하고 있습니다.
  • 서버 사이드 렌더링과 서스펜스, 프리패칭 등을 이용하여 효과적으로 빠른 개발을 하며, seo를 신경 씁니다.

• Vercel

• Tanstack/React-query

• Tanstack/React-table

• Tailwind CSS

• Twin.macro with Styled components

• Date-fns

진행 상황

저희 팀은 현재까지 다음과 같은 작업을 진행했습니다:

1. 프로젝트 아키텍처 설계 및 기획

   • 프로젝트의 전반적인 아키텍처를 설계하고, 필요한 기능과 요구사항을 정의했습니다.
   • 각 구성 요소 간의 상호 작용과 데이터 흐름을 고려하여 시스템 구조를 설계했습니다.

2. 백엔드 앱 구조 설계 및 개발

   • Django 프레임워크를 사용하여 백엔드 애플리케이션의 기본 구조를 설계했습니다.
   • accounts, utils, media, alarm, notice 등의 앱을 생성하고, 각 앱의 모델과 API 엔드포인트를 개발했습니다.

3. 프론트엔드 개발 환경 구축 및 초기 화면 개발

   • Next.js 프레임워크를 사용하여 프론트엔드 개발 환경을 구축했습니다.
   • 초기 화면 디자인을 작성하고, 컴포넌트 기반으로 UI를 개발하기 시작했습니다.