약물 상호작용 챗봇 프론트엔드

React + TypeScript + Vite로 구축된 약물 상호작용 상담 챗봇 애플리케이션입니다.

주요 기능

1. 로그인 & 회원가입

• 이메일/비밀번호 기반 인증
• 로그인 상태 관리 (localStorage)

2. 메인 페이지

• 채팅 인터페이스: ChatGPT와 유사한 대화형 인터페이스
• 사이드바: 채팅 기록 관리 및 새 대화 시작
• 프로필 편집: 모달을 통한 사용자 정보 수정
  • 나이, 성별
  • 복용 중인 약품
  • 복용 중인 영양제
  • 앓고 있는 질환
• 약물 점검: 현재 복용 중인 약품에 대한 상호작용 레포트

기술 스택

• React 18 - UI 라이브러리
• TypeScript - 타입 안정성
• Vite - 빌드 도구
• React Router - 라우팅
• Tailwind CSS - 스타일링
• Lucide React - 아이콘
• Axios - HTTP 클라이언트

설치 및 실행

1. 의존성 설치

npm install

2. 개발 서버 실행

npm run dev

개발 서버는 기본적으로 http://localhost:5173에서 실행됩니다.

3. 프로덕션 빌드

npm run build

빌드된 파일은 dist 폴더에 생성됩니다.

4. 프로덕션 미리보기

npm run preview

프로젝트 구조

src/
├── components/
│   ├── chat/                    # 채팅 관련 컴포넌트
│   │   ├── AnalysisAccordion.tsx
│   │   ├── ChatInput.tsx
│   │   ├── InteractionButtons.tsx
│   │   ├── LoadingIndicator.tsx
│   │   ├── ProductSelectionUI.tsx
│   │   ├── StreamingMessage.tsx
│   │   └── index.ts
│   ├── common/                  # 공통 컴포넌트
│   │   ├── AuthLayout.tsx
│   │   ├── ErrorMessage.tsx
│   │   ├── FormInput.tsx
│   │   ├── ItemInputSection.tsx
│   │   ├── ItemList.tsx
│   │   ├── SearchableDropdown.tsx
│   │   ├── StepDetails.tsx
│   │   ├── SubmitButton.tsx
│   │   └── index.ts
│   ├── ChatInterface.tsx        # 채팅 인터페이스
│   ├── ChatMessage.tsx          # 개별 메시지 컴포넌트
│   ├── ChatSidebar.tsx          # 채팅 기록 사이드바
│   ├── ProfileModal.tsx         # 프로필 편집 모달
│   └── ReportModal.tsx          # 약물 점검 레포트 모달
├── hooks/                       # 커스텀 훅
│   ├── useChat.ts
│   ├── useClickOutside.ts
│   ├── useIntentClassifier.ts
│   ├── useInteraction.ts
│   ├── useInteractionCheck.ts
│   ├── useProductSelection.ts
│   ├── useReport.ts
│   └── index.ts
├── pages/                       # 페이지 컴포넌트
│   ├── LoginPage.tsx
│   ├── RegisterPage.tsx
│   └── MainPage.tsx
├── services/
│   └── api.ts                   # API 서비스
├── utils/                       # 유틸리티 함수
│   ├── messageHelpers.ts
│   ├── reportConverter.ts
│   └── index.ts
├── types.ts                     # TypeScript 타입 정의
├── App.tsx                      # 메인 앱 컴포넌트
├── main.tsx                     # 엔트리 포인트
└── index.css                    # 전역 스타일