💊 메디패스 (MediPass) — Frontend

약 때문에, 여행을 망설이지 않도록.

"복용 중인 약의 해외 반입 준비를 한곳에서."

약 봉투를 촬영해 복약 카드를 만드는 것을 넘어, 여행 국가에 따른 의약품 반입 정보 · 준비 체크리스트 · 증빙 서류 관리까지 제공하는 해외여행 의약품 관리 서비스의 프론트엔드입니다.

React + TypeScript + Vite 기반의 모바일 웹 앱으로, 카카오 소셜 로그인, 약 봉투 AI 스캔, 국가별 반입 준비, 여행 중 긴급 대응을 담당합니다.

---

🔹 주요 기능

1. 🔐 인증

• 카카오 OAuth 소셜 로그인
• JWT 기반 인증 상태 관리 (Zustand Persist 토큰 저장)
• 서비스 이용 전 온보딩 및 약관 동의

2. 💳 약 스캔 & 복약 카드

• 카메라 촬영 또는 이미지 업로드를 통한 약 봉투 AI 스캔
• AI 인식 결과 확인 및 의약품 정보 수정·직접 입력
• 등록한 의약품의 한글 / 영문 복약 카드 조회
• 복용량, 복용 횟수, 처방 기관 및 조제일 관리

3. ✈️ 여행 준비 & 반입 체크로그

• 출발지·목적지 공항 및 여행 기간 등록
• 여행에 가져갈 의약품 선택
• 목적지 국가별 의약품 반입 정보 조회
• 여행별 목적지 규정 및 준비 체크리스트 관리

의약품 반입 준비 상태는 다음 3단계로 안내됩니다.

단계	내용
✅ 반입 가능(ALLOWED)	별도 제한 없이 반입 가능한 의약품
📄 서류 준비 필요(PREP_REQUIRED)	처방전 등 추가 서류 준비가 필요한 의약품
⛔ 반입 제한(NOT_ALLOWED)	반입이 제한되거나 관계 기관 확인이 필요한 의약품

4. 📁 서류함 & 긴급 도움

• 처방전·의사 소견서·반입 허가서 등 의약품별 증빙 서류 관리
• 전체 서류 등록 현황 및 상세 내용 조회
• 여행 중 의약품 분실·부족 등 상황별 대응 안내
• 현재 위치를 기반으로 관련 기관 연락처 조회
• 현지에서 사용할 수 있는 긴급 설명문 번역 제공

---

🚀 기술 스택

• Language: TypeScript 6

  

• Framework: React 19

  

• 빌드 도구: Vite 8

  

• 스타일링: Tailwind CSS 4 + Pretendard

  

• 라우팅: React Router DOM 7

  

• 서버 상태 관리: TanStack Query v5

  

• 클라이언트 상태 관리: Zustand v5

  

• HTTP 통신: Axios 1.18

  

• 인증: Kakao OAuth + JWT

  

• 영속 스토리지: Zustand Persist (localStorage)

  

• Linting / Formatting: ESLint 10 + Prettier 3

  

---

🏗️ 아키텍처 개요

📱 Mobile Web App
    │  카카오 OAuth · JWT (Zustand Persist)
    ├─ React Router       (클라이언트 라우팅)
    ├─ TanStack Query     (서버 상태 · 캐싱)
    ├─ Zustand            (인증 · 전역 클라이언트 상태)
    ├─ Tailwind CSS       (UI 스타일링)
    └─ Axios              (API 통신)
          │
          ▼
    🌐 Server API
          ├─ OAuth 인증
          ├─ 의약품 · 여행 · 서류 관리
          └─ AI 약 봉투 인식 · 긴급 번역

---

📁 프로젝트 구조

FE/
└─ src/
   ├─ pages/                  # 화면 및 도메인별 UI·서비스 로직
   │  ├─ login/               # 카카오 로그인
   │  ├─ oauth/               # OAuth 콜백 처리
   │  ├─ onboard/             # 온보딩 및 약관
   │  ├─ home/                # 복약 카드
   │  ├─ scan/                # 약 봉투 스캔 및 의약품 등록
   │  ├─ register/            # 여행 등록 및 반입 체크로그
   │  ├─ documents/           # 의약품 증빙 서류함
   │  ├─ emergency/           # 여행 중 긴급 도움
   │  └─ account/             # 계정 및 서비스 정보
   ├─ components/             # 공통 UI 컴포넌트
   ├─ apis/                   # 도메인별 API 요청
   ├─ routes/                 # React Router 라우팅 설정
   ├─ stores/                 # Zustand 전역 상태
   ├─ hooks/                  # 공통 커스텀 훅
   ├─ constants/              # 상수 및 정적 데이터
   ├─ types/                  # TypeScript 타입
   ├─ utils/                  # 공통 유틸리티
   ├─ styles/                 # 전역 스타일
   └─ assets/                 # 이미지 및 폰트

---

👥 팀 구성 (Backend)

김예나	장현서
Frontend	Frontend
@a-neey	@atelier-hs