만수무강 프론트엔드 WebApp

고령의 환자와 보호자 모두가 안심할 수 있는 공간을 만들기 위한 안심케어 및 커뮤니티 서비스 만수무강 웹앱입니다.

📥 Installation

Follow these steps to install and run the Mansumugang frontend web application

    git clone https://github.com/Team-MansuMugang/mansumugang-frontend.git
    cd mansumugang-frontend
    npm install

    npm run dev

This will start the application in development mode, and you can access it by navigating to the provided local address (usually http://localhost:3000) in your browser.

🌟 Features

약 일정 관리 및 기록: 약 복용 스케줄 설정 및 복약 기록을 통해 케어 맴버가 약을 놓치지 않고 복용할 수 있도록 지원합니다.
병원 일정 관리 및 기록: 케어 맴버의 병원 예약 일정 관리와 방문 기록을 한눈에 확인할 수 있는 기능을 제공합니다.
음성 메시지 기능: 케어 맴버와 음성 메시지를 통해 편리한 커뮤니케이션 할 수 있는 도구입니다.
음성 메시지 텍스트 변환 (ASR): 녹음된 음성을 자동으로 텍스트로 변환하여 편리성을 높입니다.
건강 커뮤니티: 다양한 건강 관련 주제에 대해 다른 사용자들과 정보를 공유하고 소통할 수 있는 커뮤니티 기능입니다.
사용자 계정 관리: 보호자와 케어 멤버를 위한 손쉬운 회원가입, 계정 관리 및 탈퇴 기능을 제공합니다.

🛠️ Main Tech Stack

React: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리.
JavaScript: 웹 애플리케이션의 로직을 구현하는 핵심 언어.
CSS: 웹 페이지의 스타일링과 레이아웃을 관리하는 언어.

📚 Additional Libraries

immer: 불변 상태 관리를 쉽게 할 수 있도록 돕는 라이브러리.
react-daum-postcode: 다음 우편번호 서비스를 React와 연동하기 위한 라이브러리.
react-kakao-maps-sdk: 카카오 맵 API를 React에서 쉽게 사용할 수 있게 해주는 라이브러리.
react-router-dom: React 애플리케이션 내에서 라우팅을 관리하는 라이브러리.
react-toastify: 사용자에게 토스트 알림 메시지를 띄우기 위한 라이브러리.
react-zoom-pan-pinch: 이미지나 요소를 확대, 축소, 이동할 수 있게 해주는 라이브러리.
storybook: UI 컴포넌트를 독립적으로 개발하고 문서화하는 데 사용하는 도구.
vitest: Vite 프로젝트에 최적화된 테스트 프레임워크.
firebase: 웹 애플리케이션에 푸시 알림 기능을 구현하기 위해 사용되는 라이브러리.

🎥 Demo

Insert gif or link to demo

🖼️ Screenshots

Team-MansuMugang/mansumugang-frontend