- 🏁 배포 링크: Medi Mate
- 🦁 멋쟁이 사자처럼 13기 중앙 해커톤 프로젝트: 주제-AI로 다시 뛰는 우리 동네
- 🖥️ 프론트엔드 레포지토리: Medi Mate FE Repo
- 🌐 다국어 지원: 영어, 한국어, 중국어(간체) 지원
- 📋 사전 문진: 진료를 위한 사전 검사 작성 후 한국어 번역
- 💊 처방전 관리: 처방전 문서 스캔 및 분석
- 🏥 병원 서비스: 근처 의료시설 정보 확인 및 예약하기
- 💬 실시간 번역 채팅: 의료진과의 실시간 소통이 가능한 번역 채팅
| 기능 | 설명 |
|---|---|
| 사전 문진 제작 | 환자의 기본 정보, 증상, 병력을 입력받아 한국어로 번역해드립니다. |
| 처방전 스캔 | 스마트폰 카메라로 처방전을 촬영하면 AI가 자동으로 약물 정보를 인식하고 분석합니다. |
| 통역 채팅 | 다국어 지원 AI 채팅 서비스로 의료진과 환자 간 언어 장벽 없는 소통을 지원합니다. |
| 병원 예약 | 인근 병원 검색, 진료 과목 확인, 실시간 예약 시스템을 통한 간편한 병원 예약 서비스입니다. |
| 기술 스택 | 사용한 항목 |
|---|---|
| 💻Core Framework |    |
| 🎨Styling |   |
| 📡HTTP & Communication |   |
| 🗣️Internationalization |   |
| 📅Date & Time |   |
| 📁File Handling |   |
| 🎤Media & UI |    |
| 📝Content Processing |    |
| 🌐Deployment |   |
- Node.js (최신 LTS 버전 권장)
- npm 또는 yarn
프로젝트 실행을 위해 다음 환경 변수들을 .env 파일에 설정해야 합니다:
# 백엔드 API 설정
VITE_API_BASE_URL={백엔드 URL}/ // ex) http://localhost:8080/
# 웹소켓 설정 (채팅 기능용)
VITE_WSS_BASE_URL={백엔드 웹소켓 URL} // ex) ws://localhost:8080/ws || wss://localhost:8080/ws
# 네이버 지도 API
VITE_NAVER_MAP_ID={your_naver_map_id}
# 건강보험심사평가원_병원정보서비스 | 의료기관별상세정보서비스 인증 키
MEDICAL_SERVICE_SECRET={your_medical_service_secret}- 리포지토리 클론
git clone https://github.com/erica-likelion/team1-fe.git
cd medimate- 의존성 설치
npm install- 개발 서버 시작
npm run dev- 브라우저에서
http://localhost:5173으로 이동
medimate/
├── api/ # 서버리스 함수
│ ├── hospital.js # 병원 목록 API
│ └── hospital-detail.js # 병원 상세 정보 API
├── public/ # 정적 자산
├── src/
│ ├── apis/ # API 통합 레이어
│ │ ├── callApi.js # 병원 예약 API
│ │ ├── chatApi.js # 채팅 서비스 API
│ │ ├── hospitalApi.js # 병원 정보 API
│ │ ├── precheckApi.js # 시전 문진 API
│ │ └── prescriptionApi.js # 처방전 API
│ ├── assets/ # 이미지 및 번역 파일
│ │ ├── images/ # 정적 이미지 및 아이콘
│ │ ├── sample-prescriptions/ # 샘플 처방전 이미지
│ │ └── translations/ # i18n 파일 (en.json, ko.json, zh-CN.json)
│ ├── components/ # 재사용 가능한 UI 컴포넌트
│ │ ├── callpage/ # 병원 예약 컴포넌트
│ │ ├── chatpage/ # 채팅 컴포넌트
│ │ ├── commons/ # 공유 UI 컴포넌트
│ │ ├── forms/ # 폼 입력 컴포넌트
│ │ ├── layouts/ # 레이아웃 컴포넌트
│ │ └── prescription/ # 처방전 컴포넌트
│ ├── constants/ # 애플리케이션 상수
│ ├── contexts/ # 상태 관리용 React 컨텍스트
│ ├── pages/ # 페이지 컴포넌트
│ │ ├── call-reservation-page/ # 병원 예약 페이지
│ │ ├── chat-page/ # 채팅 페이지
│ │ ├── prescription-page/ # 처방전 페이지
│ │ └── treat-info-form/ # 사전문진 페이지
│ ├── routes/ # 라우팅 설정
│ └── utils/ # 유틸리티 함수
├── vite.config.js # Vite 설정
└── package.json # 의존성 및 스크립트
Medi mate는 기본적으로 세 가지 언어를 지원합니다:
- English (en) - 영어
- 한국어 (ko) - 한국어
- 中文 (zh-CN) - 중국어 간체
현재 서비스는 해커톤 편의를 위해, 한국어로 시작하게 되어있습니다.
src/assets/translations/에 새 번역 파일 생성- i18n 설정에 언어 코드 추가
- 컴포넌트에서
useTranslation()훅 사용
프로젝트에는 편리한 경로 별칭이 포함되어 있습니다:
@→./src@apis→./src/apis@assets→./src/assets@components→./src/components@constants→./src/constants@contexts→./src/contexts@pages→./src/pages@routes→./src/routes@utils→./src/utils
| 김민서 | 김태훈 |
|---|---|
 |
 |