4onmedicine

4온 약 어때?

💊 의약품 간편 검색 서비스, 4온 약 어때? 💊

의약품에 대한 신뢰성 있는 정보를 제공하는 서비스

사이트 도메인: https://4onmedicine.kro.kr

멋쟁이 사자처럼 12기 해커톤

🔎 Introduction(소개)

기획 배경

일반인이 의약품에 대한 정보를 얻기 쉽지 않고 과정이 복잡합니다.
처방전에 의약품에 대한 정보가 없거나, 있더라도 누락된 정보가 있을 수 있습니다.
한번에 건강 정보를 획득할 수 있는 획득처가 없습니다.

서비스 특징

일반인이 의약품 정보를 쉽게 검색, 접근할 수 있습니다.
처방전을 업로드하면 이미지 분석을 통해 처방전에 있는 의약품 정보를 전달합니다.
gpt Api를 통해 전반적인 건강 관련 정보를 얻을 수 있습니다.

🖥️ 페이지(page)

1) 메인페이지(MainPage)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 15 50

웹사이트에 접속시 처음 보이는 페이지입니다. 본 페이지에서 의약품을 검색하거나, 처방전을 업로드하기 위한 페이지로 이동할 수 있습니다. 또한, 우측 하단 채팅 버튼을 입력하여 gpt와 대화하며, 건강에 대한 정보를 얻을 수도 있습니다.

2) 채팅페이지(ChattingPage)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 17 44

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 19 22

웹사이트 우측 하단 채팅 버튼을 누르면 보이는 페이지입니다. 본 페이지의 하단 인풋에 건강에 대한 질문을 입력하면 gpt가 질문에 대한 답변을 제공합니다.

3) 의약품 상세 페이지(MedicinePage)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 20 54

메인페이지에서 의약품 정보를 검색해 클릭하면 보이는 페이지입니다. 검색한 의약품에 대한 이미지와 효능, 사용법, 주의사항, 상호작용에 대한 정보를 얻을 수 있습니다.

4) 처방전 업로드페이지(PrescriptionPage)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 22 32

사이트 상단 네비게이션바에서 처방전 검색을 클릭하면 보이는 페이지입니다. 처방전 이미지를 업로드하면 처방전에 작성된 의약품의 보험코드를 추출해여 의약품 상세페이지로 이동해 의약품에 대한 정보를 제공합니다.

데모(Demo)

1) 검색창을 통한 의약품 검색

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 25 58

카테고리에서 ‘약’을 선택하고 의약품을 클릭합니다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 27 59

검색한 의약품 페이지로 이동해 해당 의약품에 대한 정보를 얻을 수 있습니다.

2) 처방전을 통한 의약품 검색

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 29 24

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 32 57

처방전 검색 페이지에서 우측 이미지와 같이 보험코드가 적힌 처방전을 촬영 후 업로드합니다. 본 데모에서는 ‘타세놀8시간이알서방정’과 ‘타이레놀8시간이알서방정’이 적힌 처방전을 업로드하였습니다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 34 18

처방전에 나와있는 의약품인 ‘타세놀8시간이알서방정’과 ‘타이레놀8시간이알서방정’에 대한 정보를 얻을 수 있습니다. 처방전에 대한 의약품 상세 페이지는 슬라이드로 구현되어 슬라이드를 넘겨 처방전에 작성된 모든 의약품에 대한 정보를 얻을 수 있습니다.

3) 채팅

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 37 53

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 38 20

모든 페이지의 우측 하단에 있는 채팅 버튼을 클릭하고, 다음 채팅 페이지로 이동합니다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 38 55

채팅 페이지 하단 인풋에 건강과 관련된 질문을 작성하고 엔터키를 누릅니다. 본 데모에서 ‘목감기에 좋은 약을 추천해줘'라는 글을 작성합니다. 그 후 gpt가 질문에 대한 답변을 제공합니다.

📜 아키텍쳐(Architecture)

💡 기술 스택(Tech Stack)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-08-06_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9 42 57

프론트 파트(Front part): react
백엔드 파트(Backend part): Spring Boot, Flask
배포(Deployment): GoogleCloud, Amazon AWS, Docker, Nginx, Github Actions
이 외(Other): Swagger

📌 깃허브 주소

프론트 레포지토리(Frontend Repository): https://github.com/hollydrug/front
백엔드(스프링) 레포지토리(Backend(Spring) Repository): https://github.com/hollydrug/backend
백엔드(플라스크) 레포지토리(Backend(Flask) Repository): https://github.com/hollydrug/backend2

📂 디렉토리 구조

1) 프론트 디렉토리(frontend directory)

front/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── logo.png
│   │   └── styles.css
│   ├── components/
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── SearchBar.tsx
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── SearchResults.tsx
│   │   └── Prescription.tsx
│   ├── App.tsx
│   ├── index.tsx
│   └── routes.tsx
├── .env
├── .eslintrc.cjs
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

2) 백엔드 디렉토리(backend directory)

.
├── Dockerfile
├── Dockerfile-nginx
├── build
├── build.gradle
├── gradle
├── gradlew
├── gradlew.bat
├── nginx
│   └── conf.d
│       └── nginx.conf
├── settings.gradle
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── medicine
    │   │           └── backend
    │   │               ├── BackendApplication.java
    │   │               └── medicine
    │   │                   ├── config
    │   │                   │   ├── CorsMvcConfig.java
    │   │                   │   └── SwaggerConfig.java
    │   │                   ├── controller
    │   │                   │   ├── FlaskController.java
    │   │                   │   └── MedicineController.java
    │   │                   └── dto
    │   │                       ├── ChatRequest.java
    │   │                       ├── ImgMedicineDetail.java
    │   │                       ├── ImgPayload.java
    │   │                       ├── MedicineDetail.java
    │   │                       └── MedicineInfo.java
    │   └── resources
    │       └── application.properties
    └── test
        └── java
            └── com
                └── medicine
                    └── backend
                        └── BackendApplicationTests.java

🧑🏻‍💻 팀원(Team Member)

https://github.com/HANTAEDONG	https://github.com/huzan2	https://github.com/cjh-19	https://github.com/LEEJH1029	https://github.com/jangwonjun

Frontend Developer	Frontend Developer	Backend Developer, CI/CD	Backend Developer	Backend Developer

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

4onmedicine

4온 약 어때?

💊 의약품 간편 검색 서비스, 4온 약 어때? 💊

🔎 Introduction(소개)

기획 배경

서비스 특징

🖥️ 페이지(page)

1) 메인페이지(MainPage)

2) 채팅페이지(ChattingPage)

3) 의약품 상세 페이지(MedicinePage)

4) 처방전 업로드페이지(PrescriptionPage)

데모(Demo)

1) 검색창을 통한 의약품 검색

2) 처방전을 통한 의약품 검색

3) 채팅

📜 아키텍쳐(Architecture)

💡 기술 스택(Tech Stack)

📌 깃허브 주소

📂 디렉토리 구조

1) 프론트 디렉토리(frontend directory)

2) 백엔드 디렉토리(backend directory)

🧑🏻‍💻 팀원(Team Member)

Pinned Loading

Repositories

Uh oh!

Uh oh!

Uh oh!

Uh oh!

People

Top languages

Uh oh!

Most used topics

Uh oh!