[FE] 이미지 업로드 화면 구현 및 데이터베이스 연동

[dotz0ver]

개요

이 기능은 사용자가 이미지를 업로드할 수 있는 웹 페이지를 구현하는 것입니다. 사용자가 이미지를 업로드하면 해당 이미지를 서버의 /predict/upload/ 엔드포인트로 전송하여 이미지를 저장하고, 저장된 이미지의 URL을 반환받습니다. 이후 예측 요청은 다른 페이지에서 처리됩니다.

작업 내용

• 이미지 업로드 폼 구현: 사용자가 이미지를 선택하고 업로드할 수 있는 HTML 폼을 작성합니다.

• 이미지 전송 및 응답 처리: 사용자가 이미지를 업로드하면 폼 데이터가 백엔드의 /predict/upload/ 엔드포인트로 전송되고, 서버로부터 저장된 이미지의 URL을 응답으로 받습니다.

• 예측 요청 준비: 저장된 이미지 URL을 로컬 저장소에 저장하여 이후 다른 페이지에서 예측 요청에 사용할 수 있도록 합니다.

• 이미지 업로드 결과 표: 업로드가 성공했는지 사용자에게 알립니다.

세부 내용

• html 파일을 생성하여 이미지를 선택할 수 있는 파일 입력 필드를 포함한 HTML 폼을 작성합니다.
• 이미지를 업로드할 때 폼 데이터를 백엔드 API로 전송하고, 응답으로 받은 URL을 로컬 저장소에 저장하는 JavaScript 코드를 작성합니다.
• 이미지 업로드 엔드포인트는 /predict/upload/입니다. 이 엔드포인트로 이미지를 전송하고, JSON 형식의 응답을 받습니다.

참고

• 백엔드 API 엔드포인트: /predict/upload/ 및 /predict/
• HTML 폼에서 파일 입력 필드를 사용하는 방법
• JavaScript를 사용하여 폼 데이터를 서버로 전송하는 방법
• 로컬 저장소를 사용하여 데이터 저장 방법

[dotz0ver]

새로 개발한 기능

1. 데이터베이스 Migration 추가 및 임시 데이터 추가

• 데이터베이스 스키마를 변경하여 새로운 테이블과 필드를 추가했습니다.
• Patient, User, Hospital 등의 모델을 정의하고, 이와 관련된 마이그레이션 파일을 생성했습니다.
• 임시 데이터를 데이터베이스에 추가하여 초기 테스트 환경을 구성했습니다.

2. Admin 페이지 설정 및 사용

• Django Admin 페이지를 활성화하여 데이터베이스 모델을 관리할 수 있도록 했습니다.
• Patient, User, Hospital 등의 모델을 Admin 페이지에서 확인하고 수정할 수 있게 설정했습니다.
• 슈퍼유저를 생성하여 Admin 페이지에 접근할 수 있도록 했습니다.

3. 환자 선택 드롭다운 구현

• HTML 폼에 환자 데이터를 선택할 수 있는 드롭다운 메뉴를 추가했습니다.
• home.html에서 환자 드롭다운을 구현하고, home_views.py에서 데이터베이스에서 환자 데이터를 가져와 드롭다운에 표시했습니다.
• 환자 선택 시 해당 환자의 ID를 로컬 저장소에 저장하여 이미지 업로드 페이지에서 사용하도록 했습니다.

4. 이미지 업로드 및 환자 정보 포함

• 이미지 업로드 폼에서 선택된 환자의 ID를 포함하여 백엔드로 전송하는 기능을 구현했습니다.
• upload_views.py에서 환자 ID를 받아 해당 환자와 연결된 이미지 데이터를 데이터베이스에 저장했습니다.
• 업로드된 이미지의 URL을 응답으로 받아 로컬 저장소에 저장했습니다.

5. 모델 예측 결과 반환 및 화면 이동

• 이미지를 업로드한 후 예측 요청을 처리하여 모델 예측 결과를 반환했습니다.
• 예측 결과를 사용자에게 보여주기 위해 결과 페이지로 이동하는 기능을 구현했습니다.
• analysis_result_views.py에서 예측 결과를 받아 화면에 표시했습니다.

6. CSRF 토큰 설정 및 에러 해결

• CSRF 토큰 문제로 인해 발생하는 오류를 해결했습니다.
• HTML 폼에 {% csrf_token %} 태그를 추가하여 CSRF 보호를 활성화했습니다.
• Django의 @csrf_exempt 데코레이터를 사용하여 특정 뷰에서 CSRF 검사를 비활성화했습니다.

구현된 파일 및 변경 사항

1. frontend/templates/myapp/home.html

• 환자 선택 드롭다운 추가
• 드롭다운에서 환자 선택 시 로컬 저장소에 환자 ID 저장

2. frontend/templates/myapp/upload_image.html

• 이미지 업로드 폼 수정
• 선택된 환자의 ID를 포함하여 이미지 업로드

3. frontend/templates/myapp/analysis_result.html

• 모델 예측 결과를 표시하는 페이지 구현

4. backend/myapp/views/home_views.py

• 환자 데이터를 데이터베이스에서 가져와 홈 페이지에 전달

5. backend/myapp/views/upload_views.py

• 이미지 업로드 처리 및 환자 ID 저장

6. backend/myapp/views/analysis_result_views.py

• 모델 예측 결과를 받아 결과 페이지에 전달

7. backend/myapp/admin.py

• Admin 페이지 설정

8. backend/myapp/models.py

• 데이터베이스 모델 정의 및 마이그레이션 파일 생성