project-b3c14594

투석 환자의 식단과 수분 섭취를 관리하기 위한 웹앱을 만들어 주세요. 이 앱의 주요 목적은 투석 환자가 하루 나트륨, 칼륨, 인, 단백질, 수분 섭취량을 쉽게 기록하고, 의사가 정해준 하루 허용량과 비교하여 과다 섭취를 예방하도록 돕는 것입니다. 화면 구성은 다음 네 가지로 나눠 주세요. 홈(오늘 요약) 음식 기록 추가 화면 기록 목록(지난 기록 보기) 설정 화면(환자 정보 및 하루 허용량 설정) 각 화면의 상세 요구사항은 다음과 같습니다. [홈(오늘 요약) 화면] 오늘 날짜를 표시합니다. 오늘 섭취한 총 영양소를 한눈에 보여줍니다. 오늘 총 나트륨 섭취량 오늘 총 칼륨 섭취량 오늘 총 인 섭취량 오늘 총 단백질 섭취량 오늘 총 수분 섭취량 각 항목별로 “오늘 허용량 대비 몇 %를 섭취했는지”를 숫자 또는 간단한 막대그래프로 표시해 주세요. (예: 나트륨 65%) 경고 영역을 만들어서, 허용량의 80% 이상일 때는 “주의” 문구를, 100% 이상일 때는 “오늘은 더 조심해야 합니다”와 같은 경고 문구를 표시해 주세요. [음식 기록 추가 화면] 사용자가 먹은 내용을 새로 기록할 수 있는 화면입니다. 입력 항목: 먹은 날짜/시간(기본값은 현재 시각으로 설정) 음식 이름(예: 김치찌개, 바나나, 밥 등) 양: 숫자 + 단위(예: 1 그릇, 100 g, 1 개 등) 조리법/특이사항(선택, 예: 삶음, 튀김, 국물 많이 먹음 등) 음식 이름과 양을 기반으로, 아래 영양 성분의 추정치를 자동 계산해 화면에 표시해 주세요. (처음 버전에서는 자주 먹는 대표 음식 몇 개만 하드코딩하거나 간단한 예시 데이터로 처리해도 괜찮습니다.) 나트륨 칼륨 인 단백질 수분 “저장” 버튼을 눌렀을 때 해당 기록이 데이터베이스에 저장되도록 구현해 주세요. [기록 목록 화면] 사용자가 과거에 기록한 음식 섭취 내역을 날짜별로 조회할 수 있는 화면입니다. 기본적으로 최근 날짜부터 아래로 내려가는 형태로 보여 주세요. 날짜별로 접기/펼치기가 가능하면 좋습니다. 각 기록 줄에는 다음 정보를 간단히 표시합니다. 시간 음식 이름 양 필요하다면, 나트륨이나 칼륨이 높은 음식에 작은 아이콘이나 색상(예: 붉은 점)을 붙여 위험도를 직관적으로 보여 주세요. 특정 날짜를 눌렀을 때, 그날의 총 섭취량(나트륨, 칼륨, 인, 단백질, 수분 합계)을 볼 수 있도록 해 주세요. [설정 화면] 환자 또는 사용자의 기본 정보를 입력할 수 있는 화면입니다. 입력 항목: 이름 또는 닉네임 체중(선택 사항) 의사가 정해준 하루 허용량을 저장할 수 있는 입력칸을 만들어 주세요. 하루 최대 나트륨 섭취량(mg/일) 하루 최대 칼륨 섭취량(mg/일) 하루 최대 인 섭취량(mg/일) 하루 권장 단백질 섭취량(g/일) 하루 최대 수분 섭취량(ml/일) “경고 기준 설정” 항목을 만들어서, 허용량의 몇 %부터 주의를 표시할지 사용자가 정할 수 있게 해 주세요. (예: 80% 이상일 때 주의) 설정 화면에서 값을 변경한 후 “저장” 버튼을 누르면, 이후 홈 화면과 계산 로직에 즉시 반영되도록 해 주세요. [기술적 요구사항] 프론트엔드는 모바일 환경에서도 보기 편한 반응형 웹 형태로 만들어 주세요. (스마트폰 브라우저 기준으로 사용하기 쉬운 UI) 백엔드는 간단한 계정 로그인 기능과 사용자별 데이터 저장 기능을 포함해 주세요. 사용자는 로그인 후에만 자신의 음식 기록과 설정에 접근할 수 있도록 해 주세요. 처음 버전은 프로토타입(연습용 첫 버전)으로, 구조와 기본 기능 구현에 집중해 주세요. 코드는 추후 제가 직접 수정·확장할 수 있도록, 이해하기 쉬운 구조로 작성해 주세요. 이 요구사항을 바탕으로, 전체 설계(화면 설계, 데이터 구조, API 설계)와 프론트엔드/백엔드 코드를 생성하고, 로컬 또는 간단한 클라우드 환경에서 실행 가능한 형태로 만들어 주세요.