<aside> 💡

메인페이지, 환자 개인정보 페이지, 관리자 페이지, 로그인/회원가입, 로봇 실시간 위치 추적 페이지

페이지는 위의 다섯개와 같아.

로그인/회원가입을 제외한 모든 페이지에는 왼쪽에 네비게이션 바가 플로팅의 형태로 있어. 그리고 오른쪽 위에는 현재 로그인한 유저가 누구인지에 대한 정보와 로그아웃 버튼을 추가하고 싶어.

그리고 모든 화면에서 서버로부터 이벤트가 생기면 alert를 띄워줄 거야. 이거는 모달의 형태로 할 거 같아.

지금부터는 페이지 별 세부사항에 대해서 알려줄게.

1. 메인페이지

조감도를 넣어서 그거를 바탕으로 각 구역을 나누고 싶어. 그 구역마다 클릭을 했을 때 내가 원하는 정보를 등록하는 거야.

구역들을 카드 형태로 만들어서 한 층 전체의 조감도 위에 각각 위치시킬 거야.

페이지 구성은 한 행에 두개가 들어가는 영역으로 나눌 거야. 왼쪽에는 구역의 조감도 기반 지도를 띄울 거고, 오른쪽에는 환자의 리스트를 적어둘 거야.

카드 종류는 A와 B가 있어.

왼쪽 구역의 조감도에 기존 드롭했던 구역 카드를 A와 B라고 가정했을 때, A를 드래그 해서 B가 위치해있는 곳으로 드롭한다면 B의 위치가 A의 위치로, A의 위치가 B의 위치로 변경되었으면 좋겠어. 각 카드의 사이즈와는 관계 없이 모두 적용되게 해 줘.

왼쪽 페이지에서는 카드 A 종류를 사용할 거야. 구역 카드 안에 디바이드를 구성하고, 그 안에 사용자의 이름을 배치하게 해줘. 카드 A의 왼쪽 상단에는 해당 구역의 이름, 오른쪽 상단에는 해당 구역의 환경 정보가 들어갈거야.

{ 호실 번호, 호실 컨디션, “이름” * N개}

오른쪽 구역에서는 카드 B 종류를 사용할 거야.

각 구역 카드에는 해당 구역에 위치한 사람들의 이름을 카드 안에

{ 호실 번호,현재인원/전체 인원, “이름(나이/성별)” * N개}

형식으로 배치할거야.

만일 왼쪽, 오른쪽 구역 모두 카드 안에 나열할 사람이 많아 카드 내에 배치할 수 없다면, 카드를 스크롤 가능하게 구성해줘.

1. 환자 개인정보 페이지

페이지의 한 열에서 두 구역으로 나눌거야. 윗쪽 구역과 아랫쪽 구역. 각각 윗쪽 구역이 1, 아랫쪽 구역이 3의 비율이 되도록 만들어줘. 윗쪽 구역을 A라고 할게. 그리고 3의 비율인 아랫쪽 구역을 이번에는 두 열로 나눌거야. 왼쪽과 오른쪽 구역. 왼쪽 구역을 3, 오른쪽 구역을 1의 비율로 나눠줘. 왼쪽 구역을 B라고 할게. 오른쪽 구역을 C라고 할게.

A의 구역을 반으로 나눠 왼쪽 구역을 A-1, 오른쪽 구역을 A-2라고 할게.

A-1 구역

• { “이름(나이/성별/구역 정보)”, 보호자 연락처:”010-0000-0000”}형식으로 배치
• 이름 및 환자 정보는 A-1 내에서 위, 보호자 연락처는 A-1 내에서 아래로 배치

A-2 구역

• A-2구역을 한 행 기준 두 열로 나눠 왼쪽은 A-2-1, 오른쪽으로 A-2-2로 설정.
• A-2-1 : { 기저질환: “기저질환 정보”}형식으로 배치
• A-2-2: { 복용약: “복용약 정보”}형식으로 배치
• 기저질환 정보는 A-2-1, 복용약은 A-2-2로 배치

A 구역의 오른쪽에 해당 사용자의 정보를 수정할 수 있는 수정 버튼 추가.

사용자 정보 수정버튼 클릭시 폼 형식으로 기존 데이터를 수정할 수 있도록 구성. 오른쪽 수정 버튼 크기를 유지한 채로 위, 아래로 저장, 취소 버튼을 만들게 해줘.

B 구역을 4분할로 나눌거야. 왼쪽 위를 B-1구역, 오른쪽 위를 B-2구역, 왼쪽 아래를 B-3구역, 오른쪽 아래를 B-4구역이라고 설정할게.

B-1~4구역은 각각 오른쪽 위에 B구역을 가득 채울 수 있는 화면으로 확장이 가능한 버튼을 추가해줘. B구역을 B-1~4구역이 가득 채웠다면, 다시 오른쪽 위의 버튼을 클릭하면 다시 원래대로 4분할로 나뉜 화면으로 구성되게 해줘.

B-1구역

• 심박수 데이터
  • 오른쪽 위의 버튼 클릭 이전
    • 현재 심박수 {”심박수”bpm} 형식으로 구성해줘.
    • 심박수의 폰트 크기가 “bpm”의 폰트 크기보다 크게, 강조되게 해줘.
  • 오른쪽 위의 버튼 클릭시 (확장시)
    • 최근 10분간의 심박수 데이터를 꺾은선 그래프로 구성해줘
    • x축의 중간에 제목인 {최근 10분간 심박수}를 배치해줘.
    • y축은 데이터의 값에 따라 자동으로 조정되게 해줘.

B-2구역

• 피부 온도
  • 오른쪽 위의 버튼 클릭 이전
    • 현재 피부 온도{”피부 온도”℃} 형식으로 구성해줘.
    • 피부 온도의 폰트 크기가 “℃”의 폰트 크기보다 크게, 강조되게 해줘.
  • 오른쪽 위의 버튼 클릭시 (확장시)
    • 최근 10분간의 피부 온도 데이터를 꺾은선 그래프로 구성해줘
    • x축의 중간에 제목인 {최근 10분간 피부 온도}를 배치해줘.
    • y축은 데이터의 값에 따라 자동으로 조정되게 해줘.

B-3구역

• 산소포화도
  • 오른쪽 위의 버튼 클릭 이전
    • 현재 산소포화도{”산소포화도”%} 형식으로 구성해줘.
    • 산소포화도의 폰트 크기가 “%”의 폰트 크기보다 크게, 강조되게 해줘.
  • 오른쪽 위의 버튼 클릭시 (확장시)
    • 최근 10분간의 산소포화도 데이터를 꺾은선 그래프로 구성해줘
    • x축의 중간에 제목인 {최근 10분간 산소포화도}를 배치해줘.
    • y축은 데이터의 값에 따라 자동으로 조정되게 해줘.

B-4구역

• 걸음 수
  • 오른쪽 위의 버튼 클릭 이전
    • 현재 걸음 수{”걸음 수”보} 형식으로 구성해줘.
    • 걸음 수 폰트 크기가 “보”의 폰트 크기보다 크게, 강조되게 해줘.
  • 오른쪽 위의 버튼 클릭시 (확장시)
    • 최근 7일간의 걸음 수 데이터를 꺾은선 그래프로 구성해줘
    • x축의 중간에 제목인 {최근 7일간 걸음 수}를 배치해줘.
    • y축은 데이터의 값에 따라 자동으로 조정되게 해줘.

C구역

관리자끼리 인수인계 가능한 구역을 만들거야. 해당 구역의 하단에 입력 가능한 input 태그를 구성해줘. 양옆으로 조금의 여백만 있게 구성해줘. 해당 input 태그 내에 입력한 기록 중, 가장 최신의 기록을 아래로 오게 정렬해줘. 각 기록을 구역 내에 카드 형태로 추가할 수 있게 해줘. 이 기록들이 담겨있는 카드를 C-n이라고 할게. C-n 카드 내의 왼쪽 상단에 해당 기록을 작성한 직원의 이름, 그리고 그 오른쪽에 {작성한 날짜, 시간}형식으로 볼 수 있도록 해줘. 그리고 그 다음 줄에 기록 한 내용을 구성해줘.

해당 기록들은 최근 7일까지만 스크롤 해 확인이 가능하고, C 구역의 오른쪽 상단에 {과거 인수인계 기록}이라는 버튼을 만들어줘. 해당 버튼을 클릭하게 되면 모달 창으로 캘린더와 기록이 있다면 해당 날짜에 흐린 동그라미로 표시해줘. 해당 날짜를 클릭하게 되면 캘린더의 하단에 해당 일자의 기록을 보여줘.

아래의 수도코드를 참고해줘

div:c구역
div:게시물 구역
div:각 게시물 카드
/div
/div
div:게시물 카드 내용 입력
/div
/div

1. 로그인/회원가입

2. 로봇 실시간 위치 추적

</aside>

방 번호

• GPT 친구