프론트엔드 기술 스택 및 구현 상세

1. 기술 스택

이 프로젝트의 프론트엔드 개발은 다음과 같은 핵심 기술 스택을 기반으로 합니다.

프레임워크: React.js (Next.js 기반)
- ```
use client
```
  지시어를 활용하여 클라이언트 컴포넌트 환경에서 풍부한 인터랙션 제공
언어: TypeScript
- 정적 타입 검사를 통해 코드의 안정성과 유지보수성 향상
상태 관리 및 데이터 페칭:
```
@tanstack/react-query
```
- 서버 상태 관리를 효율적으로 처리하고 데이터 페칭, 캐싱, 동기화를 간소화
- ```
useQuery
```
  를 이용한 데이터 조회 및
```
useMutation
```
  을 이용한 데이터 변경 로직 구현
UI 컴포넌트: Shadcn UI 기반 (Tailwind CSS, Radix UI)
- 모던하고 반응형 UI를 빠르고 효율적으로 구축
- Card, Dialog, Select, Table, Button, Input, Badge, Pagination 등 다양한 컴포넌트 활용
스타일링: Tailwind CSS
- 유틸리티-퍼스트 CSS 프레임워크로, 커스텀 스타일링을 신속하게 적용
토스트 알림:
```
sonner
```
- 사용자 작업 결과에 대한 직관적인 알림 메시지 제공
아이콘:
```
lucide-react
```
- 경량화된 아이콘 세트를 사용하여 시각적 요소 강화
쿠키 관리:
```
js-cookie
```
- 클라이언트 측에서
```
access_token
```
  과 같은 쿠키 데이터를 간편하게 관리

2. 핵심 로직 및 백엔드 연동 사용자 시나리오

현재 구현된 주요 기능과 백엔드 연동 로직은 다음과 같습니다.

2.1. CCTV 관리 대시보드 (페이지 로드 시)

CCTV 정보 목록 조회:
- ```
InfoTable
```
  컴포넌트 마운트 시
```
useQuery
```
  훅을 사용하여
```
GET /api/v1/cctvs
```
  엔드포인트로부터 전체 CCTV 목록 정보를 비동기적으로 가져옵니다.
- 가져온 데이터는 테이블 형태로 사용자에게 표시되며, 각 CCTV의 ID, 호실(병실) 이름, IP 주소, 환자 수 등을 포함합니다.
- 인증을 위해
```
js-cookie
```
  로 관리되는
```
access_token
```
  이
```
Authorization
```
  헤더에 포함됩니다.

2.2. 카메라 추가

모달 열기: 사용자가 "카메라 추가" 버튼을 클릭하면, 카메라 정보(이름, RTSP URL)를 입력할 수 있는 모달 다이얼로그가 열립니다.
카메라 정보 입력: 사용자는 입력 필드에 카메라 이름과 RTSP URL을 입력합니다.
카메라 추가 요청: "추가" 버튼 클릭 시,
```
useMutation
```
훅의
```
addCamera
```
함수가 호출됩니다.
- 입력된 이름과 RTSP URL을 포함하는
```
bodyData
```
  가
```
POST /api/v1/cctvs
```
  엔드포인트로 전송됩니다.
- 요청 성공 시,
```
queryClient.invalidateQueries
```
  를 통해
```
cctvInfoList
```
  쿼리를 무효화하여 최신 CCTV 목록을 다시 불러오고, 모달을 닫습니다.
- 요청 실패 시, 콘솔에 에러를 로깅합니다.

2.3. 카메라 삭제

삭제 요청: 각 CCTV 목록 항목 옆의 "삭제" 버튼 클릭 시, 해당 CCTV의 ID를 인자로
```
useMutation
```
훅의
```
deleteList
```
함수가 호출됩니다.
- 해당 CCTV의 ID를 포함하는
```
DELETE /api/v1/cctvs/{id}
```
  엔드포인트로 요청이 전송됩니다.
- 요청 성공 시,
```
cctvInfoList
```
  쿼리를 무효화하여 최신 목록을 반영합니다.
- 요청 실패 시, 콘솔에 에러를 로깅합니다.

2.4. 침대 인식 및 환자 할당

침대 인식 모달 열기: CCTV 목록에서 "상세보기" 버튼을 클릭하면, 해당 CCTV에 대한 침대 인식 모달이 열립니다. 이 모달에서는 침대 인식 결과 이미지와 인식된 침대 목록이 표시됩니다.
침대 인식 요청: 모달 내의 "침대 인식" 버튼 클릭 시,
```
useMutation
```
훅의
```
bedEmbedding
```
함수가 호출됩니다.
- 해당 CCTV의 ID를 포함하는
```
POST /api/v1/beds/{id}/auto
```
  엔드포인트로 요청이 전송됩니다.
- 요청 성공 시, 백엔드로부터 받은
```
detected_beds
```
  정보를 사용하여
```
patientNames
```
  상태(Map 객체)를 초기화하고 시각화 이미지를 표시합니다.
환자명 입력: 인식된 각 침대 옆에는 환자명을 입력할 수 있는 입력 필드가 제공됩니다. 사용자가 환자명을 입력하면
```
patientNames
```
상태가 실시간으로 업데이트됩니다.
환자 할당 요청: "저장" 버튼 클릭 시,
```
handlePatientAssign
```
함수가 호출됩니다.
- ```
patientNames
```
  Map에 저장된 각 침대 ID와 환자명에 대해
```
assignPatient
```
  mutation을 호출합니다.
- 중요: 환자명이 비어있는 경우 (
```
patient_name.trim() === ""
```
  ), 해당 침대에 대한 할당 요청은 건너뛰고 사용자에게 알림 메시지를 표시합니다.
- ```
assignPatient
```
  mutation은
```
POST /api/v1/beds/{bed_id}/assign?patient_name={patient_name}
```
  엔드포인트로 요청을 전송하며,
```
patient_name
```
  은 URL 쿼리 파라미터로 포함됩니다.
- 요청 성공 시,
```
toast.success
```
  를 통해 성공 알림을 표시하고,
```
cctvInfoList
```
  쿼리를 무효화하여 최신 정보를 반영하며, 침대 인식 모달을 닫습니다.
- 요청 실패 시, 콘솔에 에러를 로깅하고 사용자에게 "Failed to assign patient" 메시지를 표시합니다.
- 모든 할당 요청이 처리된 후,
```
patientNames
```
  상태를 초기화합니다.

3. 향후 기대 효과 및 방향

3.1. 사용자 시나리오 관점

실시간 스트리밍 인터랙션 강화: 현재는 단순히 스트림 URL을 제공하지만, 향후에는 대시보드 내에서 직접 CCTV 스트리밍을 실시간으로 시청하고, 특정 이벤트 발생 시 해당 스트림으로 빠르게 전환하는 기능을 제공할 수 있습니다.
세분화된 환자 관리: 환자 할당 외에 환자 정보(연령, 성별, 특이사항 등)를 CRUD할 수 있는 기능을 추가하여, 병상-환자 관리의 심층적인 시나리오를 지원할 수 있습니다.
CCTV 상세 제어: 카메라의 틸트/줌/팬(PTZ) 제어, 녹화 시작/중지, 스냅샷 촬영 등 CCTV 자체를 제어하는 기능을 프론트엔드에서 제공하여 관리 효율성을 극대화할 수 있습니다.
이벤트 기반 알림 및 시각화: 이상 상황 발생 시 실시간 알림을 제공하고, 대시보드에서 해당 이벤트를 직관적으로 시각화하여 운영자가 빠르게 상황을 인지하고 대응할 수 있도록 지원합니다.

3.2. 기능 중심 방향

CCTV 수정 기능 구현: 현재는 추가 및 삭제 기능만 있지만, 기존 CCTV의 이름이나 RTSP URL을 수정할 수 있는 기능을 추가하여 유연한 관리 환경을 제공합니다.
고급 검색 및 필터링: CCTV 목록이 많아질 경우를 대비하여, 호실, IP 주소, 상태 등에 따른 검색 및 필터링 기능을 추가하여 원하는 정보를 쉽게 찾을 수 있도록 합니다.
권한 및 사용자 관리: 사용자 역할(예: 관리자, 일반 사용자)에 따른 접근 권한을 세분화하고, 사용자 계정을 관리할 수 있는 기능을 추가하여 시스템 보안 및 운영 효율성을 높입니다.
데이터 시각화 대시보드: 인식된 환자 수, 이벤트 발생 빈도 등 데이터를 시각적으로 표현하는 대시보드를 구축하여 전체 시스템의 현황을 한눈에 파악할 수 있도록 합니다.
성능 최적화 및 확장성 고려: 대규모 데이터 처리 및 실시간 스트리밍 환경에서도 안정적인 성능을 유지할 수 있도록 코드 최적화 및 아키텍처 개선을 지속적으로 수행합니다.

1. 기술 스택

이 프로젝트의 프론트엔드 개발은 다음과 같은 핵심 기술 스택을 기반으로 합니다.

프레임워크: React.js (Next.js 기반)

```
use client
```
지시어를 활용하여 클라이언트 컴포넌트 환경에서 풍부한 인터랙션 제공

언어: TypeScript

정적 타입 검사를 통해 코드의 안정성과 유지보수성 향상

상태 관리 및 데이터 페칭:

@tanstack/react-query

서버 상태 관리를 효율적으로 처리하고 데이터 페칭, 캐싱, 동기화를 간소화
```
useQuery
```
를 이용한 데이터 조회 및
```
useMutation
```
을 이용한 데이터 변경 로직 구현

UI 컴포넌트: Shadcn UI 기반 (Tailwind CSS, Radix UI)

모던하고 반응형 UI를 빠르고 효율적으로 구축
Card, Dialog, Select, Table, Button, Input, Badge, Pagination 등 다양한 컴포넌트 활용

스타일링: Tailwind CSS

유틸리티-퍼스트 CSS 프레임워크로, 커스텀 스타일링을 신속하게 적용

토스트 알림:

sonner

사용자 작업 결과에 대한 직관적인 알림 메시지 제공

아이콘:

lucide-react

경량화된 아이콘 세트를 사용하여 시각적 요소 강화

쿠키 관리:

js-cookie

클라이언트 측에서
```
access_token
```
과 같은 쿠키 데이터를 간편하게 관리

2. 핵심 로직 및 백엔드 연동 사용자 시나리오

현재 구현된 주요 기능과 백엔드 연동 로직은 다음과 같습니다.

CCTV 정보 목록 조회:

```
InfoTable
```
컴포넌트 마운트 시
```
useQuery
```
훅을 사용하여
```
GET /api/v1/cctvs
```
엔드포인트로부터 전체 CCTV 목록 정보를 비동기적으로 가져옵니다.
가져온 데이터는 테이블 형태로 사용자에게 표시되며, 각 CCTV의 ID, 호실(병실) 이름, IP 주소, 환자 수 등을 포함합니다.
인증을 위해
```
js-cookie
```
로 관리되는
```
access_token
```
이
```
Authorization
```
헤더에 포함됩니다.

모달 열기: 사용자가 "카메라 추가" 버튼을 클릭하면, 카메라 정보(이름, RTSP URL)를 입력할 수 있는 모달 다이얼로그가 열립니다.

카메라 정보 입력: 사용자는 입력 필드에 카메라 이름과 RTSP URL을 입력합니다.

카메라 추가 요청: "추가" 버튼 클릭 시,

useMutation

훅의

addCamera

함수가 호출됩니다.

입력된 이름과 RTSP URL을 포함하는
```
bodyData
```
가
```
POST /api/v1/cctvs
```
엔드포인트로 전송됩니다.
요청 성공 시,
```
queryClient.invalidateQueries
```
를 통해
```
cctvInfoList
```
쿼리를 무효화하여 최신 CCTV 목록을 다시 불러오고, 모달을 닫습니다.
요청 실패 시, 콘솔에 에러를 로깅합니다.

삭제 요청: 각 CCTV 목록 항목 옆의 "삭제" 버튼 클릭 시, 해당 CCTV의 ID를 인자로

useMutation

훅의

deleteList

함수가 호출됩니다.

해당 CCTV의 ID를 포함하는
```
DELETE /api/v1/cctvs/{id}
```
엔드포인트로 요청이 전송됩니다.
요청 성공 시,
```
cctvInfoList
```
쿼리를 무효화하여 최신 목록을 반영합니다.
요청 실패 시, 콘솔에 에러를 로깅합니다.

침대 인식 모달 열기: CCTV 목록에서 "상세보기" 버튼을 클릭하면, 해당 CCTV에 대한 침대 인식 모달이 열립니다. 이 모달에서는 침대 인식 결과 이미지와 인식된 침대 목록이 표시됩니다.

침대 인식 요청: 모달 내의 "침대 인식" 버튼 클릭 시,

useMutation

훅의

bedEmbedding

함수가 호출됩니다.

해당 CCTV의 ID를 포함하는
```
POST /api/v1/beds/{id}/auto
```
엔드포인트로 요청이 전송됩니다.
요청 성공 시, 백엔드로부터 받은
```
detected_beds
```
정보를 사용하여
```
patientNames
```
상태(Map 객체)를 초기화하고 시각화 이미지를 표시합니다.

환자명 입력: 인식된 각 침대 옆에는 환자명을 입력할 수 있는 입력 필드가 제공됩니다. 사용자가 환자명을 입력하면

patientNames

상태가 실시간으로 업데이트됩니다.

환자 할당 요청: "저장" 버튼 클릭 시,

handlePatientAssign

함수가 호출됩니다.

```
patientNames
```
Map에 저장된 각 침대 ID와 환자명에 대해
```
assignPatient
```
mutation을 호출합니다.
중요: 환자명이 비어있는 경우 (
```
patient_name.trim() === ""
```
), 해당 침대에 대한 할당 요청은 건너뛰고 사용자에게 알림 메시지를 표시합니다.
```
assignPatient
```
mutation은
```
POST /api/v1/beds/{bed_id}/assign?patient_name={patient_name}
```
엔드포인트로 요청을 전송하며,
```
patient_name
```
은 URL 쿼리 파라미터로 포함됩니다.
요청 성공 시,
```
toast.success
```
를 통해 성공 알림을 표시하고,
```
cctvInfoList
```
쿼리를 무효화하여 최신 정보를 반영하며, 침대 인식 모달을 닫습니다.
요청 실패 시, 콘솔에 에러를 로깅하고 사용자에게 "Failed to assign patient" 메시지를 표시합니다.
모든 할당 요청이 처리된 후,
```
patientNames
```
상태를 초기화합니다.

3. 향후 기대 효과 및 방향

실시간 스트리밍 인터랙션 강화: 현재는 단순히 스트림 URL을 제공하지만, 향후에는 대시보드 내에서 직접 CCTV 스트리밍을 실시간으로 시청하고, 특정 이벤트 발생 시 해당 스트림으로 빠르게 전환하는 기능을 제공할 수 있습니다.

세분화된 환자 관리: 환자 할당 외에 환자 정보(연령, 성별, 특이사항 등)를 CRUD할 수 있는 기능을 추가하여, 병상-환자 관리의 심층적인 시나리오를 지원할 수 있습니다.

CCTV 상세 제어: 카메라의 틸트/줌/팬(PTZ) 제어, 녹화 시작/중지, 스냅샷 촬영 등 CCTV 자체를 제어하는 기능을 프론트엔드에서 제공하여 관리 효율성을 극대화할 수 있습니다.

이벤트 기반 알림 및 시각화: 이상 상황 발생 시 실시간 알림을 제공하고, 대시보드에서 해당 이벤트를 직관적으로 시각화하여 운영자가 빠르게 상황을 인지하고 대응할 수 있도록 지원합니다.

CCTV 수정 기능 구현: 현재는 추가 및 삭제 기능만 있지만, 기존 CCTV의 이름이나 RTSP URL을 수정할 수 있는 기능을 추가하여 유연한 관리 환경을 제공합니다.

고급 검색 및 필터링: CCTV 목록이 많아질 경우를 대비하여, 호실, IP 주소, 상태 등에 따른 검색 및 필터링 기능을 추가하여 원하는 정보를 쉽게 찾을 수 있도록 합니다.

권한 및 사용자 관리: 사용자 역할(예: 관리자, 일반 사용자)에 따른 접근 권한을 세분화하고, 사용자 계정을 관리할 수 있는 기능을 추가하여 시스템 보안 및 운영 효율성을 높입니다.

데이터 시각화 대시보드: 인식된 환자 수, 이벤트 발생 빈도 등 데이터를 시각적으로 표현하는 대시보드를 구축하여 전체 시스템의 현황을 한눈에 파악할 수 있도록 합니다.

성능 최적화 및 확장성 고려: 대규모 데이터 처리 및 실시간 스트리밍 환경에서도 안정적인 성능을 유지할 수 있도록 코드 최적화 및 아키텍처 개선을 지속적으로 수행합니다.

프론트엔드 기술 스택 및 구현 상세

프론트엔드 기술 스택 및 구현 상세

1. 기술 스택

2. 핵심 로직 및 백엔드 연동 사용자 시나리오

2.1. CCTV 관리 대시보드 (페이지 로드 시)

2.2. 카메라 추가

2.3. 카메라 삭제

2.4. 침대 인식 및 환자 할당

3. 향후 기대 효과 및 방향

3.1. 사용자 시나리오 관점

3.2. 기능 중심 방향

Related Skills

Markdown Converter

Nano Banana Pro

1password

프론트엔드 기술 스택 및 구현 상세

1. 기술 스택

2. 핵심 로직 및 백엔드 연동 사용자 시나리오

2.1. CCTV 관리 대시보드 (페이지 로드 시)

2.2. 카메라 추가

2.3. 카메라 삭제

2.4. 침대 인식 및 환자 할당

3. 향후 기대 효과 및 방향

3.1. 사용자 시나리오 관점

3.2. 기능 중심 방향